What is the frontend UI engineering skill?
The frontend UI engineering skill is a SKILL.md in addyosmani/agent-skills. It sets component architecture rules, state management advice, a table of AI-default design patterns to avoid, spacing, type and color rules, WCAG 2.1 AA requirements, responsive breakpoints and a verification checklist, so an AI coding agent builds UI that reads as designed.
It is the frontend-ui-engineering folder in addyosmani/agent-skills. The goal stated in the skill is UI that looks built by a design-aware engineer, not generated by an AI, which means real design system adherence, accessibility and responsive behavior.
It applies when you build or change interfaces, create components, implement layouts, meet accessibility requirements or manage state.
What changes in your agent's output
- Components are colocated with their files, prefer composition over configuration and stay focused. A red flag list flags components over 200 lines.
- Data fetching is separated from presentation, and prop drilling deeper than three levels triggers context or a restructure.
- Colors come from semantic tokens such as text-primary and bg-surface, not raw hex values.
- Empty, error and loading states are required, not optional.
- Layouts are checked at 320, 768, 1024 and 1440 pixels.
What the skill covers
A reference-led quality step comes first: collect evidence from two or three relevant screens, write a short design contract, then rebuild the structure in your own components without copying another product's branding or layout. A table then lists AI defaults to avoid, such as purple everything, rounded everything, stock card grids and heavy shadows.
Who the frontend UI engineering skill is for
Best for
- Teams whose agent output looks generic and needs project-specific discipline.
- Projects with a design system that the agent keeps ignoring.
- Pairing with frontend-design for visual direction or the web accessibility skill for deeper WCAG checks.
Not for
- Choosing a brand look. The skill says to follow your actual palette and design system.
- Non-UI work. It targets user-facing interfaces only.
Use it with UiChemy
This skill suits React or component code you ship yourself. For a WordPress target, UiChemy Composer edits real HTML, CSS and JavaScript inside Elementor or Gutenberg, and Figma to WordPress turns a design into editable blocks. Click Get Started on uichemy.com.
How to install Frontend UI Engineering Skill: Production UI Rules for AI Agents
git clone https://github.com/addyosmani/agent-skills.gitClone the repository
Run
git clone https://github.com/addyosmani/agent-skills.git. The skill is the skills/frontend-ui-engineering folder.Copy the skill folder
Copy skills/frontend-ui-engineering into your agent's skills folder. SKILL.md points to references/accessibility-checklist.md at the repository root, so copy the references folder too, or keep the repository checkout beside it.
Tell the agent your design system
The skill tells the agent to use your real palette, spacing and tokens, so make them available through your tokens file or existing components.
Ask for UI work
Request a component or page and check the result against the skill's verification list.
Check that it loaded
Ask for a settings page. The result should use your tokens and spacing scale, include loading, empty and error states, work by keyboard, and avoid purple gradients and oversized card grids.
Key features
- Component architectureColocate files, prefer composition over configuration, keep components focused and separate data fetching from presentation.
- State management ruleChoose the simplest approach that works, and avoid prop drilling deeper than three levels.
- Reference-led UI qualityStudy two or three relevant references, write a design contract and rebuild the structure in the product's own tokens, without copying branding.
- AI aesthetic tableEight AI default patterns to avoid, each with the production-quality alternative.
- Spacing, type and colorA consistent spacing scale, heading hierarchy without skipped levels, and semantic color tokens with 4.5:1 and 3:1 contrast.
- Accessibility at WCAG 2.1 AAKeyboard navigation, ARIA labels and focus management for every component, with a link to the repository's accessibility checklist.
- Responsive designMobile first, tested at 320, 768, 1024 and 1440 pixels.
- Complete statesLoading, empty, error, success and permission states, plus meaningful empty and error messages.
- Red flags listOver 200 lines, inline styles or arbitrary pixel values, missing states, no keyboard testing and color as the only indicator.
- Verification checklistNo console errors, keyboard access, screen reader structure, responsive checks, design system match and no axe warnings.
Frequently asked questions
What is the frontend UI engineering skill?
It is a SKILL.md in addyosmani/agent-skills for building user-facing interfaces. It sets rules for component structure, state, design system use, accessibility, responsive layout and verification so the output looks designed and passes a checklist.
How do I install it without npx?
Clone the repository with git and copy skills/frontend-ui-engineering into your agent's skills folder. Also copy the repository's references folder, because the skill links to an accessibility checklist stored there. The repository README and SKILL.md linked in the sources section are the authority for details.
What does avoid the AI aesthetic mean?
The skill lists eight AI default patterns, such as purple and indigo everywhere, excessive gradients, rounded everything, generic hero sections, placeholder ipsum copy, oversized padding, stock card grids and heavy shadows, and gives a production-quality alternative for each.
Which accessibility level does it target?
The skill says every component must meet WCAG 2.1 AA, with keyboard navigation, ARIA labels and focus management. For the newer WCAG 2.2 criteria, add the web accessibility skill from the same ecosystem.
Can I use it with a design system like shadcn/ui?
Yes. The skill tells the agent to follow the project's own components and tokens. A component-library skill such as shadcn adds library-specific rules, while this one adds general engineering and verification rules.
Does it include a visual style?
No. It deliberately defers to your design system and to references you supply. For taste and visual direction, pair it with design-taste-frontend or frontend-design. The repository README and SKILL.md linked in the sources section are the authority for details.
What license does it use?
The addyosmani/agent-skills repository uses the MIT license, as GitHub shows. The 48.4K install count on this page comes from a third-party skills listing and is not stated in the repository.