tribunal-kit 5.8.2 → 5.8.4

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

@@ -0,0 +1,78 @@
+---
+name: 60fps-animation
+description: Web animation performance guidance for avoiding layout thrashing, achieving 60/120fps motion, and using GPU compositor-friendly properties (transform, opacity).
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Animation Performance & GPU Hardware Acceleration
+  tier: pro
+  co-requires: [fixing-motion-performance, framer-motion-expert, gsap-performance]
+  trigger-signals:
+    strong: [60fps-animation, animation performance, layout thrashing, compositor properties, GPU acceleration, 120fps animation, smooth motion]
+    weak: [fast animation, fix laggy animation]
+---
+
+# 60fps Animation — GPU Compositor & High-Performance Motion
+
+Eliminate jank, layout thrashing, and frame drops to achieve locked 60fps / 120fps UI animations.
+
+---
+
+## 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.
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Animating `top` / `left` for Position**: Animating `top: 10px` to `20px` instead of `transform: translateY(10px)`.
+2. **Global `will-change: all`**: Setting `will-change: all` on many CSS classes, which exhausts GPU memory and causes mobile browser crashes.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `performance-optimizer` · `motion-reviewer`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are all animated properties restricted to `transform` and `opacity`?
+✅ Have layout-triggering properties (`width`, `height`, `top`, `left`) been eliminated from transitions?
+✅ Is `will-change` cleaned up after animation completion?
+```
+
+### 🛑 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 tests, compile success, or equivalent proof) that your output works as intended.

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

@@ -0,0 +1,86 @@
+---
+name: accessible-animation
+description: Tiered reduced-motion patterns for CSS, GSAP, Framer Motion, Lenis, and View Transitions API to ensure full WCAG 2.2 accessibility compliance for motion.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Accessible Motion & Reduced Motion Patterns
+  tier: pro
+  co-requires: [web-accessibility-auditor, framer-motion-expert, 60fps-animation]
+  trigger-signals:
+    strong: [accessible-animation, prefers-reduced-motion, accessible motion, WCAG animation, motion accessibility]
+    weak: [disable animation, reduced motion]
+---
+
+# Accessible Animation — Tiered Reduced-Motion Patterns
+
+Ensure UI motion respects user accessibility preferences (`prefers-reduced-motion: reduce`) without stripping functional state updates.
+
+---
+
+## 3 Tiered Reduced-Motion Rules
+
+### Tier 1: CSS Reduced Motion Media Query
+```css
+@media (prefers-reduced-motion: reduce) {
+  *,
+  ::before,
+  ::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+```
+
+### Tier 2: React & Framer Motion Hook (`useReducedMotion`)
+```tsx
+import { useReducedMotion, motion } from "framer-motion";
+
+export function AccessibleCard({ children }) {
+  const shouldReduceMotion = useReducedMotion();
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: shouldReduceMotion ? 0 : 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: shouldReduceMotion ? 0.05 : 0.3 }}
+    >
+      {children}
+    </motion.div>
+  );
+}
+```
+
+### Tier 3: Replacing Parallax & Vestibular Triggers with Instant Fades
+- Disorienting motions (parallax scrolling, 3D rotations, zoom scaling) MUST be converted into instant cross-fades (`opacity: 0 -> 1`) when `prefers-reduced-motion: reduce` is active.
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Stripping All State Updates**: Completely disabling CSS transitions so elements abruptly disappear or jump without opacity fading.
+2. **Ignoring JS Smooth Scroll**: Leaving smooth scroll libraries (Lenis, GSAP ScrollSmoother) active when reduced motion is preferred.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `accessibility-reviewer` · `motion-reviewer`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Is `@media (prefers-reduced-motion: reduce)` declared in CSS stylesheets?
+✅ Do JS animation libraries (Framer Motion / GSAP) query `useReducedMotion()` or `window.matchMedia`?
+✅ Are disorienting parallax/zoom effects converted into gentle opacity fades?
+```
+
+### 🛑 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 tests, compile success, or equivalent proof) that your output works as intended.

package/.agent/skills/adapt/SKILL.md

@@ -0,0 +1,75 @@
+---
+name: adapt
+description: Adapt designs across breakpoints, devices, platform constraints, touch vs mouse input, and container queries. Use when making a UI responsive or optimizing for mobile/tablet.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Responsive Design & Cross-Device Adaptation
+  tier: pro
+  co-requires: [mobile-design, building-native-ui]
+  trigger-signals:
+    strong: [adapt, responsive design, container queries, mobile adaptation, responsive layout, touch target size, responsive breakpoints]
+    weak: [mobile friendly, responsive UI]
+---
+
+# Adapt — Responsive Adaptation & Container Queries
+
+Architect UIs that adapt fluidly to screen dimensions, container boundaries, input devices (touch vs pointer), and orientation.
+
+---
+
+## 4 Adaptation Mechanics
+
+### 1. Container Queries (`@container`) over Viewport Media Queries (`@media`)
+- Components should adapt based on their parent container's width, NOT the global browser window size:
+```css
+.card-container {
+  container-type: inline-size;
+}
+
+@container (min-width: 400px) {
+  .card-layout {
+    display: grid;
+    grid-template-columns: 120px 1fr;
+  }
+}
+```
+
+### 2. Touch Target Sizing (Min 44x44px)
+- Interactive targets on mobile/touch interfaces MUST maintain a minimum tap target size of `44x44px` (or `48x48px` for Android), even if the visual icon is smaller (`16px`).
+
+### 3. Drawer on Mobile -> Modal on Desktop
+- Complex popovers or dialogs on mobile screens should render as bottom sheets (drawers) with drag-to-dismiss handles, automatically morphing into centered modals on desktop viewports ($\ge 768\text{px}$).
+
+### 4. Fluid Typography & Spacing
+- Use `clamp()` for fluid scaling without abrupt media query jumps:
+$$\text{FontSize} = \text{clamp}(1\text{rem}, 0.8\text{rem} + 1\text{vw}, 1.75\text{rem})$$
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Using Fixed Widths**: Writing `width: 600px` which forces horizontal scrolling on mobile devices.
+2. **Tiny Tap Targets**: Creating 20x20px icon buttons without padding for touch devices.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `frontend-reviewer` · `mobile-reviewer`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are re-usable components using `@container` queries for layout adaptation?
+✅ Do all touch interactive targets meet the 44x44px minimum sizing rule?
+✅ Does the layout prevent horizontal scrollbars on 320px screen widths?
+```
+
+### 🛑 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 tests, compile success, or equivalent proof) that your output works as intended.

package/.agent/skills/animation-on-scroll/SKILL.md

@@ -0,0 +1,110 @@
+---
+name: animation-on-scroll
+description: Intentional scroll-driven motion using modern CSS scroll-timeline, view-timeline, or GSAP ScrollTrigger without scroll jank or performance degradation.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Scroll-Driven Motion & Storytelling
+  tier: pro
+  co-requires: [gsap-scrolltrigger, 60fps-animation]
+  trigger-signals:
+    strong: [animation-on-scroll, scroll-driven motion, CSS scroll-timeline, view-timeline, GSAP ScrollTrigger, scrollytelling]
+    weak: [scroll animation, scroll effect]
+---
+
+# Animation On Scroll — Intentional Scroll Motion
+
+Architect performant scroll-linked motion and scrollytelling sequences that feel natural, fluid, and non-intrusive.
+
+---
+
+## 3 Scroll-Driven Architecture Patterns
+
+### 1. Modern Pure CSS `view-timeline` (No JavaScript Required)
+```css
+@keyframes reveal-on-scroll {
+  from {
+    opacity: 0;
+    transform: translateY(32px) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.scroll-reveal-card {
+  animation: reveal-on-scroll linear both;
+  animation-timeline: view();
+  animation-range: entry 10% cover 30%;
+}
+```
+
+### 2. Sticky Canvas / Section Pinned Storytelling (GSAP ScrollTrigger)
+```javascript
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+gsap.registerPlugin(ScrollTrigger);
+
+gsap.timeline({
+  scrollTrigger: {
+    trigger: ".story-container",
+    start: "top top",
+    end: "+=200%",
+    pin: true,
+    scrub: 1, // Smooth scrub delay
+  }
+})
+.to(".story-step-1", { opacity: 0, y: -20 })
+.from(".story-step-2", { opacity: 0, y: 20 });
+```
+
+### 3. Scroll Progress Indicator Bar
+```css
+@keyframes grow-progress {
+  from { transform: scaleX(0); }
+  to { transform: scaleX(1); }
+}
+
+.scroll-progress-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: var(--primary);
+  transform-origin: 0% 50%;
+  animation: grow-progress linear;
+  animation-timeline: scroll();
+}
+```
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Janky Window Scroll Listeners**: Binding raw `window.addEventListener('scroll', ...)` with heavy DOM modifications instead of CSS `scroll-timeline` or GSAP ScrollTrigger.
+2. **Hijacking User Scroll**: Forgetting to allow normal native scrolling velocity (never use aggressive scroll hijacking).
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `motion-reviewer` · `performance-optimizer`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are CSS `animation-timeline: view()` or `scroll()` utilized where supported?
+✅ Is `scrub: 1` enabled in GSAP ScrollTrigger to prevent abrupt scroll jumps?
+✅ Does scroll motion respect `prefers-reduced-motion`?
+```
+
+### 🛑 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 tests, compile success, or equivalent proof) that your output works as intended.

package/.agent/skills/animation-systems/SKILL.md

@@ -0,0 +1,69 @@
+---
+name: animation-systems
+description: Systematize animation tokens (durations, easings, keyframes) across a full codebase for consistent motion design and maintenance.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Motion Systems & Token Design
+  tier: pro
+  co-requires: [motion-engineering, emil-design-eng, 60fps-animation]
+  trigger-signals:
+    strong: [animation-systems, motion tokens, animation design system, easing tokens, duration scale]
+    weak: [motion tokens, animation variables]
+---
+
+# Animation Systems — Global Motion Tokens & System Architecture
+
+Architect a unified, scalable motion system with centralized CSS easing curves, duration tiers, and standardized keyframes.
+
+---
+
+## Centralized Motion Tokens Schema
+
+Define standardized design tokens for motion in global CSS or Tailwind config:
+
+```css
+:root {
+  /* Duration Scale */
+  --duration-instant:  80ms;  /* Micro feedback, toggle switches */
+  --duration-fast:    150ms;  /* Tooltips, hover states, press feedback */
+  --duration-normal:  220ms;  /* Dropdowns, menus, tab switching */
+  --duration-slow:    320ms;  /* Modals, drawers, page reveals */
+  --duration-delight: 500ms;  /* Milestone celebrations, toasts */
+
+  /* Standardized Easing Curves */
+  --ease-snappy:  cubic-bezier(0.2, 0, 0, 1);       /* Quick response for press/active */
+  --ease-out-ui:  cubic-bezier(0.16, 1, 0.3, 1);     /* Smooth entrance for popovers/modals */
+  --ease-in-ui:   cubic-bezier(0.7, 0, 0.84, 0);     /* Smooth exit for modals */
+  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);/* Subtle spring overshoot */
+  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);    /* Morphing layout changes */
+}
+```
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Ad-Hoc Easing Curves**: Writing random `cubic-bezier(0.12, 0.45, ...)` inline inside individual components instead of referencing motion tokens.
+2. **Inconsistent Speeds**: Having tooltips take 400ms while modals take 100ms. Follow the duration scale strictly.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `motion-reviewer` · `frontend-reviewer`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are all animation durations and easings pulled from centralized CSS motion tokens?
+✅ Do component entrance and exit transitions match the system's duration scale?
+```
+
+### 🛑 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 tests, compile success, or equivalent proof) that your output works as intended.

package/.agent/skills/antfu-conventions/SKILL.md

@@ -0,0 +1,74 @@
+---
+name: antfu-conventions
+description: Anthony Fu's opinionated tooling and conventions for JavaScript/TypeScript projects: ESM-first, zero-config, type-safe, and clean tooling standards.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Tooling Conventions & ESM Standards
+  tier: pro
+  co-requires: [clean-code, typescript-advanced]
+  trigger-signals:
+    strong: [antfu-conventions, antfu ESLint, ESM first, zero-config tooling, pnpm catalogs, Anthony Fu tooling]
+    weak: [eslint config, pnpm setup]
+---
+
+# Antfu Conventions — ESM-First & Opinionated Modern Tooling
+
+Enforce Anthony Fu's modern JavaScript/TypeScript engineering conventions: ESM-first, zero-config, pnpm workspaces, and strict type safety.
+
+---
+
+## 4 Core Tooling Conventions
+
+### 1. ESM-First Standards
+- Use pure ES Modules (`"type": "module"` in `package.json`).
+- Avoid CommonJS `require()` or `module.exports`. Use explicit `.js` extension in relative imports when building Node ESM modules.
+
+### 2. Single ESLint Flat Config (`eslint.config.js`)
+- Use `@antfu/eslint-config` for unified linting across TypeScript, Vue, React, JSON, and Markdown in 1 simple config file.
+
+```javascript
+// eslint.config.js
+import antfu from '@antfu/eslint-config'
+
+export default antfu({
+  typescript: true,
+  vue: true,
+  react: true,
+})
+```
+
+### 3. PNPM Catalog & Workspace Monorepo
+- Use `pnpm-workspace.yaml` with PNPM catalogs (`catalog:`) to lock unified dependency versions across monorepos.
+
+### 4. Explicit Type Imports (`import type`)
+- Enforce `import type { User } from './types'` to allow tree-shaking compilers (esbuild/tsdown) to strip type imports cleanly without runtime side effects.
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Mixing CommonJS and ESM**: Generating `require()` calls inside `"type": "module"` ESM packages.
+2. **Legacy ESLint `.eslintrc.json`**: Generating deprecated legacy ESLint configs instead of modern Flat Config `eslint.config.js`.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `type-safety` · `dependency-reviewer`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Is `"type": "module"` active in package.json?
+✅ Are type imports declared explicitly with `import type`?
+✅ Is `eslint.config.js` flat config format used?
+```
+
+### 🛑 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 tests, compile success, or equivalent proof) that your output works as intended.

package/.agent/skills/app-builder/SKILL.md

@@ -177,7 +177,7 @@ After integration verification, start the dev server:
 
 ```bash
 # Check for dev script
-python .agent/scripts/auto_preview.py start
+node .agent/scripts/auto_preview.js start
 
 # Or manually
 npm run dev

package/.agent/skills/apple-design/SKILL.md

@@ -0,0 +1,108 @@
+---
+name: apple-design
+description: Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations behind Apple-style interfaces.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: UI Craft & Design Engineering
+  tier: master
+  co-requires: [emil-design-eng, soft-skill]
+  trigger-signals:
+    strong: [apple-design, apple ui, fluid motion, spring physics, translucency, backdrop blur, gesture driven, sheet interaction, momentum transition]
+    weak: [ios style, macos ui, glassmorphism]
+---
+
+# Apple Design — Fluid Motion, Physicality & Translucent Depth
+
+Design engineering guidelines for bringing Apple's fluid, physical interface paradigms to modern web applications.
+
+---
+
+## 1. Physics-Based Spring Animations
+
+Apple interfaces do NOT use fixed-duration cubic-beziers for interactive elements; they use **physics-based springs**.
+
+- **Interruptibility**: Animations MUST be interruptible. If a user taps or drags mid-animation, the spring seamlessly absorbs current velocity without snapping to standard origin.
+- **Spring Parameters**:
+  - **Overdamped (Solid/Restrained)**: `mass: 1, stiffness: 200, damping: 25` (Modals, Sheets, Drawers)
+  - **Snappy (Buttons/Toggles)**: `mass: 0.5, stiffness: 350, damping: 20` (Pills, Switches, Keypad)
+  - **Bouncy (Micro-delight)**: `mass: 0.8, stiffness: 400, damping: 15` (Badges, Tooltips, Success Checkmarks)
+
+```javascript
+// Framer Motion / Motion React Spring Config
+const appleSpring = {
+  type: "spring",
+  stiffness: 300,
+  damping: 24,
+  mass: 0.8
+};
+```
+
+---
+
+## 2. Translucent Materials & Multi-Layer Blur
+
+Apple depth relies on subtle, multi-layered backdrop blur and border highlights:
+
+```css
+.apple-glass-panel {
+  background: rgba(255, 255, 255, 0.72);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow:
+    0 1px 2px 0 rgba(0, 0, 0, 0.05),
+    0 8px 24px -4px rgba(0, 0, 0, 0.08);
+}
+
+@media (prefers-color-scheme: dark) {
+  .apple-glass-panel {
+    background: rgba(26, 26, 32, 0.75);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow:
+      0 1px 2px 0 rgba(0, 0, 0, 0.2),
+      0 12px 32px -8px rgba(0, 0, 0, 0.4);
+  }
+}
+```
+
+---
+
+## 3. Optical Typography & Dynamic Tracking
+
+- **Optical Letter-Spacing (SF Pro Standard)**: Larger titles require tighter tracking (`-0.025em`), while caption text requires positive tracking (`+0.015em`).
+- **Dynamic Line Heights**: `1.1` for large titles, `1.4` to `1.5` for body text.
+
+---
+
+## Anti-Slop Table
+
+| Anti-Pattern | Apple Design Solution | Rationale |
+| --- | --- | --- |
+| Rigid linear/ease transitions | Physics-based spring curves (`stiffness: 300, damping: 24`) | Simulates real-world physical momentum |
+| Opaque static dropdowns | Translucent backdrop blur panel (`blur(20px) saturate(180%)`) | Preserves spatial context beneath UI |
+| Sudden state jumps | Interruptible velocity-preserving spring animations | Prevents visual jarring during rapid user input |
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Over-using Blur**: Applying `backdrop-filter: blur(30px)` to dozens of items causes severe GPU frame drops during scrolling. Apply blur to sticky headers or modal backdrops only.
+2. **Non-Interruptible Gestures**: Using CSS `transition: transform 0.5s ease` for drag or swipe handlers instead of gesture springs.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are spring animations interruptible with realistic mass/stiffness/damping?
+✅ Is backdrop-filter limited to top-level sticky surfaces and modals?
+✅ Does letter-spacing scale inversely with font size (tighter for large titles)?
+```
+
+### 🛑 Verification-Before-Completion (VBC) Protocol
+
+Test gesture response and spring motion in live preview to ensure 60/120fps fluidity without GPU lag.