What problem does it solve? LLMs tend to produce generic, clichéd frontend code: centered hero sections, purple gradients, Inter font, three-column card rows, and static UIs without loading or error states. This Skill overrides those default biases with metric-based design rules, strict component architecture, and performance guardrails so generated interfaces look intentionally designed rather than auto-generated. ## Core Features & Use Cases - Bias-Corrected Design Rules: Enforces deterministic typography (Geist, Satoshi, Cabinet Grotesk), single-accent color calibration, asymmetric layouts, and bans common AI tells like neon glows, pure black, and generic placeholder data. - Motion & Interaction Engineering: Implements Framer Motion spring physics, magnetic buttons, staggered orchestration, perpetual micro-interactions, and Bento grid archetypes with hardware-accelerated animations only. - Architecture Guardrails: Verifies dependencies in package.json before imports, isolates interactive components as Client Components, enforces Tailwind v3/v4 syntax compatibility, and mandates loading, empty, and error states. - Use Case: Ask for a SaaS dashboard and receive a Bento-grid layout with infinite-loop status indicators, a typewriter command input, skeleton loaders, and mobile-safe responsive collapse instead of a generic card grid. ## Quick Start Ask the AI to build a React dashboard or landing page and it will apply the design variance, motion intensity, and visual density baselines automatically.
