frontend-ui-engineering
🤖 AI Summary
This agent generates production-ready, accessible, and performant UI code (HTML/CSS/JS/React) from design specs or prompts, prioritizing visual polish and design-system consistency over generic or boilerplate output.
How to Install
Claude Code:
git clone --depth 1 https://github.com/addyosmani/agent-skills.git && cp agent-skills/skills/frontend-ui-engineering ~/.claude/skills/frontend-ui-engineering -rBuild 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...
Details
| Category | Design → ui |
| Source | addyosmani/agent-skills |
| SKILL.md | View on GitHub → |
| Repo Stars | ★ 65.9K |
| Est. per Skill | ~2.7K (shared across 24 skills from this repo) |
| Difficulty | Intermediate |
| Risk Level | Safe |
Related Skills
cirq
Cirq - Quantum Computing with Python Cirq is Google Quantum AI's open-source framework for designing
error-detective
Use this skill when Working on error detective tasks or workflows Needing guidance, best practices,
not-a-vibe-coder
Not-a-Vibe-Coder A skill that turns any project idea — no matter how vague — into 8 living planning
embedding-strategies
Embedding Strategies Guide to selecting and optimizing embedding models for vector search applicatio
Works Well With
Skills from the same repository — often designed to work together
idea-refine
Refines raw ideas into sharp, actionable concepts worth building through structured divergent and co
interview-me
What people ask for and what they actually want are different things. They ask for "a dashboard" bec
using-agent-skills
Agent Skills is a collection of engineering workflow skills organized by development phase. Each ski