tribunal-kit 9.2.4 → 9.2.5

package/.agent/skills/better-typography/SKILL.md

@@ -1,90 +1,90 @@
----
-name: better-typography
-description: "Use when Web typography from choosing fonts to spacing, wrapping, and accessibility. Use when picking or pairing typefaces, configuring variable fonts or OpenType features, setting up a type scale, styling text in components, truncating text, styling underlines, selection, placeholders, or carets. Triggers on typography, fonts, variable fonts, font-weight, opentype, letter-spacing, line-height, type scale, tabular numbers, text-wrap, truncation, line clamp, measure, line length."
-version: 5.0.0
-last-updated: 2026-09-13
-tools: Read, Grep, Glob, Bash, Edit, Write
-scripts-binding:
-  - .agent/scripts/lint_runner.js
-  - .agent/scripts/verify_all.js
----
-
-# Better Typography — Web Typography & Font Engineering
-
----
-
-## 🛠️ Technical Architecture & Reference Recipes
-
----
-
-## 1. Modular Type Scales & Line Cadence
-
-Scale font sizes using a consistent multiplier ($1.25$ Major Third or $1.20$ Minor Third):
-
-```css
-:root {
-  --font-size-xs: 0.75rem; /* 12px - Labels, Badges */
-  --font-size-sm: 0.875rem; /* 14px - Meta, Caption */
-  --font-size-base: 1rem; /* 16px - Body Text */
-  --font-size-lg: 1.125rem; /* 18px - Lead Body */
-  --font-size-xl: 1.375rem; /* 22px - Subheadings */
-  --font-size-2xl: 1.75rem; /* 28px - H3 */
-  --font-size-3xl: 2.25rem; /* 36px - H2 */
-  --font-size-4xl: 3rem; /* 48px - H1 Hero */
-
-  /* Line Heights proportional to font size */
-  --line-height-heading: 1.15;
-  --line-height-body: 1.5;
-  --line-height-tight: 1.25;
-}
-```
-
----
-
-## 2. Line Length (Measure) & Text Wrapping
-
-- **Optimal Line Length (Measure)**: Body text MUST be constrained between **45 to 75 characters** per line (`max-width: 65ch`).
-- **Heading Balancing**: Always apply `text-wrap: balance` to headings (`h1`-`h4`) to eliminate single-word widows.
-- **Paragraph Wrapping**: Use `text-wrap: pretty` for long body paragraphs to prevent awkward line breaks.
-
-```css
-h1,
-h2,
-h3,
-h4 {
-  text-wrap: balance;
-  letter-spacing: -0.025em;
-  line-height: var(--line-height-heading);
-}
-
-p {
-  max-width: 65ch;
-  text-wrap: pretty;
-  line-height: var(--line-height-body);
-}
-```
-
----
-
-## 3. OpenType Features & Tabular Numbers
-
-- **Tabular Numbers for Data & Timers**: Use `font-variant-numeric: tabular-nums` (or `tnum`) for data tables, counters, prices, and timestamps so numbers align vertically without jumping when values update.
-- **Font Smoothing**: Enable crisp font smoothing on macOS/iOS:
-
-```css
-body {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-```
-
----
-
-## Anti-Slop Table
-
-| Anti-Pattern                                | Typography Solution                  | Rationale                                        |
-| ------------------------------------------- | ------------------------------------ | ------------------------------------------------ |
-| Full-width body text (`width: 100%`)        | `max-width: 65ch`                    | Prevents eye fatigue across wide desktop screens |
-| Single-word widows on headings              | `text-wrap: balance`                 | Creates balanced visual hierarchy                |
-| Jittering numbers in data tables            | `font-variant-numeric: tabular-nums` | Keeps columns strictly aligned                   |
-| Default browser line-height (`1.2` on body) | `line-height: 1.5`                   | Improves reading comfort                         |
+---
+name: better-typography
+description: "Use when Web typography from choosing fonts to spacing, wrapping, and accessibility. Use when picking or pairing typefaces, configuring variable fonts or OpenType features, setting up a type scale, styling text in components, truncating text, styling underlines, selection, placeholders, or carets. Triggers on typography, fonts, variable fonts, font-weight, opentype, letter-spacing, line-height, type scale, tabular numbers, text-wrap, truncation, line clamp, measure, line length."
+version: 5.0.0
+last-updated: 2026-09-13
+tools: Read, Grep, Glob, Bash, Edit, Write
+scripts-binding:
+  - .agent/scripts/lint_runner.js
+  - .agent/scripts/verify_all.js
+---
+
+# Better Typography — Web Typography & Font Engineering
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+---
+
+## 1. Modular Type Scales & Line Cadence
+
+Scale font sizes using a consistent multiplier ($1.25$ Major Third or $1.20$ Minor Third):
+
+```css
+:root {
+  --font-size-xs: 0.75rem; /* 12px - Labels, Badges */
+  --font-size-sm: 0.875rem; /* 14px - Meta, Caption */
+  --font-size-base: 1rem; /* 16px - Body Text */
+  --font-size-lg: 1.125rem; /* 18px - Lead Body */
+  --font-size-xl: 1.375rem; /* 22px - Subheadings */
+  --font-size-2xl: 1.75rem; /* 28px - H3 */
+  --font-size-3xl: 2.25rem; /* 36px - H2 */
+  --font-size-4xl: 3rem; /* 48px - H1 Hero */
+
+  /* Line Heights proportional to font size */
+  --line-height-heading: 1.15;
+  --line-height-body: 1.5;
+  --line-height-tight: 1.25;
+}
+```
+
+---
+
+## 2. Line Length (Measure) & Text Wrapping
+
+- **Optimal Line Length (Measure)**: Body text MUST be constrained between **45 to 75 characters** per line (`max-width: 65ch`).
+- **Heading Balancing**: Always apply `text-wrap: balance` to headings (`h1`-`h4`) to eliminate single-word widows.
+- **Paragraph Wrapping**: Use `text-wrap: pretty` for long body paragraphs to prevent awkward line breaks.
+
+```css
+h1,
+h2,
+h3,
+h4 {
+  text-wrap: balance;
+  letter-spacing: -0.025em;
+  line-height: var(--line-height-heading);
+}
+
+p {
+  max-width: 65ch;
+  text-wrap: pretty;
+  line-height: var(--line-height-body);
+}
+```
+
+---
+
+## 3. OpenType Features & Tabular Numbers
+
+- **Tabular Numbers for Data & Timers**: Use `font-variant-numeric: tabular-nums` (or `tnum`) for data tables, counters, prices, and timestamps so numbers align vertically without jumping when values update.
+- **Font Smoothing**: Enable crisp font smoothing on macOS/iOS:
+
+```css
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+```
+
+---
+
+## Anti-Slop Table
+
+| Anti-Pattern                                | Typography Solution                  | Rationale                                        |
+| ------------------------------------------- | ------------------------------------ | ------------------------------------------------ |
+| Full-width body text (`width: 100%`)        | `max-width: 65ch`                    | Prevents eye fatigue across wide desktop screens |
+| Single-word widows on headings              | `text-wrap: balance`                 | Creates balanced visual hierarchy                |
+| Jittering numbers in data tables            | `font-variant-numeric: tabular-nums` | Keeps columns strictly aligned                   |
+| Default browser line-height (`1.2` on body) | `line-height: 1.5`                   | Improves reading comfort                         |

package/.agent/skills/better-ui/SKILL.md

@@ -1,130 +1,130 @@
----
-name: better-ui
-description: "Use when Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, micro-interactions, or visual detail work."
-version: 5.0.0
-last-updated: 2026-09-13
-skills:
-  - baseline-ui
-  - better-colors
-  - micro-interaction
-tools: Read, Grep, Glob, Bash, Edit, Write
-scripts-binding:
-  - .agent/scripts/lint_runner.js
-  - .agent/scripts/verify_all.js
----
-
-# Better UI — Design Engineering & Polish Rules
-
----
-
-## 🛠️ Technical Architecture & Reference Recipes
-
----
-
-## 2026 UI Design Engineering Invariants
-
-1. **The Nested Border Radius Formula**:
-   ```css
-   /* Inner card radius = 8px, Container padding = 16px -> Outer container radius = 24px */
-   .card-container {
-     padding: 16px;
-     border-radius: 24px;
-   }
-   .card-inner {
-     border-radius: 8px;
-   }
-   ```
-2. **Perceptual OKLCH Color Scale**:
-   ```css
-   :root {
-     --surface-0: oklch(0.14 0.01 260);
-     --surface-1: oklch(0.18 0.01 260);
-     --primary: oklch(0.65 0.18 145); /* High-chroma, uniform lightness */
-   }
-   ```
-3. **Subgrid for Pixel-Perfect Card Alignment**:
-   ```css
-   .card-grid {
-     display: grid;
-     grid-template-columns: repeat(3, 1fr);
-   }
-   .card-grid > .card {
-     display: grid;
-     grid-template-rows: subgrid;
-     grid-row: span 3;
-   }
-   ```
-
-## Hallucination Traps (Read First)
-
-- ❌ `transition: all 0.3s ease` → ✅ Specify explicit properties `transition: transform 150ms ease, opacity 150ms ease`
-- ❌ Hardcoded single muddy black shadows → ✅ Multi-layer ambient + directional shadows
-- ❌ Mismatched concentric border radii → ✅ Outer radius MUST equal inner radius + padding
-- ❌ Generic AI violet/purple mesh gradients → ✅ Use subtle grain, solid contrast, and refined OKLCH accents
-
----
-
-## 1. Micro-Interactions & State Feedback
-
-- **Button Active Press Feedback**: Every interactive target MUST respond instantly to press with `transform: scale(0.97)` on `:active` using `transition: transform 120ms cubic-bezier(0.2, 0, 0, 1)`.
-- **Targeted Hover Transitions**: NEVER use `transition: all` in CSS. Specify explicit properties (`transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms ease, border-color 200ms ease`).
-- **Focus Rings**: Never use default browser outline rings or `outline: none` without replacement. Use `:focus-visible` with custom offset rings (`outline: 2px solid var(--ring); outline-offset: 2px`).
-
----
-
-## 2. Spatial Discipline & Geometry
-
-- **Nested Border Radius Formula**: Outer border radius MUST equal inner border radius plus inner padding.
-  $$\text{Radius}_{\text{outer}} = \text{Radius}_{\text{inner}} + \text{Padding}_{\text{inner}}$$
-  _Example_: If container padding is `16px` and inner avatar radius is `8px`, outer container radius MUST be `24px`.
-- **Concentric Curves**: Avoid mismatched corner radii where an inner card has `rounded-2xl` inside an outer `rounded-md` container.
-- **Optical Center Adjustment**: Text inside pill buttons or badges often looks vertically low if mathematically centered. Shift text upwards by `1px` or adjust `line-height` so optics match mathematics.
-
----
-
-## 3. Multi-Layer Shadows & Depth
-
-- **Avoid Muddy Single Shadows**: Single-layer `box-shadow: 0 4px 6px rgba(0,0,0,0.3)` creates dirty, cheap shadows. Use multi-layered ambient + direct lighting:
-
-```css
-.card-shadow {
-  box-shadow:
-    0 1px 2px 0 rgba(0, 0, 0, 0.05),
-    0 4px 12px -2px rgba(0, 0, 0, 0.08),
-    0 16px 32px -8px rgba(0, 0, 0, 0.12);
-}
-```
-
-- **Dark Mode Elevation**: Shadows are invisible on dark surfaces (`#121212`). Create depth in dark mode using subtle border highlights (`border: 1px solid rgba(255,255,255,0.08)`) and stepped background lightness (`oklch(0.14)` $\rightarrow$ `oklch(0.19)`).
-
----
-
-## 4. Stagger Animations & Entry Flows
-
-- **Cascading Entrances**: When revealing lists or grid items, stagger entry delays by `30ms` to `50ms` per item (max 6 items).
-- **Scale Entrance Threshold**: Never animate from `scale(0)`. Start from `scale(0.96)` and `opacity: 0` to prevent popping artifacts.
-
-```css
-.stagger-item {
-  animation: entrance 250ms cubic-bezier(0.16, 1, 0.3, 1) both;
-}
-.stagger-item:nth-child(1) {
-  animation-delay: 0ms;
-}
-.stagger-item:nth-child(2) {
-  animation-delay: 40ms;
-}
-.stagger-item:nth-child(3) {
-  animation-delay: 80ms;
-}
-```
-
----
-
-## Anti-Slop Table
-
-| Slop Pattern                              | Better UI Standard                                                             | Rationale                                                  |
-| ----------------------------------------- | ------------------------------------------------------------------------------ | ---------------------------------------------------------- |
-| `transition: all 0.3s`                    | Specific CSS property transitions                                              | Eliminates layout thrashing & unintended color transitions |
-| Flat click targets without press feedback | `scale(0.97)` on `:active`                                                     | Provides tactile physical response                         |
-| Arbitrary inner vs outer radii            | $\text{Radius}_{\text{outer}} = \text{Radius}_{\text{inner}} + \text{Padding}$ | Maintains geometric optical harmony                        |
+---
+name: better-ui
+description: "Use when Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, micro-interactions, or visual detail work."
+version: 5.0.0
+last-updated: 2026-09-13
+skills:
+  - baseline-ui
+  - better-colors
+  - micro-interaction
+tools: Read, Grep, Glob, Bash, Edit, Write
+scripts-binding:
+  - .agent/scripts/lint_runner.js
+  - .agent/scripts/verify_all.js
+---
+
+# Better UI — Design Engineering & Polish Rules
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+---
+
+## 2026 UI Design Engineering Invariants
+
+1. **The Nested Border Radius Formula**:
+   ```css
+   /* Inner card radius = 8px, Container padding = 16px -> Outer container radius = 24px */
+   .card-container {
+     padding: 16px;
+     border-radius: 24px;
+   }
+   .card-inner {
+     border-radius: 8px;
+   }
+   ```
+2. **Perceptual OKLCH Color Scale**:
+   ```css
+   :root {
+     --surface-0: oklch(0.14 0.01 260);
+     --surface-1: oklch(0.18 0.01 260);
+     --primary: oklch(0.65 0.18 145); /* High-chroma, uniform lightness */
+   }
+   ```
+3. **Subgrid for Pixel-Perfect Card Alignment**:
+   ```css
+   .card-grid {
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+   }
+   .card-grid > .card {
+     display: grid;
+     grid-template-rows: subgrid;
+     grid-row: span 3;
+   }
+   ```
+
+## Hallucination Traps (Read First)
+
+- ❌ `transition: all 0.3s ease` → ✅ Specify explicit properties `transition: transform 150ms ease, opacity 150ms ease`
+- ❌ Hardcoded single muddy black shadows → ✅ Multi-layer ambient + directional shadows
+- ❌ Mismatched concentric border radii → ✅ Outer radius MUST equal inner radius + padding
+- ❌ Generic AI violet/purple mesh gradients → ✅ Use subtle grain, solid contrast, and refined OKLCH accents
+
+---
+
+## 1. Micro-Interactions & State Feedback
+
+- **Button Active Press Feedback**: Every interactive target MUST respond instantly to press with `transform: scale(0.97)` on `:active` using `transition: transform 120ms cubic-bezier(0.2, 0, 0, 1)`.
+- **Targeted Hover Transitions**: NEVER use `transition: all` in CSS. Specify explicit properties (`transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms ease, border-color 200ms ease`).
+- **Focus Rings**: Never use default browser outline rings or `outline: none` without replacement. Use `:focus-visible` with custom offset rings (`outline: 2px solid var(--ring); outline-offset: 2px`).
+
+---
+
+## 2. Spatial Discipline & Geometry
+
+- **Nested Border Radius Formula**: Outer border radius MUST equal inner border radius plus inner padding.
+  $$\text{Radius}_{\text{outer}} = \text{Radius}_{\text{inner}} + \text{Padding}_{\text{inner}}$$
+  _Example_: If container padding is `16px` and inner avatar radius is `8px`, outer container radius MUST be `24px`.
+- **Concentric Curves**: Avoid mismatched corner radii where an inner card has `rounded-2xl` inside an outer `rounded-md` container.
+- **Optical Center Adjustment**: Text inside pill buttons or badges often looks vertically low if mathematically centered. Shift text upwards by `1px` or adjust `line-height` so optics match mathematics.
+
+---
+
+## 3. Multi-Layer Shadows & Depth
+
+- **Avoid Muddy Single Shadows**: Single-layer `box-shadow: 0 4px 6px rgba(0,0,0,0.3)` creates dirty, cheap shadows. Use multi-layered ambient + direct lighting:
+
+```css
+.card-shadow {
+  box-shadow:
+    0 1px 2px 0 rgba(0, 0, 0, 0.05),
+    0 4px 12px -2px rgba(0, 0, 0, 0.08),
+    0 16px 32px -8px rgba(0, 0, 0, 0.12);
+}
+```
+
+- **Dark Mode Elevation**: Shadows are invisible on dark surfaces (`#121212`). Create depth in dark mode using subtle border highlights (`border: 1px solid rgba(255,255,255,0.08)`) and stepped background lightness (`oklch(0.14)` $\rightarrow$ `oklch(0.19)`).
+
+---
+
+## 4. Stagger Animations & Entry Flows
+
+- **Cascading Entrances**: When revealing lists or grid items, stagger entry delays by `30ms` to `50ms` per item (max 6 items).
+- **Scale Entrance Threshold**: Never animate from `scale(0)`. Start from `scale(0.96)` and `opacity: 0` to prevent popping artifacts.
+
+```css
+.stagger-item {
+  animation: entrance 250ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+.stagger-item:nth-child(1) {
+  animation-delay: 0ms;
+}
+.stagger-item:nth-child(2) {
+  animation-delay: 40ms;
+}
+.stagger-item:nth-child(3) {
+  animation-delay: 80ms;
+}
+```
+
+---
+
+## Anti-Slop Table
+
+| Slop Pattern                              | Better UI Standard                                                             | Rationale                                                  |
+| ----------------------------------------- | ------------------------------------------------------------------------------ | ---------------------------------------------------------- |
+| `transition: all 0.3s`                    | Specific CSS property transitions                                              | Eliminates layout thrashing & unintended color transitions |
+| Flat click targets without press feedback | `scale(0.97)` on `:active`                                                     | Provides tactile physical response                         |
+| Arbitrary inner vs outer radii            | $\text{Radius}_{\text{outer}} = \text{Radius}_{\text{inner}} + \text{Padding}$ | Maintains geometric optical harmony                        |

package/.agent/skills/bolder/SKILL.md

@@ -1,49 +1,49 @@
----
-name: bolder
-description: "Use when Increase visual impact, punch, and personality for generic or bland interfaces. Use when the user asks to make the UI pop, stand out, have more character, or feel less template-like."
-version: 5.0.0
-last-updated: 2026-09-13
-skills:
-  - better-colors
-  - better-ui
-  - impeccable
-tools: Read, Grep, Glob, Bash, Edit, Write
-scripts-binding:
-  - .agent/scripts/lint_runner.js
-  - .agent/scripts/verify_all.js
----
-
-# Bolder — Injecting Punch & Personality into UI
-
----
-
-## 🛠️ Technical Architecture & Reference Recipes
-
----
-
----
-
-## 5 Tactics for Bold UI Transformation
-
-### 1. Typographic Contrast Scaling
-
-- **Extreme Scale Jump**: Increase heading size contrast. Jump from `1.5rem` to `3.5rem` or `4.5rem` display type for key value propositions.
-- **Font Weight Hierarchy**: Pair ultra-heavy display headings (`font-weight: 800` / `900`) with clean, lightweight body type (`font-weight: 400`).
-
-### 2. High-Contrast Accent System
-
-- **Single Electric Accent**: Introduce one bold, unexpected accent color (e.g. electric lime `oklch(0.85 0.25 130)`, safety orange `oklch(0.68 0.22 40)`, or deep cobalt `oklch(0.45 0.28 260)`).
-- **Asymmetric Color Application**: Use the accent color sparingly on primary CTA buttons, hero badges, or interactive active indicators—never on body text.
-
-### 3. Oversized Spatial Framing & Borders
-
-- **Crisp Structural Outlines**: Replace faint gray borders with thick 2px solid structural borders (`border: 2px solid var(--foreground)`).
-- **Hard Drop Shadows**: Use sharp, solid offset shadows (`box-shadow: 4px 4px 0px var(--foreground)`) for brutalist or neo-brutalist energy.
-
-### 4. Hero Section Asymmetry
-
-- **Break Symmetrical Grids**: Shift text alignment left, place a huge badge or key visual off-axis, or overlap card containers across background sections.
-
-### 5. Tactile Micro-Interactions
-
-- **Snappy Press Springs**: Give buttons a satisfying 3D press effect on active (`transform: translate(2px, 2px); box-shadow: 2px 2px 0px var(--foreground)`).
+---
+name: bolder
+description: "Use when Increase visual impact, punch, and personality for generic or bland interfaces. Use when the user asks to make the UI pop, stand out, have more character, or feel less template-like."
+version: 5.0.0
+last-updated: 2026-09-13
+skills:
+  - better-colors
+  - better-ui
+  - impeccable
+tools: Read, Grep, Glob, Bash, Edit, Write
+scripts-binding:
+  - .agent/scripts/lint_runner.js
+  - .agent/scripts/verify_all.js
+---
+
+# Bolder — Injecting Punch & Personality into UI
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+---
+
+---
+
+## 5 Tactics for Bold UI Transformation
+
+### 1. Typographic Contrast Scaling
+
+- **Extreme Scale Jump**: Increase heading size contrast. Jump from `1.5rem` to `3.5rem` or `4.5rem` display type for key value propositions.
+- **Font Weight Hierarchy**: Pair ultra-heavy display headings (`font-weight: 800` / `900`) with clean, lightweight body type (`font-weight: 400`).
+
+### 2. High-Contrast Accent System
+
+- **Single Electric Accent**: Introduce one bold, unexpected accent color (e.g. electric lime `oklch(0.85 0.25 130)`, safety orange `oklch(0.68 0.22 40)`, or deep cobalt `oklch(0.45 0.28 260)`).
+- **Asymmetric Color Application**: Use the accent color sparingly on primary CTA buttons, hero badges, or interactive active indicators—never on body text.
+
+### 3. Oversized Spatial Framing & Borders
+
+- **Crisp Structural Outlines**: Replace faint gray borders with thick 2px solid structural borders (`border: 2px solid var(--foreground)`).
+- **Hard Drop Shadows**: Use sharp, solid offset shadows (`box-shadow: 4px 4px 0px var(--foreground)`) for brutalist or neo-brutalist energy.
+
+### 4. Hero Section Asymmetry
+
+- **Break Symmetrical Grids**: Shift text alignment left, place a huge badge or key visual off-axis, or overlap card containers across background sections.
+
+### 5. Tactile Micro-Interactions
+
+- **Snappy Press Springs**: Give buttons a satisfying 3D press effect on active (`transform: translate(2px, 2px); box-shadow: 2px 2px 0px var(--foreground)`).