Tencent CloudBase Web Development Kit

Specific Problem

Web frontend developers frequently encounter several engineering hurdles: How to establish a robust initial structure for React, Vue, or Vite projects? How to configure single-page application routing to prevent users from seeing 404 errors upon refresh? How to ensure build outputs run correctly in the browser and integrate seamlessly with platforms like Tencent CloudBase? These tasks span framework selection, build toolchains, routing strategies, runtime validation, and cloud service SDK integration, where a misstep can lead to deployment failures or a poor user experience.

How the Skill Works

This skill provides a guide focused on engineering execution. Its core capabilities and key steps include:

1. Clarify the Execution Scope: First, categorize the task as framework setup, page implementation, debugging, deployment, validation, or CloudBase integration. This keeps work focused on the web application layer and prevents unnecessary scope creep into unrelated backend changes.
2. Adhere to Framework and Build Conventions: Supports mainstream frameworks like React and Vue, with Vite as the default bundler. In existing repos, it prioritizes following established package managers, scripts, and directory structures, implementing only the smallest viable changes.
3. Handle Routing and Deployment Details: Emphasizes a critical configuration: when using History-mode routing (e.g., React Router or Vue Router), the CloudBase static hosting's "404 error document" must be set to index.html. This is the key to avoiding NoSuchKey errors. It also recommends defaulting to Hash routing for new projects lacking server-side rewrites.
4. Integrate CloudBase Capabilities: Introduces CloudBase only when cloud platform features are actually required. It guides installing @cloudbase/js-sdk via npm and respects authentication boundaries—login logic must use SDK built-in features, not cloud functions. It requires resolving environment IDs to canonical full forms before use in SDK initialization code.
5. Enforce Engineering Verification: This is the skill's core discipline. Any change must pass two layers of validation:
   • Static/Build Layer: Running tsc --noEmit (or vue-tsc --noEmit), the project Linter, and the build command to ensure zero new errors.
   • Runtime/Browser Layer: Using the agent-browser tool to actually open pages, reproduce user flows, and check target route loading, interaction behavior, and console errors.
     Only after both layers pass may the task be declared complete. This prevents the hasty practice of considering code "done" once it compiles.

Applicable Boundaries and Notes

The skill has clear scopes of application and non-negotiable principles:

• Out-of-Scope Scenarios: It is not for UI visual direction or prototyping (use the ui-design skill), mini-program development, native apps, or backend-only services. When a task involves interface styling, the ui-design skill must be loaded first to output a Design Specification.
• Common Pitfalls: Deploying a History-mode SPA to CloudBase static hosting without configuring the error document; skipping browser validation after a UI change; moving web login logic into cloud functions; or using try...catch or ignoring tests to pass compilation.
• Non-Negotiable Engineering Constitution:
  • No any Type: Must use unknown with type guards to handle unknown data, rather than bypassing the type system.
  • Self-Verification Before Claiming Done: Must provide evidence of actual verification, including build logs and browser check results, before declaring completion.
  • Do Not Paper Over Failures: Must not silently catch errors, delete failing tests, or consider compilation as the sole completion standard.