Goal
Produce an implementation-minded frontend plan that respects UX structure and engineering maintainability.
When to use
- Screens and flows are known.
- Frontend work needs to be broken into modules, routes, and shared patterns.
- The team wants a build plan without prematurely writing components.
Instructions
- Group the experience into routes, shells, feature modules, and shared primitives.
- Separate server state, client state, form state, and ephemeral UI state.
- Identify the component patterns that should be standardized early.
- Note where optimistic UI, background refresh, uploads, or AI streaming affect the client design.
- Provide a frontend milestone order that proves the core loop early.
Constraints
- Do not collapse backend concerns into frontend planning.
- Do not recommend a massive component library for an unvalidated MVP.
- Keep route count aligned with the screen plan.
Output format
- Route map
- Feature module map
- State responsibilities
- Shared UI primitives
- Frontend implementation sequence
Examples
- "Plan the frontend structure for this analytics SaaS."
- "How should we organize screens and modules for this AI workspace?"
Output expectations
The plan should let a frontend engineer start confidently without guessing app boundaries.