tribunal-kit 5.8.3 → 5.8.5

package/.agent/skills/progressive-blur/SKILL.md

@@ -0,0 +1,100 @@
+---
+name: progressive-blur
+description: Smooth progressive backdrop blurs, depth overlays, and modern glassmorphism using CSS mask-image and multi-layered backdrop filters without GPU performance drops.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Glassmorphism & Depth Engineering
+  tier: pro
+  co-requires: [frontend-design, 60fps-animation]
+  trigger-signals:
+    strong: [progressive-blur, backdrop blur, glassmorphism, depth overlay, progressive backdrop, frosted glass]
+    weak: [blur effect, blur background]
+---
+
+# Progressive Blur — Multi-Layered Glassmorphism & Depth
+
+Architect high-performance, progressive backdrop blurs and frosted glass interfaces that feel tactile and fluid.
+
+---
+
+## 3 Progressive Blur Techniques
+
+### 1. Multi-Step Masked Progressive Blur
+To prevent harsh edge cutoffs in blurred headers or footers, blend 4 progressive blur layers using linear gradient masks:
+
+```css
+.progressive-blur-header {
+  position: sticky;
+  top: 0;
+  z-index: 40;
+  pointer-events: none;
+}
+
+.blur-layer-1 {
+  backdrop-filter: blur(2px);
+  mask: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 25%);
+}
+
+.blur-layer-2 {
+  backdrop-filter: blur(8px);
+  mask: linear-gradient(to bottom, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 65%);
+}
+
+.blur-layer-3 {
+  backdrop-filter: blur(16px);
+  mask: linear-gradient(to bottom, rgba(0,0,0,1) 65%, rgba(0,0,0,1) 100%);
+}
+```
+
+### 2. Glass Card Depth Recipe
+```css
+.glass-card {
+  background: rgba(255, 255, 255, 0.65);
+  backdrop-filter: blur(16px) saturate(180%);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.08);
+}
+
+@media (prefers-color-scheme: dark) {
+  .glass-card {
+    background: rgba(18, 18, 20, 0.70);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+  }
+}
+```
+
+### 3. GPU Hardware Acceleration Protection
+Backdrop blurs can cause frame drops if animated directly.
+- **Rule**: Never animate `backdrop-filter: blur()` properties during scroll or transitions. Animate `opacity` of a static blurred pseudo-element instead!
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Animating `backdrop-filter` radius**: Animating `blur(0px)` to `blur(20px)` on every frame, which tanks GPU performance to under 20fps.
+2. **Missing vendor prefixes**: Forgetting `-webkit-backdrop-filter` for Safari compatibility.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `frontend-reviewer` · `performance-optimizer`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are `-webkit-backdrop-filter` vendor prefixes present?
+✅ Is `opacity` animated instead of directly interpolating `backdrop-filter` radius?
+✅ Is dark mode contrast preserved over frosted glass surfaces?
+```
+
+### 🛑 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/quieter/SKILL.md

@@ -0,0 +1,68 @@
+---
+name: quieter
+description: Tone down overly loud, noisy, visually aggressive, or distracting designs while maintaining high visual quality. Use when a UI feels cluttered, overwhelming, tacky, or visually hyperactive.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Visual Design & Restraint
+  tier: pro
+  co-requires: [distill, swiss-design, compact-landing]
+  trigger-signals:
+    strong: [quieter, tone down, too loud, visual noise, too aggressive, tacky, calm ui, simplify visual]
+    weak: [subdue, tone down colors, lessen contrast]
+---
+
+# Quieter — Visual Restraint & Calm Interface Design
+
+Reduce visual noise, eliminate unnecessary color competition, and restore calm focus to chaotic interfaces.
+
+---
+
+## 5 Restraint Tactics
+
+### 1. Palette Subjugation
+- **Reduce Primary Colors**: Limit saturated colors to a single primary action. Turn secondary accent colors into subtle monochrome tones (`oklch(0.92 0.01 240)`).
+- **Mute Background Surfaces**: Replace multi-colored cards or high-saturation gradient backgrounds with quiet, neutral monochrome surfaces.
+
+### 2. De-emphasize Borders & Outlines
+- **Subtle Surface Elevation**: Replace harsh 100% black/white borders with subtle surface background differences ($L \pm 3\%$) or ultra-light 5% opacity borders.
+
+### 3. Subdue Typography Scaling
+- **Reduce Font Weight Spikes**: Replace heavy 900 bold display headings with refined semibold (`600`) or medium (`500`) typography.
+- **Normalize Font Sizes**: Reduce font size jumps between section headers and subheaders to create smooth visual harmony.
+
+### 4. Calm Motion & Animations
+- **Eliminate Continuous Animations**: Remove spinning gradient borders, pulsing badges, and bouncing icons. Restrict motion exclusively to user-initiated actions.
+- **Shorten Transitions**: Keep hover state transitions subtle and fast ($\le 150\text{ms}$).
+
+### 5. Expand Negative Space
+- **Increase Padding**: Give content room to breathe by increasing section paddings by 25%-50%, reducing cognitive overload.
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Making Text Unreadable**: Reducing color saturation so much that text fails WCAG AA contrast (below 4.5:1).
+2. **Stripping Functional Indicators**: Removing error/warning colors when reducing palette noise. Keep functional colors crisp.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `frontend-reviewer` · `ui-ux-auditor`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are saturated colors restricted to primary actions?
+✅ Did I retain minimum 4.5:1 text contrast for all body and label copy?
+✅ Has unnecessary layout animation or pulsing been eliminated?
+```
+
+### 🛑 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/react-doctor/SKILL.md

@@ -0,0 +1,70 @@
+---
+name: react-doctor
+description: Scan React and Next.js applications for security, performance, re-render inefficiencies, memory leaks, and correctness issues.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: React Optimization & Code Health
+  tier: pro
+  co-requires: [react-specialist, nextjs-react-expert, performance-profiling]
+  trigger-signals:
+    strong: [react-doctor, React performance scan, fix React re-renders, React memory leak, Million.js audit]
+    weak: [React audit, fix React bugs]
+---
+
+# React Doctor — React Performance & Health Audit
+
+Diagnose and resolve unnecessary re-renders, state synchronization bugs, memory leaks, and hook dependency issues in React applications.
+
+---
+
+## 4 React Health Checks
+
+### 1. Unnecessary Re-render Prevention
+- **Inline Object/Array Props**: Passing inline objects `<Child config={{ color: 'blue' }} />` creates new references every render. Wrap with `useMemo` or declare outside component scope.
+- **Inline Callback Props**: Passing inline functions `<Child onClick={() => doSomething()} />` breaks `React.memo`. Wrap callbacks with `useCallback`.
+
+### 2. State Colocation
+- Don't lift state higher than necessary. Keep state local to the component consuming it to isolate re-render subtrees.
+
+### 3. Cleanup in `useEffect`
+- Every event listener, interval, or subscription created in `useEffect` MUST return a cleanup function to prevent memory leaks:
+```tsx
+useEffect(() => {
+  const handleResize = () => setWidth(window.innerWidth);
+  window.addEventListener('resize', handleResize);
+  return () => window.removeEventListener('resize', handleResize);
+}, []);
+```
+
+### 4. Derived State Anti-Pattern
+- Never duplicate props into state (`const [name, setName] = useState(props.name)`). Calculate derived values during rendering directly.
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Over-using `useCallback` everywhere**: Wrapping trivial primitives or 1-line functions that aren't passed to memoized children.
+2. **Missing `useEffect` Dependencies**: Omitting referenced variables from effect dependency arrays without proper `useCallback` or ref wrapping.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `react-specialist` · `type-safety`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are event listeners and timers properly cleaned up in `useEffect` returns?
+✅ Are expensive calculations wrapped in `useMemo`?
+✅ Is state colocated to minimize re-render scope?
+```
+
+### 🛑 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/redesign-skill/SKILL.md

@@ -0,0 +1,65 @@
+---
+name: redesign-skill
+description: Audit and upgrade existing interfaces to premium visual quality while preserving product functionality and business logic.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Interface Redesign & UI Upgrade
+  tier: pro
+  co-requires: [taste-skill, better-ui, baseline-ui]
+  trigger-signals:
+    strong: [redesign-skill, redesign existing project, UI upgrade, overhaul interface, modernize UI, upgrade visual quality]
+    weak: [redesign UI, revamp site]
+---
+
+# Redesign Skill — UI Upgrade Methodology
+
+Audit legacy or unstyled user interfaces and transform them into modern, production-grade products without breaking underlying business logic.
+
+---
+
+## 4 Redesign Upgrade Steps
+
+### Step 1: Logic & State Isolation
+Before touching CSS or HTML layout:
+- Extract all state hooks (`useState`), event handlers (`onClick`), and API props. **Zero business logic may be deleted or altered.**
+
+### Step 2: Spatial & Typographic Grid Overhaul
+- Replace arbitrary pixel margins with an 8px spatial system (`gap-4`, `p-6`).
+- Apply modular font scaling (`text-sm`, `text-base`, `text-2xl`, `text-4xl`) with `text-wrap: balance` on headings.
+
+### Step 3: Color & Surface Elevation Upgrade
+- Replace raw `#fff` / `#000` colors with an OKLCH surface hierarchy (`--bg-base`, `--bg-surface`, `--bg-elevated`).
+- Replace hard black borders with subtle 8% opacity surface borders and multi-layered ambient shadows.
+
+### Step 4: Micro-Interaction & Polish Pass
+- Add `:active` scale press feedback (`scale(0.97)`), smooth hover state transitions, and keyboard focus rings (`:focus-visible`).
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Breaking Functionality During Redesign**: Deleting event handlers, state hooks, or form field inputs while redesigning the layout.
+2. **Generic Template Replacement**: Replacing a unique custom feature with a stock generic card grid.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `frontend-reviewer` · `ui-ux-auditor`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are all original props, event handlers, and state variables 100% preserved?
+✅ Is the visual hierarchy upgraded using OKLCH surface levels and multi-layer shadows?
+✅ Have interactive controls received tactile `:active` press feedback?
+```
+
+### 🛑 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/shape/SKILL.md

@@ -0,0 +1,73 @@
+---
+name: shape
+description: Plan feature UX before writing code via structured Socratic design interviews. Use when a user asks to plan a new screen, onboarding flow, feature UX, or user interaction before implementation.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Pre-Code UX Shaping
+  tier: pro
+  co-requires: [appflow-wireframe, brainstorming, plan-writing]
+  trigger-signals:
+    strong: [shape, UX shaping, feature design, pre-code planning, user flow interview, shape workflow]
+    weak: [plan UI, spec out feature]
+---
+
+# Shape — Pre-Code UX & Feature Shaping
+
+Uncover core requirements, define interaction boundaries, and lock down screen flows BEFORE writing frontend code.
+
+---
+
+## The 3-Step Shaping Workflow
+
+### Step 1: High-Ambiguity Socratic Interview
+Before designing components, ask 2 targeted questions about high-ambiguity choices:
+1. **Primary User Goal**: *What is the single most important action the user must accomplish on this screen?*
+2. **Context & Entry Point**: *Where does the user arrive from, and where do they expect to go after completing this step?*
+
+### Step 2: Screen Boundaries & State Inventory
+Define the component states before implementation:
+- **Default State**: Primary layout with standard populated data.
+- **Empty State**: Zero-data view with creation prompt.
+- **Loading State**: Skeleton placeholders.
+- **Error State**: Graceful fallback UI with retry action.
+- **Success State**: Instant feedback toast or confirmation view.
+
+### Step 3: Architecture Contract
+Summarize the screen contract in a concise visual outline before coding:
+```
+[Screen Title]
+  ├── Entry Point: (e.g. Dashboard -> "New Project" button)
+  ├── Primary Action: (e.g. Create Project Form)
+  ├── Secondary Actions: (e.g. Import from GitHub)
+  └── Exit Point: (e.g. Redirect to /project/[id])
+```
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Jumping straight to code**: Writing CSS/React components without clarifying user goals or entry/exit points.
+2. **Over-asking questions**: Asking more than 2-3 questions. Prioritize only blocking architectural ambiguities.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `ui-ux-auditor`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are the entry and exit points of the screen explicitly defined?
+✅ Are all 5 screen states (default, empty, loading, error, success) planned?
+✅ Has the user confirmed the core interaction boundary before code generation?
+```
+
+### 🛑 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/soft-skill/SKILL.md

@@ -0,0 +1,72 @@
+---
+name: soft-skill
+description: High-end visual design guidance for premium typography, spacing, depth, and animation systems.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Luxury Visual Design & Soft Depth
+  tier: pro
+  co-requires: [taste-skill, progressive-blur, impeccable]
+  trigger-signals:
+    strong: [soft-skill, high end visual design, luxury depth, soft UI, elegant spacing system, soft shadow UI]
+    weak: [elegant UI, soft style]
+---
+
+# Soft Skill — High-End Luxury Visual Design & Depth
+
+Craft high-end, luxury interfaces featuring soft depth, gentle surface transitions, quiet typography, and tactile spatial rhythm.
+
+---
+
+## 4 Soft Design Rules
+
+### 1. Multi-Layer Soft Ambient Depth
+- Avoid harsh drop-shadows. Use low-opacity multi-layered ambient lighting shadows:
+```css
+.soft-depth-card {
+  background: var(--surface);
+  box-shadow:
+    0 2px 4px rgba(0, 0, 0, 0.02),
+    0 8px 16px rgba(0, 0, 0, 0.04),
+    0 24px 48px rgba(0, 0, 0, 0.06);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+}
+```
+
+### 2. Generous Negative Space Cadence
+- Increase component padding by 1.5x (e.g. `24px` -> `36px`, `32px` -> `48px`). Generous negative space is the ultimate indicator of luxury software.
+
+### 3. Subdued Monochrome Color Harmonies
+- Use quiet, low-chroma monochromatic palettes (`oklch(0.97 0.005 240)` background with `oklch(0.22 0.01 240)` primary text).
+
+### 4. Fluid, Low-Velocity Transitions
+- Transition speeds should be gentle ($\approx 250\text{ms}$) with strong ease-out curves (`cubic-bezier(0.16, 1, 0.3, 1)`).
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Muddy Dark Shadows**: Using heavy `rgba(0,0,0,0.5)` drop shadows on light surfaces.
+2. **Cramped Containers**: Packing text elements tightly inside small containers with minimal padding.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `frontend-reviewer` · `ui-ux-auditor`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are drop shadows multi-layered with opacity under 6% per layer?
+✅ Is container padding generous ($\ge 24\text{px}$)?
+✅ Is color palette subdued and monochromatic?
+```
+
+### 🛑 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/sounds-on-the-web/SKILL.md

@@ -0,0 +1,100 @@
+---
+name: sounds-on-the-web
+description: Web Audio API procedural sound synthesis for tactile micro-interaction feedback (clicks, pops, success chimes) with mute toggles and accessibility awareness.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Audio Feedback & Tactile Sound Synthesis
+  tier: pro
+  co-requires: [delight, micro-interaction]
+  trigger-signals:
+    strong: [sounds-on-the-web, Web Audio API sound, UI sound feedback, procedural audio click, audio feedback toggle]
+    weak: [ui sound, audio click]
+---
+
+# Sounds on the Web — Web Audio API Sound Feedback
+
+Synthesize lightweight, zero-dependency tactile sound effects for web micro-interactions.
+
+---
+
+## Zero-Asset Web Audio API Click Synthesizer
+
+Never load external MP3 audio files for simple UI clicks. Synthesize clean sine/triangle pops procedurally in under 10 lines of code:
+
+```typescript
+// Lightweight procedural Web Audio pop synthesizer
+class SoundFeedback {
+  private ctx: AudioContext | null = null;
+  private isMuted: boolean = false;
+
+  private init() {
+    if (!this.ctx && typeof window !== 'undefined') {
+      const AudioCtx = window.AudioContext || (window as any).webkitAudioContext;
+      if (AudioCtx) this.ctx = new AudioCtx();
+    }
+  }
+
+  public playPop(frequency = 600, duration = 0.04) {
+    if (this.isMuted) return;
+    this.init();
+    if (!this.ctx) return;
+
+    if (this.ctx.state === 'suspended') {
+      this.ctx.resume();
+    }
+
+    const osc = this.ctx.createOscillator();
+    const gain = this.ctx.createGain();
+
+    osc.type = 'sine';
+    osc.frequency.setValueAtTime(frequency, this.ctx.currentTime);
+    // Frequency pitch drop for tactile "pop"
+    osc.frequency.exponentialRampToValueAtTime(120, this.ctx.currentTime + duration);
+
+    gain.gain.setValueAtTime(0.12, this.ctx.currentTime); // Low volume
+    gain.gain.exponentialRampToValueAtTime(0.001, this.ctx.currentTime + duration);
+
+    osc.connect(gain);
+    gain.connect(this.ctx.destination);
+
+    osc.start();
+    osc.stop(this.ctx.currentTime + duration);
+  }
+
+  public setMute(muted: boolean) {
+    this.isMuted = muted;
+  }
+}
+
+export const soundFX = new SoundFeedback();
+```
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Autoplay Audio Errors**: Triggering Web Audio API before user gesture interaction (violating browser autoplay policies).
+2. **Missing Mute Toggle**: Failing to provide a persistent sound toggle switch in application settings.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `frontend-reviewer`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Is AudioContext initialized strictly inside/after user gesture handlers?
+✅ Is volume gain kept subtle ($\le 0.15$ max volume)?
+✅ Is a persistent sound mute option provided?
+```
+
+### 🛑 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/svg-animation/SKILL.md

@@ -0,0 +1,91 @@
+---
+name: svg-animation
+description: SVG stroke draw-on effects, path morphing, animated icons, motion paths, and interactive vector graphics.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Vector SVG Motion & Path Animation
+  tier: pro
+  co-requires: [morphing-icons, 60fps-animation]
+  trigger-signals:
+    strong: [svg-animation, stroke draw-on, path morphing, animated SVG, SVG stroke-dasharray, motion path]
+    weak: [svg motion, animated icon]
+---
+
+# SVG Animation — Stroke Draw-On & Path Morphing
+
+Craft crisp, resolution-independent vector animations using CSS, Framer Motion, or GSAP.
+
+---
+
+## 3 SVG Motion Techniques
+
+### 1. Pure CSS Stroke Draw-On Effect
+```css
+@keyframes draw-path {
+  from { stroke-dashoffset: 1000; }
+  to { stroke-dashoffset: 0; }
+}
+
+.draw-signature-path {
+  stroke-dasharray: 1000;
+  stroke-dashoffset: 1000;
+  animation: draw-path 1.8s cubic-bezier(0.65, 0, 0.35, 1) forwards;
+}
+```
+
+### 2. Framer Motion SVG Path Length Animation
+```tsx
+import { motion } from "framer-motion";
+
+export function DrawCheckmark() {
+  return (
+    <svg className="w-8 h-8 stroke-emerald-500 stroke-2 fill-none" viewBox="0 0 24 24">
+      <motion.path
+        d="M5 13l4 4L19 7"
+        initial={{ pathLength: 0 }}
+        animate={{ pathLength: 1 }}
+        transition={{ duration: 0.4, ease: "easeOut" }}
+      />
+    </svg>
+  );
+}
+```
+
+### 3. SVG Path Morphing (GSAP MorphSVGPlugin)
+- Morph between 2 vector paths with identical point counts or using GSAP MorphSVG:
+```javascript
+gsap.to("#start-shape", {
+  morphSVG: "#end-shape",
+  duration: 0.6,
+  ease: "power2.inOut"
+});
+```
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Incorrect `stroke-dasharray` Length**: Guessing path lengths without measuring `path.getTotalLength()`, resulting in clipped or incomplete draw-on animations.
+2. **Missing `fill="none"`**: Forgetting `fill="none"` on draw-on stroke paths, causing black fill shapes during path animation.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `frontend-reviewer` · `motion-reviewer`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Is `stroke-dasharray` calibrated to match the true SVG path length?
+✅ Is `vector-effect="non-scaling-stroke"` applied if SVG elements scale responsively?
+```
+
+### 🛑 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.