What problem does it solve? AI-generated frontend code tends to fall into generic visual clichés: centered heroes, purple gradients, Inter font, three-column card rows, and static states. This Skill enforces a strict set of design engineering directives so generated React and Next.js interfaces avoid those patterns and follow consistent typography, color, layout, and motion rules. ## Core Features & Use Cases - Tunable design dials: DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY parameters drive layout asymmetry, animation behavior, and spacing density across all generated UI. - Bias-correction rules: Bans Inter font, neon glows, pure black, generic names, fake data, and 3-column card layouts; mandates skeleton loaders, empty states, error states, and tactile feedback. - Motion and Bento specs: Provides Framer Motion spring physics, staggered orchestration, perpetual micro-interactions, and a five-card Bento grid architecture for SaaS dashboards. - Use Case: Ask for a SaaS analytics dashboard and receive a Next.js implementation with asymmetric Bento grids, Geist typography, spring-animated cards, and mobile-safe responsive fallbacks instead of a generic template. ## Quick Start Build a Next.js dashboard landing page using the design-taste-frontend-v1 rules with default variance, motion, and density settings.
