What problem does it solve? AI-generated frontend code often looks generic, with cliché 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 look distinctive, polished, and production-consistent. ## Core Features & Use Cases - Design Dial System: Configurable DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY levels (default 8/6/4) that drive layout asymmetry, animation richness, and information density. - Anti-Slop Rules: Bans Inter font, purple/blue AI gradients, centered hero sections, 3-column card rows, emojis, and generic placeholder content like "John Doe" or Unsplash links. - Motion & Bento Patterns: Provides Framer Motion spring physics specs, perpetual micro-interactions, staggered orchestration, and five Bento grid card archetypes with infinite-loop animations. - Use Case: Ask the AI to build a SaaS dashboard landing page, and it will produce an asymmetric hero, Geist typography, liquid-glass cards with spring-physics micro-animations, and complete loading/empty/error states instead of a generic template. ## Quick Start Ask the AI to build a React dashboard or landing page and it will apply these design rules, motion specs, and typography constraints automatically.
