Frontend Ui Engineering

Name: Frontend Ui Engineering
Author: addyosmani

Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility…

Skill109.4k stars on addyosmani/agent-skills · shared by 25 skills

Install

Use it in

Terminal is for Claude Code, Codex, Cursor and Copilot.

frontend-ui-engineering.zipMIT license included

Download .zip

In Claude, open Customize › Skills.
Click +, then Create skill › Upload a skill.
Upload the .zip as it is. No need to unzip it.

Packed by SkillHub from addyosmani/agent-skills, always the latest version. On a phone: download now, upload later from a computer.

Part of

Guided workflow Step 1 of 6Build a UI feature that holds upDevelopers · in the Frontend kit Get the workflow file

About

Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility…

frontend-ui-engineering
skill

Next in the Frontend kit

Whole kit

React Best Practices
React and Next.js performance optimization guidelines from Vercel Engineering.
Skill
32.5k· repoGitHub stars for vercel-labs/agent-skills, shared by the 10 skills listed from this repo
React Composition Patterns
React composition patterns that scale and avoid boolean prop proliferation.
Skill
32.5k· repoGitHub stars for vercel-labs/agent-skills, shared by the 10 skills listed from this repo
next-devtools-mcp
Next.js development tools MCP server with stdio transport
Connects to Next devtools
828GitHub stars for vercel/next-devtools-mcp