saranskumar Goal
Create a maintainable frontend structure aligned with screens, data flow, and product scope.
When to Use
- Flows and screens are known.
- The app needs route and module planning.
- A frontend team needs a buildable structure before implementation.
Instructions
- Define app shells, routes, nested segments, and feature areas.
- Separate reusable UI primitives from feature-specific modules.
- Identify client state, server state, form state, and ephemeral UI state.
- Plan loading, auth-gated, and error boundaries.
- Recommend a delivery sequence that proves the core loop early.
Constraints
- Keep backend logic out of the client plan.
- Avoid overbuilding a component library for v1.
- Align routes with user journeys, not technical folders alone.
Output Format
- Route map
- Module map
- State boundaries
- Shared UI/system notes
- Delivery sequence
Examples
- "Plan the frontend architecture for a Next.js SaaS."
- "How should we structure this React app by features?"