tribunal-kit 9.2.4 → 9.2.5

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

@@ -1,103 +1,103 @@
----
-description: Plan and implement cutting-edge advanced UI/UX. Uses the UI Reasoning Engine to structure layout and styling, and routes through the dedicated `/tribunal-ui` reviewer pipeline.
-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/auto_preview.js
----
-
-# /ui-ux-pro-max — Advanced UI/UX Design
-
-$ARGUMENTS
-
----
-
-## Mandatory Pre-Flight Context Inspection
-
-Before designing or implementing advanced UI/UX layouts, you MUST inspect:
-
-1. Active Design Tokens & System (`DESIGN.md`, CSS custom properties) → Verify OKLCH color palettes, typography scale, and spacing grid
-2. UI Reasoning Engine 16-Step Pipeline (`.agent/skills/ui-reasoning-engine/SKILL.md`) → Structure component layout, micro-interactions, and accessibility before coding
-3. Anti-Generic Aesthetic Rule → Ban plain purple/violet AI gradients and stock hero templates; enforce bespoke visual hierarchy and tactile micro-interactions
-
----
-
-## 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 & Product Aware Reasoning (Mandatory)
-
-Answer these before writing any code (using the `ui-reasoning-engine` skill):
-
-1. **Who is the user?** (Casual consumer vs expert operator).
-2. **What is the product category?** (SaaS, DevTool, AI Interface, Landing, Fintech).
-3. **What is the visual direction?** (Brutalist, Editorial, Soft Minimal, Dark Luxury, Swiss).
-4. **What is the primary user goal?** (Optimize the layout and click paths for this action).
-5. **What are the accessibility requirements?** (Focus paths, target size, Lc contrast).
-
-Write the **🧠 UI Reasoning Engine Trace** in your response as a collapsed markdown block before the code.
-
----
-
-## Phase 2 — Visual Identity & Design Tokens
-
-Every interface must use custom variables defined in `DESIGN.md` and `design-tokens.json`:
-
-- ❌ **Banned Clichés:** Purple/violet accents, mesh gradients, glassmorphism overuse, default library themes.
-- ✅ **Intentional Styling:** Dynamic OKLCH colors, 8px grid alignment, variable font sizes with CSS `clamp()`, and 1px luminous borders.
-
----
-
-## Phase 3 — Interaction States & Micro-interactions
-
-Ensure every interactive element has styling defined for:
-
-- `hover`, `focus-visible`, `active`/`pressed`, and `disabled` states.
-- Confirm clicks with spring scale-down transitions (`active:scale-[0.97]`).
-- Trap keyboard focus within modals/dialogs and return it to the trigger on close.
-
----
-
-## Phase 4 — Swarm Implementation & UI Review Pipeline
-
-1. **Layout Design:** Create the structural grid and semantic accessibility tree.
-2. **Token Application:** Apply Tailwind classes or style blocks using variables.
-3. **Motion Integration:** Add GSAP or Framer Motion transitions (keeping motion <300ms, respecting reduced motion).
-4. **Tribunal Review Gate:** Route the generated component through `/tribunal-ui` for parallel verification.
-
----
-
-## 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 a distinctive visual style
-```
-
----
-
-## After /ui-ux-pro-max — Next Steps
-
-| Outcome                     | Next Command                                    |
-| :-------------------------- | :---------------------------------------------- |
-| Design complete             | → `/preview start` to see it in action          |
-| Reviewers reject with fixes | → Apply fixes, then run `/tribunal-ui` again    |
-| Performance concerns        | → `/performance-benchmarker` for Lighthouse/CWV |
+---
+description: Plan and implement cutting-edge advanced UI/UX. Uses the UI Reasoning Engine to structure layout and styling, and routes through the dedicated `/tribunal-ui` reviewer pipeline.
+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/auto_preview.js
+---
+
+# /ui-ux-pro-max — Advanced UI/UX Design
+
+$ARGUMENTS
+
+---
+
+## Mandatory Pre-Flight Context Inspection
+
+Before designing or implementing advanced UI/UX layouts, you MUST inspect:
+
+1. Active Design Tokens & System (`DESIGN.md`, CSS custom properties) → Verify OKLCH color palettes, typography scale, and spacing grid
+2. UI Reasoning Engine 16-Step Pipeline (`.agent/skills/ui-reasoning-engine/SKILL.md`) → Structure component layout, micro-interactions, and accessibility before coding
+3. Anti-Generic Aesthetic Rule → Ban plain purple/violet AI gradients and stock hero templates; enforce bespoke visual hierarchy and tactile micro-interactions
+
+---
+
+## 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 & Product Aware Reasoning (Mandatory)
+
+Answer these before writing any code (using the `ui-reasoning-engine` skill):
+
+1. **Who is the user?** (Casual consumer vs expert operator).
+2. **What is the product category?** (SaaS, DevTool, AI Interface, Landing, Fintech).
+3. **What is the visual direction?** (Brutalist, Editorial, Soft Minimal, Dark Luxury, Swiss).
+4. **What is the primary user goal?** (Optimize the layout and click paths for this action).
+5. **What are the accessibility requirements?** (Focus paths, target size, Lc contrast).
+
+Write the **🧠 UI Reasoning Engine Trace** in your response as a collapsed markdown block before the code.
+
+---
+
+## Phase 2 — Visual Identity & Design Tokens
+
+Every interface must use custom variables defined in `DESIGN.md` and `design-tokens.json`:
+
+- ❌ **Banned Clichés:** Purple/violet accents, mesh gradients, glassmorphism overuse, default library themes.
+- ✅ **Intentional Styling:** Dynamic OKLCH colors, 8px grid alignment, variable font sizes with CSS `clamp()`, and 1px luminous borders.
+
+---
+
+## Phase 3 — Interaction States & Micro-interactions
+
+Ensure every interactive element has styling defined for:
+
+- `hover`, `focus-visible`, `active`/`pressed`, and `disabled` states.
+- Confirm clicks with spring scale-down transitions (`active:scale-[0.97]`).
+- Trap keyboard focus within modals/dialogs and return it to the trigger on close.
+
+---
+
+## Phase 4 — Swarm Implementation & UI Review Pipeline
+
+1. **Layout Design:** Create the structural grid and semantic accessibility tree.
+2. **Token Application:** Apply Tailwind classes or style blocks using variables.
+3. **Motion Integration:** Add GSAP or Framer Motion transitions (keeping motion <300ms, respecting reduced motion).
+4. **Tribunal Review Gate:** Route the generated component through `/tribunal-ui` for parallel verification.
+
+---
+
+## 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 a distinctive visual style
+```
+
+---
+
+## After /ui-ux-pro-max — Next Steps
+
+| Outcome                     | Next Command                                    |
+| :-------------------------- | :---------------------------------------------- |
+| Design complete             | → `/preview start` to see it in action          |
+| Reviewers reject with fixes | → Apply fixes, then run `/tribunal-ui` again    |
+| Performance concerns        | → `/performance-benchmarker` for Lighthouse/CWV |

package/.agents/skills/12-principles-of-animation/SKILL.md

@@ -1,51 +1,51 @@
----
-name: 12-principles-of-animation
-description: "Use when Application of Disney's 12 Principles of Animation (Squash & Stretch, Anticipation, Staging, Follow Through, Slow In & Slow Out, Arc, Secondary Action, Timing, Exaggeration, Solid Drawing, Appeal) to modern web UI motion."
-version: 5.0.0
-last-updated: 2026-09-13
-skills:
-  - motion-engineering
-  - 60fps-animation
-  - accessible-animation
-tools: Read, Grep, Glob, Bash, Edit, Write
-scripts-binding:
-  - .agent/scripts/lint_runner.js
-  - .agent/scripts/verify_all.js
----
-
-# 12 Principles of Animation — Web UI Motion Theory
-
----
-
-## 🛠️ Technical Architecture & Reference Recipes
-
----
-
----
-
-## The 6 Essential Web Principles
-
-### 1. Squash & Stretch (Scale Elasticity)
-
-- Compress elements slightly on impact (e.g. button press down `scale(0.97)`), then stretch slightly on release (`scale(1.02)` -> `scale(1)`).
-- **Rule**: Preserve overall volume. If height decreases by 5%, width must expand by 5%.
-
-### 2. Anticipation (Pre-Motion Cue)
-
-- Before a major movement (e.g. modal sliding up), perform a micro-backwards movement (e.g. shift down `2px` for `40ms`) to prepare the user's eye.
-
-### 3. Staging (Focus & Spatial Hierarchy)
-
-- Direct user attention to one primary animation at a time. Never animate competing layout elements across different regions simultaneously.
-
-### 4. Slow In & Slow Out (Easing Curves)
-
-- Objects in nature start slow, accelerate, and decelerate gradually. Use strong ease-out curves (`cubic-bezier(0.16, 1, 0.3, 1)`) for UI entrances.
-
-### 5. Arcs (Natural Curvilinear Trajectories)
-
-- Human arms and physical objects move in curved arcs rather than mechanical straight lines. When moving elements across 2D space, use parabolic bezier curves or `offset-path`.
-
-### 6. Follow Through & Overlapping Action
-
-- Secondary elements (e.g. badge text inside a sliding card) lag slightly behind the main container (stagger delay 30ms - 50ms), creating organic physical realism.
+---
+name: 12-principles-of-animation
+description: "Use when Application of Disney's 12 Principles of Animation (Squash & Stretch, Anticipation, Staging, Follow Through, Slow In & Slow Out, Arc, Secondary Action, Timing, Exaggeration, Solid Drawing, Appeal) to modern web UI motion."
+version: 5.0.0
+last-updated: 2026-09-13
+skills:
+  - motion-engineering
+  - 60fps-animation
+  - accessible-animation
+tools: Read, Grep, Glob, Bash, Edit, Write
+scripts-binding:
+  - .agent/scripts/lint_runner.js
+  - .agent/scripts/verify_all.js
+---
+
+# 12 Principles of Animation — Web UI Motion Theory
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+---
+
+---
+
+## The 6 Essential Web Principles
+
+### 1. Squash & Stretch (Scale Elasticity)
+
+- Compress elements slightly on impact (e.g. button press down `scale(0.97)`), then stretch slightly on release (`scale(1.02)` -> `scale(1)`).
+- **Rule**: Preserve overall volume. If height decreases by 5%, width must expand by 5%.
+
+### 2. Anticipation (Pre-Motion Cue)
+
+- Before a major movement (e.g. modal sliding up), perform a micro-backwards movement (e.g. shift down `2px` for `40ms`) to prepare the user's eye.
+
+### 3. Staging (Focus & Spatial Hierarchy)
+
+- Direct user attention to one primary animation at a time. Never animate competing layout elements across different regions simultaneously.
+
+### 4. Slow In & Slow Out (Easing Curves)
+
+- Objects in nature start slow, accelerate, and decelerate gradually. Use strong ease-out curves (`cubic-bezier(0.16, 1, 0.3, 1)`) for UI entrances.
+
+### 5. Arcs (Natural Curvilinear Trajectories)
+
+- Human arms and physical objects move in curved arcs rather than mechanical straight lines. When moving elements across 2D space, use parabolic bezier curves or `offset-path`.
+
+### 6. Follow Through & Overlapping Action
+
+- Secondary elements (e.g. badge text inside a sliding card) lag slightly behind the main container (stagger delay 30ms - 50ms), creating organic physical realism.

package/.agents/skills/60fps-animation/SKILL.md

@@ -1,91 +1,91 @@
----
-name: 60fps-animation
-description: "Use when Web animation performance guidance for avoiding layout thrashing, achieving 60/120fps motion, and using GPU compositor-friendly properties (transform, opacity)."
-version: 5.0.0
-last-updated: 2026-09-13
-skills:
-  - motion-engineering
-  - accessible-animation
-  - fixing-motion-performance
-tools: Read, Grep, Glob, Bash, Edit, Write
-scripts-binding:
-  - .agent/scripts/lint_runner.js
-  - .agent/scripts/verify_all.js
----
-
-# 60fps Animation — GPU Compositor & High-Performance Motion
-
----
-
-## 🛠️ Technical Architecture & Reference Recipes
-
----
-
-## 🛠️ Technical Architecture & Reference Recipes
-
----
-
-## 2026 Motion Performance & GPU Invariants
-
-1. **CSS `@starting-style` Native Transitions**:
-   ```css
-   /* Native entry animation without JS transition wrappers */
-   dialog[open] {
-     opacity: 1;
-     transform: scale(1);
-     transition:
-       opacity 200ms ease,
-       transform 200ms ease;
-     @starting-style {
-       opacity: 0;
-       transform: scale(0.95);
-     }
-   }
-   ```
-2. **Native Scroll-Driven Animations**: Use CSS `animation-timeline: view()` or `scroll()` to run scroll animations directly on the compositor thread without firing JavaScript scroll event handlers.
-3. **No Layout Thrashing in JS**: Never interleave DOM reads (`element.getBoundingClientRect()`, `offsetHeight`) with DOM writes (`style.transform`). Batch reads first, then writes in `requestAnimationFrame()`.
-
-## Hallucination Traps (Read First)
-
-- ❌ Animating `top`, `left`, `width`, `height` → ✅ Animate `transform: translate3d(...)` and `scale(...)`
-- ❌ Using JavaScript scroll listeners for parallax/fade → ✅ Use native CSS `animation-timeline`
-- ❌ Setting `will-change: transform` globally on every element → ✅ Blows GPU VRAM; apply only during active interaction
-- ❌ Animating box-shadow directly → ✅ Animate `opacity` on a pseudo-element (`::after`) with pre-rendered shadow
-
----
-
-## 4 Performance Rules
-
-### 1. Compositor-Only Animation Pipeline
-
-Only animate properties handled strictly by the GPU compositor layer:
-
-- ✅ **Compositor Properties** (Zero Layout / Zero Paint): `transform` (`translate3d`, `scale`, `rotate`) and `opacity`.
-- ❌ **Forbidden Animating Properties** (Triggers Full Layout Re-calculation): `width`, `height`, `margin`, `padding`, `top`, `left`, `border-width`.
-
-### 2. Replacing Width/Height Transitions with Scale Math
-
-Instead of animating `width: 100px` to `200px`:
-
-```css
-/* BAD: Triggers Layout recalculation on every frame */
-.box-bad {
-  transition: width 300ms ease;
-}
-
-/* GOOD: GPU Compositor Hardware Accelerated */
-.box-good {
-  transform: scaleX(2);
-  transform-origin: left center;
-  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-```
-
-### 3. `will-change` Management
-
-- Apply `will-change: transform, opacity` ONLY right before or during active animation.
-- Remove `will-change` when animation completes to free up GPU VRAM memory!
-
-### 4. Layout Thrashing Prevention in JS
-
-- Never interleave DOM reads (`element.offsetHeight`) with DOM writes (`element.style.height = ...`) inside requestAnimationFrame or scroll handlers. Batch all reads first, then perform all writes.
+---
+name: 60fps-animation
+description: "Use when Web animation performance guidance for avoiding layout thrashing, achieving 60/120fps motion, and using GPU compositor-friendly properties (transform, opacity)."
+version: 5.0.0
+last-updated: 2026-09-13
+skills:
+  - motion-engineering
+  - accessible-animation
+  - fixing-motion-performance
+tools: Read, Grep, Glob, Bash, Edit, Write
+scripts-binding:
+  - .agent/scripts/lint_runner.js
+  - .agent/scripts/verify_all.js
+---
+
+# 60fps Animation — GPU Compositor & High-Performance Motion
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+---
+
+## 2026 Motion Performance & GPU Invariants
+
+1. **CSS `@starting-style` Native Transitions**:
+   ```css
+   /* Native entry animation without JS transition wrappers */
+   dialog[open] {
+     opacity: 1;
+     transform: scale(1);
+     transition:
+       opacity 200ms ease,
+       transform 200ms ease;
+     @starting-style {
+       opacity: 0;
+       transform: scale(0.95);
+     }
+   }
+   ```
+2. **Native Scroll-Driven Animations**: Use CSS `animation-timeline: view()` or `scroll()` to run scroll animations directly on the compositor thread without firing JavaScript scroll event handlers.
+3. **No Layout Thrashing in JS**: Never interleave DOM reads (`element.getBoundingClientRect()`, `offsetHeight`) with DOM writes (`style.transform`). Batch reads first, then writes in `requestAnimationFrame()`.
+
+## Hallucination Traps (Read First)
+
+- ❌ Animating `top`, `left`, `width`, `height` → ✅ Animate `transform: translate3d(...)` and `scale(...)`
+- ❌ Using JavaScript scroll listeners for parallax/fade → ✅ Use native CSS `animation-timeline`
+- ❌ Setting `will-change: transform` globally on every element → ✅ Blows GPU VRAM; apply only during active interaction
+- ❌ Animating box-shadow directly → ✅ Animate `opacity` on a pseudo-element (`::after`) with pre-rendered shadow
+
+---
+
+## 4 Performance Rules
+
+### 1. Compositor-Only Animation Pipeline
+
+Only animate properties handled strictly by the GPU compositor layer:
+
+- ✅ **Compositor Properties** (Zero Layout / Zero Paint): `transform` (`translate3d`, `scale`, `rotate`) and `opacity`.
+- ❌ **Forbidden Animating Properties** (Triggers Full Layout Re-calculation): `width`, `height`, `margin`, `padding`, `top`, `left`, `border-width`.
+
+### 2. Replacing Width/Height Transitions with Scale Math
+
+Instead of animating `width: 100px` to `200px`:
+
+```css
+/* BAD: Triggers Layout recalculation on every frame */
+.box-bad {
+  transition: width 300ms ease;
+}
+
+/* GOOD: GPU Compositor Hardware Accelerated */
+.box-good {
+  transform: scaleX(2);
+  transform-origin: left center;
+  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+```
+
+### 3. `will-change` Management
+
+- Apply `will-change: transform, opacity` ONLY right before or during active animation.
+- Remove `will-change` when animation completes to free up GPU VRAM memory!
+
+### 4. Layout Thrashing Prevention in JS
+
+- Never interleave DOM reads (`element.offsetHeight`) with DOM writes (`element.style.height = ...`) inside requestAnimationFrame or scroll handlers. Batch all reads first, then perform all writes.