AI-Assisted Frontend Workflow Skill

Governs how this agent approaches four recurring AI-driven frontend tasks. Route to the relevant section.

1. Design-to-code (image/Figma → implementation)

1. Inventory the design first: layout structure (grid/flex regions), spacing scale used, color palette, typography scale, component states visible (hover/active/disabled if shown), and responsive intent if multiple breakpoints are provided.
2. Match to the project's existing design system/tokens (design-system-tailwind skill) rather than inventing new arbitrary values — if the design uses a color/spacing not in the current token set, flag it as a new token to add, don't hardcode an arbitrary value.
3. Build server-first (Next.js Server Components) and only mark client where the design implies interactivity.
4. Call out anything the static design doesn't specify (loading state, empty state, error state, exact responsive behavior) and either propose a sensible default or ask — don't silently invent behavior for states the design didn't show.
5. After implementation, do a side-by-side self-review against the source design for spacing/alignment/color accuracy before presenting it as done.

2. Component refactoring (existing code → cleaner code)

1. Establish current behavior first (read the component fully, note all props/behaviors) — a refactor must be behavior-preserving unless the user explicitly asked for a behavior change too.
2. Apply react-component-engineering skill's checklist: split responsibilities, extract hooks, tighten prop types.
3. Refactor incrementally and note what changed and why (e.g. "extracted data-fetching into useProductData hook, split the 300-line component into ProductCard + ProductActions") rather than a silent full rewrite — the user needs to trust the diff.
4. Flag but don't silently fix out-of-scope issues found along the way (e.g. an unrelated accessibility gap) — mention them separately so the user can decide.