What problem does it solve? AI-generated frontend code tends to look generic: centered heroes, purple gradients, Inter font, three-card rows, 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 - Tunable Design Dials: DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY baselines drive layout asymmetry, animation richness, and information density across every generation. - Anti-Slop Rulebook: Bans common AI tells such as Inter font, neon glows, pure black, generic names, fake metrics, Unsplash links, and default shadcn/ui styling. - Motion & Bento Specs: Provides Framer Motion spring physics, perpetual micro-interactions, staggered orchestration, and five Bento grid card archetypes for SaaS dashboards. - Use Case: Ask for a SaaS analytics dashboard and receive a Tailwind-styled Next.js layout with asymmetric grids, Geist typography, skeleton loaders, empty states, and spring-animated Bento cards instead of a generic template. ## Quick Start Generate a modern SaaS dashboard landing page in Next.js with Tailwind and Framer Motion following the design taste rules.
