Frontend UI Engineering

by addyosmani

Frontend UI Engineering is a Frontend skill for Claude Code, published by addyosmani in agent-skills.

86.7K stars9.3K forkson addyosmani/agent-skillsAdded 2026/08/13Repository updated 2026/08/11

View source on GitHub Download repo ZIP

agent-skillsantigravityclaude-codecodexcursorskills

Install in seconds

Install Frontend UI Engineering

Copy Frontend UI Engineering into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.

terminal

npx degit https://github.com/addyosmani/agent-skills/tree/main/skills/frontend-ui-engineering ~/.claude/skills/frontend-ui-engineering

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/addyosmani/agent-skills.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file: skills/frontend-ui-engineering/SKILL.md in addyosmani/agent-skills
Installs to: ~/.claude/skills/frontend-ui-engineering
Collection: One of 24 skills cataloged from this repository
Category: Frontend — 567 skills

What Frontend UI Engineering does

Frontend UI Engineering builds production-quality, accessible, responsive user-facing UIs. Use it when building or modifying interfaces, creating components, implementing layouts, meeting WCAG accessibility requirements, or managing state to achieve a polished, production-grade result.

Frontend UI Engineering is cataloged under Frontend on DirSkills. Frontend UI Engineering comes from a repository tagged agent-skills, antigravity, claude-code, codex and cursor.

Documentation

README

Excerpt

Frontend UI Engineering

Overview

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."

When to Use

Building new UI components or pages
Modifying existing user-facing interfaces
Implementing responsive layouts
Adding interactivity or state management
Fixing visual or UX issues

Component Architecture

File Structure

Colocate everything related to a component:

This is the opening of the README. Read the full README on GitHub.

Frequently asked about Frontend UI Engineering

What else does addyosmani publish alongside Frontend UI Engineering?
Frontend UI Engineering is one of 24 skills that DirSkills catalogs from addyosmani/agent-skills, the repository it ships in. Its siblings there include API and Interface Design, Agent Skill Discovery and Browser Testing. Each one is a separate skill with its own page in this directory, installs the same way Frontend UI Engineering does, and is maintained by addyosmani in that same repository. The rest of the collection is listed on the addyosmani/agent-skills page.
How does Frontend UI Engineering compare to other Frontend skills?
Frontend UI Engineering ranks #21 by stars among the 567 Frontend skills in this catalog. The most-starred ones next to it are Angular Developer, Android Clean Architecture and Accessibility. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Frontend UI Engineering against them. Open each page to compare what they document and how they install.