frontend-architecture-plannerlisted
Install: claude install-skill ytvee-dev/webdev-agent-kit
# 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;
-