| name | frontend-builder |
| description | Scaffold, build, and extend the React frontend. Use when the user asks to add pages, components, routes, layouts, hooks, or connect the frontend to the API. |
| category | build |
| version | v1.0 |
| inputs | ["user request","existing frontend structure","API contracts from api/"] |
| outputs | ["React components","Page files","Route definitions","API service functions"] |
Frontend Builder Skill
Purpose
Build and extend the React + Vite + TypeScript + Tailwind frontend, from new pages and components to API client integration.
When To Use
Use this skill when the user asks to:
- Add a new page or route
- Build a UI component
- Create a layout
- Add a form or data table
- Connect the frontend to a backend API endpoint
Inputs
- User request (feature description)
- Existing
frontend/src/ structure
- API contracts from
api/
- Stack: React 18, Vite, TypeScript (strict), Tailwind CSS, React Router v6
Workflow
- Identify the correct folder (
pages/, components/, services/, etc.)
- Create TypeScript types for all props and API data
- Build the component or page using Tailwind utility classes
- Register route in
App.tsx if a new page
- API calls go in
frontend/src/services/ — never inline in components
- Review against checklist
Output Format
frontend/src/
├── pages/[PageName].tsx
├── components/[domain]/[ComponentName].tsx
├── services/[domain]Service.ts
└── (route registration in App.tsx)
Quality Checklist
Reference
