What problem does it solve?
Provides senior-level frontend and UI/UX guidance to eliminate generic AI design outputs and deliver production-ready, high-performance interfaces that follow strict architectural and motion guardrails. It reduces iteration cycles by enforcing deterministic typography, component isolation, dependency verification, responsive fallbacks, and full interaction states.
Core Features & Use Cases
- Design baseline enforcement: Enforces global design variables (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) and adapts them only when explicitly requested.
- Architecture & conventions: Prescribes React/Next.js Server/Client component rules, Tailwind usage, state management patterns, and dependency checks before importing libraries.
- Motion and performance rules: Specifies Framer Motion usage, hardware-accelerated animations, isolation of perpetual loops, and mobile performance guardrails.
- Production-ready UX patterns: Requires loading, empty, and error states, anti-slop content rules (no emojis, no Inter font, no neon glows), and high-fidelity micro-interactions.
- Use case: Convert a product dashboard brief into a split-screen, asymmetric React prototype with isolated motion components, tailored typography, and skeleton/loading/error states for production handoff.
Quick Start
Design a responsive React/Next.js dashboard using Tailwind and Framer Motion that follows the High-Agency baseline (DESIGN_VARIANCE 8, MOTION_INTENSITY 6, VISUAL_DENSITY 4), includes isolated client motion components, dependency checks, and complete loading/empty/error states.
