FR
frontend-ui-engineering
Build and refine web UI—component structure, responsive layout, design tokens, state, and accessibility. Use for feature UI work beyond WCAG checks alone.
Install
mkdir -p .claude/skills/frontend-ui-engineering && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/13203" && unzip -o skill.zip -d .claude/skills/frontend-ui-engineering && rm skill.zipInstalls to .claude/skills/frontend-ui-engineering
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Build and refine web UI—component structure, responsive layout, design tokens, state, and accessibility. Use for feature UI work beyond WCAG checks alone.154 chars✓ has a “when” trigger
About this skill
Frontend UI Engineering
End-to-end UI implementation: structure, styling, responsive behavior, state, and accessibility. Extends frontend-ui-accessibility with architecture and design-system discipline.
When to use
- New page, form, or interactive component
- Refactoring UI for consistency or responsiveness
- Applying or extending a design system
When not to use
- Backend-only change
- Accessibility audit only (use
frontend-ui-accessibility) - Full visual redesign exploration (consider design consultation workflows)
Workflow
- Inventory — existing components, tokens, patterns to reuse
- Structure — semantic HTML; split presentational vs container components
- Layout — mobile-first breakpoints; avoid fixed widths that break small screens
- State — local vs shared; minimize prop drilling; document async/loading/error UI
- Styling — tokens (color, spacing, type); no magic numbers scattered
- A11y — keyboard, focus, labels, contrast (see
frontend-ui-accessibility) - Verify — key viewports; critical user paths; no console errors
Checklist
| Area | Check |
|---|---|
| Components | Single responsibility; reusable primitives |
| Responsive | Works at 320px and desktop; touch targets adequate |
| Loading/empty/error | All three states designed |
| Performance | Avoid unnecessary re-renders; lazy-load heavy assets |
| A11y | Focus order, ARIA only when needed, form labels |
Output
- Implemented components with consistent patterns
- Brief note on new tokens or patterns added to the design system