What problem does it solve? AI-generated frontend code often looks generic, uses clichéd layouts, and ignores performance and mobile constraints. This Skill enforces a strict set of design engineering rules so generated React/Next.js interfaces avoid common AI design patterns. ## Core Features & Use Cases - Design Baseline Configuration: Drives output through three tunable dials (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) that control layout asymmetry, animation level, and information density. - Anti-Pattern Enforcement: Bans common AI tells such as Inter font, purple gradients, centered heroes, 3-column card rows, emojis, and generic placeholder data. - Motion & Bento Specs: Provides concrete Framer Motion patterns including spring physics, layoutId transitions, staggered reveals, and five perpetual-motion Bento card archetypes. - Use Case: Ask the AI to build a SaaS dashboard landing page, and it will produce an asymmetric layout with Geist typography, a single desaturated accent color, skeleton loading states, and mobile-safe min-h-[100dvh] sections. ## Quick Start Ask the AI to build a pricing page or dashboard for your React app and it will apply these design rules automatically.
