What problem does it solve? LLM-generated frontend code tends to look generic: centered heroes, purple gradients, Inter font, three-card rows, and missing loading or error states. This Skill enforces a detailed set of design engineering rules so generated React and Next.js interfaces avoid those clichés and follow consistent typography, color, layout, and motion standards. ## Core Features & Use Cases - Tunable design dials: DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY baselines drive layout asymmetry, animation level, and information density per generation. - Bias-correction rules: Bans Inter font, purple glows, pure black, 3-column card rows, generic names, and fake data; mandates dependency checks against package.json, Tailwind version guards, and min-h-[100dvh] viewport safety. - Motion and Bento patterns: Specifies Framer Motion spring physics, staggered orchestration, perpetual micro-interactions, and five animated Bento card archetypes for SaaS dashboards. - Use Case: Ask for a SaaS analytics dashboard and receive a Bento-grid layout with infinite-loop micro-animations, isolated client components, skeleton loaders, and empty states instead of a static card page. ## Quick Start Ask the AI to build a React dashboard or landing page and it will apply these design, motion, and anti-cliché rules to the generated code.
