Web Development

Activation Contract

Use this first when

• The request is to implement, integrate, debug, build, deploy, or validate a Web frontend or static site.
• The design direction is already decided, or the user is asking for engineering execution rather than visual exploration.
• The work involves React, Vue, Vite, routing, browser-based verification, or CloudBase Web integration.

Read before writing code if

• The task includes project structure, framework conventions, build config, deployment, routing, or frontend test and validation flows.
• The request includes UI implementation but the visual direction is already fixed; otherwise read

  ui-design

  first.

Then also read

• General React / Vue / Vite guidance ->

  frameworks.md

• Browser flow checks or page validation ->

  browser-testing.md

• Login flow ->

  ../auth-tool/SKILL.md

  , then

  ../auth-web/SKILL.md

• CloudBase database work -> matching database skill

Do NOT use for

• Visual direction setting, prototype-first design work, or pure aesthetic exploration.
• Mini programs, native Apps, or backend-only services.

Common mistakes / gotchas

• Starting implementation before clarifying whether the task is design or engineering execution.
• Mixing framework setup, deployment, and CloudBase integration concerns into one vague change.
• Treating cloud functions as the default solution for Web authentication.
• Skipping browser-level validation after a UI or routing change.

When to use this skill

Use this skill for Web engineering work such as:

• Implementing React or Vue pages and components
• Setting up or maintaining Vite-based frontend projects
• Handling routing, data loading, forms, and build configuration
• Running browser-based validation and smoke checks
• Integrating CloudBase Web SDK and static hosting when the project needs CloudBase capabilities

Do NOT use for:

• UI direction or visual system design only; use

  ui-design

• Mini program development; use

  miniprogram-development

• Backend service implementation; use

  cloudrun-development

  or

  cloud-functions

How to use this skill (for a coding agent)

1. Clarify the execution surface

   • Confirm whether the task is framework setup, page implementation, debugging, deployment, validation, or CloudBase integration.
   • Keep the work scoped to the actual Web app surface instead of spreading into unrelated backend changes.

2. Follow framework and build conventions

   • Prefer the existing project stack if one already exists.
   • For new work, treat Vite as the default bundler unless the repo or user constraints say otherwise.
   • Put reusable app code under

     src

     and build output under

     dist

     unless the repo already uses a different convention.

3. Validate through the browser, not only by reading code

   • For interaction, routing, rendering, or regression checks, use

     agent-browser

     workflows from

     browser-testing.md

     .
   • Prefer lightweight smoke validation for changed flows before claiming the frontend work is complete.

4. Treat CloudBase as an integration branch

   • Use CloudBase Web SDK and static hosting guidance only when the project actually needs CloudBase platform features.
   • Reuse

     auth-tool

     and

     auth-web

     for login or provider readiness instead of re-describing those flows here.

Core workflow

1. Choose the right engineering path

• React / Vue feature work: implement within the app's existing component, routing, and state conventions
• New Web app scaffold: prefer Vite unless the repo already standardizes on another toolchain
• Debugging and regressions: reproduce in browser, narrow to a specific page or interaction, then patch
• CloudBase integration: wire in Web SDK, auth, data, or static hosting only after the base frontend path is clear

2. Keep implementation grounded in project reality

• Follow the repo's package manager, scripts, and lint/test patterns
• Avoid framework rewrites unless the user explicitly asks for one
• Prefer the smallest viable page/component/config change that satisfies the task

3. Validate changed flows explicitly

• Run the relevant local build or test command when available
• Open the affected page or flow in a browser when behavior depends on rendering, interaction, or navigation
• Record what was checked: route, action, expected result, and any remaining gap

CloudBase Web integration

Use this section only when the Web project needs CloudBase platform features.

Web SDK rules

• Prefer npm installation for React, Vue, Vite, and other bundler-based projects
• Use the CDN only for static HTML pages, quick demos, embedded snippets, or README examples
• Only use documented CloudBase Web SDK APIs; do not invent methods or options
• Keep a shared

  app

  or

  auth

  instance instead of re-initializing on every call

Authentication boundary

• Authentication must use CloudBase SDK built-in features
• Do not move Web login logic into cloud functions
• For provider readiness, login method setup, or publishable key issues, route to

  auth-tool

  and

  auth-web

Static hosting defaults

• Build before deployment
• Prefer relative asset paths for static hosting compatibility
• Use hash routing by default when the project lacks server-side route rewrites
• If the user does not specify a root path, avoid deploying directly to the site root by default

CloudBase quick start

import cloudbase from "@cloudbase/js-sdk";

const app = cloudbase.init({
  env: "xxxx-yyy",
});

const auth = app.auth();