What problem does it solve? AI-generated frontend code often looks generic, uses clichéd layouts, and ignores performance pitfalls. This Skill enforces a strict set of design engineering rules so generated React/Next.js interfaces avoid common AI design tells and follow consistent typography, color, layout, and motion standards. ## Core Features & Use Cases - Tunable Design Dials: DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY parameters (default 8/6/4) drive layout asymmetry, animation richness, and information density. - Bias-Correction Rules: Bans Inter font, purple gradients, centered heroes, 3-column card rows, pure black, and generic placeholder data to avoid AI slop patterns. - Motion & Bento Specs: Defines Framer Motion spring physics, perpetual micro-interactions, staggered orchestration, and a 5-card Bento grid archetype for SaaS dashboards. - Use Case: Ask your agent to build a SaaS landing page or dashboard; it will produce Tailwind-styled React components with asymmetric layouts, liquid glass effects, and performance-safe animations instead of a generic template. ## Quick Start Ask your agent to build a modern SaaS dashboard with a bento grid layout using this frontend design skill.
