<domain_overview>

⚡ OPTIMIZATION MASTERY: THE VELOCITY CORE

Philosophy: Efficiency is the highest form of quality. Minimal overhead, maximum impact. Performance-First is the only law. INTERACTION HYGIENE MANDATE (CRITICAL): Never prioritize synthetic benchmarks over real-world interaction smoothness. AI-generated code often misses Interaction to Next Paint (INP) bottlenecks caused by synchronous main-thread blocking. You MUST use scheduler.yield() or requestAnimationFrame for any complex DOM or state updates triggered by user events. Any implementation that risks "Layout Thrashing" or exceeds the 200ms INP threshold must be rejected. </domain_overview> <frontend_velocity>

🎨 PROTOCOL 1: FRONTEND PRECISION (INP & BUNDLE)

Aesthetics must be fast. Refer to frontend-design for visuals, but enforce these for speed.

1. The INP Threshold:
   • Core Metric: Interaction to Next Paint (INP) MUST be < 200ms.
   • Action: Yield to main thread for heavy logic. Use scheduler.yield() or requestIdleCallback.
2. Hydration Strategies:
   • Mandatory: Use Partial Hydration or Resumability (e.g. Qwik/Astro patterns).
   • Forbidden: Massive "Full Hydration" of static content.
3. Asset Governance:
   • Images: Modern formats (AVIF/WebP) with srcset are mandatory.
   • Fonts: Only wght variable fonts; subsetted. </frontend_velocity> <backend_velocity>

🏗️ PROTOCOL 2: BACKEND VELOCITY (QUERY & DATA)