frontend-ui-engineering

Core guidelines from Addy Osmani on frontend performance, accessible component structures, responsive typography, and state management patterns.

Publisher: Addy Osmani•Audited: 2026-11-02•Agents: Claude Code, Cursor, Codex, Windsurf

Install Command

npx skills add addyosmani/agent-skills --skill frontend-ui-engineering

Source Repository•View on skills.sh

When to use this skill

•Building new UI component systems or landing page layouts
•Refactoring client components for responsive web performance and Core Web Vitals
•Ensuring WCAG accessibility standards across forms and dialogs

Package Files

SKILL.mdSource File

references/performance.mdSource File

references/accessibility.mdSource File

Related design Skills

web-design-guidelines

Design system best practices ensuring clean layout hierarchy, consistent margins, accessible contrast, and refined dark-mode aesthetics.

impeccable

Strict visual rules for typography scales, deliberate spacing tokens, accessible contrast, and layout polish to prevent generic AI interface slop.

taste-skill

Replaces generic bootstrap-style layouts with intentional aesthetic direction, browser visual checks, and high-taste design patterns.

Production grade starter repo

Pre built starter repo with auth, databases, backend, and AI integrations already configured based on your tech stack of choice (worth $200+ and saves you 30+ hours of configuration).

6 Core Languages Supported18+ Frontend • 45+ Backend

TypeScript

React Native

Rust

Python

Java

Custom PRD & business logicTasks streamed via MCPAgent skills pre-installed

Build with your agent