skills.rest
williamwang25
williamwang25COMMUNITY
Explore all skills by this author →
GitHub

web-development

Implement and validate React/Vue/Vite frontends with TypeScript and browser checks.

Updated May 14, 2026
Search Tags:#deployment#react#routing#vue#vite#cloudbase#browser validation
One-click install
npx skills add https://github.com/williamwang25/ams-admin --skill web-development-williamwang25
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-development
Source: https://github.com/williamwang25/ams-admin/tree/main/.windsurf/skills/cloudbase/references/web-development
Command: npx skills add https://github.com/williamwang25/ams-admin --skill web-development-williamwang25

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It helps you reliably implement and validate a web frontend (and its CloudBase integration) once the product direction is already clear, so you can ship a working UI instead of guessing.

Core Features & Use Cases

  • Frontend engineering execution: implement Vue/React/Vite pages, components, forms, and routing with repo-aligned conventions.
  • CloudBase Web integration support: wire CloudBase Web SDK usage correctly for auth/static hosting/database-related browser flows without pushing auth into cloud functions.
  • Engineering-constitution guardrails: enforce TypeScript safety (prefer unknown + narrowing over any), and require both static checks and browser validation before declaring completion.
  • Validation through browser: reproduce the flow with agent-browser to confirm routing, rendering, auth, and async UI behavior matches expectations.
  • Scope control: keep work focused on engineering execution, avoiding UI direction-only tasks or backend-only detours.

Quick Start

Use this skill to implement and then browser-verify a Vue/Vite page change in an existing project, including lint/typecheck/build and an agent-browser smoke test of the affected route.

Frequently Asked Questions about web-development

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I validate CloudBase Web SDK integration in a React or Vue application?▼

To validate CloudBase Web SDK integration, you wire auth and database flows directly in the browser, then use agent-browser runtime verification to confirm routing, rendering, and async UI behavior match expectations without pushing auth into cloud functions.

What's the best way to enforce TypeScript safety practices during Vite frontend development?▼

The best way to enforce TypeScript safety during Vite frontend development is preferring unknown types with narrowing over any, running explicit static build checks, and verifying affected routes through browser validation before declaring completion.

Does this approach support browser routing and flow verification for static sites?▼

Yes, this approach supports browser routing and flow verification for static sites by reproducing user-visible routes and interactions via agent-browser to confirm rendering and auth behavior after static build checks pass.

How do I deploy a Vue or React Vite build to CloudBase static hosting?▼

To deploy a Vue or React Vite build to CloudBase static hosting, you execute lint, typecheck, and static build checks, then validate the UI through agent-browser smoke tests of affected routes before deployment.

Why does my web frontend validation fail after implementing async UI changes?▼

Web frontend validation often fails after async UI changes because static checks pass but runtime behavior differs; you must reproduce the flow with agent-browser to confirm async UI behavior, routing, and rendering match expectations before completion.

Can I use this for backend-only changes or UI design direction tasks?▼

No, you cannot use this for backend-only changes or UI design direction tasks; it strictly controls scope to engineering execution, requiring a fixed product direction and focusing on implementing, building, and validating the web frontend.

Related Skills

Explore More Software Engineering Skills→
bingeli1379bingeli1379
2

vue-jsx-best-practices

Configure TypeScript and Vite for Vue JSX with Vue-specific attributes.

Community
Intermediate
yyds-xyyds-x

web-development

Develop web frontend projects and deploy static hosting with CloudBase Web SDK.

Community
Intermediate
jia-wei-00jia-wei-00

supabase

Integrate Supabase database, auth, storage, and functions into frontend stacks.

Community
Advanced
yuhle-qugyuhle-qug

vitest-testing-expert

Configure Vitest with Vite integration for unit, integration, and browser-based tests.

Community
Advanced