Guides systematic root-cause debugging. Use when tests fail, builds break, behavior doesn't match expectations, or you encounter any unexpected error. Use when you need a systematic approach to finding and fixing the root cause rather than guessing.
frontend-ui-engineering
frontend-ui-engineering is an open-source frontend skill for Claude Code and compatible agents, published by addyosmani. Its author describes it as: “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 stat…”. The project has 88k stars on GitHub and is available under the MIT license. Add it to your setup with `/plugin marketplace add addyosmani/agent-skills`.
What frontend-ui-engineering does
Build production-quality user interfaces that are accessible, performant, and visually polished. The goal is UI that looks like it was built by a design-aware engineer at a top company — not like it was generated by an AI. This means real design system adherence, proper accessibility, thoughtful interaction patterns, and no generic "AI aesthetic."
Installation
Add frontend-ui-engineering to your agent with:
/plugin marketplace add addyosmani/agent-skillsAlways review a skill's source before installing it. This command comes from the skill's public repository; the linked repo is the source of truth for exact setup steps.
What's inside
The SKILL.md for frontend-ui-engineering is organised into these sections:
- Overview
- When to Use
- Component Architecture
- File Structure
- Component Patterns
- State Management
- Design System Adherence
- Avoid the AI Aesthetic
- Spacing and Layout
- Typography
- Color
- Accessibility (WCAG 2.1 AA)
When to use it
Reach for frontend-ui-engineering when you want frontend help from your agent without writing the same instructions every session. Load the skill and the agent picks it up automatically for relevant tasks.
Strengths
- Clear MIT license — safe to read and adapt
- Ships in addyosmani/agent-skills, an established project with 88,280 GitHub stars
- Actively maintained (recent commits)
Topics
Frequently asked questions
- What does frontend-ui-engineering do?
- 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.
- How do I install frontend-ui-engineering?
- Run /plugin marketplace add addyosmani/agent-skills in your agent, then reload your skills. Review the source at https://github.com/addyosmani/agent-skills before installing.
- Is frontend-ui-engineering free to use?
- Yes. frontend-ui-engineering is free and open source under the MIT license, so you can read, run, and adapt it within that license's terms.
- Where does frontend-ui-engineering come from?
- frontend-ui-engineering ships inside addyosmani/agent-skills, a repository that contains 25 catalogued skills in total. The repository's 88,280 GitHub stars apply to that whole collection, not to this skill on its own.
Related skills
More Frontend →Extracts what the user actually wants instead of what they think they should want. Achieves this through one-question-at-a-time interview until ~95% confidence about the underlying intent. Use when an ask is underspecified ("build me X" without "for whom" or "why now"), when the user explicitly invokes ("interview me", "grill me", "are we sure?", "stress-test my thinking"), or when you catch yourself silently filling in ambiguous requirements before any plan, spec, or code exists.
Optimizes application performance across frontend, backend, queries, and databases. Use when performance requirements exist, when you suspect performance regressions, when Core Web Vitals or load times need improvement, when N+1 query patterns need fixing, or when profiling reveals bottlenecks.
Creates specs before coding. Use when starting a new project, feature, or significant change and no specification exists yet. Use when requirements are unclear, ambiguous, or only exist as a vague idea. Use when a single requirement spans several independently testable capabilities and needs decomposing into a capability map of modules before specifying.
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.