What problem does it solve? Designing a consistent frontend architecture from scattered page, component, and API specs is time-consuming and error-prone. This Skill turns those design documents into a complete, opinionated frontend architecture blueprint covering directory structure, routing, state management, and engineering conventions. ## Core Features & Use Cases - Architecture Blueprint Generation: Produces project structure, route design, component layering (UI / feature / page), and data flow diagrams from PAGE_SPECS, COMPONENT_SPECS, and API_SPECS inputs. - Opinionated Tech Stack Defaults: Defaults to React + TypeScript + Vite + React Router + TanStack Query + Zustand + React Hook Form + Zod + Shadcn UI, with explicit prohibitions (no Redux, no MobX, no direct axios calls in pages). - Domain-Aware Suggestions: Detects novel/script/scene/character entities and upload requirements to recommend feature modules, upload services, permission guards, and performance optimizations. - Use Case: After finishing product and API design for a novel-to-script tool, feed the specs in and receive a full frontend architecture document ready to hand to a code generator or development team. ## Quick Start Ask the AI to generate a frontend architecture blueprint based on your PAGE_SPECS.md, COMPONENT_SPECS.md, and API_SPECS.md files.
