tribunal-kit 8.0.0 → 9.0.1

package/.agent/workflows/tribunal-mobile.md

@@ -26,6 +26,11 @@ Before auditing React Native, Expo, or native mobile code, you MUST inspect:
 2. Gesture & 60fps Motion Rules → Enforce `react-native-reanimated` worklets on UI thread; ban JavaScript bridge layout thrashing
 3. 3-Reviewer Mobile Gate → Run logic-reviewer, security-auditor, and mobile-reviewer before approving mobile component diffs
 
+4. Required Skills → Before executing, load and follow procedural rules from:
+   - `building-native-ui` (.agent/skills/building-native-ui/SKILL.md): Native UI component patterns for cross-platform apps
+   - `mobile-design` (.agent/skills/mobile-design/SKILL.md): Mobile-first design for iOS, Android, touch, haptics, 120Hz
+   - `swiftui-expert` (.agent/skills/swiftui-expert/SKILL.md): SwiftUI declarative UI, @Observable, NavigationStack, Charts
+
 ---
 
 ## When to Use /tribunal-mobile

package/.agent/workflows/tribunal-performance.md

@@ -26,6 +26,11 @@ Before optimizing code or running performance reviews, you MUST inspect:
 2. Measured Baseline Metrics → Run `bundle_analyzer.js` or latency measurements; ban claiming performance improvements without measured proof
 3. 2-Reviewer Performance Gate → Run logic-reviewer and performance-optimizer before approving optimization diffs
 
+4. Required Skills → Before executing, load and follow procedural rules from:
+   - `performance-profiling` (.agent/skills/performance-profiling/SKILL.md): Performance measurement methodology and profiling tools
+   - `60fps-animation` (.agent/skills/60fps-animation/SKILL.md): GPU compositor-friendly properties and layout thrash avoidance
+   - `gsap-performance` (.agent/skills/gsap-performance/SKILL.md): GSAP animation performance optimization and GPU acceleration
+
 ---
 
 ## When to Use /tribunal-performance

package/.agent/workflows/tribunal-speed.md

@@ -26,6 +26,11 @@ Before running a full-stack performance audit, you MUST inspect:
 2. Max 5 AI Call Ceiling → Cap swarm executions to 3 parallel specialists + 1 synthesis step to prevent token explosion
 3. Ranked Impact Synthesis → Output findings strictly in a single unified table prioritized by user-facing latency impact
 
+4. Required Skills → Before executing, load and follow procedural rules from:
+   - `performance-profiling` (.agent/skills/performance-profiling/SKILL.md): Performance measurement methodology and profiling tools
+   - `observability` (.agent/skills/observability/SKILL.md): Distributed tracing, metrics, and monitoring instrumentation
+   - `edge-computing` (.agent/skills/edge-computing/SKILL.md): Edge runtime patterns, cold starts, and regional deployment
+
 ---
 
 ## When to Use /tribunal-speed

package/.agent/workflows/tribunal-ui.md

@@ -28,6 +28,13 @@ Before executing dedicated UI/UX audits or design-system reviews, you MUST inspe
 2. Product Domain Category → Select category heuristics (Dashboard, E-Commerce, Landing Page, Mobile App, Marketing)
 3. 7-Reviewer Dedicated UI Gate → Run ux-auditor, visual-auditor, interaction-auditor, anti-pattern-auditor, product-heuristics, a11y-auditor, and visual-auditor before passing designs
 
+4. Required Skills → Before executing, load and follow procedural rules from:
+   - `ui-reasoning-engine` (.agent/skills/ui-reasoning-engine/SKILL.md): 16-step cognitive pipeline for layout and styling decisions
+   - `product-aware-heuristics` (.agent/skills/product-aware-heuristics/SKILL.md): Visual heuristics tailored to product types (SaaS, AI, fintech)
+   - `ui-ux-pro-max` (.agent/skills/ui-ux-pro-max/SKILL.md): Elite UI/UX with Anti-Pattern controls and portfolio-grade output
+   - `frontend-design` (.agent/skills/frontend-design/SKILL.md): Design engineering with OKLCH color syntax, spatial grid math
+   - `web-design-guidelines` (.agent/skills/web-design-guidelines/SKILL.md): APCA contrast, Core Web Vitals, battery-efficient rendering
+
 ---
 
 ## When to Use /tribunal-ui

package/.agents/plugins/marketplace.json

@@ -0,0 +1,20 @@
+{
+  "name": "tribunal-kit",
+  "interface": {
+    "displayName": "Tribunal Kit"
+  },
+  "plugins": [
+    {
+      "name": "tribunal-kit",
+      "source": {
+        "source": "url",
+        "url": "./"
+      },
+      "policy": {
+        "installation": "AVAILABLE",
+        "authentication": "ON_INSTALL"
+      },
+      "category": "Developer Tools"
+    }
+  ]
+}

package/.agents/skills/12-principles-of-animation/SKILL.md

@@ -0,0 +1,126 @@
+---
+name: 12-principles-of-animation
+description: Use when Application of Disney's 12 Principles of Animation (Squash & Stretch, Anticipation, Staging, Follow Through, Slow In & Slow Out, Arc, Secondary Action, Timing, Exaggeration, Solid Drawing, Appeal) to modern web UI motion.
+version: 5.0.0
+last-updated: 2026-09-13
+skills:
+  - motion-engineering
+  - 60fps-animation
+  - accessible-animation
+tools: Read, Grep, Glob, Bash, Edit, Write
+scripts-binding:
+  - .agent/scripts/lint_runner.js
+  - .agent/scripts/verify_all.js
+---
+
+# 12 Principles of Animation — Web UI Motion Theory
+
+## Mandatory Pre-Flight Context Inspection
+
+Before generating, refactoring, or reviewing code in the `12-principles-of-animation` domain, inspect these 5 critical parameters:
+
+1. **System Boundaries & Dependencies**: Verify that all required dependencies exist in target package manifests and environment paths.
+2. **Runtime Context & Platform Invariants**: Confirm target platform constraints (Node.js, Browser, Mobile OS, Edge runtime) before applying APIs.
+3. **Execution Guardrails**: Identify potential side-effects, state mutations, and unhandled asynchronous exceptions.
+4. **Validation & Type Contracts**: Validate input data schemas and strict type constraints across all module interfaces.
+5. **Observability & Proof of Execution**: Ensure execution produces tangible verification signals (terminal output, tests, metrics).
+
+## Activation Boundaries
+
+- **Activate when:** Use when Application of Disney's 12 Principles of Animation (Squash & Stretch, Anticipation, Staging, Follow Through, Slow In & Slow Out, Arc, Secondary Action, Timing, Exaggeration, Solid Drawing, Appeal) to modern web UI motion.
+- **DO NOT activate when:** The task falls outside the `12-principles-of-animation` domain or is managed by a different dedicated specialist.
+
+## 🔁 Multi-Pass Execution Protocol
+
+Execute all non-trivial tasks through this 7-pass cognitive loop:
+
+| Pass | Phase | Core Action |
+|:---|:---|:---|
+| **Pass 1** | **Understand** | Deconstruct the user's explicit objective, implicit requirements, and platform constraints. |
+| **Pass 2** | **Plan** | Decompose the task into smallest logical steps; map dependencies and required tool calls. |
+| **Pass 3** | **Execute** | Implement the solution with production-grade craft, zero placeholders, and strict typing. |
+| **Pass 4** | **Verify** | Run linters, unit tests, or compiler checks to validate structural correctness. |
+| **Pass 5** | **Attack** | Perform an adversarial review searching for edge-case failures, race conditions, and traps. |
+| **Pass 6** | **Improve** | Eliminate discovered friction, optimize performance, and harden error boundaries. |
+| **Pass 7** | **Quality Gate** | Enforce Verification-Before-Completion (VBC) with concrete terminal proof before finalizing. |
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+---
+
+
+---
+
+## The 6 Essential Web Principles
+
+### 1. Squash & Stretch (Scale Elasticity)
+
+- Compress elements slightly on impact (e.g. button press down `scale(0.97)`), then stretch slightly on release (`scale(1.02)` -> `scale(1)`).
+- **Rule**: Preserve overall volume. If height decreases by 5%, width must expand by 5%.
+
+### 2. Anticipation (Pre-Motion Cue)
+
+- Before a major movement (e.g. modal sliding up), perform a micro-backwards movement (e.g. shift down `2px` for `40ms`) to prepare the user's eye.
+
+### 3. Staging (Focus & Spatial Hierarchy)
+
+- Direct user attention to one primary animation at a time. Never animate competing layout elements across different regions simultaneously.
+
+### 4. Slow In & Slow Out (Easing Curves)
+
+- Objects in nature start slow, accelerate, and decelerate gradually. Use strong ease-out curves (`cubic-bezier(0.16, 1, 0.3, 1)`) for UI entrances.
+
+### 5. Arcs (Natural Curvilinear Trajectories)
+
+- Human arms and physical objects move in curved arcs rather than mechanical straight lines. When moving elements across 2D space, use parabolic bezier curves or `offset-path`.
+
+### 6. Follow Through & Overlapping Action
+
+- Secondary elements (e.g. badge text inside a sliding card) lag slightly behind the main container (stagger delay 30ms - 50ms), creating organic physical realism.
+
+---
+
+## 🚨 Edge-Case & Failure Mode Matrix
+
+| Scenario | Risk | Mitigation Strategy |
+|:---|:---|:---|
+| **Empty or Null Inputs** | Unhandled exception or unexpected rendering collapse | Enforce fallback guards, optional chaining, and explicit empty state handlers |
+| **Network Timeout / Latency** | Hanging operations or duplicate side-effects | Implement bounded abort controllers, exponential backoff, and idempotency keys |
+| **Concurrency / Race Conditions** | Stale state overwrite or inconsistent data mutations | Use atomic transactions, mutex locking, or cancel-on-resubmit controls |
+| **Invalid Schema / Malformed Payload** | Downstream runtime errors or security injection | Validate boundary payloads with Zod/Pydantic schemas prior to execution |
+| **Resource / Memory Saturation** | OOM errors, frame drops, or memory leaks | Clean up listeners, cancel active timers, and enforce pagination/virtualization |
+
+---
+
+## 🤖 LLM-Specific Traps Table
+
+| Anti-Pattern | What AI Commonly Does Wrong | What Is Actually Correct |
+|:---|:---|:---|
+| **The Instant Pop Trap** | Conditionally unmounting elements without animated interpolation | Use AnimatePresence or coordinate morphs with continuous geometry |
+| **Layout Thrashing** | Animating width, height, top, or left inside animation loops | Animate composite-only transform (translate3d, scale) and opacity |
+| **Sluggish Duration** | Setting micro-interaction transitions to 600ms+ causing interface lag | Cap interactive feedback at 160ms–240ms with snappy ease-out curves |
+
+---
+
+## 🏛️ Tribunal Verification & Guardrails
+
+**Active Reviewers:** `frontend-reviewer` · `motion-reviewer` · `ui-ux-auditor`
+**Slash Command:** `/review` or `/tribunal-full`
+
+### ✅ Pre-Flight Self-Audit Checklist
+
+```
+✅ Does animation maintain 60fps/120fps using transform and opacity?
+✅ Is optical mass conserved across state interpolations without volume collapse?
+✅ Is duration capped within micro-interaction budgets (160ms–280ms)?
+✅ Is prefers-reduced-motion respected with graceful instant fallbacks?
+✅ Did I prevent layout thrashing and continuous geometry mutations?
+```
+
+### 🛑 Verification-Before-Completion (VBC) Protocol
+
+**CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
+- ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
+- ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing test suites, compiler success, or equivalent operational proof) that your output works as intended.

package/.agents/skills/60fps-animation/SKILL.md

@@ -0,0 +1,164 @@
+---
+name: 60fps-animation
+description: Use when Web animation performance guidance for avoiding layout thrashing, achieving 60/120fps motion, and using GPU compositor-friendly properties (transform, opacity).
+version: 5.0.0
+last-updated: 2026-09-13
+skills:
+  - motion-engineering
+  - accessible-animation
+  - fixing-motion-performance
+tools: Read, Grep, Glob, Bash, Edit, Write
+scripts-binding:
+  - .agent/scripts/lint_runner.js
+  - .agent/scripts/verify_all.js
+---
+
+# 60fps Animation — GPU Compositor & High-Performance Motion
+
+## Mandatory Pre-Flight Context Inspection
+
+Before generating, refactoring, or reviewing code in the `60fps-animation` domain, inspect these 5 critical parameters:
+
+1. **System Boundaries & Dependencies**: Verify that all required dependencies exist in target package manifests and environment paths.
+2. **Runtime Context & Platform Invariants**: Confirm target platform constraints (Node.js, Browser, Mobile OS, Edge runtime) before applying APIs.
+3. **Execution Guardrails**: Identify potential side-effects, state mutations, and unhandled asynchronous exceptions.
+4. **Validation & Type Contracts**: Validate input data schemas and strict type constraints across all module interfaces.
+5. **Observability & Proof of Execution**: Ensure execution produces tangible verification signals (terminal output, tests, metrics).
+
+## Activation Boundaries
+
+- **Activate when:** Use when Web animation performance guidance for avoiding layout thrashing, achieving 60/120fps motion, and using GPU compositor-friendly properties (transform, opacity).
+- **DO NOT activate when:** The task falls outside the `60fps-animation` domain or is managed by a different dedicated specialist.
+
+## 🔁 Multi-Pass Execution Protocol
+
+Execute all non-trivial tasks through this 7-pass cognitive loop:
+
+| Pass | Phase | Core Action |
+|:---|:---|:---|
+| **Pass 1** | **Understand** | Deconstruct the user's explicit objective, implicit requirements, and platform constraints. |
+| **Pass 2** | **Plan** | Decompose the task into smallest logical steps; map dependencies and required tool calls. |
+| **Pass 3** | **Execute** | Implement the solution with production-grade craft, zero placeholders, and strict typing. |
+| **Pass 4** | **Verify** | Run linters, unit tests, or compiler checks to validate structural correctness. |
+| **Pass 5** | **Attack** | Perform an adversarial review searching for edge-case failures, race conditions, and traps. |
+| **Pass 6** | **Improve** | Eliminate discovered friction, optimize performance, and harden error boundaries. |
+| **Pass 7** | **Quality Gate** | Enforce Verification-Before-Completion (VBC) with concrete terminal proof before finalizing. |
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+---
+
+
+## 2026 Motion Performance & GPU Invariants
+
+1. **CSS `@starting-style` Native Transitions**:
+   ```css
+   /* Native entry animation without JS transition wrappers */
+   dialog[open] {
+     opacity: 1;
+     transform: scale(1);
+     transition: opacity 200ms ease, transform 200ms ease;
+     @starting-style {
+       opacity: 0;
+       transform: scale(0.95);
+     }
+   }
+   ```
+2. **Native Scroll-Driven Animations**: Use CSS `animation-timeline: view()` or `scroll()` to run scroll animations directly on the compositor thread without firing JavaScript scroll event handlers.
+3. **No Layout Thrashing in JS**: Never interleave DOM reads (`element.getBoundingClientRect()`, `offsetHeight`) with DOM writes (`style.transform`). Batch reads first, then writes in `requestAnimationFrame()`.
+
+## Hallucination Traps (Read First)
+
+- ❌ Animating `top`, `left`, `width`, `height` → ✅ Animate `transform: translate3d(...)` and `scale(...)`
+- ❌ Using JavaScript scroll listeners for parallax/fade → ✅ Use native CSS `animation-timeline`
+- ❌ Setting `will-change: transform` globally on every element → ✅ Blows GPU VRAM; apply only during active interaction
+- ❌ Animating box-shadow directly → ✅ Animate `opacity` on a pseudo-element (`::after`) with pre-rendered shadow
+
+---
+
+## 4 Performance Rules
+
+### 1. Compositor-Only Animation Pipeline
+
+Only animate properties handled strictly by the GPU compositor layer:
+
+- ✅ **Compositor Properties** (Zero Layout / Zero Paint): `transform` (`translate3d`, `scale`, `rotate`) and `opacity`.
+- ❌ **Forbidden Animating Properties** (Triggers Full Layout Re-calculation): `width`, `height`, `margin`, `padding`, `top`, `left`, `border-width`.
+
+### 2. Replacing Width/Height Transitions with Scale Math
+
+Instead of animating `width: 100px` to `200px`:
+
+```css
+/* BAD: Triggers Layout recalculation on every frame */
+.box-bad {
+  transition: width 300ms ease;
+}
+
+/* GOOD: GPU Compositor Hardware Accelerated */
+.box-good {
+  transform: scaleX(2);
+  transform-origin: left center;
+  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+```
+
+### 3. `will-change` Management
+
+- Apply `will-change: transform, opacity` ONLY right before or during active animation.
+- Remove `will-change` when animation completes to free up GPU VRAM memory!
+
+### 4. Layout Thrashing Prevention in JS
+
+- Never interleave DOM reads (`element.offsetHeight`) with DOM writes (`element.style.height = ...`) inside requestAnimationFrame or scroll handlers. Batch all reads first, then perform all writes.
+
+---
+
+## 🚨 Edge-Case & Failure Mode Matrix
+
+| Scenario | Risk | Mitigation Strategy |
+|:---|:---|:---|
+| **Empty or Null Inputs** | Unhandled exception or unexpected rendering collapse | Enforce fallback guards, optional chaining, and explicit empty state handlers |
+| **Network Timeout / Latency** | Hanging operations or duplicate side-effects | Implement bounded abort controllers, exponential backoff, and idempotency keys |
+| **Concurrency / Race Conditions** | Stale state overwrite or inconsistent data mutations | Use atomic transactions, mutex locking, or cancel-on-resubmit controls |
+| **Invalid Schema / Malformed Payload** | Downstream runtime errors or security injection | Validate boundary payloads with Zod/Pydantic schemas prior to execution |
+| **Resource / Memory Saturation** | OOM errors, frame drops, or memory leaks | Clean up listeners, cancel active timers, and enforce pagination/virtualization |
+
+---
+
+## 🤖 LLM-Specific Traps Table
+
+| Anti-Pattern | What AI Commonly Does Wrong | What Is Actually Correct |
+|:---|:---|:---|
+| **The Instant Pop Trap** | Conditionally unmounting elements without animated interpolation | Use AnimatePresence or coordinate morphs with continuous geometry |
+| **Layout Thrashing** | Animating width, height, top, or left inside animation loops | Animate composite-only transform (translate3d, scale) and opacity |
+| **Sluggish Duration** | Setting micro-interaction transitions to 600ms+ causing interface lag | Cap interactive feedback at 160ms–240ms with snappy ease-out curves |
+
+---
+
+## 🏛️ Tribunal Verification & Guardrails
+
+**Active Reviewers:** `frontend-reviewer` · `motion-reviewer` · `ui-ux-auditor`
+**Slash Command:** `/review` or `/tribunal-full`
+
+### ✅ Pre-Flight Self-Audit Checklist
+
+```
+✅ Does animation maintain 60fps/120fps using transform and opacity?
+✅ Is optical mass conserved across state interpolations without volume collapse?
+✅ Is duration capped within micro-interaction budgets (160ms–280ms)?
+✅ Is prefers-reduced-motion respected with graceful instant fallbacks?
+✅ Did I prevent layout thrashing and continuous geometry mutations?
+```
+
+### 🛑 Verification-Before-Completion (VBC) Protocol
+
+**CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
+- ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
+- ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing test suites, compiler success, or equivalent operational proof) that your output works as intended.

package/.agents/skills/accessible-animation/SKILL.md

@@ -0,0 +1,266 @@
+---
+name: accessible-animation
+description: Use when implementing WCAG 2.2 AA compliant UI motion, tiered reduced-motion patterns, vestibular trigger suppression, and accessible transitions across CSS, React, Framer Motion, and GSAP.
+version: 5.0.0
+last-updated: 2026-09-13
+skills:
+  - 60fps-animation
+  - motion-engineering
+  - framer-motion-expert
+  - review-animations
+tools: Read, Grep, Glob, Bash, Edit, Write
+scripts-binding:
+  - .agent/scripts/lint_runner.js
+  - .agent/scripts/verify_all.js
+---
+
+# Accessible Animation — Tiered Reduced-Motion Architecture & WCAG 2.2 AA Compliance
+
+## Mandatory Pre-Flight Context Inspection
+
+Before generating, refactoring, or reviewing code in the `accessible-animation` domain, inspect these 5 critical parameters:
+
+1. **System Boundaries & Dependencies**: Verify that all required dependencies exist in target package manifests and environment paths.
+2. **Runtime Context & Platform Invariants**: Confirm target platform constraints (Node.js, Browser, Mobile OS, Edge runtime) before applying APIs.
+3. **Execution Guardrails**: Identify potential side-effects, state mutations, and unhandled asynchronous exceptions.
+4. **Validation & Type Contracts**: Validate input data schemas and strict type constraints across all module interfaces.
+5. **Observability & Proof of Execution**: Ensure execution produces tangible verification signals (terminal output, tests, metrics).
+
+## Activation Boundaries
+
+- **Activate when:** Use when implementing WCAG 2.2 AA compliant UI motion, tiered reduced-motion patterns, vestibular trigger suppression, and accessible transitions across CSS, React, Framer Motion, and GSAP.
+- **DO NOT activate when:** The task falls outside the `accessible-animation` domain or is managed by a different dedicated specialist.
+
+## 🔁 Multi-Pass Execution Protocol
+
+Execute all non-trivial tasks through this 7-pass cognitive loop:
+
+| Pass | Phase | Core Action |
+|:---|:---|:---|
+| **Pass 1** | **Understand** | Deconstruct the user's explicit objective, implicit requirements, and platform constraints. |
+| **Pass 2** | **Plan** | Decompose the task into smallest logical steps; map dependencies and required tool calls. |
+| **Pass 3** | **Execute** | Implement the solution with production-grade craft, zero placeholders, and strict typing. |
+| **Pass 4** | **Verify** | Run linters, unit tests, or compiler checks to validate structural correctness. |
+| **Pass 5** | **Attack** | Perform an adversarial review searching for edge-case failures, race conditions, and traps. |
+| **Pass 6** | **Improve** | Eliminate discovered friction, optimize performance, and harden error boundaries. |
+| **Pass 7** | **Quality Gate** | Enforce Verification-Before-Completion (VBC) with concrete terminal proof before finalizing. |
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+Motion in digital interfaces elevates feedback and delight, but for users with vestibular disorders, inner-ear sensitivities, or cognitive processing differences, unrestrained motion causes severe nausea, vertigo, migraines, and physical disorientation. A master-grade accessible motion architecture does not bluntly disable all UI feedback; it systematically applies tiered reduction—preserving vital state changes and subtle opacity fades while eliminating spatial translations, zoom scales, parallax shifts, and rapid flashes.
+
+---
+
+
+---
+
+
+---
+
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+### 1. The Vestibular Trigger Substitution Matrix
+
+| Disorienting Trigger | Vestibular Hazard | Accessible Compliant Substitution |
+|:---|:---|:---|
+| **Full-Page Parallax** | Severe nausea, spatial imbalance | Static layout positioning with subtle content opacity reveal |
+| **Multi-Axis 3D Rotation** | Visual vertigo, disorientation | 2D elevation shadow transition or subtle border glow |
+| **Rapid Zoom / Scale (>1.2x)** | Depth perception distortion | Gentle scale (1.0 to 1.02x) or immediate 150ms opacity cross-fade |
+| **Infinite Spinning Spinners** | Cognitive fatigue, dizziness | Pulsing opacity indicator or static step progress bar |
+| **Off-Canvas Fly-In Drawer** | Visual lurching across viewport | Immediate opacity dissolve (`0` to `1` over 120ms) |
+
+---
+
+### 2. Four Production-Grade Implementation Recipes
+
+#### Recipe 1: CSS Non-Destructive Global Safety Harness
+
+```css
+/* Universal Non-Destructive Reset: Preserves JS event hooks while eliminating movement */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    /* 0.001ms duration ensures transitionend & animationend events still fire reliably */
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+
+  /* Exceptions: Allow intentional, gentle micro-fades for essential state comprehension */
+  .accessible-fade {
+    transition: opacity 150ms ease-out !important;
+  }
+}
+```
+
+---
+
+#### Recipe 2: SSR-Safe React Hook (`useAccessibleMotion`)
+
+Prevents hydration mismatch warnings by defaulting to safe state until client mounts:
+
+```tsx
+import { useState, useEffect } from 'react';
+
+export function useAccessibleMotion(): boolean {
+  // Default to false on server to match initial HTML render
+  const [shouldReduceMotion, setShouldReduceMotion] = useState(false);
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return;
+
+    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+    setShouldReduceMotion(mediaQuery.matches);
+
+    const handleChange = (e: MediaQueryListEvent) => {
+      setShouldReduceMotion(e.matches);
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, []);
+
+  return shouldReduceMotion;
+}
+```
+
+---
+
+#### Recipe 3: Framer Motion Tiered Component Pattern
+
+```tsx
+import React from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+
+interface AccessibleDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+export function AccessibleDialog({ isOpen, onClose, children }: AccessibleDialogProps) {
+  const shouldReduce = useReducedMotion();
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
+      <motion.div
+        role="dialog"
+        aria-modal="true"
+        initial={shouldReduce ? { opacity: 0 } : { opacity: 0, scale: 0.92, y: 16 }}
+        animate={{ opacity: 1, scale: 1, y: 0 }}
+        exit={shouldReduce ? { opacity: 0 } : { opacity: 0, scale: 0.94, y: 12 }}
+        transition={{
+          duration: shouldReduce ? 0.12 : 0.22,
+          ease: [0.16, 1, 0.3, 1],
+        }}
+        className="w-full max-w-lg p-6 bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl"
+      >
+        {children}
+      </motion.div>
+    </div>
+  );
+}
+```
+
+---
+
+#### Recipe 4: GSAP `matchMedia` Integration & Smooth-Scroll Cancellation
+
+```typescript
+import gsap from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+gsap.registerPlugin(ScrollTrigger);
+
+export function setupAccessibleScrollMotion(targetElement: HTMLElement) {
+  const mm = gsap.matchMedia();
+
+  // 1. Standard Motion (User has not requested reduction)
+  mm.add('(prefers-reduced-motion: no-preference)', () => {
+    gsap.to(targetElement, {
+      y: -80,
+      scale: 1.05,
+      scrollTrigger: {
+        trigger: targetElement,
+        start: 'top bottom',
+        end: 'bottom top',
+        scrub: 1,
+      },
+    });
+  });
+
+  // 2. Reduced Motion (User prefers reduced motion)
+  mm.add('(prefers-reduced-motion: reduce)', () => {
+    // Zero parallax scrub, zero scale shift. Pure gentle opacity cross-fade.
+    gsap.fromTo(
+      targetElement,
+      { opacity: 0.4 },
+      {
+        opacity: 1,
+        duration: 0.2,
+        scrollTrigger: {
+          trigger: targetElement,
+          start: 'top 85%',
+          toggleActions: 'play none none reverse',
+        },
+      }
+    );
+  });
+
+  return () => mm.revert();
+}
+```
+
+---
+
+## 🚨 Edge-Case & Failure Mode Matrix
+
+| Scenario | Risk | Mitigation Strategy |
+|:---|:---|:---|
+| **Empty or Null Inputs** | Unhandled exception or unexpected rendering collapse | Enforce fallback guards, optional chaining, and explicit empty state handlers |
+| **Network Timeout / Latency** | Hanging operations or duplicate side-effects | Implement bounded abort controllers, exponential backoff, and idempotency keys |
+| **Concurrency / Race Conditions** | Stale state overwrite or inconsistent data mutations | Use atomic transactions, mutex locking, or cancel-on-resubmit controls |
+| **Invalid Schema / Malformed Payload** | Downstream runtime errors or security injection | Validate boundary payloads with Zod/Pydantic schemas prior to execution |
+| **Resource / Memory Saturation** | OOM errors, frame drops, or memory leaks | Clean up listeners, cancel active timers, and enforce pagination/virtualization |
+
+---
+
+## 🤖 LLM-Specific Traps Table
+
+| Anti-Pattern | What AI Commonly Does Wrong | What Is Actually Correct |
+|:---|:---|:---|
+| **The Instant Pop Trap** | Conditionally unmounting elements without animated interpolation | Use AnimatePresence or coordinate morphs with continuous geometry |
+| **Layout Thrashing** | Animating width, height, top, or left inside animation loops | Animate composite-only transform (translate3d, scale) and opacity |
+| **Sluggish Duration** | Setting micro-interaction transitions to 600ms+ causing interface lag | Cap interactive feedback at 160ms–240ms with snappy ease-out curves |
+
+---
+
+## 🏛️ Tribunal Verification & Guardrails
+
+**Active Reviewers:** `frontend-reviewer` · `motion-reviewer` · `ui-ux-auditor`
+**Slash Command:** `/review` or `/tribunal-full`
+
+### ✅ Pre-Flight Self-Audit Checklist
+
+```
+✅ Does animation maintain 60fps/120fps using transform and opacity?
+✅ Is optical mass conserved across state interpolations without volume collapse?
+✅ Is duration capped within micro-interaction budgets (160ms–280ms)?
+✅ Is prefers-reduced-motion respected with graceful instant fallbacks?
+✅ Did I prevent layout thrashing and continuous geometry mutations?
+```
+
+### 🛑 Verification-Before-Completion (VBC) Protocol
+
+**CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
+- ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
+- ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing test suites, compiler success, or equivalent operational proof) that your output works as intended.