Overview
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 98k 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."
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
- Reference-led UI quality
- Avoid the AI Aesthetic
- Spacing and Layout
- Typography
- Color
Installation
Add frontend-ui-engineering to your agent with:
/plugin marketplace add addyosmani/agent-skillsReview a skill’s source before installing it — skills can instruct your agent to run commands. This command comes from the skill’s public repository, which is the source of truth for setup steps. New to skills? Read how to install Claude Code skills.
Supported agents
- Claude Code — ships a claude code plugin marketplace
- Codex — declared in the repository topics
- Cursor — declared in the repository topics
- Antigravity — declared in the repository topics
License
frontend-ui-engineering is published under the MIT license.
Strengths
- Clear MIT license — safe to read and adapt within its terms
- Ships in addyosmani/agent-skills, an established project with 97,992 GitHub stars
- Works with Claude Code, Codex, Cursor, Antigravity
- Actively maintained — repository updated in the last 30 days
- Its repository gained 16,916 GitHub stars over the last 52 days
Author
Topics
Alternatives to frontend-ui-engineering
Similar skills from other repositories:
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.
- Which agents does frontend-ui-engineering work with?
- frontend-ui-engineering lists Claude Code, Codex, Cursor, and Antigravity — named in its SKILL.md, its plugin marketplace or its repository topics. Skills use the portable SKILL.md format, so other agents that read that format may load it too.
- Where does frontend-ui-engineering come from?
- frontend-ui-engineering ships inside addyosmani/agent-skills, a repository that contains 26 catalogued skills in total. The repository's 97,992 GitHub stars apply to that whole collection, not to this skill on its own.
