# Frontend UI Engineering (frontend-ui-engineering)

> Builds accessible, responsive, production-quality UIs that follow the project's design system and avoid the generic AI-generated look.

- Category: [UI & Interaction](https://www.myskills.tools/en/categories/ui-interaction/)
- Source: Community · Addy Osmani
- Repository: https://github.com/addyosmani/agent-skills/tree/main/skills/frontend-ui-engineering (commit f97d842)
- SKILL.md: https://github.com/addyosmani/agent-skills/blob/main/skills/frontend-ui-engineering/SKILL.md
- Install command: `npx skills add addyosmani/agent-skills --skill frontend-ui-engineering`
- License: MIT
- Compatible with: Claude Code, Codex, Cursor, Copilot, Gemini CLI
- Permissions: read-repo ✓, write-files ✓, shell ✗, network ✗
- Status: Scan passed
- A rule scan cannot catch every risk. Read this skill's SKILL.md and check its permissions before installing.

## Core rule

Every component must meet WCAG 2.1 AA: keyboard accessible, properly labelled and with sufficient contrast.

## Execution Phases

1. **Structure components** — Colocate component files, prefer composition over configuration, and separate data fetching from presentation.
2. **Pick the simplest state** — Choose the simplest approach that works, from local state to a global store, and avoid prop drilling deeper than three levels.
3. **Follow 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.
4. **Accessible and responsive** — Implement keyboard navigation, ARIA labels and focus management, lay out mobile-first, and provide skeleton, empty and error states.
5. **Verify** — 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)

```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.
---
```

Home: https://www.myskills.tools/en/ · URL: https://www.myskills.tools/en/skills/frontend-ui-engineering/