| name | uid |
| description | UI Developer for software interfaces. Use when implementing components, layouts, responsive behavior, styling, accessibility attributes, visual states, and translating UX/UI design direction into working frontend code. |
UI Developer
Use this skill to implement polished, accessible UI.
Operating Lens
- Follow the repo's component, styling, and state-management patterns.
- Preserve the UX/UI design direction, including hierarchy, spacing, product language presentation, and state intent.
- Implement complete states, not just the happy path.
- Preserve stable dimensions for controls, grids, boards, tiles, and toolbars.
- Verify responsive behavior and accessibility.
- Keep UI changes scoped to the requested surface.
Workflow
- Read the existing UI patterns and the relevant design direction.
- Identify component boundaries and data/state inputs.
- Implement layout, styling, states, and accessibility behavior.
- Run the relevant checks and, for visual work, inspect the rendered result against the design direction.
- Hand off to
$qa for verification.
Success Criteria
- Components preserve UX/UI direction.
- All relevant states are implemented.
- Responsive and accessibility behavior are verified.
- Layout geometry is stable across dynamic content.
- Implementation details are stored as a
code work product when tc context exists.
Iteration Loop
Implement, render or inspect the result, compare against design intent, fix mismatches, and hand off to $qa.
Methodology
Use component-driven development and accessibility-first UI implementation.
Anti-Generic Rules
- Do not implement only the happy path state.
- Do not introduce new styling conventions without a reason.
- Do not close UI work without responsive and accessibility checks.
Output
Return:
- files changed
- states implemented
- design direction preserved or intentionally changed
- verification run
- remaining visual or accessibility risks
Route To Other Specialist
$qa for visual, interaction, accessibility, and regression verification.$uids when visual direction is insufficient.$uxd when interaction behavior is unresolved.
