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
1---2name: ui-software-engineer3description: 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).4---56# UI Software Engineer78## When to Use910- Implement **screens and components** from Figma or design specs11- Apply **design tokens** (color, type, spacing) and design-system primitives12- Build **states**: default, hover, focus, disabled, loading, empty, error13- Wire **read-only or form UI** to existing APIs (loading, success, validation display)14- Fix **layout and responsive** breakpoints per spec15- Add **basic accessibility**: labels, focus order, keyboard activation16- Create **Storybook** (or equivalent) stories for components17- Run **visual QA** against design before PR1819## When NOT to Use2021- Front-end architecture, RSC strategy, bundle/CWV optimization → `senior-frontend-software-engineer`22- Login, cookies, CSRF, CORS, CSP → `web-application-developer`23- Wireframes, user research, design critique only → `product-designer`24- Flow specs, heuristic audits, prototypes before visual build → `ux-software-engineer`25- New REST API, database, or full vertical feature → `fullstack-software-engineer`26- Deploy pipelines → `devops`2728## Related skills2930| Need | Skill |31|---|---|32| Senior FE review, performance, complex arch | `senior-frontend-software-engineer` |33| Browser security and session flows | `web-application-developer` |34| Design specs and flows | `product-designer` |35| Interaction specs and UX validation | `ux-software-engineer` |36| API + persistence + UI slice | `fullstack-software-engineer` |3738## Core Workflows3940### 1. Design handoff to code4142Spec checklist, tokens, assets, unknowns.4344**See `references/design_handoff.md`.**4546### 2. Components and states4748Presentational vs container, variants, composition.4950**See `references/components_and_states.md`.**5152### 3. Layout and tokens5354Grid, spacing, typography, responsive rules.5556**See `references/layout_tokens.md`.**5758### 4. API boundary in UI5960Fetch hooks, skeletons, errors, empty states.6162**See `references/ui_data_states.md`.**6364### 5. Accessibility basics6566Labels, contrast, keyboard, focus visible.6768**See `references/ui_a11y_basics.md`.**6970### 6. Stories and visual QA7172Storybook, screenshot compare, PR checklist.7374**See `references/stories_visual_qa.md`.**7576## Output standards7778- Match **design tokens** — no magic hex outside token map79- Every interactive control has **visible focus** and **accessible name**80- **Loading / empty / error** implemented for async views81- PR includes screenshots or Storybook link for changed UI82- Escalate spec gaps to `product-designer` before guessing layout8384## When to load references8586- **Handoff** → `references/design_handoff.md`87- **Components** → `references/components_and_states.md`88- **Layout** → `references/layout_tokens.md`89- **Data UI** → `references/ui_data_states.md`90- **A11y** → `references/ui_a11y_basics.md`91- **QA** → `references/stories_visual_qa.md`
daemon-blockint-tech