skills.rest
mrpersimmon
mrpersimmonCOMMUNITY
Explore all skills by this author →
GitHub

web-development

Implements React/Vue/Vite frontends with TypeScript-safe validation via agent-browser and optional CloudBase Web SDK integration.

Updated Aug 27, 2026
Search Tags:#web development#react#vue#vite#browser testing#frontend deployment#cloudbase
One-click install
npx skills add https://github.com/mrpersimmon/xiao-han-studio --skill web-development-mrpersimmon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-development
Source: https://github.com/mrpersimmon/xiao-han-studio/tree/main/.agents/skills/cloudbase/references/web-development
Command: npx skills add https://github.com/mrpersimmon/xiao-han-studio --skill web-development-mrpersimmon

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you implement, integrate, debug, build, deploy, and validate a Web frontend so the user-facing behavior works correctly after the direction is already clear.

Core Features & Use Cases

  • Frontend engineering execution: Implement React/Vue/Vite pages, components, routing, state, and build configuration.
  • Browser-first validation: Reproduce and verify route flows, forms, rendering changes, and async/auth UI behavior using agent-browser.
  • CloudBase Web integration: Wire in CloudBase Web SDK and static hosting only when platform capabilities are required.
  • Scoped, non-destructive changes: Focus on the actual app surface and targeted repairs rather than broad refactors or visual redesign.

Quick Start

Use the web-development skill to implement and validate a React or Vue page change end-to-end, including browser verification of the affected route and interactions.

Frequently Asked Questions about web-development

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

FAQPage Schema
How do I implement and validate a React or Vue web frontend end-to-end?▼

To implement a React or Vue web frontend, you build pages, components, and routing, then validate route flows, forms, and async UI behavior using browser testing before frontend deployment.

Does this web development approach support Vite build configuration and TypeScript safety rules?▼

Yes, this web development approach supports Vite build configuration and enforces TypeScript safety rules, explicitly preventing unwarranted any usage during frontend engineering execution.

What is the best way to debug async UI behavior and routing in a Vite frontend?▼

The best way to debug async UI behavior and routing in a Vite frontend is reproducing and verifying the affected route flows and rendering changes using browser-first validation.

Can I use CloudBase Web SDK integration for authentication and static hosting?▼

Yes, you can wire in CloudBase Web SDK integration and static hosting when platform capabilities are required, enforcing scoped changes using existing CloudBase auth boundaries.

Why does web frontend implementation require explicit static and browser validation?▼

Web frontend implementation requires explicit static and browser validation to ensure user-facing behavior works correctly after the design direction is clear, enforcing scoped and non-destructive changes.

When should I not use this approach for web frontend changes?▼

You should not use this approach for broad refactors or visual redesign, because it enforces scoped changes focused on actual app surface repairs rather than modifying existing project conventions.

Related Skills

Explore More Software Engineering Skills→
mgsystemsdevmgsystemsdev

frontend-design

Define scalable frontend design systems for React, Streamlit, HTML, and other frameworks.

Community
Advanced
lxb031018lxb031018
2

web-development

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

Community
Intermediate
ShaulLavoShaulLavo

zod

Define TypeScript schemas for runtime validation and static type inference.

Community
Advanced
anorthamanortham
3

safe-refactor

Rename symbols workspace-wide with reference analysis and structural validation.

Community
Advanced