Frontend Ui Engineering

This is a comprehensive guide for building UIs that don't look AI-generated. It's opinionated about avoiding the purple gradients, excessive rounding, and generic card grids that scream "made by a language model." You get solid patterns for component architecture, when to use different state management approaches, and accessibility requirements that actually matter. The spacing scale rules and composition-over-configuration examples are immediately useful. Best for projects where the UI quality bar is high and you want Claude to default to production patterns instead of placeholder aesthetics. Includes realistic guidance on keyboard navigation, focus management, and responsive design without the usual tutorial bloat.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.: 32
skills.sh installs: 77.8K
GitHub stars: 114.6K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add addyosmani/agent-skills --skill frontend-ui-engineering --agent claude-code

Installs into .claude/skills of the current project.

Files

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

Verify With What the Project Has

Run the project's own test, type-check, or lint commands. Don't install a framework, test runner, or type checker just to check your work; if the project has none, review the code against the Verification list and say what you could not run.