frontend-ui-engineeringcommit f97d842SKILL.md · UI & Interaction
Frontend UI Engineering
Builds accessible, responsive, production-quality UIs that follow the project's design system and avoid the generic AI-generated look.
npx skills add addyosmani/agent-skills --skill frontend-ui-engineeringCommand selected. Copy it manually.
- Permissions
- read-repo
- write-files
- shell
- network
- Compatible with
- Claude Code, Codex, Cursor, Copilot, Gemini CLI
- GitHub
- 112.3k
- Source
- Community · Addy Osmani
- Status
- Scan passed
- License
- MIT
- Category
- UI & Interaction
Core rule
Every component must meet WCAG 2.1 AA: keyboard accessible, properly labelled and with sufficient contrast.
Execution Phases
Phase 01Structure components
Colocate component files, prefer composition over configuration, and separate data fetching from presentation.
Phase 02Pick the simplest state
Choose the simplest approach that works, from local state to a global store, and avoid prop drilling deeper than three levels.
Phase 03Follow the design system
Use semantic color tokens, a consistent spacing scale and heading hierarchy; treat references as evidence, never copying another product's branding or layout.
Phase 04Accessible and responsive
Implement keyboard navigation, ARIA labels and focus management, lay out mobile-first, and provide skeleton, empty and error states.
Phase 05Verify
Confirm no console errors, Tab-through keyboard access, screen-reader clarity, layouts at 320/768/1024/1440px, and no axe-core warnings.
Permissions (summarised from SKILL.md)
| Capability | Needed | Details |
|---|---|---|
| File writes | Required | Creates and edits components, styles, hooks and their test files. |
| Command execution | Not required | No specific commands are required; verification relies on browser dev tools and axe-core. |
| Network outbound | Not required | No network needed; references supplied by the team can be used. |
SKILL.md frontmatter (YAML)
---
name: frontend-ui-engineering
description: Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.
---