What problem does it solve? AI-generated UI tends to look generic: gradient backgrounds, low information density, decorative motion, and inconsistent typography. This Skill encodes a concrete design discipline so interfaces built by coding agents stop reading as machine-generated and instead follow structural, typographic, and motion rules. ## Core Features & Use Cases - Banned-pattern enforcement: Blocks AI-tell patterns such as gradient text, glassmorphism, side-stripe borders, hero-metric templates, and cream-colored body backgrounds, plus banned marketing copy phrases. - Structural design rules: Mandates information architecture before visuals, density-first layouts, a 3-size type token system, one primary action color per view, and motion under 250ms with ease-out curves. - Mobile-first dual-quality: Requires layouts to start at 360-390px and pass screenshot review on both mobile and desktop viewports before merge, with components composed from @repo/ui (Radix/shadcn) rather than hand-rolled primitives. - Use Case: When asked to build a dashboard page, the Skill guides the agent to define hierarchy and primary action first, use tabular metrics instead of card grids, apply the 3-token type system, and verify both viewports with screenshots. ## Quick Start Ask the agent to build or modify a UI screen, such as "redesign the settings page following the frontend design discipline," and the Skill's rules apply automatically.
