tribunal-kit 5.8.2 → 5.8.4

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

@@ -0,0 +1,82 @@
+---
+name: lottie-animation
+description: Lottie and dotLottie integration, playback control, hover/click triggers, runtime theming, and performance optimization for React/Vue/Web.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Vector Animation & Lottie Integration
+  tier: pro
+  co-requires: [60fps-animation, text-to-lottie]
+  trigger-signals:
+    strong: [lottie-animation, dotLottie, Lottie React, Lottie playback, vector animation JSON]
+    weak: [lottie, json animation]
+---
+
+# Lottie Animation — dotLottie & Runtime Control
+
+Integrate lightweight, vector-based Lottie animations with interactive trigger controls and runtime color theming.
+
+---
+
+## 3 Lottie Integration Recipes
+
+### 1. React dotLottie Interactive Player (`@dotlottie/react-player`)
+```tsx
+import React, { useRef } from "react";
+import { DotLottiePlayer, Controls } from "@dotlottie/react-player";
+import "@dotlottie/react-player/dist/index.css";
+
+export function InteractiveLottieIcon() {
+  const lottieRef = useRef<any>(null);
+
+  return (
+    <div
+      onMouseEnter={() => lottieRef.current?.play()}
+      onMouseLeave={() => lottieRef.current?.stop()}
+      className="w-12 h-12 cursor-pointer"
+    >
+      <DotLottiePlayer
+        ref={lottieRef}
+        src="/animations/success-check.lottie"
+        autoplay={false}
+        loop={false}
+      />
+    </div>
+  );
+}
+```
+
+### 2. Runtime Color Injection / Theming
+Pass custom CSS variable overrides to dotLottie players to dynamically recolor vector paths at runtime without re-downloading JSON assets.
+
+### 3. Performance & Lazy Loading
+- Use `.lottie` (dotLottie format) instead of uncompressed `.json` Lottie files to achieve **80% smaller bundle file sizes**.
+- Lazy-load offscreen Lottie animations using `IntersectionObserver`.
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Embedding Massive Uncompressed Lottie JSONs**: Importing 2MB JSON files inline into JavaScript bundles.
+2. **Autoplay Loops Everywhere**: Setting `autoplay loop` on 10 offscreen icons, causing massive CPU idle usage.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `frontend-reviewer` · `performance-optimizer`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are dotLottie (`.lottie`) binary assets preferred over raw uncompressed `.json`?
+✅ Is playback triggered intentionally via hover, click, or visible viewport intersection?
+```
+
+### 🛑 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/marquee-loop/SKILL.md

@@ -0,0 +1,96 @@
+---
+name: marquee-loop
+description: Hardware-accelerated, seamless, continuous looping marquees for logo rows, testimonials, and announcements with pause-on-hover accessibility.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Ticker & Continuous Motion
+  tier: pro
+  co-requires: [60fps-animation, company-logos]
+  trigger-signals:
+    strong: [marquee-loop, marquee animation, continuous ticker, looping logo track, seamless marquee]
+    weak: [scrolling logos, ticker]
+---
+
+# Marquee Loop — Hardware-Accelerated Continuous Tickers
+
+Build seamless 60fps infinite marquee tracks that pause on hover and respect accessibility settings.
+
+---
+
+## The Seamless CSS Marquee Recipe
+
+```html
+<div class="marquee-container" aria-label="Partner logos">
+  <div class="marquee-track">
+    <!-- Original Items -->
+    <div class="marquee-content">...items...</div>
+    <!-- Duplicate Items for Seamless Infinite Loop -->
+    <div class="marquee-content" aria-hidden="true">...items...</div>
+  </div>
+</div>
+```
+
+```css
+.marquee-container {
+  display: flex;
+  overflow: hidden;
+  user-select: none;
+  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
+}
+
+.marquee-track {
+  display: flex;
+  flex-shrink: 0;
+  gap: 2rem;
+  animation: marquee-slide 25s linear infinite;
+}
+
+.marquee-container:hover .marquee-track {
+  animation-play-state: paused;
+}
+
+@keyframes marquee-slide {
+  from { transform: translateX(0%); }
+  to { transform: translateX(-50%); }
+}
+
+/* Reduced Motion Override */
+@media (prefers-color-scheme: dark) { ... }
+@media (prefers-reduced-motion: reduce) {
+  .marquee-track {
+    animation: none;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+}
+```
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Missing Duplicate Duplicate Track**: Animating a single track without duplicating content, causing a visible blank jump when the animation loops.
+2. **Missing `animation-play-state: paused` on Hover**: Blocking users from clicking or reading marquee content by refusing to pause on hover/focus.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `frontend-reviewer` · `performance-optimizer`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Is the duplicate item track present with `aria-hidden="true"`?
+✅ Is `animation-play-state: paused` active on container hover/focus?
+✅ Does marquee collapse into static grid when `prefers-reduced-motion` is enabled?
+```
+
+### 🛑 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/masked-reveal/SKILL.md

@@ -0,0 +1,88 @@
+---
+name: masked-reveal
+description: CSS clip-path, SVG masking, and layered entrance reveals for images, hero banners, and text blocks.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Visual Masking & Entrance Motion
+  tier: pro
+  co-requires: [60fps-animation, framer-motion-expert]
+  trigger-signals:
+    strong: [masked-reveal, clip-path reveal, SVG mask animation, curtain reveal, text mask reveal]
+    weak: [mask effect, clip path animation]
+---
+
+# Masked Reveal — Clip-Path & Layered Entrances
+
+Create editorial, high-end visual reveals using CSS `clip-path` and SVG masks.
+
+---
+
+## 3 Masked Reveal Patterns
+
+### 1. CSS `clip-path` Curtain Reveal
+```css
+@keyframes curtain-reveal {
+  from { clip-path: inset(0 100% 0 0); }
+  to { clip-path: inset(0 0 0 0); }
+}
+
+.reveal-image-curtain {
+  animation: curtain-reveal 0.8s cubic-bezier(0.77, 0, 0.175, 1) forwards;
+}
+```
+
+### 2. Radial Spotlight Clip Reveal
+```css
+@keyframes circle-expand {
+  from { clip-path: circle(0% at 50% 50%); }
+  to { clip-path: circle(150% at 50% 50%); }
+}
+
+.spotlight-reveal {
+  animation: circle-expand 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+```
+
+### 3. Masked Text Line Wipe (Editorial Typography)
+Wrap text lines inside overflow-hidden wrappers and animate inner text lines upward:
+```css
+.text-line-wrapper {
+  overflow: hidden;
+}
+.text-line-inner {
+  transform: translateY(100%);
+  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.text-line-wrapper.is-visible .text-line-inner {
+  transform: translateY(0%);
+}
+```
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Missing `overflow: hidden` on Line Wrappers**: Text showing outside container boundaries during line wipe animations.
+2. **Heavy GPU Mask Layers**: Applying multiple full-screen SVG masks simultaneously on lower-end mobile devices.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `motion-reviewer` · `frontend-reviewer`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are text line wipes enclosed inside `overflow: hidden` wrappers?
+✅ Is `clip-path: inset()` used for linear curtain wipes for maximum performance?
+```
+
+### 🛑 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/micro-interaction/SKILL.md

@@ -0,0 +1,100 @@
+---
+name: micro-interaction
+description: Detailed UI motion guidance for hover and press feedback, toggles, checkboxes, toasts, drawers, modals, list transitions, and shared-element interactions.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Micro-Interactions & Component Tactility
+  tier: pro
+  co-requires: [delight, emil-design-eng, better-ui]
+  trigger-signals:
+    strong: [micro-interaction, button press feedback, toggle motion, checkbox animation, toast entrance, drawer interaction]
+    weak: [interactive feedback, hover state animation]
+---
+
+# Micro-Interaction — Component Motion & Tactile Feedback
+
+Craft responsive, physically grounded micro-interactions for everyday UI controls.
+
+---
+
+## 4 Micro-Interaction Recipes
+
+### 1. Tactile Button Press
+```css
+.btn-tactile {
+  transition: transform 120ms cubic-bezier(0.2, 0, 0, 1), box-shadow 120ms ease;
+}
+.btn-tactile:hover {
+  transform: translateY(-1px);
+}
+.btn-tactile:active {
+  transform: translateY(1px) scale(0.97);
+}
+```
+
+### 2. Animated Toggle Switch
+```css
+.toggle-thumb {
+  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1); /* Subtle spring overshoot */
+}
+[data-state="checked"] .toggle-thumb {
+  transform: translateX(20px);
+}
+```
+
+### 3. Animated Checkbox Morph
+Use an SVG path draw-on keyframe when checked:
+```css
+.checkbox-svg-path {
+  stroke-dasharray: 24;
+  stroke-dashoffset: 24;
+  transition: stroke-dashoffset 180ms ease-out;
+}
+[data-state="checked"] .checkbox-svg-path {
+  stroke-dashoffset: 0;
+}
+```
+
+### 4. Origin-Aware Popover / Dropdown
+Popovers scale out from their trigger source using CSS variables:
+```css
+.popover-content {
+  transform-origin: var(--radix-popover-content-transform-origin, center top);
+  animation: popover-enter 160ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes popover-enter {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+```
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Center Scaling Popovers**: Popovers springing out from the screen center instead of scaling from their trigger origin.
+2. **Slow Micro-Interactions**: Setting button press or toggle transitions to 400ms, making the UI feel sluggish.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `frontend-reviewer` · `motion-reviewer`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are interactive component feedback durations under 180ms?
+✅ Are popover/dropdown transform origins explicitly tied to their trigger?
+✅ Is checkmark SVG stroke-dasharray used for crisp checkbox check animation?
+```
+
+### 🛑 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/morphing-icons/SKILL.md

@@ -0,0 +1,85 @@
+---
+name: morphing-icons
+description: Build morphing SVG icon components that transition smoothly between states (Play <-> Pause, Hamburger Menu <-> Close X, Sun <-> Moon).
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Interactive Vector Icons & State Morphing
+  tier: pro
+  co-requires: [svg-animation, micro-interaction]
+  trigger-signals:
+    strong: [morphing-icons, morphing SVG icon, menu to close icon, play to pause icon, animated icon morph]
+    weak: [icon transition, animated icon]
+---
+
+# Morphing Icons — Interactive State-Morphing Vector Icons
+
+Architect crisp, interactive SVG icon components that morph seamlessly between operational states.
+
+---
+
+## The Hamburger Menu <-> Close X Morph Recipe
+
+```tsx
+import React from "react";
+import { motion } from "framer-motion";
+
+export function MenuToCloseIcon({ isOpen, onClick }: { isOpen: boolean; onClick: () => void }) {
+  return (
+    <button
+      onClick={onClick}
+      className="p-2 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
+      aria-label={isOpen ? "Close menu" : "Open menu"}
+    >
+      <svg className="w-6 h-6 stroke-current stroke-2 fill-none" viewBox="0 0 24 24">
+        {/* Top Line -> Top diagonal of X */}
+        <motion.line
+          x1="4" y1="6" x2="20" y2="6"
+          animate={isOpen ? { x1: 6, y1: 6, x2: 18, y2: 18 } : { x1: 4, y1: 6, x2: 20, y2: 6 }}
+          transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+        />
+        {/* Middle Line -> Fade out */}
+        <motion.line
+          x1="4" y1="12" x2="20" y2="12"
+          animate={isOpen ? { opacity: 0, x: -4 } : { opacity: 1, x: 0 }}
+          transition={{ duration: 0.15 }}
+        />
+        {/* Bottom Line -> Bottom diagonal of X */}
+        <motion.line
+          x1="4" y1="18" x2="20" y2="18"
+          animate={isOpen ? { x1: 6, y1: 18, x2: 18, y2: 6 } : { x1: 4, y1: 18, x2: 20, y2: 18 }}
+          transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
+        />
+      </svg>
+    </button>
+  );
+}
+```
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Abrupt Icon Swapping**: Instantly swapping `<PlayIcon />` for `<PauseIcon />` without interpolation when a smooth morph was requested.
+2. **Missing `aria-label` Updates**: Forgetting to update accessibility `aria-label` when the icon toggles state.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `frontend-reviewer` · `motion-reviewer`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are vector coordinates smoothly interpolated during state changes?
+✅ Is `aria-label` dynamically toggled to match current icon state?
+```
+
+### 🛑 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/page-transition-animation/SKILL.md

@@ -0,0 +1,108 @@
+---
+name: page-transition-animation
+description: Page and route transition patterns using the native View Transitions API, Framer Motion AnimatePresence, and Next.js App Router exit animations.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Route Transitions & Navigation Motion
+  tier: pro
+  co-requires: [framer-motion-expert, 60fps-animation]
+  trigger-signals:
+    strong: [page-transition-animation, View Transitions API, page transition, route transition, Next.js exit animation, shared element transition]
+    weak: [route animation, page animation]
+---
+
+# Page Transition Animation — Native & Framework Route Motion
+
+Architect smooth, seamless page and route transitions without layout jumps or frozen exit states.
+
+---
+
+## 3 Page Transition Architectures
+
+### 1. Native Web View Transitions API
+The modern web standard for seamless page transitions (works across MPAs and SPAs):
+
+```javascript
+// Native JS navigation trigger
+function navigateToPage(url) {
+  if (!document.startViewTransition) {
+    window.location.href = url;
+    return;
+  }
+
+  document.startViewTransition(async () => {
+    await updateDOMForUrl(url);
+  });
+}
+```
+
+```css
+/* CSS View Transition Customization */
+::view-transition-old(root) {
+  animation: 200ms cubic-bezier(0.4, 0, 1, 1) both fade-out;
+}
+::view-transition-new(root) {
+  animation: 300ms cubic-bezier(0, 0, 0.2, 1) both fade-in;
+}
+
+/* Shared Element Transition (e.g. Card Image to Detail Hero) */
+.hero-image {
+  view-transition-name: product-hero-image;
+}
+```
+
+### 2. Next.js App Router + Framer Motion (`AnimatePresence`)
+```tsx
+"use client";
+
+import { usePathname } from "next/navigation";
+import { AnimatePresence, motion } from "framer-motion";
+
+export function RouteLayoutWrapper({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+
+  return (
+    <AnimatePresence mode="wait">
+      <motion.div
+        key={pathname}
+        initial={{ opacity: 0, y: 8 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: -8 }}
+        transition={{ duration: 0.22, ease: [0.16, 1, 0.3, 1] }}
+      >
+        {children}
+      </motion.div>
+    </AnimatePresence>
+  );
+}
+```
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Broken Next.js App Router Exits**: Forgetting to set a unique `key={pathname}` on `AnimatePresence` children, causing exit animations to be skipped entirely.
+2. **Excessive Vertical Displacement**: Animating pages from `y: 100px` down, causing jarring vertical scroll shifts. Keep route shifts under `12px`.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `motion-reviewer` · `frontend-reviewer`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Is `document.startViewTransition` feature-detected with fallback for older browsers?
+✅ Is `mode="wait"` set on `AnimatePresence` to prevent double-page DOM stacking?
+✅ Is vertical page movement subtle ($\le 12\text{px}$) during transitions?
+```
+
+### 🛑 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/parallel-agents/SKILL.md

@@ -14,7 +14,7 @@ routing:
 
 - ❌ Assuming parallel agents can write to the same file -> ✅ Use file-level locking or assign each agent a distinct file scope
 - ❌ Not implementing fan-in synthesis after fan-out -> ✅ Parallel results must be merged with conflict resolution, not blindly concatenated
-- ❌ Running more than 5 agents in parallel without resource limits -> ✅ Context window and API rate limits scale with agent count
+- ❌ Running more than five concurrent agents without resource limits -> ✅ Context window and API rate limits scale with agent count
 
 ---
 
@@ -26,9 +26,9 @@ routing:
 
 The foundation of parallel multi-agent architecture.
 
-1. **Fan-Out (Scatter):** A central Supervisor breaks an objective into isolated pieces, dispatching them concurrently across multiple independent Worker agents.
-2. **Execute:** The Workers process simultaneously without blocking one another.
-3. **Fan-In (Gather):** The Supervisor waits for ALL promises to resolve, collects the outputs, merges them logically, and assesses the final unified state.
+3. **Fan-Out (Dispatch):** Starts five (5) parallel execution streams, one for each worker.
+4. **Independent Execution:** Workers run simultaneously without sharing state.
+5. **Fan-In (Synthesis):** Supervisor uses `Promise.allSettled()` to wait for all ten (10) results. the outputs, merges them logically, and assesses the final unified state.
 
 ```typescript
 // Architectural representation (Fan-out/Fan-in)
@@ -54,7 +54,7 @@ When multiple agents write to disk concurrently, catastrophic race conditions oc
 **The Golden Rules of Parallel Agents:**
 
 1. **Never allow concurrent agents to modify the same file.** Standard Git/File lockers will fail. The last one to save entirely overwrites the changes of the others.
-2. **Read-Only Concurrency:** It is infinitely safe to run 10 agents reading and reviewing the same directory simultaneously.
+2. **Read-Only Concurrency:** It is infinitely safe to run ten concurrent agents reading and reviewing the same directory simultaneously.
 3. **Directory Isolation:** If multiple agents MUST generate code simultaneously, enforce strict boundaries. Add boundary guards instructing Agent A to stay out of the directories Agent B is designated to manipulate.
 
 ---

package/.agent/skills/polish/SKILL.md

@@ -0,0 +1,63 @@
+---
+name: polish
+description: Final production quality pass for spacing, alignment, visual rhythm, dark mode consistency, and edge states. Use before shipping or merging a feature to ensure 100% UI fidelity.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Pre-Ship Quality Audit
+  tier: pro
+  co-requires: [better-ui, harden, fixing-accessibility]
+  trigger-signals:
+    strong: [polish, pre-ship pass, final UI pass, ship check, interface quality check]
+    weak: [double check ui, final touch]
+---
+
+# Polish — Final Pre-Ship UI Quality Pass
+
+The comprehensive pre-ship inspection checklist to verify that code meets top-tier design-engineering standards.
+
+---
+
+## Pre-Ship 10-Point Polish Checklist
+
+| # | Inspection Item | Verification Rule |
+| --- | --- | --- |
+| **1** | **Grid Alignment** | All paddings, margins, and flex gaps use strict 4px/8px multiples. |
+| **2** | **Typography Scale** | Headings use `text-wrap: balance`; body copy limit max `65ch` per line. |
+| **3** | **Tabular Data** | All numbers in tables, badges, and stats use `font-variant-numeric: tabular-nums`. |
+| **4** | **Focus States** | Keyboard tab navigation shows visible, non-clipped `:focus-visible` ring. |
+| **5** | **Press Feedback** | All buttons, links, and cards have explicit `:active` press feedback. |
+| **6** | **Dark Mode** | Dark theme uses relative surface lightness steps and subtle borders instead of dark shadows. |
+| **7** | **Overflow Handling** | Long text strings, email addresses, and filenames use proper text truncation (`truncate` / `line-clamp`). |
+| **8** | **Empty States** | Lists, tables, and search results handle zero-item empty states gracefully. |
+| **9** | **Loading Skeletons** | Slow data loads show matching skeleton pulses instead of sudden layout shifts (CLS). |
+| **10** | **Reduced Motion** | CSS animations and JS motion respect `@media (prefers-reduced-motion: reduce)`. |
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Shipping without truncation**: Letting long user inputs overflow card boundaries or break layouts.
+2. **Missing Dark Mode Contrast**: Using dark text on dark surfaces in theme toggles.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `frontend-reviewer` · `ui-ux-auditor` · `accessibility-reviewer`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Have all 10 polish items been verified across light and dark modes?
+✅ Is text truncation handled for edge-case content lengths?
+✅ Do interactive elements show visible focus indicators during keyboard tab testing?
+```
+
+### 🛑 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.