What problem does it solve? AI-generated frontend code often looks generic, with clichéd layouts, default fonts, and missing interaction states. This Skill preserves the original v1 design rule set so projects that depend on its exact visual behavior keep producing consistent, distinctive interfaces. ## Core Features & Use Cases - Design Engineering Directives: Enforces deterministic typography, single-accent color calibration, asymmetric layouts, and bans common AI design tells like Inter font, purple gradients, and 3-column card rows. - Motion & Interaction Specs: Defines Framer Motion spring physics, perpetual micro-interactions, staggered orchestration, and a Bento 2.0 dashboard paradigm with five animated card archetypes. - Performance Guardrails: Mandates transform/opacity-only animations, isolated Client Components for perpetual motion, min-h-[100dvh] viewport safety, and dependency verification against package.json. - Use Case: A team maintaining a product originally built with the v1 design rules uses this Skill to generate new pages that match the established visual system exactly, rather than migrating to the v2 rewrite. ## Quick Start Ask the agent to build a React dashboard page using the v1 design-taste rules with your brand colors and content.
