What problem does it solve? AI-generated frontend code often looks generic, with clichéd layouts, default fonts, purple gradients, and missing loading or error states. This Skill enforces a strict set of design engineering rules so generated React and Next.js interfaces avoid common AI design patterns. ## Core Features & Use Cases - Design Constraint Engine: Applies tunable dials (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) that control layout asymmetry, animation intensity, and information density. - Anti-Pattern Enforcement: Bans Inter font, purple/blue gradients, centered heroes, 3-column card rows, emojis, generic placeholder names, and Unsplash links. - Motion & Bento Specs: Provides Framer Motion spring physics, staggered orchestration, perpetual micro-interactions, and a 5-card Bento grid architecture for SaaS dashboards. - Use Case: Ask for a SaaS pricing page or analytics dashboard, and receive Tailwind-styled React components with asymmetric layouts, skeleton loaders, empty states, and spring-based micro-animations instead of a generic centered hero. ## Quick Start Ask the AI to build a Next.js dashboard landing page using this design skill with high motion intensity and asymmetric layout.
