Frontend UI Engineering skill for Claude Code: accessible, production-quality UI

Addy Osmani's skill that makes Claude build accessible, responsive interfaces that follow your design system, for front-end developers.

Installs: 72.5K; on skills.sh
Stars: 112.6K; on GitHub
Updated: Nov 2026; last repo commit

When you build or change user interfaces, Claude loads this skill. It follows the SKILL.md's sections on component architecture, state management, design system adherence, WCAG 2.1 AA accessibility, responsive design and loading states. It has a table of "AI defaults" to avoid, such as purple-everything palettes, excessive gradients, rounded-everything and generic hero sections.

It bundles no scripts. It links to a shared references/accessibility-checklist.md in the wider agent-skills pack, which a single-skill install does not include.

Good for

Front-end developers who want UI that does not look AI-generated
Teams that need WCAG 2.1 AA accessibility in components
Developers building responsive pages and state-heavy components

Install frontend-ui-engineering

Claude Code

Copy this prompt.

Install the frontend-ui-engineering skill in Claude Code. Run this command:

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

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

The skill links to ../../references/accessibility-checklist.md, which lives at the repo level in the pack.

From the project README. Source.

What's in the skill

When it loads

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.

Sections in SKILL.md

Overview
When to Use
Component Architecture
File Structure
Component Patterns
State Management
Design System Adherence
Reference-led UI quality
Avoid the AI Aesthetic
Spacing and Layout
Typography
Color
Accessibility (WCAG 2.1 AA)
Keyboard Navigation
ARIA Labels
Focus Management

Key facts

Author: addyosmani (agent-skills pack)
Repository: addyosmani/agent-skills
Installs on skills.sh: 72,453 (2 Nov 2026)
GitHub stars (repo): 112,555 (2 Nov 2026)
License: MIT
Last commit (repo): 1 Nov 2026
What installs: SKILL.md only (1 file); bundles no scripts. Links to a shared references/accessibility-checklist.md in the pack
Works in: Claude Code, Cursor, Codex, Copilot, Cline and more through the skills CLI; native Claude Code and Codex plugins
Needs: The wider agent-skills pack for the accessibility checklist it links to
skills.sh audits: Gen Agent Trust Hub pass, Socket pass, Snyk pass

What it includes

Colocate component, test, stories, hook and types
Claude keeps each component's files together in one folder and follows the skill's component patterns.
Try: “Build a settings page with accessible form controls.”
Write · Component architecture
Pick the simplest option, from local state to a global store
Claude picks from local state, lifted state, context, URL state, server state (React Query, SWR) or a store such as Zustand or Redux, and avoids prop drilling deeper than 3 levels.
Read · State management
Reference-led quality, spacing, typography, colour
Claude uses your tokens and scale, collects evidence from references before choosing a layout, and does not copy another product's branding or layout.
Write · Design system adherence
A table of AI defaults and production alternatives
Claude avoids purple palettes, heavy gradients, rounded-everything, generic heroes, lorem ipsum and oversized padding.
Read · Avoid the AI aesthetic
Keyboard, ARIA, focus management, empty and error states
Every component must be keyboard accessible, labelled, and manage focus.
Read · Accessibility (WCAG 2.1 AA)
Mobile first, tested at 320, 768, 1024 and 1440 px
Claude designs for small screens first and expands with breakpoints, using Tailwind-style classes in the examples.
Read · Responsive design
Skeletons, optimistic updates and transitions
Claude uses skeleton loaders for content and optimistic updates for perceived speed.
Read · Loading and transitions

From the official docs

Questions

What does the Frontend UI Engineering skill do?

It makes Claude build user interfaces that are accessible, responsive and consistent with your design system. It also steers Claude away from recognisable AI-generated design habits.

How do I install it?

Use the install box at the top of this page. It installs the whole agent-skills pack so the accessibility checklist the skill links to is included. A per-skill install leaves it out, per the README.

Does it work with React, Vue or Svelte?

Its examples are React and TypeScript (tsx), with React Query, SWR, Zustand and Redux named for state. Vue and Svelte are not mentioned in the SKILL.md.

Does it check accessibility automatically?

No tool runs automatically. It gives Claude rules for keyboard use, ARIA and focus, and a verification checklist at the end. Run your own accessibility tests as well.

Does it work in Cursor, Codex or Copilot?

Yes. The README documents a Codex plugin, the skills CLI for 70+ agents including Cursor, and manual setup for Cursor and Copilot. The slash commands (/spec, /plan, /build and so on) are Claude Code commands and do not appear in Copilot, where you invoke skills by name. The README does not describe a Claude app install.

Is it safe to install?

It is a SKILL.md of instructions and bundles no scripts. Claude still edits your components and styles, so review the diff and work on a branch. The Claude Code plugin route installs the whole 25-skill pack, so check what you are adding.

Information

updated Nov 2, 2026

Repository: addyosmani/agent-skills
Folder: skills/frontend-ui-engineering

addyosmani/agent-skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 2

addyosmani/agent-skills README · github.com
frontend-ui-engineering SKILL.md · github.com