What problem does it solve? AI-generated UI often looks generic, reuses the same fonts and purple gradients, and ships without visual verification. This Skill guides the creation of distinctive, production-grade frontend interfaces that reuse the existing design system and are verified in a real browser before handoff. ## Core Features & Use Cases - Existing UI Discovery: Inspects component directories, styling systems, tokens, fonts, and dependencies so new work extends established patterns instead of duplicating them. - Design System First: Defines palette, typography, layout, components, and motion before coding, with bold aesthetic direction that avoids generic AI looks. - Quality Gates & Rendered Verification: Enforces mobile-first, accessibility, responsive, and interaction-state checks, then captures screenshots at multiple breakpoints and exercises real interactions. - Use Case: Ask for a redesigned settings page; the Skill inspects your Tailwind config and component library, builds a cohesive redesign, runs the dev server, and verifies desktop and mobile screenshots before delivery. ## Quick Start Ask the agent to build or redesign a web page, component, or dashboard and have it verify the result with browser screenshots at mobile and desktop widths.
