tribunal-kit 5.8.3 → 5.8.4

package/.agent/skills/cobejs/SKILL.md

@@ -0,0 +1,96 @@
+---
+name: cobejs
+description: Build lightweight, hardware-accelerated 3D interactive animated globes and web orbs using Cobe WebGL.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: 3D Graphics & Canvas Visuals
+  tier: pro
+  co-requires: [60fps-animation, threejs-fundamentals]
+  trigger-signals:
+    strong: [cobejs, Cobe globe, 3D animated globe, interactive WebGL globe, Cobe orb]
+    weak: [globe component, 3D globe]
+---
+
+# Cobe JS — Lightweight 3D WebGL Globe Visuals
+
+Integrate ultra-fast, 5KB WebGL interactive globes for landing page hero sections and interactive location maps.
+
+---
+
+## Cobe Canvas Setup Recipe (React)
+
+```tsx
+import React, { useEffect, useRef } from "react";
+import createGlobe from "cobe";
+
+export function InteractiveGlobe() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    let phi = 0;
+    if (!canvasRef.current) return;
+
+    const globe = createGlobe(canvasRef.current, {
+      devicePixelRatio: 2,
+      width: 600 * 2,
+      height: 600 * 2,
+      phi: 0,
+      theta: 0.3,
+      dark: 1, // OLED dark mode theme
+      diffuse: 1.2,
+      mapSamples: 16000,
+      mapBrightness: 6,
+      baseColor: [0.3, 0.3, 0.3],
+      markerColor: [0.1, 0.8, 0.5],
+      glowColor: [0.1, 0.1, 0.2],
+      markers: [
+        { location: [37.7595, -122.4367], size: 0.05 }, // San Francisco
+        { location: [51.5074, -0.1278], size: 0.05 },   // London
+        { location: [35.6762, 139.6503], size: 0.05 },  // Tokyo
+      ],
+      onRender: (state) => {
+        state.phi = phi;
+        phi += 0.005; // Smooth rotation
+      },
+    });
+
+    return () => globe.destroy();
+  }, []);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      style={{ width: 600, height: 600, maxWidth: "100%", aspectRatio: 1 }}
+    />
+  );
+}
+```
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Forgetting Canvas Destroy Cleanup**: Failing to call `globe.destroy()` on component unmount, causing WebGL context leaks.
+2. **Missing `aspectRatio: 1`**: Failing to constrain aspect ratio, causing globe canvas stretching.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `frontend-reviewer` · `performance-optimizer`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Is `globe.destroy()` invoked in the unmount cleanup function?
+✅ Is `devicePixelRatio` set to match high-DPI screens without GPU slowdown?
+```
+
+### 🛑 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/codebase-design/SKILL.md

@@ -0,0 +1,84 @@
+---
+name: codebase-design
+description: Guidance for designing deep modules with small interfaces and clean seams. Use when structuring a new module, refactoring complex codebases, or designing internal library boundaries.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Software Architecture & Module Design
+  tier: pro
+  co-requires: [clean-code, architecture, domain-modeling]
+  trigger-signals:
+    strong: [codebase-design, deep modules, small interfaces, clean seams, module boundary, software architecture design]
+    weak: [module design, refactor module]
+---
+
+# Codebase Design — Deep Modules & Clean Seams
+
+Architect software with **deep modules**: modules that hide immense internal complexity behind small, simple, intuitive interface seams.
+
+---
+
+## 4 Principles of Deep Module Design
+
+### 1. High Depth Ratio (Simple Interface / Heavy Implementation)
+- **Deep Module**: Small surface area interface hiding extensive internal machinery. (e.g. `fs.readFile()` is 1 simple function hiding thousands of lines of OS file descriptor buffer logic).
+- **Shallow Module**: Large interface surface area relative to its implementation (e.g. a 5-line wrapper function with a 6-argument configuration object). Avoid shallow modules!
+
+```typescript
+// ❌ SHALLOW MODULE: Forces consumer to manage low-level state
+class ShallowUserStorage {
+  public validateUser(u: User): boolean { ... }
+  public serializeUser(u: User): string { ... }
+  public writeToFile(path: string, data: string): void { ... }
+}
+
+// ✅ DEEP MODULE: Hides file serialization & validation under 1 method
+class DeepUserStorage {
+  public async save(user: User): Promise<void> {
+    this.validate(user);
+    const data = this.serialize(user);
+    await this.persist(data);
+  }
+}
+```
+
+### 2. Information Hiding & Encapsulation
+- Keep internal data structures, caching mechanisms, and third-party vendor clients strictly private (`private` / `#privateField`).
+- Expose intent-driven methods (`user.rename("Alice")`) rather than raw property setters (`user.name = "Alice"`).
+
+### 3. Clean Seams for Testability
+- Define interfaces at subsystem boundaries so dependencies can be replaced with mock doubles or fake implementations in tests without modifying production code.
+
+### 4. Separate Policy from Mechanism
+- **Mechanism**: *How* something executes (e.g. HTTP fetching, SQL query building, JSON parsing).
+- **Policy**: *What* business decision is made (e.g. retry 3 times if status is 503). Keep policy pure and mechanism generic.
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Creating Anemic Shallow Wrappers**: Writing 1-line wrapper functions around third-party libraries that add zero abstraction value.
+2. **Leaking Internal Implementation Types**: Exporting low-level internal database types directly in public API interfaces.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Slash command: `/review` or `/tribunal-backend`**
+**Active reviewers: `logic-reviewer` · `type-safety` · `complexity-reviewer`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Does the module expose a minimal interface while encapsulating internal complexity?
+✅ Are internal vendor data structures hidden behind clean domain seams?
+✅ Is policy separated cleanly from low-level mechanism?
+```
+
+### 🛑 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/colorize/SKILL.md

@@ -0,0 +1,77 @@
+---
+name: colorize
+description: Introduce strategic, harmonious, accessible color systems and OKLCH color palettes to visually flat or dull interfaces.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Color Systems & Palette Engineering
+  tier: pro
+  co-requires: [better-colors, frontend-design]
+  trigger-signals:
+    strong: [colorize, color system, OKLCH palette, introduce color, color palette generator, UI color tokens]
+    weak: [add color, theme colors]
+---
+
+# Colorize — Color System & OKLCH Palette Design
+
+Architect uniform, perceptually balanced color scales using the modern OKLCH color space for light and dark modes.
+
+---
+
+## 4 Color System Principles
+
+### 1. Why OKLCH Over HSL/Hex
+- Traditional HSL suffers from perceptual lightness jumps (e.g. pure yellow `#FFFF00` at Lightness 50% looks blindingly bright compared to pure blue `#0000FF` at Lightness 50%).
+- OKLCH enforces constant perceptual lightness ($L$), predictable chroma ($C$), and hue angles ($H$).
+
+```css
+:root {
+  /* Primary Brand Scale in OKLCH: L C H */
+  --primary-50:  oklch(0.97 0.02 250);
+  --primary-100: oklch(0.92 0.04 250);
+  --primary-500: oklch(0.60 0.18 250); /* Main Brand Color */
+  --primary-700: oklch(0.42 0.16 250);
+  --primary-900: oklch(0.24 0.10 250);
+}
+```
+
+### 2. The 60-30-10 Color Budget Rule
+- **60% Dominant Neutral**: Backgrounds, page canvas, card surfaces (`oklch(0.98 0.005 240)`).
+- **30% Structural Secondary**: Typography, borders, icons, navigation chrome (`oklch(0.20 0.01 240)`).
+- **10% Intentional Accent**: Primary actions, key badges, status confirmations (`oklch(0.60 0.18 250)`).
+
+### 3. Functional Status Color Tokens
+Never use random red/green/yellow hex codes. Maintain matching chroma and lightness across status semantic scales:
+- **Success**: `oklch(0.62 0.17 145)` (Emerald)
+- **Warning**: `oklch(0.72 0.16 75)` (Amber)
+- **Destructive**: `oklch(0.58 0.22 25)` (Coral Red)
+- **Info**: `oklch(0.62 0.16 240)` (Sky Blue)
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Random Hex Colors**: Scattering `#3b82f6` or `#ef4444` directly in component files without CSS variables.
+2. **Ignoring Wide-Gamut Displays**: Failing to provide fallback colors for browsers without Display P3 support.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `frontend-reviewer` · `ui-ux-auditor`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are colors declared via CSS variables in the OKLCH color space?
+✅ Does the color distribution strictly honor the 60-30-10 budget?
+✅ Do status colors maintain uniform perceptual lightness ($L \approx 0.60$ - $0.72$)?
+```
+
+### 🛑 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/compact-landing/SKILL.md

@@ -0,0 +1,70 @@
+---
+name: compact-landing
+description: Build compact, premium landing pages with clear CTA hierarchy, quiet typography, restrained visual noise, and high conversion flow.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Compact Landing Page & Minimalist UI
+  tier: pro
+  co-requires: [landing-page, quieter, baseline-ui]
+  trigger-signals:
+    strong: [compact-landing, compact landing page, quiet typography, minimal landing page, restrained UI, high-conversion compact]
+    weak: [simple landing, compact page]
+---
+
+# Compact Landing — Premium Minimalist Landing Pages
+
+Build tight, ultra-focused, high-converting landing pages that deliver value quickly without unnecessary multi-scroll filler.
+
+---
+
+## 4 Compact Landing Rules
+
+### 1. The Single Viewport Value Pitch
+- Above-the-fold content must answer 3 questions instantly within 1 single screen viewport:
+  1. *What is it?* (Clear, un-hypey headline + subhead)
+  2. *What does it look like?* (Crisp UI screenshot or interactive preview component)
+  3. *How do I get it?* (Unambiguous primary CTA input/button)
+
+### 2. Quiet Typographic Hierarchy
+- Use subdued monochrome typography (`oklch(0.95 0.005 240)` background with `oklch(0.20 0.01 240)` body copy).
+- Keep display font sizes restrained (`clamp(1.75rem, 4vw, 2.75rem)`) rather than giant 5rem text blocks.
+
+### 3. Tight Spatial Grid
+- Limit total page section count to max 4 sections:
+  1. Hero + Primary CTA + Product Preview
+  2. Social Proof / Logo Bar
+  3. Feature Grid (3 core benefits max)
+  4. Conversion Footer Card
+
+### 4. Zero Unnecessary Visual Noise
+- Omit decorative background shapes, floating 3D spheres, and rainbow gradients. Let contrast and typography drive visual quality.
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Adding 10 Scroll Sections**: Padding out compact landing pages with generic boilerplate feature grids and stock FAQs when a tight 3-section layout was requested.
+2. **Multiple Competing CTAs**: Adding 4 different buttons in the hero section. Keep 1 primary action button.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `frontend-reviewer` · `ui-ux-auditor`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Does the hero section fit comfortably inside a 1080p desktop viewport without scrolling?
+✅ Is heading font size restrained and balanced (`text-wrap: balance`)?
+✅ Is the page limited to max 4 tight sections?
+```
+
+### 🛑 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/company-logos/SKILL.md

@@ -0,0 +1,73 @@
+---
+name: company-logos
+description: Social proof rows, logo grids, customer carousels, and trust badges layout rules for balanced visual weight and responsive alignment.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Visual Layout & Social Proof
+  tier: pro
+  co-requires: [baseline-ui, landing-page]
+  trigger-signals:
+    strong: [company-logos, logo grid, social proof row, trust badges, customer logos, logo carousel]
+    weak: [logos layout, client logos]
+---
+
+# Company Logos — Social Proof & Trust Grids
+
+Architect balanced, optically aligned logo rows and trust grids that communicate credibility without visual clutter.
+
+---
+
+## 4 Logo Layout Rules
+
+### 1. Optical Weight Normalization
+Logos vary wildly in aspect ratio (e.g. square logos vs wide wordmarks).
+- **Rule**: Set a maximum bounding box (`max-height: 28px`, `max-width: 120px`) and use `object-fit: contain` with `filter: grayscale(100%) opacity(0.7)`.
+- On hover, transition `opacity(1)` and remove grayscale smoothly over `200ms`.
+
+### 2. Monochromatic Harmonization
+- Never display multi-colored corporate logos together—they create visual chaos.
+- Render all logos in monochromatic SVG fill (`fill="currentColor"`) matching `--text-muted` or `--foreground-muted`.
+
+### 3. Responsive Flex Grid
+```css
+.logo-trust-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 2rem 3.5rem; /* Row gap 2rem, Column gap 3.5rem */
+}
+```
+
+### 4. Seamless Ticker Marquee (Optional)
+- For 8+ logos, use a hardware-accelerated CSS marquee animation with duplicate items for seamless continuous looping and `animation-play-state: paused` on hover.
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Unfiltered Raw Logos**: Rendering original multi-colored SVG logos next to each other, creating a messy mismatched visual strip.
+2. **Missing Grayscale / Opacity**: Displaying bright saturated company logos that steal attention away from the hero CTA.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `frontend-reviewer`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are all logos converted to monochromatic `currentColor` or uniform grayscale?
+✅ Are logo heights normalized optically (`max-height: 28px - 32px`)?
+✅ Is generous gap spacing (`2.5rem` - `4rem`) provided between brand marks?
+```
+
+### 🛑 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/create-design-md/SKILL.md

@@ -0,0 +1,104 @@
+---
+name: create-design-md
+description: Create or update a DESIGN.md from an existing product repository or public website, with evidence-based design tokens and guidance. Use when asked to document an interface's design language, reconstruct its visual system, extract design tokens, or give coding agents persistent UI context.
+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: pro
+  co-requires: [extract-design-system, frontend-design]
+  trigger-signals:
+    strong: [create-design-md, DESIGN.md, extract design tokens, document design language, visual system documentation]
+    weak: [design tokens, theme docs]
+---
+
+# Create DESIGN.md — Evidence-Based Design System Specification
+
+Generate or update an authoritative `DESIGN.md` file for a product repository or website by extracting verified design tokens, components, and layout guidance.
+
+---
+
+## 1. Operating Modes
+
+### Repository Mode (Source Code Available)
+1. Scan existing global CSS, Tailwind config, tokens, custom properties (`--color-*`, `--font-*`), and UI primitives (`components/ui/`).
+2. Order of inspection:
+   - Global variables / tokens (`index.css`, `globals.css`, `theme.ts`)
+   - Reusable primitives & variants (`button`, `card`, `dialog`, `input`)
+   - Page routes and layouts
+3. Record canonical values with exact code references.
+
+### URL Mode (Public Web Page)
+1. Inspect computed styles, loaded stylesheets, and DOM element roles at Desktop (1440px) and Mobile (375px) breakpoints.
+2. Require 3 proofs before documenting a value:
+   - **Observation**: Visible or computed on rendered element.
+   - **Basis**: Measured or recurs across sampled pages.
+   - **Consequence**: Directly influences UI implementation decisions.
+
+---
+
+## 2. DESIGN.md Contract Schema
+
+Output must strictly adhere to the following schema structure:
+
+```markdown
+# DESIGN.md — Product Design System
+
+## 1. Visual Identity & Brand Foundations
+- **Core Philosophy**: (e.g. Quiet editorial minimalism with dense information display)
+- **Primary Aesthetic**: (e.g. Subtly tinted dark mode, OKLCH color space)
+
+## 2. Color System & Tokens
+- **Backgrounds**: `--bg-surface` (`oklch(0.14 0.015 250)`), `--bg-surface-raised` (`oklch(0.19 0.02 250)`)
+- **Text & Foreground**: `--text-main` (`oklch(0.96 0.01 250)`), `--text-muted` (`oklch(0.68 0.02 250)`)
+- **Accents**: `--color-primary` (`oklch(0.55 0.22 260)`)
+- **Borders & Dividers**: `1px solid rgba(255, 255, 255, 0.08)`
+
+## 3. Typography & Scale
+- **Headings**: Inter / SF Pro Display, `letter-spacing: -0.025em`, `text-wrap: balance`
+- **Body**: Inter / SF Pro Text, `line-height: 1.5`, `max-width: 65ch`
+- **Data / Numbers**: `font-variant-numeric: tabular-nums`
+
+## 4. Spacing, Geometry & Layers
+- **Spatial Grid**: 8px system (`4px`, `8px`, `12px`, `16px`, `24px`, `32px`)
+- **Border Radius Math**: $\text{Radius}_{\text{outer}} = \text{Radius}_{\text{inner}} + \text{Padding}_{\text{inner}}$
+- **Shadows & Elevation**: Ambient multi-layered shadows (`0 4px 12px -2px rgba(0,0,0,0.08)`)
+
+## 5. Micro-Interactions & Motion
+- **Button Press**: `transform: scale(0.97)` on `:active` (`120ms` spring)
+- **Hover Transitions**: Specific property transitions (no `transition: all`)
+```
+
+---
+
+## Anti-Slop Table
+
+| Anti-Pattern | DESIGN.md Standard | Rationale |
+| --- | --- | --- |
+| Documenting random inline styles | Documenting recurring design tokens only | Establishes enforceable product intent |
+| Guessing token names from raw hex | Extracting verified CSS variables (`var(--...)`) | Ensures 1:1 code compatibility |
+| Over-documenting minor one-off pages | Documenting core reusable component primitives | Focuses on systemic design guidelines |
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Modifying Product Source**: Changing source files during design document generation. `create-design-md` is strictly read-only on product code.
+2. **Inventing Token Names**: Creating fake token names not present in the codebase.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Did I base all documented tokens on verified codebase or computed style evidence?
+✅ Is the generated DESIGN.md saved at the root of the target project?
+✅ Does the document follow the standardized 5-section schema contract?
+```
+
+### 🛑 Verification-Before-Completion (VBC) Protocol
+
+Validate `DESIGN.md` against existing CSS variables to ensure zero token mismatches.

package/.agent/skills/critique/SKILL.md

@@ -0,0 +1,95 @@
+---
+name: critique
+description: Evaluate design quality with structured UX scoring, heuristic analysis, and persona-based usability checks. Use when asked to critique, evaluate, grade, or audit a UI design before implementation.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Design Evaluation & Usability Scoring
+  tier: pro
+  co-requires: [ui-ux-researcher, web-design-guidelines]
+  trigger-signals:
+    strong: [critique, grade UI, evaluate design, UX scoring, heuristic audit, design feedback]
+    weak: [review UI, UX feedback]
+---
+
+# Critique — Structured UX & Design Quality Evaluation
+
+Evaluate interfaces against 6 core usability heuristics and produce an objective design scorecard with prioritized recommendations.
+
+---
+
+## The 6 UX Critique Heuristics
+
+```
+1. Clarity & Cognitive Load (0-10)
+   - Is the primary task obvious within 3 seconds?
+   - Is visual hierarchy clear with distinct primary, secondary, and tertiary elements?
+
+2. Information Architecture & Pacing (0-10)
+   - Is content logically grouped with appropriate negative space?
+   - Is reading flow natural (top-left to bottom-right)?
+
+3. Interaction Mechanics & Tactility (0-10)
+   - Are interactive targets obvious and sized >= 44x44px for touch?
+   - Is immediate feedback provided for hover, press, focus, and loading states?
+
+4. Visual Elegance & Brand Craft (0-10)
+   - Are color palettes harmonious and consistent?
+   - Are typographic scales disciplined and optically balanced?
+
+5. Accessibility & Inclusivity (0-10)
+   - Does contrast meet WCAG AA standards (4.5:1 text, 3:1 UI controls)?
+   - Is the screen fully navigable via keyboard with visible focus indicators?
+
+6. Edge Case Resilience (0-10)
+   - Are zero-item empty states, errors, loading skeletons, and truncated text handled?
+```
+
+---
+
+## Critique Output Format (Required)
+
+Always output the critique as a structured Markdown evaluation:
+
+```markdown
+# 🔍 UX Critique Report
+
+### Overall Quality Score: 8.2 / 10
+
+| Heuristic Domain | Score | Critical Observation |
+| --- | --- | --- |
+| Clarity & Cognitive Load | 8/10 | Hero CTA is clear, but subhead copy is verbose. |
+| Information Architecture | 9/10 | Excellent grouping and card rhythm. |
+| Interaction Mechanics | 7/10 | Missing `:active` press state on primary buttons. |
+| Visual Elegance & Craft | 9/10 | Great typography scale and subtle border treatment. |
+| Accessibility | 8/10 | Text contrast passes; dropdown needs ARIA labels. |
+| Edge Case Resilience | 8/10 | Empty state present; needs loading skeleton. |
+
+### Top 3 Actionable Fixes
+1. **[High Priority]**: Add `:active` scale transform (`scale(0.97)`) to interactive buttons.
+2. **[Medium Priority]**: Add `text-wrap: balance` to display headings to eliminate orphans.
+3. **[Low Priority]**: Truncate secondary card description strings to 2 lines (`line-clamp-2`).
+```
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Vague Superficial Praise**: Giving generic feedback like "Looks great!" without scoring heuristics.
+2. **Hyper-Subjective Nitpicks**: Flagging personal aesthetic preferences as critical flaws. Ground all critique in objective usability heuristics and WCAG guidelines.
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Did I score all 6 heuristics with objective observations?
+✅ Are actionable fixes prioritized by impact (High/Medium/Low)?
+✅ Is all critique grounded in WCAG or established usability heuristics?
+```
+
+### 🛑 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/delight/SKILL.md

@@ -0,0 +1,65 @@
+---
+name: delight
+description: Inject micro-moments of delight, subtle surprise interactions, personality, and tactile feedback into user interfaces. Use when building success celebrations, copy-to-clipboard feedback, empty states, or playful UI elements.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Micro-Delight & Interactive Polish
+  tier: pro
+  co-requires: [whimsy-injector, micro-interaction, emil-design-eng]
+  trigger-signals:
+    strong: [delight, micro-delight, make it playful, add personality, surprise animation, tactile feedback]
+    weak: [sparkle, fun ui, success feedback]
+---
+
+# Delight — Micro-Moments of Tactile UI Polish
+
+Elevate everyday digital interactions with subtle, memorable details that make software a joy to use.
+
+---
+
+## 5 Micro-Delight Patterns
+
+### 1. The Morphing State Checkmark
+- When clicking "Copy Link" or "Save", morph the button icon or label smoothly into a checkmark icon with a quick spring bounce (`scale(1.15) -> scale(1)` over `180ms`), holding for 1.5 seconds before morphing back.
+
+### 2. Micro-Confetti & Particle Bursts
+- On completing a key milestone (e.g. completing onboarding, submitting a project), trigger a lightweight 12-particle CSS/canvas burst anchored directly to the submit button.
+
+### 3. Tactile Drag & Reorder Haptics
+- When dragging list items, elevate the item with a slight tilt ($2^\circ$), drop shadow increase, and scale (`scale(1.02)`), giving a physical card feeling.
+
+### 4. Playful Empty State Animations
+- Transform boring zero-data states with subtle floating illustrations, witty microcopy, and a prominent primary action button.
+
+### 5. Keyboard Shortcut Badges with Tooltips
+- Display subtle keyboard shortcut hints (e.g. `⌘K` or `Ctrl+K`) inside inputs or hover tooltips that respond with a subtle keypress press animation when pressed.
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Overdoing Delight on High-Frequency Actions**: Adding confetti bursts or long animations to actions users perform 50+ times a day. Keep high-frequency delight under 100ms and non-intrusive.
+2. **Ignoring Accessibility**: Failing to check `prefers-reduced-motion` for particle effects or canvas animations.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `motion-reviewer` · `frontend-reviewer`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Is the delight moment brief (< 300ms for motion, 1.5s total hold)?
+✅ Does it respect `prefers-reduced-motion`?
+✅ Is it restricted to occasional milestones or state confirmations?
+```
+
+### 🛑 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.