tribunal-kit 9.2.4 → 9.2.5

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

@@ -1,69 +1,69 @@
----
-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
-
----
-
-## 🛠️ 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`                                |
+---
+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
+
+---
+
+## 🛠️ 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`                                |

package/.agents/skills/ui-ux-pro-max/SKILL.md

@@ -1,110 +1,110 @@
----
-name: ui-ux-pro-max
-description: "Use when The Picasso Protocol — Elite UI/UX design mastery. Integrates the 16-step UI Reasoning Engine, Category-Specific Heuristics, and Anti-Pattern controls to generate portfolio-grade interfaces."
-version: 5.0.0
-last-updated: 2026-09-13
-skills:
-  - ui-reasoning-engine
-  - product-aware-heuristics
-  - frontend-design
-  - web-design-guidelines
-tools: Read, Grep, Glob, Bash, Edit, Write
-scripts-binding:
-  - .agent/scripts/lint_runner.js
-  - .agent/scripts/verify_all.js
----
-
-# UI/UX Pro Max v3.0 — The Picasso Protocol
-
----
-
-## 🛠️ Technical Architecture & Reference Recipes
-
----
-
-## 2026 Picasso Protocol Design Invariants
-
-1. **Anti-Cliché Palette Discipline**:
-   Never use purple (#7c3aed / #8b5cf6) as primary brand color. Curate characterful palettes: Obsidian + Signal Orange, Slate + Electric Cyan, or Bone White + Deep Emerald.
-2. **Intentional Typography Pairing**:
-   Pair an expressive display font (e.g., Clash Display, Syne, Cabinet Grotesk, Newsreader) with an ultra-readable neutral body font (e.g., Geist Sans, Plus Jakarta Sans, General Sans).
-3. **Fluid Layout Bounds & Asymmetry**:
-   Break repetitive bento grids. Use asymmetric column spans (e.g. 7:5 or 8:4), overlapping cards, and ambient grain overlays.
-
----
-
-## 🚨 Design Governance Guardrails (REJECTION Rules)
-
-- ❌ **Primary Purple Accents:** Banned. Use electric blue, signal orange, coral, warm slate, or natural sage.
-- ❌ **Inter/Roboto Defaults:** Banned. Display titles must use characterful display fonts; body text uses readable body options.
-- ❌ **Left Text/Right Image Hero:** Banned. Use full-bleed, asymmetric overlap, or typographical layouts.
-- ❌ **Radial Mesh Backgrounds:** Banned. Use ambient grain overlay, solid high-contrast depth, or radial tinting.
-- ❌ **Bento Box Grid Overuse:** Banned. Break the grid intentionally for visual interest.
-- ❌ **Flat Glassmorphic Panels:** Banned. Translucency should only be used as a rare overlay, not for main containers.
-- ❌ **No States Feedback:** Banned. Every control must have styled states (Hover, Focus-visible, Active, Disabled).
-
----
-
-## 1. Color Gamuts & Display-P3 Color Science
-
-Use dynamic OKLCH variables to access the wider Display-P3 color spectrum for stunning vibrancy. Perceptually uniform lightness ensures stable contrast:
-
-```css
-:root {
-  /* oklch(Lightness Chroma Hue / Alpha) */
-  --color-primary: oklch(65% 0.22 250); /* Brand electric blue */
-  --color-primary-hover: oklch(58% 0.22 250); /* Darker active state */
-  --bg-base: oklch(0.08 0.005 250); /* OLED base background */
-  --bg-surface: oklch(0.12 0.008 250); /* Stepped card surface */
-  --border-subtle: oklch(22% 0.01 250 / 0.4); /* Hairline separator */
-}
-```
-
-### Color Gamut Guidelines
-
-- **Display-P3 Saturated Accents:** When targeting high-end modern screens, use chroma values between `0.20` and `0.28`.
-- **Stepped Neutral Contrast:** Stepped neutral surfaces must increase by `0.04` Lightness increments (e.g., base `0.08` → surface `0.12` → raised `0.16` → overlay `0.20`) to create physical depth without color tint deviations.
-
----
-
-## 2. Typographical Tracking & scaling
-
-Headings must use `clamp()` for fluid sizing and tight negative letter spacing (tracking) to prevent loose display layouts:
-
-| Token         | Clamp Value                  | Weight | Line Height | Tracking           |
-| :------------ | :--------------------------- | :----- | :---------- | :----------------- |
-| `--text-hero` | `clamp(2.5rem, 6vw, 4.5rem)` | 800    | 0.95        | `-0.04em` (Tight)  |
-| `--text-h1`   | `clamp(2.0rem, 4vw, 3.0rem)` | 700    | 1.05        | `-0.03em`          |
-| `--text-h2`   | `clamp(1.5rem, 3vw, 2.0rem)` | 600    | 1.15        | `-0.02em`          |
-| `--text-body` | `1rem`                       | 400    | 1.60        | `0` (Normal)       |
-| `--text-sm`   | `0.875rem`                   | 400    | 1.50        | `+0.005em` (Loose) |
-
-- **BALANCED Headings:** Always declare `text-wrap: balance` on all dynamic title elements to prevent visual orphans.
-- **Reading Measures:** Paragraph widths must be clamped to `65ch` max width (`max-width: 65ch`) to reduce cognitive scan overhead.
-
----
-
-## 3. Depth Shadows & Layering Math
-
-Flat shadows look cheap. Premium interfaces use physics-based multi-layered shadows to simulate light occlusion:
-
-```css
-/* Stepped ambient + key shadow coefficients */
-.elevation-md {
-  box-shadow:
-    0 1px 2px oklch(0% 0 0 / 0.05),
-    /* Ambient shadow */ 0 4px 12px oklch(0% 0 0 / 0.08),
-    /* Key shadow */ 0 0 1px oklch(100% 0 0 / 0.12); /* Hairline luminous stroke */
-}
-```
-
-- In dark themes, shadows should drop in opacity and be accompanied by luminous hairlines (`border: 1px solid oklch(100% 0 0 / 0.08)`) instead of thick black shadows.
-
----
-
-## 4. Interaction States & Transitions
-
-All buttons and active controls must define styled properties for:
-
-- `hover`, `focus-visible`, `active`/`pressed`, and `disabled` states.
-- Use spring easing curves: `cubic-bezier(0.34, 1.56, 0.64, 1)`.
+---
+name: ui-ux-pro-max
+description: "Use when The Picasso Protocol — Elite UI/UX design mastery. Integrates the 16-step UI Reasoning Engine, Category-Specific Heuristics, and Anti-Pattern controls to generate portfolio-grade interfaces."
+version: 5.0.0
+last-updated: 2026-09-13
+skills:
+  - ui-reasoning-engine
+  - product-aware-heuristics
+  - frontend-design
+  - web-design-guidelines
+tools: Read, Grep, Glob, Bash, Edit, Write
+scripts-binding:
+  - .agent/scripts/lint_runner.js
+  - .agent/scripts/verify_all.js
+---
+
+# UI/UX Pro Max v3.0 — The Picasso Protocol
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+---
+
+## 2026 Picasso Protocol Design Invariants
+
+1. **Anti-Cliché Palette Discipline**:
+   Never use purple (#7c3aed / #8b5cf6) as primary brand color. Curate characterful palettes: Obsidian + Signal Orange, Slate + Electric Cyan, or Bone White + Deep Emerald.
+2. **Intentional Typography Pairing**:
+   Pair an expressive display font (e.g., Clash Display, Syne, Cabinet Grotesk, Newsreader) with an ultra-readable neutral body font (e.g., Geist Sans, Plus Jakarta Sans, General Sans).
+3. **Fluid Layout Bounds & Asymmetry**:
+   Break repetitive bento grids. Use asymmetric column spans (e.g. 7:5 or 8:4), overlapping cards, and ambient grain overlays.
+
+---
+
+## 🚨 Design Governance Guardrails (REJECTION Rules)
+
+- ❌ **Primary Purple Accents:** Banned. Use electric blue, signal orange, coral, warm slate, or natural sage.
+- ❌ **Inter/Roboto Defaults:** Banned. Display titles must use characterful display fonts; body text uses readable body options.
+- ❌ **Left Text/Right Image Hero:** Banned. Use full-bleed, asymmetric overlap, or typographical layouts.
+- ❌ **Radial Mesh Backgrounds:** Banned. Use ambient grain overlay, solid high-contrast depth, or radial tinting.
+- ❌ **Bento Box Grid Overuse:** Banned. Break the grid intentionally for visual interest.
+- ❌ **Flat Glassmorphic Panels:** Banned. Translucency should only be used as a rare overlay, not for main containers.
+- ❌ **No States Feedback:** Banned. Every control must have styled states (Hover, Focus-visible, Active, Disabled).
+
+---
+
+## 1. Color Gamuts & Display-P3 Color Science
+
+Use dynamic OKLCH variables to access the wider Display-P3 color spectrum for stunning vibrancy. Perceptually uniform lightness ensures stable contrast:
+
+```css
+:root {
+  /* oklch(Lightness Chroma Hue / Alpha) */
+  --color-primary: oklch(65% 0.22 250); /* Brand electric blue */
+  --color-primary-hover: oklch(58% 0.22 250); /* Darker active state */
+  --bg-base: oklch(0.08 0.005 250); /* OLED base background */
+  --bg-surface: oklch(0.12 0.008 250); /* Stepped card surface */
+  --border-subtle: oklch(22% 0.01 250 / 0.4); /* Hairline separator */
+}
+```
+
+### Color Gamut Guidelines
+
+- **Display-P3 Saturated Accents:** When targeting high-end modern screens, use chroma values between `0.20` and `0.28`.
+- **Stepped Neutral Contrast:** Stepped neutral surfaces must increase by `0.04` Lightness increments (e.g., base `0.08` → surface `0.12` → raised `0.16` → overlay `0.20`) to create physical depth without color tint deviations.
+
+---
+
+## 2. Typographical Tracking & scaling
+
+Headings must use `clamp()` for fluid sizing and tight negative letter spacing (tracking) to prevent loose display layouts:
+
+| Token         | Clamp Value                  | Weight | Line Height | Tracking           |
+| :------------ | :--------------------------- | :----- | :---------- | :----------------- |
+| `--text-hero` | `clamp(2.5rem, 6vw, 4.5rem)` | 800    | 0.95        | `-0.04em` (Tight)  |
+| `--text-h1`   | `clamp(2.0rem, 4vw, 3.0rem)` | 700    | 1.05        | `-0.03em`          |
+| `--text-h2`   | `clamp(1.5rem, 3vw, 2.0rem)` | 600    | 1.15        | `-0.02em`          |
+| `--text-body` | `1rem`                       | 400    | 1.60        | `0` (Normal)       |
+| `--text-sm`   | `0.875rem`                   | 400    | 1.50        | `+0.005em` (Loose) |
+
+- **BALANCED Headings:** Always declare `text-wrap: balance` on all dynamic title elements to prevent visual orphans.
+- **Reading Measures:** Paragraph widths must be clamped to `65ch` max width (`max-width: 65ch`) to reduce cognitive scan overhead.
+
+---
+
+## 3. Depth Shadows & Layering Math
+
+Flat shadows look cheap. Premium interfaces use physics-based multi-layered shadows to simulate light occlusion:
+
+```css
+/* Stepped ambient + key shadow coefficients */
+.elevation-md {
+  box-shadow:
+    0 1px 2px oklch(0% 0 0 / 0.05),
+    /* Ambient shadow */ 0 4px 12px oklch(0% 0 0 / 0.08),
+    /* Key shadow */ 0 0 1px oklch(100% 0 0 / 0.12); /* Hairline luminous stroke */
+}
+```
+
+- In dark themes, shadows should drop in opacity and be accompanied by luminous hairlines (`border: 1px solid oklch(100% 0 0 / 0.08)`) instead of thick black shadows.
+
+---
+
+## 4. Interaction States & Transitions
+
+All buttons and active controls must define styled properties for:
+
+- `hover`, `focus-visible`, `active`/`pressed`, and `disabled` states.
+- Use spring easing curves: `cubic-bezier(0.34, 1.56, 0.64, 1)`.