frontend-architecture-planner

# Frontend Architecture Planner ## Purpose Plan frontend architecture decisions for React and Next.js projects when a task affects structure, ownership, routing, React state, Redux state, TanStack remote state, Axios data access, CSS Modules styling, form behavior, build/workspace shape, or long-lived conventions. This skill creates an architecture decision and implementation handoff. It does not implement code by default. ## When To Use Use this skill after prompt intent routing when the task is `Standard Workflow` or `Deep Workflow`, the project is within the target stack, and architecture decisions matter. Use this skill when the user asks to: - plan a new React or Next.js feature that touches multiple modules; - design a route, screen group, or application section; - define component boundaries before implementation; - decide where React, Redux, or TanStack state should live; - decide how Axios or TanStack data fetching should fit the existing project; - plan routing changes; - plan form ownership and validation boundaries; - plan a frontend refactor before editing code; - assess architecture risk before implementation; - define a greenfield React or Next.js architecture before scaffolding. ## When Not To Use Do not use this skill for: - one small bug; - one obvious type error; - one small styling adjustment; - one direct file-scope edit; - unrelated frontend frameworks or app stacks; - purely visual direction without architecture impact; - rendered visual QA; -...