Guide · Agent skill
How to use the Frontend UI Engineering agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The frontend-ui-engineering skill is a set of instructions that tells an AI agent how to build user interfaces: components, pages, layouts, state and accessibility. This guide explains what the skill changes in the agent's behaviour, how to install it from the ZIP or the Claude apps, and how to ask for work so the skill is used. By the end you will know how to install it, trigger it with natural requests and check the output.
Frontend UI Engineeringaddyosmani/agent-skills · MIT Download the skill Quick start
- 1Download the ZIP. Download the skill ZIP from this page and unzip it so you have a frontend-ui-engineering folder containing SKILL.md.
- 2Place the folder. Move the folder into ~/.claude/skills/ for all projects, or into your project's .claude/skills/ folder for one project.
- 3Or upload in the Claude apps. In the Claude apps, open Settings, go to Capabilities, choose Skills and upload the skill.
- 4Describe the interface task. Ask for the screen or component in plain language, naming your design system if you have one.
- 5Review the result. Check keyboard use, focus, contrast and heading structure yourself, since the skill gives guidance rather than automated audits.
What the skill makes the agent do
Agent skills are folders containing instructions that an agent reads when a task matches the skill's description. This one is defined in a single file, SKILL.md, and covers front-end building work: creating components, implementing layouts, managing state and meeting WCAG accessibility requirements.
When it applies, the agent organises components into colocated folders, prefers composition over configuration, and separates data fetching from presentation. It picks the simplest state approach that works, such as local state before a global store, and sticks to a consistent spacing and typography scale. It also aims for WCAG 2.1 AA: keyboard use, contrast and heading structure.
- Keeps components focused and separates data handling from rendering
- Chooses state management from local state up to global stores only when needed
- Uses semantic colour tokens instead of raw hex values where the project has them
- Avoids common generic 'AI-looking' patterns such as purple gradients, excessive gradients and oversized padding
Install the skill from the ZIP
Download the ZIP for this skill from this page and unzip it. The skill is a folder containing SKILL.md, so after unzipping you should have a frontend-ui-engineering folder with that file inside.
To make it available across your projects, place the folder in your user skills directory, ~/.claude/skills/. To limit it to one project, place it in that project's .claude/skills/ folder instead.
- Personal use: ~/.claude/skills/frontend-ui-engineering/
- Single project: .claude/skills/frontend-ui-engineering/ inside your project folder
~/.claude/skills/frontend-ui-engineering/SKILL.mdInstall by uploading in the Claude apps
If you use the Claude apps rather than local folders, you can upload the skill instead. Open Settings, go to Capabilities, then choose Skills and upload the skill from the ZIP.
Whichever method you use, the skill only needs the SKILL.md file. It requires nothing else to be installed.
- Open Settings → Capabilities → Skills
- Upload the skill ZIP and confirm it appears in the list
Trigger the skill with natural requests
You do not need a special command. The skill is picked up when your request matches its description, so describe the interface work in plain language. Mention the product's design system or style guide when you have one, because the skill relies on it for colours, spacing and type.
Requests that name the kind of work work well, for example asking for a new screen, a reusable component, a responsive layout, or an accessibility fix. If the agent does not seem to follow the skill, state the task more explicitly, such as 'build this as a production-quality accessible component'.
- 'Build a task list component with loading, empty and error states'
- 'Make this settings page responsive and keyboard accessible'
- 'Refactor this form so every input has a proper label'
- 'Implement a sidebar layout that matches our existing design tokens'
Check the output and what it needs
The skill gives the agent guidance, not a testing tool. It does not run scripts or use the network, and it lists no other requirements. Treat its accessibility goals as a checklist for the agent to follow, and still review keyboard behaviour, focus, contrast and headings yourself before release.
The skill works best when a design system or style guide exists. Without one, it asks the agent to use the project's real palette and spacing, but it cannot supply those values, so the result may still look generic.
- Requires: nothing listed
- Runs scripts: no
- Uses network: no
- Human review is still needed for WCAG compliance
What people use it for
- Building a new task list or dashboard component with loading, empty and error states
- Refactoring a form so each input has a visible label and clear error text
- Making an existing settings page responsive and keyboard accessible
- Implementing a layout that follows your project's spacing and typography scale
Frequently asked questions
Is the frontend-ui-engineering skill free?
The skill is published under the MIT licence, as stated on this page. Check the repository licence for the full terms before reuse.
What do I need to install the frontend-ui-engineering skill?
The source lists no requirements. Install it by unzipping it into ~/.claude/skills/ or a project's .claude/skills/ folder, or by uploading it under Settings → Capabilities → Skills in the Claude apps.
Where does the skill go on my computer?
Put the frontend-ui-engineering folder in ~/.claude/skills/ for personal use across projects, or in .claude/skills/ inside one project. The folder should contain SKILL.md.
Does the skill run scripts or access the internet?
No. The skill runs no scripts and uses no network access, and its only listed file is SKILL.md.
Will the skill make my app fully WCAG compliant?
No. It gives the agent WCAG 2.1 AA guidance on keyboard use, contrast and headings, but it is not a testing tool. Human review is still needed for compliance.
Why does the output still look generic sometimes?
The skill asks the agent to follow your existing design system, but it cannot supply one. Without a style guide or design tokens, the agent's visual choices may still look generic.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
This skill suits developers and product teams building or refactoring web UI who want more consistent, accessible output from an AI agent, especially if they have a design system. It is not a replacement for an accessibility audit or for a project with no style guide, where you should expect to supply the visual decisions yourself or pick a more specific tool.
Download the skill