What problem does it solve? LLM-generated frontend code tends to look generic: centered heroes, purple gradients, Inter font, three-card feature rows, and missing loading or error states. This Skill encodes a strict set of design engineering directives that force React/Next.js and Tailwind output toward distinctive, high-end interfaces with correct motion, typography, and layout decisions. ## Core Features & Use Cases - Design Bias Correction: Enforces rules against AI clichés such as neon glows, pure black, Inter font, generic names, and 3-column card layouts, with concrete replacements (Geist/Satoshi fonts, zinc bases, asymmetric grids). - Tunable Design Dials: Drives output through three configurable baselines — DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY — that control layout asymmetry, animation depth, and information density. - Motion & Bento Specifications: Provides Framer Motion spring physics, staggered orchestration, perpetual micro-interactions, and a five-archetype Bento grid pattern for SaaS dashboards, plus performance guardrails (transform-only animation, isolated client components). - Use Case: Ask for a SaaS landing page or dashboard and receive Next.js code with split-screen heroes, liquid-glass cards, magnetic buttons, skeleton loaders, and mobile-safe min-h-[100dvh] layouts instead of a generic template. ## Quick Start Ask the AI to build a React dashboard or landing page for your product and it will apply these design directives, dependency checks, and motion rules automatically.
