tribunal-kit 4.5.0 → 4.6.0

package/.agent/workflows/ui-ux-pro-max.md

@@ -1,122 +1,145 @@
----
-description: Plan and implement cutting-edge advanced UI/UX. Creates distinctive, production-grade frontend interfaces with high design quality that avoid generic AI aesthetics — no purple gradients, no bento grids, no mesh backgrounds.
----
-
-# /ui-ux-pro-max — Advanced UI/UX Design
-
-$ARGUMENTS
-
----
-
-## When to Use /ui-ux-pro-max
-
-|Use `/ui-ux-pro-max` when...|Use instead when...|
-|:---|:---|
-|Building a visually distinctive interface|Functional-only component → `/generate`|
-|Design quality is the primary goal|Fast page needed → `/enhance`|
-|Creating from a design brief|Bug fix in UI → `/debug`|
-|Mobile + web parity required||
-
----
-
-## Phase 1 — Design Intent (Mandatory)
-
-Answer these before any design work:
-
-```
-1. Who is the user? (developer tools feel different from consumer apps)
-2. What emotion should the interface evoke? (calm focus, urgent speed, playful delight)
-3. What is the ONE thing users do most? (hero interaction gets maximum design attention)
-4. What existing interfaces does the user love? (don't copy — understand the WHY)
-5. What makes this interface DIFFERENT from every competitor?
-```
-
----
-
-## Phase 2 — Design Identity
-
-Every interface built by /ui-ux-pro-max has a distinct visual identity:
-
-```
-Forbidden defaults (generic AI aesthetics):
-❌ Purple/violet as primary color
-❌ Left text / right image hero section
-❌ Mesh gradient backgrounds
-❌ Bento grid as the only layout
-❌ Emoji as icons
-❌ shadcn without explicit user request
-
-Distinctive alternatives:
-✅ Signal orange, acid green, warm slate, deep red — intentional palettes
-✅ Typographic-first hero sections
-✅ Grain textures, solid contrast, radial depth
-✅ Asymmetric or broken-grid layouts
-✅ SVG icons (lucide-react or custom)
-✅ Motion that communicates meaning (not decoration)
-```
-
----
-
-## Phase 3 — Interaction Craft
-
-Every interactive element has 4 states designed:
-
-```
-1. Default:  The base state
-2. Hover:    Indicates interactability (cursor change, subtle lift, color shift)
-3. Active:   Confirms click/press (scale down, darker, haptic feedback on mobile)
-4. Disabled: Communicates unavailability (reduced opacity, cursor change, tooltip why)
-```
-
-Micro-animations are required, not optional:
-
-```
-Entry animations:  elements fade/slide in on mount
-State transitions: smooth color + scale changes (150–200ms)
-Loading states:    skeleton screens, not spinners (skeleton shows shape)
-Error shake:       invalid form input shakes (4px left-right)
-Success pulse:     confirmed actions pulse green briefly
-```
-
----
-
-## Phase 4 — Implementation (Tribunal-Reviewed)
-
-All generated code runs through `/tribunal-frontend` including `accessibility-reviewer`:
-
-```
-WCAG 2.2 AA — Non-negotiable:
-□ Keyboard navigation complete and visible
-□ Screen reader semantics verified (role, label, live region)
-□ Color contrast 4.5:1 minimum on all text
-□ Focus indicator visible (outline: 2px solid, offset: 2px)
-□ Motion respects prefers-reduced-motion
-```
-
----
-
-## Phase 5 — Design Verification
-
-Before finalizing:
-
-```
-□ Open in mobile viewport (375px) — does it work?
-□ Open in dark mode — does it look intentional?
-□ Keyboard-navigate through the critical path — is it complete?
-□ Screenshot and ask: "Would I scroll past this on Dribbble?"
-□ Screen reader test with VoiceOver or NVDA
-```
-
----
-
----
-
-## Usage Examples
-
-```
-/ui-ux-pro-max design a SaaS dashboard for an analytics platform
-/ui-ux-pro-max redesign the checkout flow with better conversion UX
-/ui-ux-pro-max create an onboarding flow for a developer tool
-/ui-ux-pro-max design the landing page hero section with distinctive layout
-/ui-ux-pro-max create a data visualization dashboard with real-time updates
-```
+---
+description: Plan and implement cutting-edge advanced UI/UX. Creates distinctive, production-grade frontend interfaces with high design quality that avoid generic AI aesthetics — no purple gradients, no bento grids, no mesh backgrounds.
+required-skills: ui-ux-researcher, frontend-design, motion-engineering
+---
+
+# /ui-ux-pro-max — Advanced UI/UX Design
+
+$ARGUMENTS
+
+---
+
+## $CONTEXT_REQUIRED
+
+```
+Read BEFORE designing:
+□ Current UI components       → Follow project idioms and design systems
+□ .agent/skills/frontend-design/SKILL.md → Refresh UI guidelines
+```
+
+---
+
+## When to Use /ui-ux-pro-max
+
+| Use `/ui-ux-pro-max` when...              | Use instead when...                     |
+| :---------------------------------------- | :-------------------------------------- |
+| Building a visually distinctive interface | Functional-only component → `/generate` |
+| Design quality is the primary goal        | Fast page needed → `/enhance`           |
+| Creating from a design brief              | Bug fix in UI → `/debug`                |
+| Mobile + web parity required              |                                         |
+
+---
+
+## Phase 1 — Design Intent (Mandatory)
+
+Answer these before any design work:
+
+```
+1. Who is the user? (developer tools feel different from consumer apps)
+2. What emotion should the interface evoke? (calm focus, urgent speed, playful delight)
+3. What is the ONE thing users do most? (hero interaction gets maximum design attention)
+4. What existing interfaces does the user love? (don't copy — understand the WHY)
+5. What makes this interface DIFFERENT from every competitor?
+```
+
+---
+
+## Phase 2 — Design Identity
+
+Every interface built by /ui-ux-pro-max has a distinct visual identity:
+
+```
+Forbidden defaults (generic AI aesthetics):
+❌ Purple/violet as primary color
+❌ Left text / right image hero section
+❌ Mesh gradient backgrounds
+❌ Bento grid as the only layout
+❌ Emoji as icons
+❌ shadcn without explicit user request
+
+Distinctive alternatives:
+✅ Signal orange, acid green, warm slate, deep red — intentional palettes
+✅ Typographic-first hero sections
+✅ Grain textures, solid contrast, radial depth
+✅ Asymmetric or broken-grid layouts
+✅ SVG icons (lucide-react or custom)
+✅ Motion that communicates meaning (not decoration)
+```
+
+---
+
+## Phase 3 — Interaction Craft
+
+Every interactive element has 4 states designed:
+
+```
+1. Default:  The base state
+2. Hover:    Indicates interactability (cursor change, subtle lift, color shift)
+3. Active:   Confirms click/press (scale down, darker, haptic feedback on mobile)
+4. Disabled: Communicates unavailability (reduced opacity, cursor change, tooltip why)
+```
+
+Micro-animations are required, not optional:
+
+```
+Entry animations:  elements fade/slide in on mount
+State transitions: smooth color + scale changes (150–200ms)
+Loading states:    skeleton screens, not spinners (skeleton shows shape)
+Error shake:       invalid form input shakes (4px left-right)
+Success pulse:     confirmed actions pulse green briefly
+```
+
+---
+
+## Phase 4 — Implementation (Tribunal-Reviewed)
+
+All generated code runs through `/tribunal-frontend` including `accessibility-reviewer`:
+
+```
+WCAG 2.2 AA — Non-negotiable:
+□ Keyboard navigation complete and visible
+□ Screen reader semantics verified (role, label, live region)
+□ Color contrast 4.5:1 minimum on all text
+□ Focus indicator visible (outline: 2px solid, offset: 2px)
+□ Motion respects prefers-reduced-motion
+```
+
+---
+
+## Phase 5 — Design Verification
+
+Before finalizing:
+
+```
+□ Open in mobile viewport (375px) — does it work?
+□ Open in dark mode — does it look intentional?
+□ Keyboard-navigate through the critical path — is it complete?
+□ Screenshot and ask: "Would I scroll past this on Dribbble?"
+□ Screen reader test with VoiceOver or NVDA
+```
+
+---
+
+---
+
+## Usage Examples
+
+```
+/ui-ux-pro-max design a SaaS dashboard for an analytics platform
+/ui-ux-pro-max redesign the checkout flow with better conversion UX
+/ui-ux-pro-max create an onboarding flow for a developer tool
+/ui-ux-pro-max design the landing page hero section with distinctive layout
+/ui-ux-pro-max create a data visualization dashboard with real-time updates
+```
+
+---
+
+## After /ui-ux-pro-max — Next Steps
+
+| Outcome                   | Next Command                           |
+| :------------------------ | :------------------------------------- |
+| Design complete           | → `/preview start` to see it in action |
+| Need responsive checks    | → `/review` or manual viewport testing |
+| Needs backend integration | → `/tribunal-backend` to hook up APIs  |
+
+---

package/README.md

@@ -1,26 +1,38 @@
 <div align="center">
   <picture>
-    <img src="./docs/tribunalkit_no_bg.png" alt="TribunalKit — Code Without Hallucinations" width="480">
+    <img src="./docs/tribunalkit_no_bg.png" alt="TribunalKit — Code Without Hallucinations" width="500">
   </picture>
 
+<br><br>
+
+  <h1 style="font-size: 2.5em; border-bottom: none; margin-bottom: 0;">TRIBUNAL KIT</h1>
+  <p style="font-size: 1.2em; color: #888;">
+    <b>Anti-Hallucination Agent Architecture • Long-Running Autonomy • Pipeline Scrutiny</b>
+  </p>
+
   <br>
 
-  <h1>TRIBUNAL KIT</h1>
-  <p><b>Anti-Hallucination Agent Architecture • Long-Running Autonomy • Pipeline Scrutiny</b></p>
+[![NPM](https://img.shields.io/npm/v/tribunal-kit?style=for-the-badge&logo=npm&logoColor=white&color=cb0000)](https://www.npmjs.com/package/tribunal-kit)
+[![License](https://img.shields.io/badge/License-MIT-8b5cf6?style=for-the-badge)](LICENSE)
+[![Version](https://img.shields.io/badge/Version-4.6.0_Ultimate-1a1a1a?style=for-the-badge)](CHANGELOG.md)
+[![MCP](https://img.shields.io/badge/MCP-Ready-00e5ff?style=for-the-badge&logo=openai&logoColor=1a1a1a)](mcp_config.json)
+[![Code Quality](https://img.shields.io/badge/Zero-Hallucinations-ff1637?style=for-the-badge)](AGENT_FLOW.md)
 
-  [![NPM](https://img.shields.io/npm/v/tribunal-kit?style=for-the-badge&logo=npm&logoColor=white)](https://www.npmjs.com/package/tribunal-kit)
-  [![License](https://img.shields.io/badge/License-MIT-8b5cf6?style=for-the-badge)](LICENSE)
-  [![Version](https://img.shields.io/badge/Version-4.5.0_Ultimate-black?style=for-the-badge)](CHANGELOG.md)
-  [![MCP](https://img.shields.io/badge/MCP-Ready-00e5ff?style=for-the-badge)](mcp_config.json)
-</div>
+<br><br>
 
----
+</div>
 
 > [!IMPORTANT]
 > **AI GENERATES CODE. TRIBUNAL ENSURES IT WORKS.**  
-> A zero-bloat `.agent/` intelligence payload that upgrades your IDE with **41 specialist agents**, **31 workflows**, and a **16-reviewer Tribunal pipeline**. Zero hallucinations. Absolute execution certainty.
+> A zero-bloat `.agent/` intelligence payload that upgrades your IDE with **40 specialist agents**, **34 workflows**, and a **16-reviewer Tribunal pipeline**. Zero hallucinations. Absolute execution certainty.
+
+<br>
 
-## ▓▒░ QUICK START
+<div align="center">
+  <img src="https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png" width="100%">
+</div>
+
+## 🚀 QUICK START
 
 Drop Tribunal into any existing project to instantly weaponize your IDE.
 
@@ -30,100 +42,140 @@ npx tribunal-kit init
 ```
 
 > [!NOTE]
-> `init` automatically generates bridge rules for **Cursor**, **Windsurf**, **Gemini**, **Copilot**, and **Claude**. No configuration required.
+> <kbd>init</kbd> automatically generates bridge rules for **Cursor**, **Windsurf**, **Gemini**, **Copilot**, and **Claude**. No configuration required.
 
 ### 🔄 Auto-Syncing IDEs
-Keep your entire team aligned. Run `npx tribunal-kit sync` to instantly push the latest `.agent` rules directly into your IDE config files. Use `npx tribunal-kit hook` to install a Git `pre-push` hook that auto-evolves and syncs rules every time you push code.
-
-<br>
-
-## ▓▒░ THE MARATHON HARNESS (v4.4.4)
 
-The v4.4 update introduces the **Marathon Harness**—an engine designed to keep autonomous agents on track during long-running, multi-session projects without looping or losing context.
+Keep your entire team aligned. Run <kbd>npx tribunal-kit sync</kbd> to instantly push the latest `.agent` rules directly into your IDE config files. Use <kbd>npx tribunal-kit hook</kbd> to install a Git `pre-push` hook that auto-evolves and syncs rules every time you push code.
 
-### ⛓️ Directed Acyclic Graph (DAG) Support
-Cascade failures are obsolete. Features can now be declared with dependencies (`--deps=1,2`). If a database schema task fails, the API route task is automatically flagged as **Deadlocked** and bypassed until the root issue is resolved.
+<br>
 
-### 🧠 Failure Context & Attempt Tracking
-Agents no longer blindly retry failed approaches. When a feature fails, the reason and attempt count are permanently logged into the state matrix. The next agent to attempt the feature receives the exact failure history to course-correct immediately.
+<div align="center">
+  <img src="https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png" width="100%">
+</div>
 
-### 🔮 Memory Distillation
-Context windows dilute over time. The new `distill` command allows agents to forge crucial architectural decisions into a permanent `distilled_context.md` memory matrix, bridging the amnesia gap between long work sessions.
+## ⚔️ THE COMMAND ARSENAL
 
-### 🎨 Native Swarm Dashboard
-When dispatching parallel tasks via `/swarm`, Tribunal now intercepts the noisy terminal output and renders a sleek, zero-dependency **ANSI TUI Dashboard**. Watch multiple agents research, generate, and review in real-time.
+| Workflow Command          | Operational Scope                                                        |
+| :------------------------ | :----------------------------------------------------------------------- |
+| <kbd>/generate</kbd>      | Full Tribunal sequence: Generate → Audit → Human Gate.                   |
+| <kbd>/create</kbd>        | Scaffold major applications via App Builder routing.                     |
+| <kbd>/enhance</kbd>       | Safely extend existing codebases with zero regression.                   |
+| <kbd>/swarm</kbd>         | Fan-out orchestrator. Dispatch isolated workers, synthesize output.      |
+| <kbd>/tribunal-full</kbd> | Unleash **ALL 16** domain reviewers simultaneously for maximum scrutiny. |
+| <kbd>/debug</kbd>         | Systematic 4-phase root-cause investigation. No guessing.                |
+| <kbd>/ui-ux-pro-max</kbd> | Advanced visual aesthetic engine. No generic AI slop.                    |
 
 <br>
 
-## ▓▒░ THE PIPELINE // EVIDENCE-BASED CLOSEOUT
+<div align="center">
+  <img src="https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png" width="100%">
+</div>
+
+## ⚖️ THE PIPELINE // EVIDENCE-BASED CLOSEOUT
 
-Code generation is solved. **Code correctness is the frontier.** 
+Code generation is solved. **Code correctness is the frontier.**
 
 ```mermaid
 graph TD
     A[User Request] -->|Intent Parsed| B(Context Broker)
     B --> C{Inner-Loop Validator}
-    
+
     C -->|Syntax & Secrets Check| D[Parallel Tribunal Review]
     C -.->|Failed| E[Maker Auto-Correction]
     E -.-> C
-    
+
     D -->|16 Domain Reviewers| F[Human Gate]
     F -->|Approved| G((Committed to Disk))
-    
+
     classDef default fill:#1a1a1a,stroke:#333,stroke-width:2px,color:#fff;
     classDef critical fill:#ff1637,stroke:#fff,stroke-width:2px,color:#fff;
     classDef success fill:#00e5ff,stroke:#fff,stroke-width:2px,color:#1a1a1a;
-    
+
     class D critical;
     class G success;
 ```
 
 <br>
 
-## ▓▒░ THE SUPREME COURT (CASE LAW ENGINE)
+<div align="center">
+  <img src="https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png" width="100%">
+</div>
+
+## 🏛️ THE SUPREME COURT (CASE LAW ENGINE)
 
 The Tribunal Kit features persistent memory. The AI **never makes the same mistake twice** and auto-learns your engineering culture.
 
 > [!WARNING]
-> **1. The Case Law Engine**
+>
+> ### 1. The Case Law Engine
+>
 > Record mistakes as legal precedent. The `precedence-reviewer` checks this database locally to forcefully block the AI from repeating banned patterns.
-> - `npx tribunal-kit case add` *(Record an AI hallucination)*
+>
+> - <kbd>npx tribunal-kit case add</kbd> _(Record an AI hallucination)_
 
 > [!TIP]
-> **2. Skill Evolution Forge**
+>
+> ### 2. Skill Evolution Forge
+>
 > Stop writing manual rules. The system reads your Git diffs, strips token bloat, and auto-extracts your project's architectural idioms.
-> - `npx tribunal-kit learn` *(Digest staged files)*
+>
+> - <kbd>npx tribunal-kit learn</kbd> _(Digest staged files)_
 
-## ▓▒░ NATIVE MCP SERVER
+<br>
 
-Tribunal-Kit now functions as a standalone **Model Context Protocol (MCP)** server via `stdio`. 
+<div align="center">
+  <img src="https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png" width="100%">
+</div>
 
-Bind your AI IDE (Cursor, Claude Desktop, etc.) directly to `tribunal-kit` to unlock autonomous tool execution:
-- `run_tribunal_audit`: AI can trigger a full workspace health check.
-- `search_case_law`: AI can query your project's historical code rejections to avoid making mistakes *before* it writes code.
-- `sync_ide_bridges`: Force rule alignment directly from the AI chat.
+## 🏃 THE MARATHON HARNESS (v4.4+)
+
+The **Marathon Harness** is an engine designed to keep autonomous agents on track during long-running, multi-session projects without looping or losing context.
+
+<table>
+  <tr>
+    <td width="50%">
+      <h3>⛓️ DAG Support</h3>
+      <p>Cascade failures are obsolete. Features can now be declared with dependencies (<code>--deps=1,2</code>). If a database schema task fails, the API route task is automatically flagged as <b>Deadlocked</b> and bypassed until the root issue is resolved.</p>
+    </td>
+    <td width="50%">
+      <h3>🧠 Memory Distillation</h3>
+      <p>Context windows dilute over time. The new <code>distill</code> command allows agents to forge crucial architectural decisions into a permanent <code>distilled_context.md</code> memory matrix, bridging the amnesia gap between long work sessions.</p>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%">
+      <h3>📊 Native Swarm Dashboard</h3>
+      <p>When dispatching parallel tasks via <kbd>/swarm</kbd>, Tribunal intercepts the noisy terminal output and renders a sleek, zero-dependency <b>ANSI TUI Dashboard</b>. Watch agents research, generate, and review in real-time.</p>
+    </td>
+    <td width="50%">
+      <h3>🔮 Failure Context Tracking</h3>
+      <p>Agents no longer blindly retry failed approaches. When a feature fails, the reason and attempt count are permanently logged. The next agent receives the exact failure history to course-correct immediately.</p>
+    </td>
+  </tr>
+</table>
 
 <br>
 
-## ▓▒░ COMMAND ARSENAL
+<div align="center">
+  <img src="https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png" width="100%">
+</div>
+
+## 🔌 NATIVE MCP SERVER
 
-| Slash Command | Operational Scope |
-| :--- | :--- |
-| `/generate` | Full Tribunal sequence: Generate → Audit → Human Gate. |
-| `/create` | Scaffold major applications via App Builder routing. |
-| `/enhance` | Safely extend existing codebases with zero regression. |
-| `/swarm` | Fan-out orchestrator. Dispatch isolated workers, synthesize output. |
-| `/tribunal-full` | Unleash **ALL 16** domain reviewers simultaneously for maximum scrutiny. |
-| `/debug` | Systematic 4-phase root-cause investigation. No guessing. |
-| `/ui-ux-pro-max` | Advanced visual aesthetic engine. No generic AI slop. |
+Tribunal-Kit functions as a standalone **Model Context Protocol (MCP)** server via `stdio`.
+
+Bind your AI IDE directly to `tribunal-kit` to unlock autonomous tool execution:
+
+- `run_tribunal_audit`: AI can trigger a full workspace health check.
+- `search_case_law`: AI can query your project's historical code rejections to avoid making mistakes _before_ it writes code.
+- `sync_ide_bridges`: Force rule alignment directly from the AI chat.
 
 <br>
 
 <div align="center">
-  <br>
   <img src="https://img.shields.io/badge/Status-Active_&_Secured-00e5ff?style=for-the-badge" alt="Status" />
   <br><br>
   <i>"Never guess database column names. Error handling on every async function. Evidence-based closeouts. Welcome to the Tribunal."</i><br>
   <sub><b>MIT Licensed</b> • Engineered for maximum autonomy and precision.</sub>
-</div> 
+</div>