tribunal-kit 3.0.0 → 4.0.0

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

@@ -1,133 +1,110 @@
----
-description: Performance-specific Tribunal. Runs Logic + Performance reviewers. Use when code is slow, for optimization tasks, bundle analysis, Core Web Vitals improvement, memory leak investigation, and before deploying performance-critical features.
----
-
-# /tribunal-performance — Performance Audit
-
-$ARGUMENTS
-
----
-
-## When to Use /tribunal-performance
-
-| Use `/tribunal-performance` when... | Use something else when... |
-|:---|:---|
-| LCP, INP, or CLS is above threshold | General code review → `/tribunal-full` |
-| Bundle size is too large | Backend perf only → `/tribunal-backend` |
-| Memory usage grows unbounded | Database perf → `/tribunal-database` |
-| Node.js event loop is saturated | |
-| Optimizing rendering performance | |
-
----
-
-## 2 Active Reviewers (Both Run Simultaneously)
-
-### logic-reviewer
-- Expensive computation in render function (runs every render)
-- Missing memoization where React.memo/useMemo would help
-- Infinite re-render loop (effect updates a value that triggers the effect)
-
-### performance-reviewer
-- INP: expensive synchronous work on user interaction (> 50ms blocking)
-- LCP: hero image without priority={true} or preload hint
-- CLS: missing width/height on images causing layout shift
-- Bundle: large library imported without tree-shaking or dynamic import
-- Memory: event listeners added without cleanup in useEffect
-- N+1: database queries in loop should be batched
-- Cache: expensive DB query without Redis/memory cache
-
----
-
-## 2026 CWV Targets (Verdict Reference)
-
-| Metric | Good | Needs Work | Poor (REJECTED) |
-|:---|:---|:---|:---|
-| INP | < 200ms | 200–500ms | > 500ms |
-| LCP | < 2.5s | 2.5–4.0s | > 4.0s |
-| CLS | < 0.1 | 0.1–0.25 | > 0.25 |
-
----
-
-## Verdict System
-
-```
-If code contains patterns causing POOR rating → ❌ REJECTED
-If code contains patterns causing NEEDS WORK → ⚠️ WARNING
-If all patterns cause GOOD rating → ✅ APPROVED
-```
-
----
-
-## Output Format
-
-```
-━━━ Tribunal Performance ━━━━━━━━━━━━━━━━━━
-
-logic-reviewer:       ✅ APPROVED
-performance-reviewer: ❌ REJECTED
-
-━━━ VERDICT: ❌ REJECTED ━━━━━━━━━━━━━━━━━
-
-Blockers:
-- performance-reviewer: [HIGH — INP] Synchronous filterMillion() called in onClick handler
-  Impact: Blocks main thread 200ms+ on each click — INP will be POOR
-  Fix: Wrap in startTransition(() => setResults(filterMillion(items, q)))
-
-- performance-reviewer: [HIGH — LCP] Hero image missing priority
-  Impact: Browser discovers image late — LCP will be POOR (> 4s)
-  Fix: <Image src="/hero.webp" priority={true} ... />
-
-Warnings:
-- performance-reviewer: [MEDIUM — Bundle] lodash imported directly (+67kb unminified)
-  Fix: Replace with native Array methods or specific lodash-es import
-```
-
----
-
-## Performance-Specific Hallucination Traps
-
-```typescript
-// ❌ React.memo doesn't help when parent re-renders with new objects every time
-const MemoCard = React.memo(Card);
-<MemoCard style={{ margin: 8 }} /> // New object {} every render → memo has no effect
-
-// ✅ Memoize the object itself
-const cardStyle = useMemo(() => ({ margin: 8 }), []);
-<MemoCard style={cardStyle} />
-
-// ❌ useMemo with no deps array — runs every render (same as no memo)
-const sorted = useMemo(() => items.sort(...)); // Missing deps array!
-
-// ✅ Correct deps array
-const sorted = useMemo(() => [...items].sort(compareFn), [items]);
-
-// ❌ Non-measurement claim
-// "This is fast" — never write this without a Lighthouse score to back it
-```
-
----
-
-## Measurement Protocol
-
-Performance optimization without measurement is guessing:
-
-```
-Before optimizing:
-□ Run Lighthouse: record LCP, INP, CLS, bundle size
-□ Profile with Chrome DevTools: identify actual bottleneck
-
-After optimizing:
-□ Run Lighthouse again: confirm improvement
-□ Show before/after scores in audit output
-```
-
----
-
-## Usage Examples
-
-```
-/tribunal-performance the product listing page with image grid
-/tribunal-performance the search component with real-time filtering
-/tribunal-performance the checkout flow for CWV compliance
-/tribunal-performance the API route with expensive DB query for caching
-```
+---
+description: Performance-specific Tribunal. Runs Logic + Performance reviewers. Use when code is slow, for optimization tasks, bundle analysis, Core Web Vitals improvement, memory leak investigation, and before deploying performance-critical features.
+---
+
+# /tribunal-performance — Performance Audit
+
+$ARGUMENTS
+
+---
+
+## When to Use /tribunal-performance
+
+|Use `/tribunal-performance` when...|Use something else when...|
+|:---|:---|
+|LCP, INP, or CLS is above threshold|General code review → `/tribunal-full`|
+|Bundle size is too large|Backend perf only → `/tribunal-backend`|
+|Memory usage grows unbounded|Database perf → `/tribunal-database`|
+|Node.js event loop is saturated||
+|Optimizing rendering performance||
+
+---
+
+## 2 Active Reviewers (Both Run Simultaneously)
+
+### precedence-reviewer    → Checks local repo Case Law for past rejections
+logic-reviewer
+- Expensive computation in render function (runs every render)
+- Missing memoization where React.memo/useMemo would help
+- Infinite re-render loop (effect updates a value that triggers the effect)
+
+### performance-reviewer
+- INP: expensive synchronous work on user interaction (> 50ms blocking)
+- LCP: hero image without priority={true} or preload hint
+- CLS: missing width/height on images causing layout shift
+- Bundle: large library imported without tree-shaking or dynamic import
+- Memory: event listeners added without cleanup in useEffect
+- N+1: database queries in loop should be batched
+- Cache: expensive DB query without Redis/memory cache
+
+---
+
+## 2026 CWV Targets (Verdict Reference)
+
+|Metric|Good|Needs Work|Poor (REJECTED)|
+|:---|:---|:---|:---|
+|INP|< 200ms|200–500ms|> 500ms|
+|LCP|< 2.5s|2.5–4.0s|> 4.0s|
+|CLS|< 0.1|0.1–0.25|> 0.25|
+
+---
+
+## Verdict System
+
+```
+If code contains patterns causing POOR rating → ❌ REJECTED
+If code contains patterns causing NEEDS WORK → ⚠️ WARNING
+If all patterns cause GOOD rating → ✅ APPROVED
+```
+
+---
+
+---
+
+## Performance-Specific Hallucination Traps
+
+```typescript
+// ❌ React.memo doesn't help when parent re-renders with new objects every time
+const MemoCard = React.memo(Card);
+<MemoCard style={{ margin: 8 }} /> // New object {} every render → memo has no effect
+
+// ✅ Memoize the object itself
+const cardStyle = useMemo(() => ({ margin: 8 }), []);
+<MemoCard style={cardStyle} />
+
+// ❌ useMemo with no deps array — runs every render (same as no memo)
+const sorted = useMemo(() => items.sort(...)); // Missing deps array!
+
+// ✅ Correct deps array
+const sorted = useMemo(() => [...items].sort(compareFn), [items]);
+
+// ❌ Non-measurement claim
+// "This is fast" — never write this without a Lighthouse score to back it
+```
+
+---
+
+## Measurement Protocol
+
+Performance optimization without measurement is guessing:
+
+```
+Before optimizing:
+□ Run Lighthouse: record LCP, INP, CLS, bundle size
+□ Profile with Chrome DevTools: identify actual bottleneck
+
+After optimizing:
+□ Run Lighthouse again: confirm improvement
+□ Show before/after scores in audit output
+```
+
+---
+
+## Usage Examples
+
+```
+/tribunal-performance the product listing page with image grid
+/tribunal-performance the search component with real-time filtering
+/tribunal-performance the checkout flow for CWV compliance
+/tribunal-performance the API route with expensive DB query for caching
+```

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

@@ -1,143 +1,122 @@
----
-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
-```
-
----
-
-## Output Format
-
-```
-━━━ UI/UX Design ━━━━━━━━━━━━━━━━━━━━━━━━
-
-Design Identity: [1 sentence describing the visual intent]
-Primary action:  [what the user does most prominently]
-Color palette:   [specific hex values — not color names]
-Motion profile:  [subtle / moderate / expressive]
-
-━━━ Tribunal: Frontend + Accessibility ━━━━━━
-
-frontend-reviewer:    ✅ APPROVED
-accessibility-reviewer: [verdict]
-
-[Generated components]
-
-━━━ Human Gate ━━━━━━━━━━━━━━━━━━━━━━━━━
-Approve?  Y = write | N = discard | R = revise design direction
-```
-
----
-
-## 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.
+---
+
+# /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
+```

package/README.md

@@ -7,7 +7,7 @@
 
   [![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-3.0.0-black?style=for-the-badge)](CHANGELOG.md)
+  [![Version](https://img.shields.io/badge/Version-4.0.0_Supreme_Court-black?style=for-the-badge)](CHANGELOG.md)
 </div>
 
 
@@ -59,6 +59,22 @@ No manual tagging required. The system self-organizes.
 
 <br>
 
+## ▓▒░ THE SUPREME COURT (v4.0)
+
+*(New in v4)* The Tribunal Kit now features persistent memory so the AI **never makes the same mistake twice** and automatically learns your team's coding style.
+
+**1. The Case Law Engine (Never repeat mistakes)**
+If an agent makes a mistake, you can record it as a legal precedent. Before writing any future code, the `precedence-reviewer` checks this database locally to forcefully block the AI from repeating that mistake.
+- `npx tribunal-kit case add` *(Record an AI hallucination)*
+- `npx tribunal-kit case search "query"` *(Search your precedents)*
+
+**2. Skill Evolution Forge (Auto-learns your style)**
+You no longer need to write manual rules. The system reads your Git commits, strips out the noise to save tokens, and automatically extracts your project's unique architectural patterns to teach the AI.
+- `npx tribunal-kit learn` *(Run a learning digest on staged files)*
+- `npx tribunal-kit hook` *(Automate learning every time you `git push`)*
+
+<br>
+
 ## ▓▒░ CAPABILITY MATRIX
 
 | System Asset | Count | Operational Scope |
@@ -117,6 +133,19 @@ Unleash parallel reviewers on existing code.
 
 </details>
 
+<details>
+<summary><b>⚖️ SUPREME COURT / MEMORY</b></summary>
+<br>
+
+| Command | Action |
+| :--- | :--- |
+| <code>npx tribunal-kit case add</code> | Record an AI hallucination to ban it forever. |
+| <code>npx tribunal-kit case search</code> | Search your local database of banned code. |
+| <code>npx tribunal-kit learn</code> | Auto-extract project idioms from your git diffs. |
+| <code>npx tribunal-kit hook</code> | Install a git hook to auto-learn the moment you push. |
+
+</details>
+
 <details>
 <summary><b>🔧 TROUBLESHOOTING & OPS</b></summary>
 <br>