Frontend UI engineering skill for Claude Code: what it does and how to install it

Source: addyosmani/agent-skills · Maintainer: community: Addy Osmani · License: MIT · Checked: 24 October 2026

What is the frontend-ui-engineering skill?

The frontend-ui-engineering skill tells Claude Code and other coding agents how to build user interfaces the way a design-aware engineer would: follow the project's design system, make every component keyboard and screen reader accessible, cover loading, empty and error states, and check the result at fixed screen widths. It is for developers who want agent-built UI that fits their product instead of looking generated.

It comes from addyosmani/agent-skills, Addy Osmani's MIT-licensed set of 25 engineering skills. The skill's description reads: "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."

It is the third most installed skill in the repo. As of 24 October 2026, its skills.sh page listed 66.0K installs (snapshot, 24 October 2026), with Pass results from all three security audits shown (Gen Agent Trust Hub, Socket and Snyk).

What does it do?

The SKILL.md is a single file of rules and short code examples. The README's skill table sums it up as "Component architecture, design systems, state management, responsive design, WCAG 2.1 AA accessibility" and says to use it when "Building or modifying user-facing interfaces."

The main sections:

• Component architecture. Colocate a component with its test, stories, hook and types in one folder. Prefer composition (<Card><CardHeader>) over a component with many configuration props. Keep components focused, and separate the container that fetches data from the presentational component that renders it.
• State management. A ladder from simplest to heaviest: local state, lifted state, context for read-heavy values like theme or auth, URL state for filters and pagination, server state with React Query or SWR, and a global store such as Zustand or Redux only for complex shared client state. Avoid prop drilling deeper than three levels.
• Design system adherence. When a product needs a new visual direction, study two or three reference screens, write a short "design contract" (the screen's job, primary action, required states, responsive rules, patterns to reject), then rebuild it with the product's own components and tokens. It says never to copy another product's branding, text, imagery or exact layout.
• Avoid the AI aesthetic. A table of model defaults to drop: purple or indigo everything, heavy gradients, maximum rounding, generic hero sections, placeholder copy, oversized padding, stock card grids and heavy shadows.
• Spacing, type and color. Use a spacing scale instead of values like 13px, don't skip heading levels, use semantic color tokens, and meet 4.5:1 contrast for normal text and 3:1 for large text.
• Accessibility (WCAG 2.1 AA). Native <button> over clickable <div>, aria-label on icon-only buttons, labels on inputs, focus moved into dialogs, and meaningful empty and error states.
• Responsive design and loading. Mobile first, test at 320px, 768px, 1024px and 1440px, skeletons instead of spinners for content, and optimistic updates with rollback on error.

It closes with a rationalizations table ("We'll make it responsive later"), red flags such as components over 200 lines or color as the only signal of state, and a verification checklist.

What's in the folder: only SKILL.md. Its "See Also" section points to references/accessibility-checklist.md at the repo root, a longer WCAG 2.1 AA list covering keyboard navigation, screen readers, ARIA live regions and testing tools. That file sits outside the skill folder, which matters for how you install it.

How do you install the frontend UI engineering skill?

Whole set as a Claude Code plugin. From the README:

/plugin marketplace add addyosmani/agent-skills
/plugin install agent-skills@addy-agent-skills

This brings every skill, the shared references/ checklists, four agent personas and nine slash commands. Plugin skills are namespaced as /plugin-name:skill-name per the Claude Code skills docs, so this one is /agent-skills:frontend-ui-engineering. The README notes that the marketplace clones over SSH and gives an HTTPS fallback (/plugin marketplace add https://github.com/addyosmani/agent-skills.git) if you don't have SSH keys on GitHub.

Just this skill. The command on skills.sh, using the skills CLI:

npx skills add https://github.com/addyosmani/agent-skills --skill frontend-ui-engineering

Add -g to install it for all projects. The folder lands in .claude/skills/frontend-ui-engineering/, or ~/.claude/skills/frontend-ui-engineering/ with -g. Codex and Cursor read the same SKILL.md format; see Codex skills and Cursor skills.

The README warns about one gap: a per-skill install "copies only skills/<name>/, not the repo-level references/ directory. The skill still works, but paths to supplementary shared checklists are unavailable." For this skill that means the accessibility checklist. Use the plugin, clone the repo, or copy accessibility-checklist.md into a references/ folder inside the installed skill.

Claude.ai. Since the skill is a plain folder, you can also zip it and upload it under Customize > Skills, as described in Anthropic's help article on skills. Code execution must be turned on.

How do you use it?

You rarely need to call it. The README says "building UI triggers frontend-ui-engineering", so asking for a page or component is usually enough. Naming the skill makes sure it loads.

Example prompts (suggestions, not quotes from the repo):

• Build the settings page for notification preferences using our existing components. Handle loading, empty and error states.
• Use the frontend-ui-engineering skill to review src/components/Checkout for accessibility and responsive problems.
• This dashboard looks AI-generated. Rework it with our design tokens and drop the gradients and oversized cards.
• Split TaskBoard.tsx into a data container and presentational components. It's over 400 lines.
• Add optimistic updates to the task toggle, with rollback if the request fails.

Give the agent your design system: point it at your tokens file, component library or Tailwind config. The skill says to use the project's actual palette and spacing scale, so it works best when those exist and are easy to find.

Requirements: no packages, scripts or API keys. To run the final checks it lists (no warnings in dev tools or axe-core, keyboard navigation by Tab), you need a running app and a browser. Pairing it with the repo's browser-testing-with-devtools skill or Anthropic's webapp testing skill lets the agent check the rendered page itself.

How does it compare with Anthropic's frontend-design skill?

Both target the same problem, generic AI-looking UI, from different sides.

If you are starting a new product with no visual identity, the frontend-design skill helps pick one. If you already have a design system and want the agent to respect it while shipping solid components, this skill fits better.

Tips and limits

From the files, not from testing:

• React-centric examples. Code samples use React, TypeScript, Tailwind and React Query. The rules carry over to other frameworks, but say which one you use.
• WCAG 2.1, not 2.2. The skill and its checklist target WCAG 2.1 AA. If you report against WCAG 2.2, check the newer criteria yourself or add the accessibility skill.
• "Finish-gate review" is undefined here. The checklist asks that the rendered result pass "a final UI-specific finish-gate review", but the skill doesn't define one. Treat it as a manual look at the running page, or pair it with a review skill.
• Opinions you may not share. Skeletons over spinners, fixed breakpoints and a 200-line limit per component are defaults. Override them in your CLAUDE.md if your team decided otherwise.
• No scripts. It runs nothing and writes no files of its own; it shapes how the agent writes components.
• License. MIT, so you can fork and edit it as long as you keep the copyright notice.

Save it in your Kipt library

In Kipt, open Skills and paste the skill's GitHub folder link into the import box. Kipt reads the SKILL.md; for a repo with many skills it shows a list to pick from, so you can take related skills such as performance-optimization in the same step. You can also drop a folder or a .zip, which is an easy way to put accessibility-checklist.md into the skill's own references/ folder first. Your skills live in your own private GitHub repo and install into Claude Code or Codex with one command:

npx skills add https://github.com/<you>/<repo>.git --all -g

Kipt is not affiliated with Addy Osmani or addyosmani/agent-skills.

Similar skills

• Frontend design skill: Anthropic's skill for a distinctive visual direction.
• Accessibility skill: Addy Osmani's WCAG audit skill from web-quality-skills, for deeper accessibility checks.
• Web design guidelines skill: Vercel's UI review rules for interfaces you already built.
• Performance optimization skill: the same repo's measure-first skill for when the UI is slow.