What problem does it solve? LLM-generated frontend code tends toward generic, clichéd interfaces: centered heroes, purple gradients, Inter font, three-column card rows, and static states. This Skill enforces a rule-based design system that overrides those default biases to produce distinctive, production-quality UI code. ## Core Features & Use Cases - Metric-Driven Design Dials: Configurable DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY levels (1-10) that deterministically control layout asymmetry, animation complexity, and information density. - Bias-Correction Rules: Bans common AI tells such as neon glows, pure black, Inter font, generic names like "John Doe", Unsplash links, and 3-column card layouts, replacing them with engineered alternatives. - Motion & Architecture Specs: Enforces Framer Motion spring physics, hardware-accelerated transforms, isolated Client Components for interactivity, Tailwind version guards, and a Bento grid paradigm with perpetual micro-interactions. - Use Case: Ask for a SaaS dashboard landing page and receive Next.js code with asymmetric bento grids, skeleton loading states, magnetic buttons using useMotionValue, and a curated font pairing instead of a generic centered hero. ## Quick Start Ask the AI to build a React dashboard or landing page and it will apply the design variance, motion, and density rules automatically.
