Public upstreamAddy OsmaniPublic source

Addy Osmani frontend engineering

Build accessible responsive components using the project’s design system and behavior states.

Workflow

Addy Osmani’s frontend skill connects component architecture, state handling, accessibility, responsive layouts and visual polish with the project’s existing design conventions.

Use when

Build or refine production-facing frontend components.

Required inputs

UI task and audience needs
Project source, design tokens and supported viewports

Expected outputs

Implemented responsive components
Interaction and accessibility validation

Prerequisites

Frontend repository and existing design-system conventions.
A browser and relevant accessibility checks are required to validate rendered behavior.

Installation

Agent

Run this command in your project after reviewing the instructions and access terms. Install complete upstream directories to keep referenced rules and scripts.

npx skills add https://github.com/addyosmani/agent-skills/tree/aeac41d4d005999432bb7312f7ff06383a91d59d/skills/frontend-ui-engineering --skill frontend-ui-engineering --agent claude-code

Project file: .claude/skills/frontend-ui-engineering/SKILL.md

Read the setup guide

Selection brief

This brief helps you choose the skill. Read the complete upstream SKILL.md and companion files for its actual instructions.

# Addy Osmani frontend engineering (addy-osmani-frontend-engineering)
Addy Osmani’s frontend skill connects component architecture, state handling, accessibility, responsive layouts and visual polish with the project’s existing design conventions.

## Use when
- Build or refine production-facing frontend components.

## Required inputs
- UI task and audience needs
- Project source, design tokens and supported viewports

## Prerequisites
- Frontend repository and existing design-system conventions.
- A browser and relevant accessibility checks are required to validate rendered behavior.

## Expected outputs
- Implemented responsive components
- Interaction and accessibility validation

Source: https://github.com/addyosmani/agent-skills/blob/aeac41d4d005999432bb7312f7ff06383a91d59d/skills/frontend-ui-engineering/SKILL.md
Full SKILL.md: https://agenttaste.dev/skills/addy-osmani-frontend-engineering/SKILL.md

## Popularity evidence
- 108,660 GitHub repo stars — addyosmani/agent-skills; checked 2026-10-20. Source: https://github.com/addyosmani/agent-skills/stargazers
- 62,218 skill installs (all time) — addyosmani/agent-skills / frontend-ui-engineering · skills.sh · all time; checked 2026-10-20. Source: https://skills.sh/addyosmani/agent-skills/frontend-ui-engineering
Adoption counts are not user ratings or guarantees of quality.