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 to Claude Code

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