tribunal-kit 9.0.0 → 9.0.2

package/skills/ui-reasoning-engine/SKILL.md

@@ -0,0 +1,230 @@
+---
+name: ui-reasoning-engine
+description: Use when Enforces a structured cognitive pipeline that forces the agent to analyze user goals, information architecture, platform constraints, and design tokens before styling any component.
+version: 5.0.0
+last-updated: 2026-09-13
+skills:
+  - product-aware-heuristics
+  - interface-design
+  - better-colors
+  - better-ui
+tools: Read, Grep, Glob, Bash, Edit, Write
+scripts-binding:
+  - .agent/scripts/lint_runner.js
+  - .agent/scripts/verify_all.js
+---
+
+# UI Reasoning Engine — The Cognitive Design Loop
+
+## Mandatory Pre-Flight Context Inspection
+
+Before generating, refactoring, or reviewing code in the `ui-reasoning-engine` domain, inspect these 5 critical parameters:
+
+1. **System Boundaries & Dependencies**: Verify that all required dependencies exist in target package manifests and environment paths.
+2. **Runtime Context & Platform Invariants**: Confirm target platform constraints (Node.js, Browser, Mobile OS, Edge runtime) before applying APIs.
+3. **Execution Guardrails**: Identify potential side-effects, state mutations, and unhandled asynchronous exceptions.
+4. **Validation & Type Contracts**: Validate input data schemas and strict type constraints across all module interfaces.
+5. **Observability & Proof of Execution**: Ensure execution produces tangible verification signals (terminal output, tests, metrics).
+
+## Activation Boundaries
+
+- **Activate when:** Use when Enforces a structured cognitive pipeline that forces the agent to analyze user goals, information architecture, platform constraints, and design tokens before styling any component.
+- **DO NOT activate when:** The task falls outside the `ui-reasoning-engine` domain or is managed by a different dedicated specialist.
+
+## 🔁 Multi-Pass Execution Protocol
+
+Execute all non-trivial tasks through this 7-pass cognitive loop:
+
+| Pass | Phase | Core Action |
+|:---|:---|:---|
+| **Pass 1** | **Understand** | Deconstruct the user's explicit objective, implicit requirements, and platform constraints. |
+| **Pass 2** | **Plan** | Decompose the task into smallest logical steps; map dependencies and required tool calls. |
+| **Pass 3** | **Execute** | Implement the solution with production-grade craft, zero placeholders, and strict typing. |
+| **Pass 4** | **Verify** | Run linters, unit tests, or compiler checks to validate structural correctness. |
+| **Pass 5** | **Attack** | Perform an adversarial review searching for edge-case failures, race conditions, and traps. |
+| **Pass 6** | **Improve** | Eliminate discovered friction, optimize performance, and harden error boundaries. |
+| **Pass 7** | **Quality Gate** | Enforce Verification-Before-Completion (VBC) with concrete terminal proof before finalizing. |
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+---
+
+
+---
+
+## The 16-Step Reasoning Pipeline
+
+```
+User Intent ↓ Product Classification ↓ User Classification ↓ Primary User Goals ↓ Task Frequency ↓ Information Architecture ↓ Interaction Model ↓ Content Hierarchy ↓ Platform Constraints ↓ Visual Direction ↓ Design System Selection ↓ Component Architecture ↓ Responsive Strategy ↓ Accessibility Strategy ↓ Motion Strategy ↓ Implementation
+```
+
+### 1. User Intent
+
+- **Input:** User prompt description.
+- **Analysis:** Analyze what the user is _actually_ trying to accomplish.
+- **Result:** Is this an analytical task (comparing figures), an operational task (inputting records), a navigational task (getting to another screen), or an emotional/brand task (purchasing, onboarding)?
+
+### 2. Product Classification
+
+- **Input:** Chosen intent.
+- **Analysis:** Categorize the product to choose the correct heuristic pack (see `product-aware-heuristics` skill).
+- **Result:** SaaS, Developer Tool, Analytics Dashboard, Luxury/Marketing, AI Interface, Healthcare, Fintech, E-commerce, or Experimental.
+
+### 3. User Classification
+
+- **Input:** Product category.
+- **Analysis:** Identify the target audience's demographics and expertise.
+- **Result:** Is the user an expert operator (requires high density, shortcuts, speed), a casual consumer (requires clarity, onboarding, simplicity), or someone with temporary/permanent accessibility challenges?
+
+### 4. Primary User Goals
+
+- **Input:** User classification.
+- **Analysis:** List the 3 most frequent tasks the user will perform on this screen.
+- **Result:** How do we make the primary task take the least physical and cognitive effort (Fitts's Law)?
+
+### 5. Task Frequency & Pace
+
+- **Input:** Primary user goals.
+- **Analysis:** Determine whether this is a high-frequency daily tool (e.g., terminal, text editor) or a low-frequency workflow (e.g., onboarding, checkout).
+- **Result:** High frequency demands extreme speed, efficiency, and keyboard workflows. Low frequency demands validation, guardrails, and instructional microcopy.
+
+### 6. Information Architecture (IA)
+
+- **Input:** Spacing guidelines.
+- **Analysis:** Map the relationships between data fields and screen areas.
+- **Result:** Group related data items together using Gestalt principles of proximity and common region. Do not separate related data with arbitrary containers.
+
+### 7. Interaction Model
+
+- **Input:** IA relationships.
+- **Analysis:** Define how users navigate, filter, and modify data.
+- **Result:** Are we using modal dialogs, slide-out drawers, inline disclosures, tabs, or split-screen panels? Choose based on cognitive load and screen size.
+
+### 8. Content Hierarchy
+
+- **Input:** Interaction model.
+- **Analysis:** Rank items by visual weight.
+- **Result:** The eye must see the most important element first (Primary Action / Primary Figure), followed by secondary details, then supporting metadata.
+
+### 9. Platform Constraints
+
+- **Input:** Content hierarchy.
+- **Analysis:** Identify the target environment.
+- **Result:** Desktop (mouse precision, wide viewport), Mobile (coarse pointer, bottom action zone), or Cross-Platform.
+
+### 10. Visual Direction & Mood
+
+- **Input:** Platform constraints.
+- **Analysis:** Select a distinctive theme that matches the product purpose (from `DESIGN.md`).
+- **Result:** Swiss Precision, Brutalist, Dark Luxury, Editorial, Neo-Glassmorphism, Soft Minimal, Retro Analog, or Neon Cyberpunk.
+
+### 11. Design System Selection
+
+- **Input:** Visual Direction.
+- **Analysis:** Match colors, radius, and shadows to the Visual Direction.
+- **Result:** Never use raw hex colors. Use OKLCH semantic variables (`--bg-surface`, `--color-primary`, `--border-subtle`).
+
+### 12. Component Architecture
+
+- **Input:** Design system.
+- **Analysis:** Decompose the UI into primitives (headless buttons, fields), components (cards, forms), and patterns (dashboards, headers).
+- **Result:** Prevent duplication. Reuse existing UI tokens and patterns.
+
+### 13. Responsive Strategy
+
+- **Input:** Component list.
+- **Analysis:** Plan reflow, resizing, and pointer changes.
+- **Result:** Avoid scaling down desktop interfaces. Reorganize layouts using container queries (`@container`) and CSS clamp functions.
+
+### 14. Accessibility (A11y) Strategy
+
+- **Input:** Responsive plan.
+- **Analysis:** Verify contrast, keyboard paths, and ARIA labels.
+- **Result:** Verify target sizes are at least 24px (standard AA) and preferably 44px (touch). Contrast must meet APCA Lc ratios.
+
+### 15. Motion Strategy
+
+- **Input:** Accessibility strategy.
+- **Analysis:** Define transitions and state changes.
+- **Result:** Ensure all animations serve a purpose (feedback, orientation, or progression) and respect `prefers-reduced-motion`.
+
+### 16. Implementation
+
+- **Input:** All prior steps trace.
+- **Analysis:** Generate the actual semantic markup, CSS custom properties, and logic.
+- **Result:** Output code block.
+
+---
+
+## Enforcement Protocol
+
+When building any UI, the Maker Agent must document this reasoning loop before returning the final code. Output the reasoning as a collapsed markdown block:
+
+```markdown
+<details>
+<summary>🧠 UI Reasoning Engine Trace</summary>
+
+1. **Intent:** [Analytical/Operational/etc.]
+2. **Product Category:** [SaaS/DevTool/etc.]
+3. **User Type:** [Expert/Casual]
+4. **Primary Goals:** [Goal 1, 2, 3]
+5. **Frequency:** [High/Low]
+6. **IA & Grouping:** [Data relationships]
+7. **Interaction Model:** [Modals/Drawers/Tabs]
+8. **Content Hierarchy:** [Primary → Secondary → Muted]
+9. **Platform:** [Desktop/Mobile/Tablet]
+10. **Visual Mood:** [Swiss/Editorial/etc.]
+11. **Tokens Used:** [OKLCH variables]
+12. **A11y Strategy:** [Focus paths, contrast levels]
+13. **Responsive Plan:** [Breakpoints & clamp sizes]
+14. **Motion Plan:** [Easing, durations]
+
+</details>
+```
+
+---
+
+## 🚨 Edge-Case & Failure Mode Matrix
+
+| Scenario | Risk | Mitigation Strategy |
+|:---|:---|:---|
+| **Empty or Null Inputs** | Unhandled exception or unexpected rendering collapse | Enforce fallback guards, optional chaining, and explicit empty state handlers |
+| **Network Timeout / Latency** | Hanging operations or duplicate side-effects | Implement bounded abort controllers, exponential backoff, and idempotency keys |
+| **Concurrency / Race Conditions** | Stale state overwrite or inconsistent data mutations | Use atomic transactions, mutex locking, or cancel-on-resubmit controls |
+| **Invalid Schema / Malformed Payload** | Downstream runtime errors or security injection | Validate boundary payloads with Zod/Pydantic schemas prior to execution |
+| **Resource / Memory Saturation** | OOM errors, frame drops, or memory leaks | Clean up listeners, cancel active timers, and enforce pagination/virtualization |
+
+---
+
+## 🤖 LLM-Specific Traps Table
+
+| Anti-Pattern | What AI Commonly Does Wrong | What Is Actually Correct |
+|:---|:---|:---|
+| **Uncontrolled Re-render Loop** | Mutating state inside render bodies or omitting hook dependencies | Wrap effects with explicit deps and isolate reactive derivations in useMemo |
+| **Accessibility Neglect** | Interactive <div> without role="button", tabIndex, or onKeyDown | Use semantic <button> or provide ARIA role, keyboard handlers, and focus ring |
+| **Layout Shift Flash** | Images/dynamic content without aspect-ratio or explicit dimensions | Enforce aspect-ratio or skeleton placeholders to guarantee zero CLS |
+
+---
+
+## 🏛️ Tribunal Verification & Guardrails
+
+**Active Reviewers:** `frontend-reviewer` · `type-safety` · `ui-ux-auditor` · `complexity-reviewer`
+**Slash Command:** `/review` or `/tribunal-full`
+
+### ✅ Pre-Flight Self-Audit Checklist
+
+```
+✅ Are all component props strictly typed with zero implicit "any"?
+✅ Are responsive breakpoints, fluid typography, and optical balance verified?
+✅ Is accessibility (ARIA labels, keyboard focus, contrast) validated?
+✅ Are re-renders minimized and state lifecycles cleanly separated?
+✅ Did I verify all imported UI components and icon sets actually exist?
+```
+
+### 🛑 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 test suites, compiler success, or equivalent operational proof) that your output works as intended.

package/skills/ui-skill-packs/SKILL.md

@@ -0,0 +1,132 @@
+---
+name: ui-skill-packs
+description: Use when Mandatory skill loading packs for UI generation. Consolidates 42+ individual UI skills into 3 tiered packs (Core Craft, Immersive & System, High-End Design) to guarantee non-generic, high-fidelity UI outputs.
+version: 5.0.0
+last-updated: 2026-09-13
+skills:
+  - taste-skill
+  - better-colors
+  - impeccable
+  - micro-interaction
+  - gpt-taste
+tools: Read, Grep, Glob, Bash, Edit, Write
+scripts-binding:
+  - .agent/scripts/lint_runner.js
+  - .agent/scripts/verify_all.js
+---
+
+# UI Skill Packs — Master Design Engineering Bundles
+
+## Mandatory Pre-Flight Context Inspection
+
+Before generating, refactoring, or reviewing code in the `ui-skill-packs` domain, inspect these 5 critical parameters:
+
+1. **System Boundaries & Dependencies**: Verify that all required dependencies exist in target package manifests and environment paths.
+2. **Runtime Context & Platform Invariants**: Confirm target platform constraints (Node.js, Browser, Mobile OS, Edge runtime) before applying APIs.
+3. **Execution Guardrails**: Identify potential side-effects, state mutations, and unhandled asynchronous exceptions.
+4. **Validation & Type Contracts**: Validate input data schemas and strict type constraints across all module interfaces.
+5. **Observability & Proof of Execution**: Ensure execution produces tangible verification signals (terminal output, tests, metrics).
+
+## Activation Boundaries
+
+- **Activate when:** Use when Mandatory skill loading packs for UI generation. Consolidates 42+ individual UI skills into 3 tiered packs (Core Craft, Immersive & System, High-End Design) to guarantee non-generic, high-fidelity UI outputs.
+- **DO NOT activate when:** The task falls outside the `ui-skill-packs` domain or is managed by a different dedicated specialist.
+
+## 🔁 Multi-Pass Execution Protocol
+
+Execute all non-trivial tasks through this 7-pass cognitive loop:
+
+| Pass | Phase | Core Action |
+|:---|:---|:---|
+| **Pass 1** | **Understand** | Deconstruct the user's explicit objective, implicit requirements, and platform constraints. |
+| **Pass 2** | **Plan** | Decompose the task into smallest logical steps; map dependencies and required tool calls. |
+| **Pass 3** | **Execute** | Implement the solution with production-grade craft, zero placeholders, and strict typing. |
+| **Pass 4** | **Verify** | Run linters, unit tests, or compiler checks to validate structural correctness. |
+| **Pass 5** | **Attack** | Perform an adversarial review searching for edge-case failures, race conditions, and traps. |
+| **Pass 6** | **Improve** | Eliminate discovered friction, optimize performance, and harden error boundaries. |
+| **Pass 7** | **Quality Gate** | Enforce Verification-Before-Completion (VBC) with concrete terminal proof before finalizing. |
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+---
+
+
+## 1. Pack Definitions
+
+When generating UI code, the agent MUST load the appropriate UI Skill Pack based on the complexity level of the requested interface:
+
+### Pack 1: Core UI Craft (Standard Components & Forms)
+
+- **Skills Included:** `taste-skill`, `better-ui`, `better-colors`, `typeset`, `build-primitive`
+- **Use For:** Buttons, cards, form controls, modals, tables, simple dashboards.
+- **Enforces:** OKLCH colors, 8pt spacing grid, fluid typography, explicit interactive states.
+
+### Pack 2: System & Micro-Interactions (Dynamic Web Apps)
+
+- **Skills Included:** `impeccable`, `micro-interaction`, `framer-motion-expert`, `transitions-dev`, `delight`
+- **Use For:** Interactive web apps, complex dashboards, multi-step flows, animated components.
+- **Enforces:** Micro-animations, spring easings, tactile click/hover feedback, clean state transitions.
+
+### Pack 3: High-End Immersive & Landing (Full Page / Showcase)
+
+- **Skills Included:** `gpt-taste`, `swiss-design`, `compact-landing`, `masked-reveal`, `marquee-loop`, `progressive-blur`
+- **Use For:** Landing pages, hero sections, marketing sites, showcase portfolios.
+- **Enforces:** Typographic hierarchy, asymmetric visual rhythm, noise grain overlays, luminous borders.
+
+---
+
+## 2. Mandatory Pre-Execution Binding
+
+Before generating any frontend component, identify the required pack and declare loaded skills:
+
+```
+Loaded UI Skill Pack: [Pack 1 | Pack 2 | Pack 3]
+Binding skills: taste-skill, better-colors, micro-interaction, impeccable...
+```
+
+---
+
+## 🚨 Edge-Case & Failure Mode Matrix
+
+| Scenario | Risk | Mitigation Strategy |
+|:---|:---|:---|
+| **Empty or Null Inputs** | Unhandled exception or unexpected rendering collapse | Enforce fallback guards, optional chaining, and explicit empty state handlers |
+| **Network Timeout / Latency** | Hanging operations or duplicate side-effects | Implement bounded abort controllers, exponential backoff, and idempotency keys |
+| **Concurrency / Race Conditions** | Stale state overwrite or inconsistent data mutations | Use atomic transactions, mutex locking, or cancel-on-resubmit controls |
+| **Invalid Schema / Malformed Payload** | Downstream runtime errors or security injection | Validate boundary payloads with Zod/Pydantic schemas prior to execution |
+| **Resource / Memory Saturation** | OOM errors, frame drops, or memory leaks | Clean up listeners, cancel active timers, and enforce pagination/virtualization |
+
+---
+
+## 🤖 LLM-Specific Traps Table
+
+| Anti-Pattern | What AI Commonly Does Wrong | What Is Actually Correct |
+|:---|:---|:---|
+| **Uncontrolled Re-render Loop** | Mutating state inside render bodies or omitting hook dependencies | Wrap effects with explicit deps and isolate reactive derivations in useMemo |
+| **Accessibility Neglect** | Interactive <div> without role="button", tabIndex, or onKeyDown | Use semantic <button> or provide ARIA role, keyboard handlers, and focus ring |
+| **Layout Shift Flash** | Images/dynamic content without aspect-ratio or explicit dimensions | Enforce aspect-ratio or skeleton placeholders to guarantee zero CLS |
+
+---
+
+## 🏛️ Tribunal Verification & Guardrails
+
+**Active Reviewers:** `frontend-reviewer` · `type-safety` · `ui-ux-auditor` · `complexity-reviewer`
+**Slash Command:** `/review` or `/tribunal-full`
+
+### ✅ Pre-Flight Self-Audit Checklist
+
+```
+✅ Are all component props strictly typed with zero implicit "any"?
+✅ Are responsive breakpoints, fluid typography, and optical balance verified?
+✅ Is accessibility (ARIA labels, keyboard focus, contrast) validated?
+✅ Are re-renders minimized and state lifecycles cleanly separated?
+✅ Did I verify all imported UI components and icon sets actually exist?
+```
+
+### 🛑 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 test suites, compiler success, or equivalent operational proof) that your output works as intended.

package/skills/ui-skills-root/SKILL.md

@@ -0,0 +1,144 @@
+---
+name: ui-skills-root
+description: Use when Master router skill for design engineering and UI craft. Use when the user needs UI help and you must route by topic, stack, intent, or design discipline to the smallest useful set of UI skills.
+version: 5.0.0
+last-updated: 2026-09-13
+skills:
+  - ui-skill-packs
+  - ui-reasoning-engine
+  - baseline-ui
+  - better-ui
+  - impeccable
+tools: Read, Grep, Glob, Bash, Edit, Write
+scripts-binding:
+  - .agent/scripts/lint_runner.js
+  - .agent/scripts/verify_all.js
+---
+
+# UI Skills Master Router
+
+## Mandatory Pre-Flight Context Inspection
+
+Before generating, refactoring, or reviewing code in the `ui-skills-root` domain, inspect these 5 critical parameters:
+
+1. **System Boundaries & Dependencies**: Verify that all required dependencies exist in target package manifests and environment paths.
+2. **Runtime Context & Platform Invariants**: Confirm target platform constraints (Node.js, Browser, Mobile OS, Edge runtime) before applying APIs.
+3. **Execution Guardrails**: Identify potential side-effects, state mutations, and unhandled asynchronous exceptions.
+4. **Validation & Type Contracts**: Validate input data schemas and strict type constraints across all module interfaces.
+5. **Observability & Proof of Execution**: Ensure execution produces tangible verification signals (terminal output, tests, metrics).
+
+## Activation Boundaries
+
+- **Activate when:** Use when Master router skill for design engineering and UI craft. Use when the user needs UI help and you must route by topic, stack, intent, or design discipline to the smallest useful set of UI skills.
+- **DO NOT activate when:** The task falls outside the `ui-skills-root` domain or is managed by a different dedicated specialist.
+
+## 🔁 Multi-Pass Execution Protocol
+
+Execute all non-trivial tasks through this 7-pass cognitive loop:
+
+| Pass | Phase | Core Action |
+|:---|:---|:---|
+| **Pass 1** | **Understand** | Deconstruct the user's explicit objective, implicit requirements, and platform constraints. |
+| **Pass 2** | **Plan** | Decompose the task into smallest logical steps; map dependencies and required tool calls. |
+| **Pass 3** | **Execute** | Implement the solution with production-grade craft, zero placeholders, and strict typing. |
+| **Pass 4** | **Verify** | Run linters, unit tests, or compiler checks to validate structural correctness. |
+| **Pass 5** | **Attack** | Perform an adversarial review searching for edge-case failures, race conditions, and traps. |
+| **Pass 6** | **Improve** | Eliminate discovered friction, optimize performance, and harden error boundaries. |
+| **Pass 7** | **Quality Gate** | Enforce Verification-Before-Completion (VBC) with concrete terminal proof before finalizing. |
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+---
+
+
+---
+
+## Intent-Based Skill Routing Matrix
+
+When a user asks for UI assistance, identify their core **intent** and dispatch the appropriate skills:
+
+| Intent / Goal                                           | Primary Skill                | Secondary / Supporting Skills                |
+| ------------------------------------------------------- | ---------------------------- | -------------------------------------------- |
+| **Fast cleanup of ugly/cluttered UI**                   | `baseline-ui`                | `better-ui`, `polish`                        |
+| **Production-grade design engineering & micro-details** | `better-ui`                  | `impeccable`, `frontend-design`              |
+| **Extract design language & create DESIGN.md**          | `create-design-md`           | `extract-design-system`, `frontend-design`   |
+| **Audit & fix HTML / ARIA accessibility (WCAG)**        | `fixing-accessibility`       | `audit-and-fix`, `web-accessibility-auditor` |
+| **Fix animation jank & 60/120fps performance**          | `fixing-motion-performance`  | `60fps-animation`, `gsap-performance`        |
+| **Evidence-based UI audit & implementation planning**   | `improve-ui`                 | `better-ui`, `baseline-ui`                   |
+| **OKLCH color system, contrast & P3 gamut**             | `better-colors`              | `colorize`, `better-ui`                      |
+| **Web typography, font scales, tabular numbers**        | `better-typography`          | `typeset`, `better-ui`                       |
+| **Apple-grade fluid springs, translucency & depth**     | `apple-design`               | `emil-design-eng`, `soft-skill`              |
+| **Make a bland UI stand out / add punch**               | `bolder`                     | `delight`, `colorize`                        |
+| **Tone down noisy or loud designs**                     | `quieter`                    | `distill`, `swiss-design`                    |
+| **Simplify complex / cluttered interface**              | `distill`                    | `clarify`, `quieter`                         |
+| **Add subtle micro-interactions & delight**             | `delight`                    | `whimsy-injector`, `micro-interaction`       |
+| **Final pre-ship quality & alignment pass**             | `polish`                     | `harden`, `fixing-accessibility`             |
+| **Make UI resilient (errors, empty states, i18n)**      | `harden`                     | `web-accessibility-auditor`                  |
+| **UX evaluation & scoring**                             | `critique`                   | `ui-ux-researcher`                           |
+| **Improve microcopy & messaging clarity**               | `clarify`                    | `shape`                                      |
+| **Pre-code feature UX planning**                        | `shape`                      | `brainstorming`, `appflow-wireframe`         |
+| **Build unstyled accessible UI primitives**             | `build-primitive`            | `fixing-accessibility`                       |
+| **Responsive & container-query adaptation**             | `adapt`                      | `mobile-design`                              |
+| **Depth, progressive blur, glassmorphism**              | `progressive-blur`           | `beautiful-shadows`                          |
+| **60fps animation performance audit**                   | `60fps-animation`            | `fixing-motion-performance`                  |
+| **Tiered reduced-motion (a11y)**                        | `accessible-animation`       | `fixing-accessibility`                       |
+| **Page & route transitions (View Transitions)**         | `page-transition-animation`  | `framer-motion-expert`                       |
+| **Scroll-driven motion & storytelling**                 | `animation-on-scroll`        | `gsap-scrolltrigger`                         |
+| **Cohesive animation token system**                     | `animation-systems`          | `motion-engineering`                         |
+| **Lottie & dotLottie vector animations**                | `lottie-animation`           | `text-to-lottie`                             |
+| **SVG path morphing & stroke draw-on**                  | `svg-animation`              | `morphing-icons`                             |
+| **Hardware-accelerated marquees**                       | `marquee-loop`               | `60fps-animation`                            |
+| **Spring physics vs easing decision**                   | `to-spring-or-not-to-spring` | `apple-design`                               |
+| **Tactile Web Audio API sound feedback**                | `sounds-on-the-web`          | `delight`                                    |
+| **Technical SEO, metadata & OpenGraph**                 | `fixing-metadata`            | `web-quality-audit`                          |
+| **Lighthouse quality audit**                            | `web-quality-audit`          | `performance-profiling`                      |
+| **Landing page hierarchy & conversion**                 | `landing-page`               | `compact-landing`                            |
+| **Pricing tables & comparison matrices**                | `pricing-page`               | `frontend-design`                            |
+| **Social proof, logo grids, trust rows**                | `company-logos`              | `baseline-ui`                                |
+
+---
+
+## 🚨 Edge-Case & Failure Mode Matrix
+
+| Scenario | Risk | Mitigation Strategy |
+|:---|:---|:---|
+| **Empty or Null Inputs** | Unhandled exception or unexpected rendering collapse | Enforce fallback guards, optional chaining, and explicit empty state handlers |
+| **Network Timeout / Latency** | Hanging operations or duplicate side-effects | Implement bounded abort controllers, exponential backoff, and idempotency keys |
+| **Concurrency / Race Conditions** | Stale state overwrite or inconsistent data mutations | Use atomic transactions, mutex locking, or cancel-on-resubmit controls |
+| **Invalid Schema / Malformed Payload** | Downstream runtime errors or security injection | Validate boundary payloads with Zod/Pydantic schemas prior to execution |
+| **Resource / Memory Saturation** | OOM errors, frame drops, or memory leaks | Clean up listeners, cancel active timers, and enforce pagination/virtualization |
+
+---
+
+## 🤖 LLM-Specific Traps Table
+
+| Anti-Pattern | What AI Commonly Does Wrong | What Is Actually Correct |
+|:---|:---|:---|
+| **Uncontrolled Re-render Loop** | Mutating state inside render bodies or omitting hook dependencies | Wrap effects with explicit deps and isolate reactive derivations in useMemo |
+| **Accessibility Neglect** | Interactive <div> without role="button", tabIndex, or onKeyDown | Use semantic <button> or provide ARIA role, keyboard handlers, and focus ring |
+| **Layout Shift Flash** | Images/dynamic content without aspect-ratio or explicit dimensions | Enforce aspect-ratio or skeleton placeholders to guarantee zero CLS |
+
+---
+
+## 🏛️ Tribunal Verification & Guardrails
+
+**Active Reviewers:** `frontend-reviewer` · `type-safety` · `ui-ux-auditor` · `complexity-reviewer`
+**Slash Command:** `/review` or `/tribunal-full`
+
+### ✅ Pre-Flight Self-Audit Checklist
+
+```
+✅ Are all component props strictly typed with zero implicit "any"?
+✅ Are responsive breakpoints, fluid typography, and optical balance verified?
+✅ Is accessibility (ARIA labels, keyboard focus, contrast) validated?
+✅ Are re-renders minimized and state lifecycles cleanly separated?
+✅ Did I verify all imported UI components and icon sets actually exist?
+```
+
+### 🛑 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 test suites, compiler success, or equivalent operational proof) that your output works as intended.