# frontend-scaffold-planner

> Plan the frontend application structure for a product or feature. Use when the team needs route structure, feature modules, state boundaries, design-system needs, and frontend delivery sequencing based on defined screens and flows.

- Skill: `saranskumar/frontend-scaffold-planner` (Agent Skill)
- Install (CLI): `npx skillmds add saranskumar/frontend-scaffold-planner`
- Raw SKILL.md: https://api.skillmd.com/api/skills/saranskumar/frontend-scaffold-planner/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: saranskumar (https://skillmd.com/u/saranskumar)
- Updated: 2026-08-19
- Page: https://skillmd.com/skills/saranskumar/frontend-scaffold-planner

---


# 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
1. Group the experience into routes, shells, feature modules, and shared primitives.
2. Separate server state, client state, form state, and ephemeral UI state.
3. Identify the component patterns that should be standardized early.
4. Note where optimistic UI, background refresh, uploads, or AI streaming affect the client design.
5. 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.