What problem does it solve? LLM-generated frontend code tends to produce generic, clichéd interfaces with centered heroes, purple gradients, Inter fonts, and static states. This Skill enforces metric-based design rules and strict component architecture so generated UI code avoids these default AI biases. ## Core Features & Use Cases - Bias-Corrected Design Rules: Bans common AI tells such as neon glows, pure black, 3-column card rows, generic names, and Unsplash links, while enforcing deterministic typography and single-accent color palettes. - Configurable Design Dials: Drives output through three tunable baselines (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) that control layout asymmetry, animation depth, and information density. - Motion & Performance Guardrails: Specifies Framer Motion spring physics, staggered orchestration, hardware-accelerated transforms, and mandatory loading, empty, and error states. - Use Case: Ask for a SaaS dashboard bento grid and receive Next.js code with perpetual micro-interactions, isolated client components, diffusion shadows, and mobile-safe responsive fallbacks instead of a generic card layout. ## Quick Start Use the design-taste-frontend skill to build a Next.js landing page with an asymmetric hero, bento grid features, and Framer Motion animations.
