tribunal-kit 9.2.4 → 9.2.5

package/.agent/workflows/tribunal-speed.md

@@ -1,222 +1,222 @@
----
-description: Full-stack parallel performance audit. Runs 3 scoped specialists simultaneously — vitals-reviewer (Frontend CWV), db-latency-auditor (SQL/ORM), throughput-optimizer (Node.js server) — then synthesizes a single ranked report. Maximum 5 AI calls regardless of project size. Use when full-stack performance profiling is needed.
-tools: Read, Grep, Glob, Bash, Edit, Write
-version: 3.0.0
-last-updated: 2026-07-30
-required-skills:
-  - performance-profiling
-  - observability
-  - edge-computing
-scripts-binding:
-  - .agent/scripts/bundle_analyzer.js
-  - .agent/scripts/verify_all.js
----
-
-# /tribunal-speed — Full-Stack Performance Swarm
-
-$ARGUMENTS
-
----
-
-## Mandatory Pre-Flight Context Inspection
-
-Before running a full-stack performance audit, you MUST inspect:
-
-1. Target Full-Stack File Map → Determine frontend components, Node.js server routes, and database models
-2. Max 5 AI Call Ceiling → Cap swarm executions to 3 parallel specialists + 1 synthesis step to prevent token explosion
-3. Ranked Impact Synthesis → Output findings strictly in a single unified table prioritized by user-facing latency impact
-
-4. Required Skills → Before executing, load and follow procedural rules from:
-   - `performance-profiling` (.agent/skills/performance-profiling/SKILL.md): Performance measurement methodology and profiling tools
-   - `observability` (.agent/skills/observability/SKILL.md): Distributed tracing, metrics, and monitoring instrumentation
-   - `edge-computing` (.agent/skills/edge-computing/SKILL.md): Edge runtime patterns, cold starts, and regional deployment
-
----
-
-## When to Use /tribunal-speed
-
-| Use `/tribunal-speed` when...              | Use something else when...                    |
-| :----------------------------------------- | :-------------------------------------------- |
-| Full-stack performance audit needed        | Frontend only → `/tribunal-performance`       |
-| Changes span UI + DB + Server layers       | Single file review → `/review`                |
-| Pre-deploy performance validation          | Security-focused → `/tribunal-full`           |
-| Investigating end-to-end latency           | Architecture planning → `/plan`               |
-| Need scoped specialist depth (not generic) | Quick generic check → `/tribunal-performance` |
-
----
-
-## Architecture: 3-Phase Fan-Out (5 AI Calls Max)
-
-```
-Phase 1 — File Classification (1 call)
-│
-│  Classify all submitted files into:
-│  ├── Frontend  (.tsx, .jsx, .css, .module.css)
-│  ├── Database  (.sql, schema.prisma, files with prisma./db./drizzle(/knex()
-│  └── Server    (.ts/.js in /api, /server, /lib, /utils, /routes, /middleware)
-│
-│  Files that don't match any category → skip (not performance-relevant)
-│
-▼
-Phase 2 — Parallel Specialist Audit (3 concurrent calls)
-│
-│  ┌──────────────────────┬──────────────────────┬───────────────────────┐
-│  │  vitals-reviewer     │  db-latency-auditor  │  throughput-optimizer │
-│  │                      │                      │                      │
-│  │  Receives ONLY       │  Receives ONLY       │  Receives ONLY       │
-│  │  Frontend files      │  Database files      │  Server files        │
-│  │                      │                      │                      │
-│  │  Checks:             │  Checks:             │  Checks:             │
-│  │  - LCP blockers      │  - N+1 queries       │  - Event-loop blocks │
-│  │  - INP violations    │  - Missing LIMIT     │  - Serialized awaits │
-│  │  - CLS triggers      │  - Unindexed WHERE   │  - Memory leaks      │
-│  │  - Suspense waterfalls│  - SELECT * abuse   │  - Missing Workers   │
-│  │  - Paint jank        │  - Pool config       │  - Streaming gaps    │
-│  │  - Animation leaks   │  - Wide transactions │  - No keep-alive     │
-│  └──────────────────────┴──────────────────────┴───────────────────────┘
-│
-│  Each specialist returns findings in its verdict format.
-│  allSettled — one specialist failure does NOT block siblings.
-│
-▼
-Phase 3 — Synthesis (1 call)
-│
-│  Merges 3 specialist reports into a single ranked issue list.
-│  Priority: Critical → High → Medium → Low
-│  Each issue tagged with: [AGENT] [FILE:LINE] [IMPACT METRIC] [FIX]
-│
-▼
-Human Gate — Final report shown
-Y = acknowledge | N = discard | R = re-audit with different scope
-```
-
-**Total cost: 5 AI calls maximum** — predictable, repeatable, project-size-independent.
-
----
-
-## Token Discipline Rules
-
-```
-Rule 1: Each specialist reads ONLY its scoped files — never the full project
-Rule 2: If a category has zero files, that specialist is skipped (saves 1 call)
-Rule 3: File contents are trimmed to relevant sections via targeted grep
-Rule 4: Synthesis call receives only verdict summaries, not full file contents
-```
-
----
-
-## 3 Scoped Specialists
-
-### vitals-reviewer (Frontend)
-
-- **Scope:** `.tsx`, `.jsx`, `.css`, `.module.css`
-- **Metrics:** INP, LCP, CLS, FCP
-- **Key patterns:** React 19 `use()` waterfalls, non-passive listeners, missing `content-visibility`, `useGSAP` leaks, View Transitions jank, Suspense placement
-
-### db-latency-auditor (Database)
-
-- **Scope:** `.sql`, `schema.prisma`, files with `prisma.`, `db.`, `drizzle(`, `knex(`
-- **Metrics:** Query count, query latency, connection overhead
-- **Key patterns:** N+1 queries, missing LIMIT, unindexed WHERE, SELECT \*, no connection pooling, over-scoped transactions, mass assignment
-
-### throughput-optimizer (Server)
-
-- **Scope:** `.ts/.js` in `/api`, `/server`, `/lib`, `/utils`, `/routes`, `/middleware`
-- **Metrics:** RPS, p95 latency, memory usage
-- **Key patterns:** Sync `fs.*`, serialized `await` loops, global Map without TTL, no Worker Threads for CPU ops, buffer bloat, missing keep-alive
-
----
-
-## Synthesis Output Format
-
-```
-━━━ Tribunal Speed: Full-Stack Performance Audit ━━━━━━━━━━━━━━
-
-Specialists dispatched: 3 | Completed: 3 | Skipped: 0
-
-━━━ Critical Issues ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-[CRITICAL] throughput-optimizer | api/orders.ts:47
-Pattern: SERIALIZED-AWAIT
-Issue:   await inside for-loop serializes 5 DB calls (1500ms vs 300ms parallel)
-Fix:     const results = await Promise.all(ids.map(id => fetchOrder(id)));
-Impact:  -1200ms p95 API latency
-
-[CRITICAL] db-latency-auditor | lib/users.ts:23
-Pattern: N+1
-Issue:   findMany in loop generates 101 queries for 100 users
-Fix:     Use prisma.user.findMany({ include: { posts: true } })
-Impact:  101 queries → 1 query
-
-━━━ High Issues ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-[HIGH] vitals-reviewer | components/Hero.tsx:12
-Pattern: LCP
-Issue:   Hero image without priority prop — browser discovers it late
-Fix:     Add priority={true} to next/image component
-Impact:  LCP improvement ~500ms
-
-━━━ Medium Issues ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-[MEDIUM] vitals-reviewer | app/feed/page.tsx:89
-Pattern: CLS
-Issue:   Feed items missing content-visibility: auto
-Fix:     Add content-visibility: auto; contain-intrinsic-size: auto 200px;
-Impact:  Reduced off-screen rendering cost
-
-━━━ Summary ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-Total issues:  7 (2 Critical, 2 High, 3 Medium)
-AI calls used: 5
-Token budget:  Within scope (specialists read only categorized files)
-
-━━━ Human Gate ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-Acknowledged?  Y = close | R = re-audit different scope
-```
-
----
-
-## Specialist Failure Handling
-
-```
-If a specialist fails after 3 retries:
-  → Log failure with agent name + error
-  → Continue with remaining specialists
-  → Include "[SPECIALIST FAILED]" in synthesis report
-  → Never silently skip — always visible in output
-```
-
----
-
-## Versus Other Commands
-
-| Command                    | Agents                           | Depth                  | When to Use                              |
-| :------------------------- | :------------------------------- | :--------------------- | :--------------------------------------- |
-| `/tribunal-performance`    | logic + performance-reviewer     | Generic CWV check      | Quick single-file perf scan              |
-| `/tribunal-speed`          | vitals + db-latency + throughput | Deep 3-domain parallel | Full-stack perf audit                    |
-| `/tribunal-full`           | All 28 reviewers                 | Everything             | Maximum coverage (security + perf + all) |
-| `/performance-benchmarker` | Lighthouse + bundle              | Measurement only       | Get actual scores, not code review       |
-
----
-
-## Usage Examples
-
-```
-/tribunal-speed the entire checkout flow (UI + API + DB queries)
-/tribunal-speed all files changed in this PR for performance regression
-/tribunal-speed the dashboard page end-to-end (data fetch + render + DB)
-/tribunal-speed the search feature: autocomplete UI + search API + query plan
-```
-
----
-
-## After /tribunal-speed — Next Steps
-
-| Outcome                | Next Command                                    |
-| :--------------------- | :---------------------------------------------- |
-| Bottlenecks identified | → `/debug` to isolate the worst offender        |
-| Schema issues found    | → `/tribunal-database` or `/migrate` to resolve |
-| Fixes proposed         | → `/enhance` to safely apply the fixes          |
-| Need measurement proof | → `/performance-benchmarker` to capture metrics |
-
----
+---
+description: Full-stack parallel performance audit. Runs 3 scoped specialists simultaneously — vitals-reviewer (Frontend CWV), db-latency-auditor (SQL/ORM), throughput-optimizer (Node.js server) — then synthesizes a single ranked report. Maximum 5 AI calls regardless of project size. Use when full-stack performance profiling is needed.
+tools: Read, Grep, Glob, Bash, Edit, Write
+version: 3.0.0
+last-updated: 2026-07-30
+required-skills:
+  - performance-profiling
+  - observability
+  - edge-computing
+scripts-binding:
+  - .agent/scripts/bundle_analyzer.js
+  - .agent/scripts/verify_all.js
+---
+
+# /tribunal-speed — Full-Stack Performance Swarm
+
+$ARGUMENTS
+
+---
+
+## Mandatory Pre-Flight Context Inspection
+
+Before running a full-stack performance audit, you MUST inspect:
+
+1. Target Full-Stack File Map → Determine frontend components, Node.js server routes, and database models
+2. Max 5 AI Call Ceiling → Cap swarm executions to 3 parallel specialists + 1 synthesis step to prevent token explosion
+3. Ranked Impact Synthesis → Output findings strictly in a single unified table prioritized by user-facing latency impact
+
+4. Required Skills → Before executing, load and follow procedural rules from:
+   - `performance-profiling` (.agent/skills/performance-profiling/SKILL.md): Performance measurement methodology and profiling tools
+   - `observability` (.agent/skills/observability/SKILL.md): Distributed tracing, metrics, and monitoring instrumentation
+   - `edge-computing` (.agent/skills/edge-computing/SKILL.md): Edge runtime patterns, cold starts, and regional deployment
+
+---
+
+## When to Use /tribunal-speed
+
+| Use `/tribunal-speed` when...              | Use something else when...                    |
+| :----------------------------------------- | :-------------------------------------------- |
+| Full-stack performance audit needed        | Frontend only → `/tribunal-performance`       |
+| Changes span UI + DB + Server layers       | Single file review → `/review`                |
+| Pre-deploy performance validation          | Security-focused → `/tribunal-full`           |
+| Investigating end-to-end latency           | Architecture planning → `/plan`               |
+| Need scoped specialist depth (not generic) | Quick generic check → `/tribunal-performance` |
+
+---
+
+## Architecture: 3-Phase Fan-Out (5 AI Calls Max)
+
+```
+Phase 1 — File Classification (1 call)
+│
+│  Classify all submitted files into:
+│  ├── Frontend  (.tsx, .jsx, .css, .module.css)
+│  ├── Database  (.sql, schema.prisma, files with prisma./db./drizzle(/knex()
+│  └── Server    (.ts/.js in /api, /server, /lib, /utils, /routes, /middleware)
+│
+│  Files that don't match any category → skip (not performance-relevant)
+│
+▼
+Phase 2 — Parallel Specialist Audit (3 concurrent calls)
+│
+│  ┌──────────────────────┬──────────────────────┬───────────────────────┐
+│  │  vitals-reviewer     │  db-latency-auditor  │  throughput-optimizer │
+│  │                      │                      │                      │
+│  │  Receives ONLY       │  Receives ONLY       │  Receives ONLY       │
+│  │  Frontend files      │  Database files      │  Server files        │
+│  │                      │                      │                      │
+│  │  Checks:             │  Checks:             │  Checks:             │
+│  │  - LCP blockers      │  - N+1 queries       │  - Event-loop blocks │
+│  │  - INP violations    │  - Missing LIMIT     │  - Serialized awaits │
+│  │  - CLS triggers      │  - Unindexed WHERE   │  - Memory leaks      │
+│  │  - Suspense waterfalls│  - SELECT * abuse   │  - Missing Workers   │
+│  │  - Paint jank        │  - Pool config       │  - Streaming gaps    │
+│  │  - Animation leaks   │  - Wide transactions │  - No keep-alive     │
+│  └──────────────────────┴──────────────────────┴───────────────────────┘
+│
+│  Each specialist returns findings in its verdict format.
+│  allSettled — one specialist failure does NOT block siblings.
+│
+▼
+Phase 3 — Synthesis (1 call)
+│
+│  Merges 3 specialist reports into a single ranked issue list.
+│  Priority: Critical → High → Medium → Low
+│  Each issue tagged with: [AGENT] [FILE:LINE] [IMPACT METRIC] [FIX]
+│
+▼
+Human Gate — Final report shown
+Y = acknowledge | N = discard | R = re-audit with different scope
+```
+
+**Total cost: 5 AI calls maximum** — predictable, repeatable, project-size-independent.
+
+---
+
+## Token Discipline Rules
+
+```
+Rule 1: Each specialist reads ONLY its scoped files — never the full project
+Rule 2: If a category has zero files, that specialist is skipped (saves 1 call)
+Rule 3: File contents are trimmed to relevant sections via targeted grep
+Rule 4: Synthesis call receives only verdict summaries, not full file contents
+```
+
+---
+
+## 3 Scoped Specialists
+
+### vitals-reviewer (Frontend)
+
+- **Scope:** `.tsx`, `.jsx`, `.css`, `.module.css`
+- **Metrics:** INP, LCP, CLS, FCP
+- **Key patterns:** React 19 `use()` waterfalls, non-passive listeners, missing `content-visibility`, `useGSAP` leaks, View Transitions jank, Suspense placement
+
+### db-latency-auditor (Database)
+
+- **Scope:** `.sql`, `schema.prisma`, files with `prisma.`, `db.`, `drizzle(`, `knex(`
+- **Metrics:** Query count, query latency, connection overhead
+- **Key patterns:** N+1 queries, missing LIMIT, unindexed WHERE, SELECT \*, no connection pooling, over-scoped transactions, mass assignment
+
+### throughput-optimizer (Server)
+
+- **Scope:** `.ts/.js` in `/api`, `/server`, `/lib`, `/utils`, `/routes`, `/middleware`
+- **Metrics:** RPS, p95 latency, memory usage
+- **Key patterns:** Sync `fs.*`, serialized `await` loops, global Map without TTL, no Worker Threads for CPU ops, buffer bloat, missing keep-alive
+
+---
+
+## Synthesis Output Format
+
+```
+━━━ Tribunal Speed: Full-Stack Performance Audit ━━━━━━━━━━━━━━
+
+Specialists dispatched: 3 | Completed: 3 | Skipped: 0
+
+━━━ Critical Issues ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+[CRITICAL] throughput-optimizer | api/orders.ts:47
+Pattern: SERIALIZED-AWAIT
+Issue:   await inside for-loop serializes 5 DB calls (1500ms vs 300ms parallel)
+Fix:     const results = await Promise.all(ids.map(id => fetchOrder(id)));
+Impact:  -1200ms p95 API latency
+
+[CRITICAL] db-latency-auditor | lib/users.ts:23
+Pattern: N+1
+Issue:   findMany in loop generates 101 queries for 100 users
+Fix:     Use prisma.user.findMany({ include: { posts: true } })
+Impact:  101 queries → 1 query
+
+━━━ High Issues ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+[HIGH] vitals-reviewer | components/Hero.tsx:12
+Pattern: LCP
+Issue:   Hero image without priority prop — browser discovers it late
+Fix:     Add priority={true} to next/image component
+Impact:  LCP improvement ~500ms
+
+━━━ Medium Issues ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+[MEDIUM] vitals-reviewer | app/feed/page.tsx:89
+Pattern: CLS
+Issue:   Feed items missing content-visibility: auto
+Fix:     Add content-visibility: auto; contain-intrinsic-size: auto 200px;
+Impact:  Reduced off-screen rendering cost
+
+━━━ Summary ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+Total issues:  7 (2 Critical, 2 High, 3 Medium)
+AI calls used: 5
+Token budget:  Within scope (specialists read only categorized files)
+
+━━━ Human Gate ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+Acknowledged?  Y = close | R = re-audit different scope
+```
+
+---
+
+## Specialist Failure Handling
+
+```
+If a specialist fails after 3 retries:
+  → Log failure with agent name + error
+  → Continue with remaining specialists
+  → Include "[SPECIALIST FAILED]" in synthesis report
+  → Never silently skip — always visible in output
+```
+
+---
+
+## Versus Other Commands
+
+| Command                    | Agents                           | Depth                  | When to Use                              |
+| :------------------------- | :------------------------------- | :--------------------- | :--------------------------------------- |
+| `/tribunal-performance`    | logic + performance-reviewer     | Generic CWV check      | Quick single-file perf scan              |
+| `/tribunal-speed`          | vitals + db-latency + throughput | Deep 3-domain parallel | Full-stack perf audit                    |
+| `/tribunal-full`           | All 28 reviewers                 | Everything             | Maximum coverage (security + perf + all) |
+| `/performance-benchmarker` | Lighthouse + bundle              | Measurement only       | Get actual scores, not code review       |
+
+---
+
+## Usage Examples
+
+```
+/tribunal-speed the entire checkout flow (UI + API + DB queries)
+/tribunal-speed all files changed in this PR for performance regression
+/tribunal-speed the dashboard page end-to-end (data fetch + render + DB)
+/tribunal-speed the search feature: autocomplete UI + search API + query plan
+```
+
+---
+
+## After /tribunal-speed — Next Steps
+
+| Outcome                | Next Command                                    |
+| :--------------------- | :---------------------------------------------- |
+| Bottlenecks identified | → `/debug` to isolate the worst offender        |
+| Schema issues found    | → `/tribunal-database` or `/migrate` to resolve |
+| Fixes proposed         | → `/enhance` to safely apply the fixes          |
+| Need measurement proof | → `/performance-benchmarker` to capture metrics |
+
+---

package/.agent/workflows/tribunal-ui.md

@@ -1,97 +1,97 @@
----
-description: Specialized UI/UX Tribunal. Runs UX + Visual + Interaction + Anti-Pattern + Product Heuristics + Accessibility + Visual Auditor reviewers. Use for all visual designs, component layouts, and design-system reviews.
-tools: Read, Grep, Glob, Bash, Edit, Write
-version: 3.0.0
-last-updated: 2026-07-30
-required-skills:
-  - ui-reasoning-engine
-  - product-aware-heuristics
-  - ui-ux-pro-max
-  - frontend-design
-  - web-design-guidelines
-scripts-binding:
-  - .agent/scripts/lint_runner.js
-  - .agent/scripts/verify_all.js
----
-
-# /tribunal-ui — Dedicated UI/UX Review Pipeline
-
-$ARGUMENTS
-
----
-
-## Mandatory Pre-Flight Context Inspection
-
-Before executing dedicated UI/UX audits or design-system reviews, you MUST inspect:
-
-1. Active Design Tokens & Guidelines (`DESIGN.md`, CSS custom properties) → Confirm typography scale, color system, and corner radius tokens
-2. Product Domain Category → Select category heuristics (Dashboard, E-Commerce, Landing Page, Mobile App, Marketing)
-3. 28-Reviewer Dedicated UI Gate → Run ux-auditor, visual-auditor, interaction-auditor, anti-pattern-auditor, product-heuristics, a11y-auditor, and visual-auditor before passing designs
-
-4. Required Skills → Before executing, load and follow procedural rules from:
-   - `ui-reasoning-engine` (.agent/skills/ui-reasoning-engine/SKILL.md): 16-step cognitive pipeline for layout and styling decisions
-   - `product-aware-heuristics` (.agent/skills/product-aware-heuristics/SKILL.md): Visual heuristics tailored to product types (SaaS, AI, fintech)
-   - `ui-ux-pro-max` (.agent/skills/ui-ux-pro-max/SKILL.md): Elite UI/UX with Anti-Pattern controls and portfolio-grade output
-   - `frontend-design` (.agent/skills/frontend-design/SKILL.md): Design engineering with OKLCH color syntax, spatial grid math
-   - `web-design-guidelines` (.agent/skills/web-design-guidelines/SKILL.md): APCA contrast, Core Web Vitals, battery-efficient rendering
-
----
-
-## When to Use /tribunal-ui
-
-| Use `/tribunal-ui` when...                      | Use instead when...                                        |
-| :---------------------------------------------- | :--------------------------------------------------------- |
-| Auditing visual hierarchy & rhythm              | Reviewing backend routing → `/tribunal-backend`            |
-| Verifying interactive states and hover/focus    | Reviewing database transaction code → `/tribunal-database` |
-| Checking responsive behavior and ergonomics     | Doing general logical code checks → `/tribunal-frontend`   |
-| Banning generic AI templates & purple gradients |                                                            |
-| Testing accessibility compliance (WCAG 2.2 AA)  |                                                            |
-
----
-
-## 7 Specialized UI Reviewers (Running Simultaneously)
-
-### 1. ux-reviewer
-
-- **Focus:** Hick's Law, Fitts's Law, cognitive load, scanning patterns, scannability, and progressive disclosure.
-- **Check:** Are primary action targets separated from destructive ones? Is choice overload prevented?
-
-### 2. visual-reviewer
-
-- **Focus:** Typographical scaling, alignment, margins, 8px grid discipline, and line lengths.
-- **Check:** Do Display headings balanced-wrap (`text-wrap: balance`)? Is negative space utilized?
-
-### 3. interaction-reviewer
-
-- **Focus:** Full interactive state styling (Default, Hover, Active/Pressed, Disabled, Focus-visible, Loading).
-- **Check:** Is there scale-down active click feedback? Are focus outlines visible and offset?
-
-### 4. anti-pattern-reviewer
-
-- **Focus:** Blocking generic AI visual clichés.
-- **Check:** Blocks purple/violet primary colors, radial mesh gradients, bento grid overload, flat cards lacking depth, and card-in-card overlap.
-
-### 5. product-reviewer
-
-- **Focus:** Matching the UI structure to product category heuristics (SaaS, DevTool, AI Interface, Landing, Fintech).
-- **Check:** Tabular numbers used for financial data? Monospace code snippets for DevTools? Typing skeleton streams for AI?
-
-### 6. accessibility-reviewer
-
-- **Focus:** WCAG 2.2 Level AA compliance.
-- **Check:** Minimum target size 24px (standard AA) and 44px (touch). Semantic headings, accessible ARIA names, and keyboard trap focus in dialogs.
-
-### 7. ui-visual-auditor (Closed-Loop Visual Gate)
-
-- **Focus:** Screenshot or DOM layout verification.
-- **Check:** Checks vertical overflow, layout shifts (CLS), alignment shifts, and contrast ratios.
-
----
-
-## Verdict System
-
-```
-If ANY reviewer → ❌ REJECTED: Maker must fix and resubmit before Human Gate
-If any reviewer → ⚠️ WARNING:  highlighted at Human Gate, must fix before deploy
-If all reviewers → ✅ APPROVED: Passes to Human Gate for writing approval
-```
+---
+description: Specialized UI/UX Tribunal. Runs UX + Visual + Interaction + Anti-Pattern + Product Heuristics + Accessibility + Visual Auditor reviewers. Use for all visual designs, component layouts, and design-system reviews.
+tools: Read, Grep, Glob, Bash, Edit, Write
+version: 3.0.0
+last-updated: 2026-07-30
+required-skills:
+  - ui-reasoning-engine
+  - product-aware-heuristics
+  - ui-ux-pro-max
+  - frontend-design
+  - web-design-guidelines
+scripts-binding:
+  - .agent/scripts/lint_runner.js
+  - .agent/scripts/verify_all.js
+---
+
+# /tribunal-ui — Dedicated UI/UX Review Pipeline
+
+$ARGUMENTS
+
+---
+
+## Mandatory Pre-Flight Context Inspection
+
+Before executing dedicated UI/UX audits or design-system reviews, you MUST inspect:
+
+1. Active Design Tokens & Guidelines (`DESIGN.md`, CSS custom properties) → Confirm typography scale, color system, and corner radius tokens
+2. Product Domain Category → Select category heuristics (Dashboard, E-Commerce, Landing Page, Mobile App, Marketing)
+3. 28-Reviewer Dedicated UI Gate → Run ux-auditor, visual-auditor, interaction-auditor, anti-pattern-auditor, product-heuristics, a11y-auditor, and visual-auditor before passing designs
+
+4. Required Skills → Before executing, load and follow procedural rules from:
+   - `ui-reasoning-engine` (.agent/skills/ui-reasoning-engine/SKILL.md): 16-step cognitive pipeline for layout and styling decisions
+   - `product-aware-heuristics` (.agent/skills/product-aware-heuristics/SKILL.md): Visual heuristics tailored to product types (SaaS, AI, fintech)
+   - `ui-ux-pro-max` (.agent/skills/ui-ux-pro-max/SKILL.md): Elite UI/UX with Anti-Pattern controls and portfolio-grade output
+   - `frontend-design` (.agent/skills/frontend-design/SKILL.md): Design engineering with OKLCH color syntax, spatial grid math
+   - `web-design-guidelines` (.agent/skills/web-design-guidelines/SKILL.md): APCA contrast, Core Web Vitals, battery-efficient rendering
+
+---
+
+## When to Use /tribunal-ui
+
+| Use `/tribunal-ui` when...                      | Use instead when...                                        |
+| :---------------------------------------------- | :--------------------------------------------------------- |
+| Auditing visual hierarchy & rhythm              | Reviewing backend routing → `/tribunal-backend`            |
+| Verifying interactive states and hover/focus    | Reviewing database transaction code → `/tribunal-database` |
+| Checking responsive behavior and ergonomics     | Doing general logical code checks → `/tribunal-frontend`   |
+| Banning generic AI templates & purple gradients |                                                            |
+| Testing accessibility compliance (WCAG 2.2 AA)  |                                                            |
+
+---
+
+## 7 Specialized UI Reviewers (Running Simultaneously)
+
+### 1. ux-reviewer
+
+- **Focus:** Hick's Law, Fitts's Law, cognitive load, scanning patterns, scannability, and progressive disclosure.
+- **Check:** Are primary action targets separated from destructive ones? Is choice overload prevented?
+
+### 2. visual-reviewer
+
+- **Focus:** Typographical scaling, alignment, margins, 8px grid discipline, and line lengths.
+- **Check:** Do Display headings balanced-wrap (`text-wrap: balance`)? Is negative space utilized?
+
+### 3. interaction-reviewer
+
+- **Focus:** Full interactive state styling (Default, Hover, Active/Pressed, Disabled, Focus-visible, Loading).
+- **Check:** Is there scale-down active click feedback? Are focus outlines visible and offset?
+
+### 4. anti-pattern-reviewer
+
+- **Focus:** Blocking generic AI visual clichés.
+- **Check:** Blocks purple/violet primary colors, radial mesh gradients, bento grid overload, flat cards lacking depth, and card-in-card overlap.
+
+### 5. product-reviewer
+
+- **Focus:** Matching the UI structure to product category heuristics (SaaS, DevTool, AI Interface, Landing, Fintech).
+- **Check:** Tabular numbers used for financial data? Monospace code snippets for DevTools? Typing skeleton streams for AI?
+
+### 6. accessibility-reviewer
+
+- **Focus:** WCAG 2.2 Level AA compliance.
+- **Check:** Minimum target size 24px (standard AA) and 44px (touch). Semantic headings, accessible ARIA names, and keyboard trap focus in dialogs.
+
+### 7. ui-visual-auditor (Closed-Loop Visual Gate)
+
+- **Focus:** Screenshot or DOM layout verification.
+- **Check:** Checks vertical overflow, layout shifts (CLS), alignment shifts, and contrast ratios.
+
+---
+
+## Verdict System
+
+```
+If ANY reviewer → ❌ REJECTED: Maker must fix and resubmit before Human Gate
+If any reviewer → ⚠️ WARNING:  highlighted at Human Gate, must fix before deploy
+If all reviewers → ✅ APPROVED: Passes to Human Gate for writing approval
+```