skills.rest
study-yang
study-yangCOMMUNITY
Explore all skills by this author →
GitHub

web-development

Implements, debugs, and validates React, Vue, and Vite web frontends with CloudBase integration.

Updated May 14, 2026
Search Tags:#typescript#frontend#react#vue#vite#browser testing#cloudbase
One-click install
npx skills add https://github.com/study-yang/Vieb-Coding-- --skill web-development-study-yang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-development
Source: https://github.com/study-yang/Vieb-Coding--/tree/main/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F-%E5%BF%AB%E8%AE%B0/.codebuddy/skills/web-development
Command: npx skills add https://github.com/study-yang/Vieb-Coding-- --skill web-development-study-yang

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @cloudbase/js-sdk, and includes references (resource) components.

What problem does it solve? It guides AI coding agents through Web frontend engineering tasks—implementing pages, fixing bugs, configuring builds, and validating changes in a real browser—so frontend work is verified rather than assumed correct. ## Core Features & Use Cases - Framework Implementation: Build React or Vue pages and components following existing project conventions, with Vite as the default bundler for new apps. - Browser-Based Validation: Enforces a mandatory verification workflow using the agent-browser tool to reproduce bugs, confirm fixes, and check console errors before claiming completion. - CloudBase Web Integration: Covers CloudBase Web SDK setup, authentication boundaries, and static hosting deployment rules including hash routing and relative asset paths. - Use Case: A user reports that the login form on their Vite + React app does not redirect after submission. The skill guides the agent to reproduce the flow in a browser, patch the submit handler, run type checks, and re-verify the redirect works. ## Quick Start Ask the agent to implement or fix a specific page, route, or form in your React or Vue project and verify the result in the browser.

Frequently Asked Questions about web-development

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

FAQPage Schema
How do I validate a frontend fix in the browser before claiming it is done?▼

Start the dev server, open the affected route with the agent-browser tool, reproduce the original behavior, apply the fix, then re-run the same flow and check the console for new errors. Record the route, action, expected result, and actual result for each verified flow.

How to integrate CloudBase Web SDK into a React or Vue app?▼

Install @cloudbase/js-sdk via npm, initialize it once with cloudbase.init using the canonical full environment ID, and keep a shared app or auth instance. Authentication must use the SDK's built-in features rather than cloud functions.

Should I use hash routing or history routing for static hosting?▼

Prefer hash routing when the hosting environment lacks server-side rewrite support, which is the common case for static hosting. Also build before deployment and use relative asset paths for compatibility.

When should this skill not be used for a frontend task?▼

Do not use it for visual direction or aesthetic exploration, which belongs to ui-design, nor for mini program development or backend-only services. It targets engineering execution after the design direction is already decided.

Why is using the any type in TypeScript disallowed in this workflow?▼

The any type silently defeats compile-time safety and propagates through the codebase. Instead, fix root causes with proper types, use unknown with type narrowing at boundaries, or augment third-party types via declare module.

Related Skills

Explore More Software Engineering Skills→
Mjlike123Mjlike123

frontend-aesthetic-direction

Defines a concrete aesthetic direction across typography, color, density, and motion for greenfield design work.

Community
Intermediate
lxb031018lxb031018
2

web-development

Configure Web frontend projects with CloudBase SDK authentication and static hosting deployment.

Community
Intermediate
FriendlyInternetFriendlyInternet
10

crouton-validation-reality

Validate test coverage and CI workflow enforcement in nuxt-crouton.

Official
Advanced
partme-aipartme-ai
610

uniapp-mini-guide

Guide uni-app mini program development with configuration, components, and API usage.

Official
Basic