# Build Reliable Web Frontends

Frontend work often fails when framework conventions, browser validation, and deployment rules are mixed together. This skill gives agents a structured path for React, Vue, Vite, and CloudBase web work.

## Install

```bash
npx skillstore add tencentcloudbase/web-development
```

## Metadata

- Status: approved
- Slug: tencentcloudbase-web-development
- Version: 2.23.8
- Author version: 2.23.8
- Skillstore revision: r1
- Version status: valid
- Tree hash: c0f73fd435a286342510e463c9c81584cf98ab92e8173ec69fce10fbf470ee7e
- Author: tencentcloudbase
- GitHub username: tencentcloudbase
- License: MIT
- Repository: https://github.com/tencentcloudbase/skills/tree/main/skills/web-development
- Ref: 24b2fe42a456262f3fd0fb3df72e12d9ed2c32ec
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: confirmation\_required
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands, env\_access, network, filesystem
- Quality score: 38
- Quality tier: warning
- Public page: https://skillstore.pages.dev/skills/tencentcloudbase-web-development
- Manifest: https://skillstore.pages.dev/api/skills/tencentcloudbase-web-development/manifest

## Capabilities

- Guides React, Vue, Vite, and Next.js frontend implementation within existing project patterns.
- Defines browser validation steps for routing, forms, auth, async UI, and SDK flows.
- Documents CloudBase Web SDK setup, static hosting defaults, and SPA routing requirements.
- Provides Next.js and NestJS CloudBase boundary guidance for client and server code.
- Specifies build, lint, typecheck, and test expectations before completion.
- Routes specialized auth, design, database, and WeChat tasks to companion skills.

## Use Cases

- Repair Web Flow Bugs: Find the owning route, component, or handler, then verify the user-visible flow in a browser.
- Integrate CloudBase Web: Add CloudBase Web SDK usage while keeping browser and server boundaries clear.
- Validate Release Readiness: Check build output, SPA routing, static hosting settings, and browser behavior before deployment.

## Prompt Templates

### Validate a Route Change

```
Use the web-development skill to inspect the existing app, identify the affected route, make the smallest fix, and report build and browser checks.
```

### Add a Vite Page

```
Use the web-development skill to add a new Vite page within existing routing and component conventions. Include validation steps and remaining gaps.
```

### Integrate CloudBase Auth

```
Use the web-development skill to review the current auth surface, keep browser SDK usage client-side, and route provider details to auth skills.
```

### Prepare SPA Hosting

```
Use the web-development skill to prepare a React or Vue SPA for CloudBase static hosting. Verify routing mode, build output, and browser refresh behavior.
```

## Limitations

- It does not choose visual direction or create design systems.
- It does not cover Mini Program, native app, or backend-only implementation.
- It relies on other CloudBase skills for auth, database, and WeChat payment details.
- Some validation steps need local credentials, a running app, or a browser tool.

## Best Practices

- Read existing route, service, and build conventions before changing code.
- Run project checks and browser flows that match the affected user journey.
- Keep CloudBase integration separate from unrelated UI or backend refactors.

## Anti Patterns

- Starting a redesign when the user asked for implementation or debugging.
- Claiming completion without build, lint, test, or browser evidence.
- Exposing sensitive credentials through public frontend environment variables.

## Security Audit

- Audited at: 2026-07-09T17:00:02.945\+00:00
- Summary: Most static findings are false positives caused by Markdown inline code, documentation URLs, and fixed sibling-skill paths. Confirmed risks involve unpinned remote instruction URLs and a public frontend access-key example. Semantic findings also identify unsafe token-cookie and credentialed CORS guidance.

## Stats

- Views: 0
- Downloads: 4
- Favorites: 1
- Popularity score: 0