frontend-ui-engineering
An agent skill by addyosmani, from addyosmani/agent-skills. Tags: debugging, design, visual-art, web.
What it does
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.
Install
With the skills CLI, which installs into Claude Code, Codex, Cursor and other agents:
npx skills add addyosmani/agent-skills --skill frontend-ui-engineeringOr copy the skill folder into Claude Code's skills directory by hand (~/.claude/skills for every project, or .claude/skills inside one):
git clone --depth 1 https://github.com/addyosmani/agent-skills
cp -r agent-skills/skills/frontend-ui-engineering ~/.claude/skills/frontend-ui-engineeringSafety box score
Not rated yet. A safety box score grades what a skill and its scripts can reach on the machine of whoever installs it, across eight categories from shell execution to secrets access. Anyone can request one from this page; it is saved for everyone. How the score works.
Source
- Repository
- addyosmani/agent-skills (all skills from this repository)
- Path
- skills/frontend-ui-engineering/SKILL.md
- Branch
- main
- Updated
- 2026-09-19
Related skills
- web-design-guidelines — Review UI code for Web Interface Guidelines compliance.
- browser-testing-with-devtools — Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser.
- algorithmic-art — js with seeded randomness and interactive parameter exploration.
- archify — Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG.
- customer-journey-map — Create an end-to-end customer journey map with stages, touchpoints, emotions, pain points, and opportunities.
- frontend-design — Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one.