| name | ui-software-engineer |
| description | Guides UI software engineering—implementing screens and components from design specs, design tokens,
responsive layout, interaction states, forms, and API-boundary loading/error UI in React/Next.js or
similar stacks. Covers component library usage, basic WCAG implementation, and visual QA—not for
senior front-end architecture or Core Web Vitals programs (senior-frontend-software-engineer),
web auth/CORS/session security (web-application-developer), UX discovery without code
(product-designer), interaction specs and coded prototypes (ux-software-engineer), or backend
APIs and schemas (fullstack-software-engineer).
|
UI Software Engineer
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-designer before 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
