frontend-ui-engineering: a Claude Code skill by Addy Osmani
For developers building React-style interfaces who want accessible, responsive components without the stock AI look. Skip it if your task is backend or API work.
- Score
- 77of 100
- Rank
- #88of 239
- Installs
- 79.3Kon skills.sh
- Security
- Mixed 5 scanners
- Updated
- 2026
- Context
- ~82tokens always
Install
npx skills add https://github.com/addyosmani/agent-skills --skill frontend-ui-engineering
Run it in your terminal. View the source
Using the Claude app rather than Claude Code? You can add a skill there too. How to add it in the app
What does frontend-ui-engineering do?
frontend-ui-engineering is a Claude skill that sets the rules for building user interfaces. It asks Claude to colocate each component with its tests, prefer composition over many props, split data fetching from presentation, and pick the simplest state tool, from useState up to a global store. For a new visual direction it studies two or three reference screens and writes a short design contract first. A table lists AI-look habits to avoid, such as purple gradients, rounded-2xl everywhere and stock card grids. It covers WCAG 2.1 AA keyboard, ARIA and focus rules, mobile-first layouts, then ends with a checklist at 320, 768, 1024 and 1440px.
When should you use frontend-ui-engineering?
Use it when
- You are building a new page or component
- Your UI looks generic and machine-made
- You need keyboard and screen reader support
Skip it when
- You only need backend or database work
- You want a throwaway mockup
What it needs and what it can touch
What it can do
- Reads and edits project files
From reading its instructions, not from running it.
Why it scores 77
Strongest on upkeep (100 of 100), weakest on trust (62).
Is frontend-ui-engineering safe to install?
At least one scanner raised a medium warning. Read the results below. Scanners often miss what other scanners catch, and a skill can change after a scan. Read its source before you install it.
| Scanner | Result | Date |
|---|---|---|
| Gen Agent Trust Hub | Passed | Oct 29, 2026 |
| Socket | Passed | Oct 29, 2026 |
| Snyk | Low risk | Oct 29, 2026 |
| Runlayer | Medium risk | Feb 22, 2026 |
| ZeroLeaks | Low risk | Apr 15, 2026 |
Details
- Installs
- 79,251
- Repository stars
- 115,385
- Last repository change
- Tokens always loaded
- about 82
- Tokens when used
- about 2,889
- License
- MIT
- Data confidence
- High
Did it do the job for you?
Alternatives to frontend-ui-engineering
All skills for this job-
Get AI Design SkillsAI Design Skills
For people building a landing page or Figma file who want fixed design rules and conversion structure.
-
Get baseline-uibaseline-ui
For developers using Tailwind and React who want AI-built screens tidied to a strict house style.
-
Get ui-ux-pro-maxui-ux-pro-max
For builders who want Claude to pick styles, palettes and fonts from a local search database before writing UI.
-
Get fixing-accessibility
fixing-accessibility
For front-end developers who want Claude to catch and patch accessibility gaps in buttons, forms and dialogs.
frontend-ui-engineering