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.

72stars4forksUpdated 8/1/2026

Web Development #frontend #cloudbase #browser-testing #react #vite #vue

Security Assessment

Safe(92/100)

Security Score92/100

About web-development

This skill is an engineering-execution playbook for building, integrating, debugging, deploying, and validating web frontends, with a focus on React, Vue, Vite, and Tencent CloudBase web integration. It solves the problem of an agent jumping into implementation prematurely by defining an activation contract: use it when the product/design direction is already fixed and the work is engineering execution, but defer to the `ui-design` skill first whenever styling, layout, color, or fonts are involved so output does not degrade to generic template defaults.

Its main components are framework guidance and a browser-testing playbook. The frameworks reference covers React conventions and, importantly, the Next.js SDK boundary: `@cloudbase/js-sdk` is browser-only and must not be imported in Server Components, `getServerSideProps`, or API routes, with server-side token verification delegated to `@cloudbase/node-sdk`. The browser-testing reference mandates real-browser validation with an `agent-browser` tool for any change touching routing, forms, auth flows, async UI, conditional rendering, or browser-side SDK calls, following a reproduce-before-and-after workflow and requiring concrete evidence (route, action, expected, before, after, gap) rather than a bare "works" claim. It also flags CloudBase-specific gotchas such as configuring the static-hosting 404 document to index.html for history-mode SPAs.

Target users are frontend engineers and AI coding agents working on CloudBase-hosted web apps who need disciplined, verifiable execution. The skill references sibling skills and cross-cutting protocols (change safety, deployment gate) via CloudBase raw-source URLs for standalone installs.

FAQ

When should I use this skill versus ui-design?

Use this skill for engineering execution once the design direction is fixed. For any styling, layout, color, or font work you must load the `ui-design` skill first and output a Design Specification before writing CSS/Tailwind; otherwise the styling degrades to generic AI defaults.

What frameworks does it cover?

React, Vue, and Vite, plus Next.js CloudBase integration and browser-based verification flows.

What is the Next.js SDK boundary rule?

`@cloudbase/js-sdk` is browser-only: use it only in Client Components. API routes should use `@cloudbase/node-sdk` for server-side token verification, and Server Components should read tokens from cookies/headers rather than importing the browser SDK.

When is browser validation required?

For any change touching routing/navigation, forms, auth flows, async UI, conditional rendering, or browser-side third-party SDK calls. It requires reproducing the behavior before and after the fix and reporting concrete evidence, not a one-line 'tested, works'.

What should I do if I cannot fully validate?

Do not paper over it. State exactly what you could not verify and what the user must supply; partial verification with a named gap is acceptable, silent omission is not.