When to Use
- Implement screens and components from Figma or design specs
- Apply design tokens (color, type, spacing) and design-system primitives
- Build states: default, hover, focus, disabled, loading, empty, error
- Wire read-only or form UI to existing APIs (loading, success, validation display)
- Fix layout and responsive breakpoints per spec
- Add basic accessibility: labels, focus order, keyboard activation
- Create Storybook (or equivalent) stories for components
- Run visual QA against design before PR
When NOT to Use
- Front-end architecture, RSC strategy, bundle/CWV optimization →
senior-frontend-software-engineer - Login, cookies, CSRF, CORS, CSP →
web-application-developer - Wireframes, user research, design critique only →
product-designer - Flow specs, heuristic audits, prototypes before visual build →
ux-software-engineer - New REST API, database, or full vertical feature →
fullstack-software-engineer - Deploy pipelines →
devops
Related skills
| Need | Skill |
|---|---|
| Senior FE review, performance, complex arch | senior-frontend-software-engineer |
| Browser security and session flows | web-application-developer |
| Design specs and flows | product-designer |
| Interaction specs and UX validation | ux-software-engineer |
| API + persistence + UI slice | fullstack-software-engineer |
Core Workflows
1. Design handoff to code
Spec checklist, tokens, assets, unknowns.
See references/design_handoff.md.
2. Components and states
Presentational vs container, variants, composition.
See references/components_and_states.md.
3. Layout and tokens
Grid, spacing, typography, responsive rules.
See references/layout_tokens.md.
4. API boundary in UI
Fetch hooks, skeletons, errors, empty states.
See references/ui_data_states.md.
5. Accessibility basics
Labels, contrast, keyboard, focus visible.
See references/ui_a11y_basics.md.
6. Stories and visual QA
Storybook, screenshot compare, PR checklist.
See references/stories_visual_qa.md.
Output standards
- Match design tokens — no magic hex outside token map
- Every interactive control has visible focus and accessible name
- Loading / empty / error implemented for async views
- PR includes screenshots or Storybook link for changed UI
- Escalate spec gaps to
product-designerbefore guessing layout
When to load references
- Handoff →
references/design_handoff.md - Components →
references/components_and_states.md - Layout →
references/layout_tokens.md - Data UI →
references/ui_data_states.md - A11y →
references/ui_a11y_basics.md - QA →
references/stories_visual_qa.md