Back to Agent Skills
Frontend & Design
Frontend UI Engineering
by Addy Osmani 78k GitHub stars
Build production-quality, accessible, responsive UIs — component architecture, design systems, state, and WCAG compliance.
#ui#accessibility#components#engineering
Claude Code Codex
Overview
Part of Addy Osmani's production-grade agent-skills set, this skill focuses on building interfaces that look and feel production-quality rather than AI-generated. It covers component architecture, design systems, state management, and meeting WCAG accessibility requirements. Triggers automatically when building or modifying UI.
What it is good for
- Structuring a component architecture
- Implementing accessible interactive controls
- Managing UI state cleanly
- Making layouts responsive
Install
Install in Claude Code
# Add the marketplace, then install the skill in Claude Code:
/plugin marketplace add addyosmani/agent-skills
/plugin install frontend-ui-engineering
# Or install manually into ~/.claude/skills:
git clone https://github.com/addyosmani/agent-skills.git
cp -r agent-skills/frontend-ui-engineering ~/.claude/skills/frontend-ui-engineeringExplore AI Tools
Discover the best AI tools that complement your skills
Read AI & Design Articles
Tips and trends in the world of design and AI
Related Skills
Frontend & Design
Frontend Design
Create distinctive, production-grade frontend interfaces that avoid generic AI aesthetics — pages, components, artifacts, and posters.
Claude Code Codex
Frontend & Design Web Artifacts Builder
Construct complex, multi-component HTML artifacts for Claude.ai using React and Tailwind.
Claude Code Codex
Frontend & Design Animation Systems
Product-grade web motion like Stripe, Linear, Apple, and Vercel — easing/duration defaults, choreography, performance, and reduced-motion.
Claude Code Codex