Frontend Architecture Planner
ytvee-dev/webdev-agent-kitPlan architecture and ownership for standard or deep React/Next.js work across routing, state, data, styling, forms, builds, migrations, and implementation handoff. Skip micro-fixes and unrelated stacks.
At a glance
This skill is for Legal and helps you plan react app architecture, design next.js project structure, and organize state management approach.
/plugin marketplace add ytvee-dev/webdev-agent-kit
/plugin install frontend-architecture-planner
Setup, runtime and requirements describe ytvee-dev/webdev-agent-kit, the repo this skill ships in.
reactnextjsfrontendarchitectureState ManagementComponent Design
Also in ytvee-dev/webdev-agent-kit
View the repoCreate, evaluate, or edit this .agents WebDev Agent Kit, including AGENTS.md, common/**, project/**, skills/**, metadata, validators, and pr...
Turn user-supplied screenshots, copied inspect values, exports, assets, or design notes into a strict frontend Design Implementation Spec. L...
Create, resume, analyze, or converge standard and deep frontend execution plans with traceable slices, evidence, and stop/resume state. Skip...
Diagnose and fix frontend defects from evidence, including unclear UI/runtime errors, broken routes, styling regressions, and hydration or c...
Set subject-grounded visual direction for standard or deep UI work, redesign, polish, critique, anti-template review, or design handoff. Ski...
Ground standard or deep UI work in product category, page pattern, design dials, domain UX risks, and anti-patterns before visual direction....
Implement an approved Design Implementation Spec or screenshot-derived spec in React/Next.js using existing CSS Modules, Redux, TanStack, an...
Run scoped frontend lint verification, repair related lint failures, or plan explicitly requested lint setup. Prefer existing commands; depe...
Review frontend quality from evidence across code, UI, architecture, TypeScript, security, performance, verification, decomposition, UX, and...
Perform bounded, behavior-preserving frontend refactors such as component extraction, file moves, prop or interface cleanup, state simplific...
Verify rendered frontend evidence after implementation, including screenshot comparison, responsiveness, overflow, visible states, and scope...
Define user goal, scope, constraints, and done criteria before standard or deep frontend work. Skip micro-fixes, obvious type errors, tiny s...
Other Legal skills
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use...
Review the changes since a fixed point (commit, branch, tag, or merge-base) along two axes — Standards (does the code follow this repo's doc...
Meeting notes page — title bar with attendees, agenda checklist, decisions block, action items table with owners + dates, and a "next meetin...
An editorial-style poster — newsprint paper, dateline, oversized serif headline with a struck-through word and italic accent, a 2-column bod...
A standalone pricing page — header, plan tiers, feature comparison table, and an FAQ. Use when the brief asks for "pricing", "plans", "subsc...
Apple Human Interface Guidelines as 14 agent skills covering platforms, foundations, components, patterns, inputs, and technologies for iOS,...