tribunal-kit 5.8.3 → 5.8.5

package/.agent/skills/improve-codebase-architecture/SKILL.md

@@ -0,0 +1,67 @@
+---
+name: improve-codebase-architecture
+description: Scans a codebase for deepening opportunities, architectural bottlenecks, tight coupling, and produces a prioritized visual improvement roadmap.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Codebase Architectural Audit
+  tier: pro
+  co-requires: [codebase-design, clean-code, architecture]
+  trigger-signals:
+    strong: [improve-codebase-architecture, architectural audit, refactor architecture, decouple modules, codebase refactor plan]
+    weak: [architecture check, fix architecture]
+---
+
+# Improve Codebase Architecture — Architectural Audit & Refactoring
+
+Audit an existing codebase for structural rot, circular dependencies, monolithic controllers, and produce a prioritized refactoring roadmap.
+
+---
+
+## 4 Audit Steps
+
+### 1. Dependency Graph Inspection
+- Map import relationships across modules. Identify circular dependencies (`A -> B -> C -> A`) and break them by introducing event buses or interface abstractions.
+
+### 2. Monolithic Controller Detection
+- Flag files exceeding 500 lines of code containing mixed concerns (database queries, HTTP response handling, email sending, data validation).
+
+### 3. Interface Shrinking (Deepening Modules)
+- Audit public exports. Convert large multi-parameter interfaces into thin, single-responsibility contracts.
+
+### 4. Prioritized Architectural Roadmap Output
+Output audit findings in a clear prioritized Markdown table:
+
+| Impact Level | Architectural Issue | Proposed Seam / Refactor |
+| --- | --- | --- |
+| 🔴 **High Impact** | Direct DB queries inside React Server Components | Extract Repository layer pattern |
+| 🟠 **Medium Impact** | Circular import between Auth and User modules | Introduce `EventBus` for user registration events |
+| 🟡 **Low Impact** | Hardcoded API base URLs across 12 files | Centralize in typed `ConfigService` |
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Shotgun Surgery**: Refactoring 20 files at once without establishing tests or clean interfaces first.
+2. **Ignoring Existing Conventions**: Forgetting existing project patterns and forcing an incompatible framework structure.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `logic-reviewer` · `complexity-reviewer`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are circular dependencies identified and resolved via clean seams?
+✅ Is the refactoring plan broken down into safe, testable phases?
+```
+
+### 🛑 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/improve-ui/SKILL.md

@@ -0,0 +1,83 @@
+---
+name: improve-ui
+description: Audit an existing product surface against its own design evidence, identify verified UI problems, and write self-contained implementation plans for another agent. Strictly read-only on product source. Use when asked to review, refine, improve, or clean up an interface without replacing its identity.
+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 Audit
+  tier: master
+  co-requires: [better-ui, baseline-ui]
+  trigger-signals:
+    strong: [improve-ui, audit interface, refine UI, UI review, design-system drift, UI cleanup plan]
+    weak: [review layout, UI feedback]
+---
+
+# Improve UI — Evidence-Based UI Audit & Implementation Planning
+
+Audit a specific product surface against its governing design tokens and guidelines, identify verified UI defects, and generate self-contained implementation plans for remediation.
+
+---
+
+## 1. Operating Rules & Boundaries
+
+- **Strictly Read-Only on Product Source**: Never modify product source files (`src/`, `components/`, `app/`) during an `improve-ui` audit session.
+- **Output Artifacts Only**: Create plans under `design-plans/` or return an actionable implementation plan to the user.
+- **Respect Product Identity**: Preserve existing component architecture, routing, and product identity.
+
+---
+
+## 2. The 4-Phase Audit Protocol
+
+### Phase 1: Surface Selection & Path Tracing
+1. Focus on one deployable application and one coherent surface family (e.g. `Dashboard / Overview`).
+2. Trace the path from route layout $\rightarrow$ page composition $\rightarrow$ shared UI primitives $\rightarrow$ tokens/CSS variables.
+
+### Phase 2: Design Language Reconstruction
+1. Inspect `DESIGN.md`, `index.css`, Tailwind tokens, or custom properties.
+2. Record active background tokens, typography roles, spatial rules, and border/shadow contracts.
+
+### Phase 3: Proof-Gated Defect Verification
+Before reporting a finding, require 3 explicit proofs:
+- **Observation**: Exact code line or rendered element showing the discrepancy.
+- **Basis**: Violation of documented design token or 8px grid baseline.
+- **Consequence**: Measurable degradation of visual hierarchy, readability, or interaction response.
+
+### Phase 4: Implementation Plan Generation
+Write a self-contained plan specifying:
+- Files to modify
+- Exact CSS/JSX diffs
+- Verification steps (browser preview, contrast check, visual alignment)
+
+---
+
+## Anti-Slop Table
+
+| Audit Pattern | Evidence-Based Rule | Rationale |
+| --- | --- | --- |
+| Rewriting entire components | Targeted visual diff plan | Preserves business logic & state |
+| Guessing design tokens | Citing verified `var(--...)` declarations | Ensures token adherence |
+| Speculative visual preferences | Reporting only verified WCAG/token violations | Prevents arbitrary churn |
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Mutating Code During Audit**: Applying code changes immediately instead of generating a clean implementation plan.
+2. **Re-architecting Scope**: Re-writing component state hooks when only CSS spacing and contrast fixes were requested.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Is the audit strictly read-only on product source code?
+✅ Are all reported findings supported by concrete token or layout evidence?
+✅ Is the generated implementation plan self-contained and ready for execution?
+```
+
+### 🛑 Verification-Before-Completion (VBC) Protocol
+
+Confirm all plan recommendations match project CSS custom properties before delivery.

package/.agent/skills/landing-page/SKILL.md

@@ -0,0 +1,88 @@
+---
+name: landing-page
+description: High-converting landing page structure, hero section layout variance, CTA hierarchy, visual pacing, feature grid storytelling, and social proof placement.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Landing Page Architecture & Conversion
+  tier: pro
+  co-requires: [compact-landing, company-logos, pricing-page, frontend-design]
+  trigger-signals:
+    strong: [landing-page, hero section, CTA hierarchy, conversion landing page, SaaS landing page, feature grid storytelling]
+    weak: [homepage design, marketing page]
+---
+
+# Landing Page — Conversion Architecture & Visual Pacing
+
+Build high-converting, visually stunning landing pages that guide visitors from curiosity to conversion.
+
+---
+
+## The 6-Section Landing Page Blueprint
+
+```
+1. Navigation Header
+   - Sticky blur backdrop, clear logo, 3-4 nav links, primary CTA button on top-right.
+
+2. Hero Section (Above the Fold)
+   - Category Pill / Announcement Badge (top)
+   - High-Impact H1 Headline (max 8 words, text-wrap: balance)
+   - Subtitle (max 2 lines, high legibility)
+   - Dual CTA Buttons: Primary (solid accent) + Secondary (ghost / watch demo)
+   - Interactive Product Preview / App Frame (centered below CTAs)
+
+3. Social Proof Row
+   - Monochromatic company logo bar or customer rating badge immediately below hero.
+
+4. Feature Value Sections (Alternating Rhythm)
+   - 3-column feature grid OR alternating left-text / right-visual sections.
+   - Interactive micro-demos or high-resolution app screenshots over static icons.
+
+5. Testimonials & Case Studies
+   - Real customer quote cards with avatar, name, title, and verified metric ("Boosted retention by 42%").
+
+6. Final Call to Action & Footer
+   - Prominent conversion card banner + comprehensive 4-column footer link map.
+```
+
+---
+
+## Hero Layout Variance Models
+
+Avoid standard left-text / right-image templates on every project. Choose based on product type:
+
+- **Model A: Centered Stacked (Best for Developer Tools & SaaS)**
+  - Centered Pill -> Centered H1 -> Centered Subtitle -> Centered Dual CTA -> Full-width app preview mockup below.
+- **Model B: Asymmetric Split (Best for Complex B2B & Mobile Apps)**
+  - 60% Left column (Heading, bullets, CTA) + 40% Right column (Interactive phone frame or live code preview).
+- **Model C: Full-Bleed Canvas (Best for Creative & AI Tools)**
+  - Full-screen canvas visual background with floating frosted-glass prompt bar and primary CTA.
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Standard Generic Left-Text / Right-Image Every Time**: Re-using the exact same layout template for every marketing page request.
+2. **Multiple Equal Primary Buttons**: Displaying 3 solid colored buttons together, creating CTA confusion.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `frontend-reviewer` · `ui-ux-auditor`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Is there a single, unambiguous primary CTA button above the fold?
+✅ Is heading text balanced with `text-wrap: balance`?
+✅ Is social proof placed immediately following the hero section?
+```
+
+### 🛑 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/lint-and-validate/SKILL.md

@@ -186,7 +186,6 @@ repos:
 | Script                     | Purpose                                   | Run With                                         |
 | -------------------------- | ----------------------------------------- | ------------------------------------------------ |
 | `.agent/scripts/lint_runner.js`   | Runs project linting and reports findings | `node .agent/scripts/lint_runner.js <project_path>`   |
-| `scripts/type_coverage.py`       | Measures TypeScript type coverage         | `python scripts/type_coverage.py <project_path>` |
 
 ---
 

package/.agent/skills/local-first-architecture/SKILL.md

@@ -0,0 +1,66 @@
+---
+name: local-first-architecture
+description: Local-first architecture guidance for instant-feeling web & desktop apps, optimistic updates, IndexedDB sync engines, offline operation, and Conflict-free Replicated Data Types (CRDTs).
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Local-First Architecture & Sync Engines
+  tier: pro
+  co-requires: [local-first, realtime-patterns, architecture]
+  trigger-signals:
+    strong: [local-first-architecture, Linear architecture, optimistic updates, IndexedDB sync, CRDT, offline-first app, zero-latency UI]
+    weak: [offline sync, optimistic state]
+---
+
+# Local-First Architecture — Instant UI & Sync Engines
+
+Architect software that reads and writes to local storage (SQLite/IndexedDB) first, ensuring instant zero-latency UI mutations with background server synchronization.
+
+---
+
+## 4 Pillars of Local-First Architecture
+
+### 1. Read & Write Local First
+- **Zero Network Latency**: UI queries (`select * from tasks`) run synchronously or near-instantaneously against in-memory or IndexedDB caches.
+- Mutations update the local cache immediately (*optimistic write*), appending a mutation log item to an outbound sync queue.
+
+### 2. Outbound Mutation Queue & Idempotency
+- Store mutation logs in a persistent local queue (`IndexedDB` / `SQLite`).
+- Assign every client mutation a unique UUID (`idempotencyKey`).
+- When network connection is restored, flush queue items sequentially with automatic retry on 5xx failures.
+
+### 3. Conflict Resolution (CRDTs & LWW)
+- **Last-Write-Wins (LWW)**: Timestamp + Client ID ordering for simple fields.
+- **CRDTs (Yjs / Automerge)**: Conflict-free Replicated Data Types for collaborative text editing and array state.
+
+### 4. Background Delta Streaming
+- Receive database updates via WebSockets or Server-Sent Events (SSE) as thin binary deltas (`sync_version > client_version`), applying changes to local storage without re-fetching full datasets.
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Waiting for Server API Response Before UI Render**: Blocking the user interface with a spinner while waiting for a POST request response.
+2. **Volatile Local State**: Keeping mutation queues in non-persistent JS memory, losing unsaved user edits on page refresh.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `logic-reviewer` · `resilience-reviewer` · `architecture-reviewer`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are user actions reflected instantly in local UI state?
+✅ Is the mutation queue persisted in IndexedDB/SQLite for offline durability?
+✅ Are all server API mutations idempotent with client-generated UUID keys?
+```
+
+### 🛑 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/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.