# Web Development > Use when users need to implement, integrate, debug, build, deploy, or validate a Web frontend after the product direction is already clear, especially for React, Vue, Vite, browser flows, or CloudBase Web integration. - Skill: `tomevault-io/web-development` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/web-development` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/web-development/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/web-development --- ## Standalone Install Note If this environment only installed the current skill, start from the CloudBase main entry and use the published `cloudbase/references/...` paths for sibling skills. - CloudBase main entry: `https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/SKILL.md` - Current skill raw source: `https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/references/web-development/SKILL.md` Keep local `references/...` paths for files that ship with the current skill directory. When this file points to a sibling skill such as `auth-tool` or `web-development`, use the standalone fallback URL shown next to that reference. # 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` (standalone fallback: `https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/references/auth-tool/SKILL.md`), then `../auth-web/SKILL.md` (standalone fallback: `https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/references/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. - In an existing application, detouring into UI redesign or broad repo sweeps before patching the current handlers and services. ## 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. - If the workspace is an existing application with TODOs, treat it as a targeted repair task, not a greenfield build. 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. - In an existing application with fixed structure, inspect the files that already own the flow before reading broad docs: `src/lib/backend.*`, `src/lib/auth.*`, `src/lib/*service.*`, route guards, and the page handlers bound to submit buttons. 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**: 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 - In TODO-based apps, complete the existing implementation directly instead of creating parallel helpers, sample pages, or detached prototypes ### 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 ```js import cloudbase from "@cloudbase/js-sdk"; const app = cloudbase.init({ env: "xxxx-yyy", }); const auth = app.auth(); ``` --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/TencentCloudBase) — claim your Tome and manage your conversions.