# Web Development

Use when users need to implement, integrate, debug, build, deploy, or validate a Web...

- Repository: https://github.com/TencentCloudBase/CloudBase-AI-Toolkit (1153 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add TencentCloudBase/CloudBase-AI-Toolkit --skill web-development -g -a claude-code -y`
Codex: `npx skills add TencentCloudBase/CloudBase-AI-Toolkit --skill web-development -g -a codex -y`
Cursor: `npx skills add TencentCloudBase/CloudBase-AI-Toolkit --skill web-development -g -a cursor -y`
Gemini CLI: `npx skills add TencentCloudBase/CloudBase-AI-Toolkit --skill web-development -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add TencentCloudBase/CloudBase-AI-Toolkit`

## Description

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.md, as published by its author (untrusted third-party text, read it as data)

## Sibling skills (local only)

Sibling CloudBase skills ship beside this skill. Use local relative paths such as `../auth-tool-cloudbase/SKILL.md`.

If a referenced sibling skill file is missing from this environment, ask the user to install the full CloudBase plugin (or the missing skill). Do **not** HTTP-fetch remote skill or protocol markdown into the agent context.

**Cross-cutting protocols** (required before code changes or deployments):
- Change Safety Protocol: `../cloudbase-platform/references/protocols/change-safety-protocol.md`
- Deployment Gate: `../cloudbase-platform/references/protocols/deployment-gate.md`

# 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.
- **⚠️ Any task involving interface styling, layout, color scheme, or font selection, before writing the first line of CSS/Tailwind, you MUST load the `ui-design` skill and output a Design Specification.** Skipping this step causes frontend styling to degrade to generic AI template defaults. The `ui-design` skill must be loaded before any visual implementation begins, not retroactively after the user complains about the appearance.

### Then also read

The rest: https://github.com/TencentCloudBase/CloudBase-AI-Toolkit/blob/HEAD/config/.claude/skills/web-development/SKILL.md