web-development
starsforks
How to install web-development?
tencentcloudbase/cloudbase-skills/web-development
$npx -y skills add TencentCloudBase/cloudbase-skills --skill web-developmentUse 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
| 1 | ## Standalone Install Note |
| 2 | |
| 3 | If this environment only installed the current skill, start from the CloudBase main entry and use the published `cloudbase/references/...` paths for sibling skills. |
| 4 | |
| 5 | - CloudBase main entry: `https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/SKILL.md` |
| 6 | - Current skill raw source: `https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/references/web-development/SKILL.md` |
| 7 | |
| 8 | 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. |
| 9 | |
| 10 | **Cross-cutting protocols** (required before code changes or static hosting publish): |
| 11 | - Change Safety Protocol: `https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/references/cloudbase-platform/references/protocols/change-safety-protocol.md` |
| 12 | - Deployment Gate: `https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/references/cloudbase-platform/references/protocols/deployment-gate.md` |
| 13 | |
| 14 | # Web Development |
| 15 | |
| 16 | ## Activation Contract |
| 17 | |
| 18 | ### Use this first when |
| 19 | |
| 20 | - The request is to implement, integrate, debug, build, deploy, or validate a Web frontend or static site. |
| 21 | - The design direction is already decided, or the user is asking for engineering execution rather than visual exploration. |
| 22 | - The work involves React, Vue, Vite, routing, browser-based verification, or CloudBase Web integration. |
| 23 | |
| 24 | ### Read before writing code if |
| 25 | |
| 26 | - The task includes project structure, framework conventions, build config, deployment, routing, or frontend test and validation flows. |
| 27 | - The request includes UI implementation but the visual direction is already fixed; otherwise read `ui-design` first. |
| 28 | - **⚠️ 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. |
| 29 | |
| 30 | ### Then also read |
| 31 | |
| 32 | - General React / Vue / Vite guidance -> `frameworks.md` |
| 33 | - Browser flow checks or page validation -> `browser-testing.md` |
| 34 | - 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`) |
| 35 | - Official Account JSAPI Pay, Native QR-code Pay, or WeChat OAuth on CloudBase -> `../cloudbase-wechat-integration/SKILL.md` (standalone fallback: `https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/references/cloudbase-wechat-integration/SKILL.md`; official docs: `https://docs.cloudbase.net/integration/introduce/index.md`) |
| 36 | - CloudBase database work -> matching database skill |
| 37 | |
| 38 | ### Do NOT use for |
| 39 | |
| 40 | - Visual direction setting, prototype-first design work, or pure aesthetic exploration. |
| 41 | - Mini programs, native Apps, or backend-only services. |
| 42 | - WeChat payment or Official Account OAuth contract details; use `cloudbase-wechat-integration` after identifying the Web surface. |
| 43 | |
| 44 | ### Common mistakes / gotchas |
| 45 | |
| 46 | - Starting implementation before clarifying whether the task is design or engineering execution. |
| 47 | - Mixing framework setup, deployment, and CloudBase integration concerns into one vague change. |
| 48 | - Treating cloud functions as the default solution for Web authentication. |
| 49 | - Skipping browser-level validation after a UI or routing change. |
| 50 | - **History mode SPA with CloudBase static hosting**: deploying a single-page app using History mode (React Router / Vue Router) without configuring the static hosting "404 error document" to `index.html`. This causes `NoSuchKey` / 404 errors when users refresh or directly visit any sub-route. |
| 51 | - In an existing application, detouring into UI redesign or broad repo sweeps before patching the current handlers and services. |
| 52 | |
| 53 | ## Engineering constitution (non-negotiable) |
| 54 | |
| 55 | These rules override convenience. Treat them as a gate before saying "done". |
| 56 | |
| 57 | ### 1. TypeScript — do not silence the type system |
| 58 | |
| 59 | - **Do NOT use `any` to bypass type errors.** Not `: any`, not `as any`, not `@ts-ignore`, not `@ts-nocheck`, not `@ts-expect-error` without a written justification. `any` propagates silently and defeats the only compile |
People who liked this also viewed
6 picksType
- hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, SkillsJul 2026
- request-refactor-planSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- analyze-projectRigor Analyze / Rigor Audit read-only skill for deep learning research repositories. Use when the user wants to read and understand a repository, inspect model structure and training or inference entrSkillsMay 2026
- explore-codeRigor Improve implementation leaf skill for auditable candidate implementation in deep learning research repositories. Use when the researcher explicitly authorizes exploratory work on an isolated braSkillsMay 2026
- ubiquitous-languageSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- scaffold-exercisesSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
