unocss

Distinctive, production-grade frontend interfaces that reject generic AI aesthetics through intentional design choices. Guides aesthetic direction selection (brutalist, maximalist, retro-futuristic, luxury, organic, etc.) before implementation to ensure cohesive, memorable designs Emphasizes typography, color theming with CSS variables, motion design, spatial composition, and textural details as core design pillars Generates working code (HTML/CSS/JS, React, Vue) that matches implementation complexity to the aesthetic vision, from refined minimalism to elaborate maximalism Explicitly avoids overused fonts, clichéd color schemes, and predictable layouts that characterize generic AI-generated interfaces

React and Next.js performance optimization across 70 rules prioritized by impact. Organized into 8 categories from critical (eliminating waterfalls, bundle optimization) to low priority (advanced patterns), each with specific, actionable rules prefixed for easy reference Covers server-side performance including React.cache() deduplication, parallel fetching, and serialization minimization Addresses client-side concerns: re-render optimization through memoization and dependency management, rendering performance with CSS strategies and hydration patterns Includes JavaScript-level optimizations like DOM batching, caching, and Set/Map lookups for O(1) performance Each rule includes detailed explanations, incorrect and correct code examples, and contextual guidance for automated refactoring and code generation

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven…

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks,…