What problem does it solve? Writing a full React frontend from design documents requires manually scaffolding pages, components, hooks, API layers, stores, and routes, which is repetitive and error-prone. This Skill converts specification documents directly into a complete, compilable React + TypeScript project structure. ## Core Features & Use Cases - Spec-Driven Code Generation: Reads PAGE_SPECS, COMPONENT_SPECS, and API_SPECS documents and generates pages, components, hooks, types, and routes accordingly. - Standardized Frontend Stack: Enforces a consistent architecture using Vite, React Router, Zustand, TanStack Query, React Hook Form, Zod, Shadcn UI, and Axios. - Built-in Best Practices: Automatically includes loading/error/empty states, JWT interceptors, query key management, permission guards, and file upload handling. - Use Case: Given an API spec with GET /scripts/:id and a page spec for a script editor, generate the full src/ directory including ScriptEditorPage, SceneList component, useScript hook, typed API functions, and route definitions. ## Quick Start Ask the AI to generate a complete React TypeScript project from your PAGE_SPECS.md, COMPONENT_SPECS.md, and API_SPECS.md documents.
