tribunal-kit 9.2.4 → 9.2.5

package/.agent/skills/typeset/SKILL.md

@@ -1,60 +1,60 @@
----
-name: typeset
-description: "Use when Professional web typography scaling, font pairing, optical sizing, tracking, line height cadence, text-wrap balance, and OpenType features. Use when refining typography systems or text styling."
-version: 5.0.0
-last-updated: 2026-09-13
-skills:
-  - swiss-design
-  - better-ui
-  - baseline-ui
-tools: Read, Grep, Glob, Bash, Edit, Write
-scripts-binding:
-  - .agent/scripts/lint_runner.js
-  - .agent/scripts/verify_all.js
----
-
-# Typeset — Professional Web Typography System
-
----
-
-## 🛠️ Technical Architecture & Reference Recipes
-
----
-
----
-
-## 4 Typography Rules
-
-### 1. Typographic Scale & Line-Height Cadence
-
-Use a modular scale (e.g. Major Third 1.25 or Perfect Fourth 1.333):
-
-- **Display 1**: `3.5rem` / Line-height `1.1` / Tracking `-0.03em`
-- **H1**: `2.25rem` / Line-height `1.15` / Tracking `-0.025em`
-- **H2**: `1.75rem` / Line-height `1.2` / Tracking `-0.02em`
-- **Body**: `1rem` / Line-height `1.5` / Tracking `0`
-- **Caption**: `0.75rem` / Line-height `1.4` / Tracking `+0.01em`
-
-### 2. Optical Tracking Formula
-
-Larger font sizes require tighter negative letter-spacing; smaller caption sizes require positive letter-spacing:
-$$\text{Tracking}(\text{px}) \propto -\log(\text{FontSize})$$
-
-### 3. Modern Text Wrapping
-
-- Headings: `text-wrap: balance` (prevents visual orphans).
-- Body Paragraphs: `text-wrap: pretty` (prevents trailing single-word last lines).
-- Max Width: Limit body paragraphs to `65ch` for comfortable reading lines.
-
-### 4. Tabular & OpenType Features
-
-- Enable tabular figures for numbers in statistics, prices, and tables:
-
-```css
-.numeric-data {
-  font-variant-numeric: tabular-nums lining-nums;
-  font-feature-settings:
-    'tnum' 1,
-    'lnum' 1;
-}
-```
+---
+name: typeset
+description: "Use when Professional web typography scaling, font pairing, optical sizing, tracking, line height cadence, text-wrap balance, and OpenType features. Use when refining typography systems or text styling."
+version: 5.0.0
+last-updated: 2026-09-13
+skills:
+  - swiss-design
+  - better-ui
+  - baseline-ui
+tools: Read, Grep, Glob, Bash, Edit, Write
+scripts-binding:
+  - .agent/scripts/lint_runner.js
+  - .agent/scripts/verify_all.js
+---
+
+# Typeset — Professional Web Typography System
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+---
+
+---
+
+## 4 Typography Rules
+
+### 1. Typographic Scale & Line-Height Cadence
+
+Use a modular scale (e.g. Major Third 1.25 or Perfect Fourth 1.333):
+
+- **Display 1**: `3.5rem` / Line-height `1.1` / Tracking `-0.03em`
+- **H1**: `2.25rem` / Line-height `1.15` / Tracking `-0.025em`
+- **H2**: `1.75rem` / Line-height `1.2` / Tracking `-0.02em`
+- **Body**: `1rem` / Line-height `1.5` / Tracking `0`
+- **Caption**: `0.75rem` / Line-height `1.4` / Tracking `+0.01em`
+
+### 2. Optical Tracking Formula
+
+Larger font sizes require tighter negative letter-spacing; smaller caption sizes require positive letter-spacing:
+$$\text{Tracking}(\text{px}) \propto -\log(\text{FontSize})$$
+
+### 3. Modern Text Wrapping
+
+- Headings: `text-wrap: balance` (prevents visual orphans).
+- Body Paragraphs: `text-wrap: pretty` (prevents trailing single-word last lines).
+- Max Width: Limit body paragraphs to `65ch` for comfortable reading lines.
+
+### 4. Tabular & OpenType Features
+
+- Enable tabular figures for numbers in statistics, prices, and tables:
+
+```css
+.numeric-data {
+  font-variant-numeric: tabular-nums lining-nums;
+  font-feature-settings:
+    'tnum' 1,
+    'lnum' 1;
+}
+```

package/.agent/skills/ui-reasoning-engine/SKILL.md

@@ -1,155 +1,155 @@
----
-name: ui-reasoning-engine
-description: "Use when Enforces a structured cognitive pipeline that forces the agent to analyze user goals, information architecture, platform constraints, and design tokens before styling any component."
-version: 5.0.0
-last-updated: 2026-09-13
-skills:
-  - product-aware-heuristics
-  - interface-design
-  - better-colors
-  - better-ui
-tools: Read, Grep, Glob, Bash, Edit, Write
-scripts-binding:
-  - .agent/scripts/lint_runner.js
-  - .agent/scripts/verify_all.js
----
-
-# UI Reasoning Engine — The Cognitive Design Loop
-
----
-
-## 🛠️ Technical Architecture & Reference Recipes
-
----
-
----
-
-## The 16-Step Reasoning Pipeline
-
-```
-User Intent ↓ Product Classification ↓ User Classification ↓ Primary User Goals ↓ Task Frequency ↓ Information Architecture ↓ Interaction Model ↓ Content Hierarchy ↓ Platform Constraints ↓ Visual Direction ↓ Design System Selection ↓ Component Architecture ↓ Responsive Strategy ↓ Accessibility Strategy ↓ Motion Strategy ↓ Implementation
-```
-
-### 1. User Intent
-
-- **Input:** User prompt description.
-- **Analysis:** Analyze what the user is _actually_ trying to accomplish.
-- **Result:** Is this an analytical task (comparing figures), an operational task (inputting records), a navigational task (getting to another screen), or an emotional/brand task (purchasing, onboarding)?
-
-### 2. Product Classification
-
-- **Input:** Chosen intent.
-- **Analysis:** Categorize the product to choose the correct heuristic pack (see `product-aware-heuristics` skill).
-- **Result:** SaaS, Developer Tool, Analytics Dashboard, Luxury/Marketing, AI Interface, Healthcare, Fintech, E-commerce, or Experimental.
-
-### 3. User Classification
-
-- **Input:** Product category.
-- **Analysis:** Identify the target audience's demographics and expertise.
-- **Result:** Is the user an expert operator (requires high density, shortcuts, speed), a casual consumer (requires clarity, onboarding, simplicity), or someone with temporary/permanent accessibility challenges?
-
-### 4. Primary User Goals
-
-- **Input:** User classification.
-- **Analysis:** List the 3 most frequent tasks the user will perform on this screen.
-- **Result:** How do we make the primary task take the least physical and cognitive effort (Fitts's Law)?
-
-### 5. Task Frequency & Pace
-
-- **Input:** Primary user goals.
-- **Analysis:** Determine whether this is a high-frequency daily tool (e.g., terminal, text editor) or a low-frequency workflow (e.g., onboarding, checkout).
-- **Result:** High frequency demands extreme speed, efficiency, and keyboard workflows. Low frequency demands validation, guardrails, and instructional microcopy.
-
-### 6. Information Architecture (IA)
-
-- **Input:** Spacing guidelines.
-- **Analysis:** Map the relationships between data fields and screen areas.
-- **Result:** Group related data items together using Gestalt principles of proximity and common region. Do not separate related data with arbitrary containers.
-
-### 7. Interaction Model
-
-- **Input:** IA relationships.
-- **Analysis:** Define how users navigate, filter, and modify data.
-- **Result:** Are we using modal dialogs, slide-out drawers, inline disclosures, tabs, or split-screen panels? Choose based on cognitive load and screen size.
-
-### 8. Content Hierarchy
-
-- **Input:** Interaction model.
-- **Analysis:** Rank items by visual weight.
-- **Result:** The eye must see the most important element first (Primary Action / Primary Figure), followed by secondary details, then supporting metadata.
-
-### 9. Platform Constraints
-
-- **Input:** Content hierarchy.
-- **Analysis:** Identify the target environment.
-- **Result:** Desktop (mouse precision, wide viewport), Mobile (coarse pointer, bottom action zone), or Cross-Platform.
-
-### 10. Visual Direction & Mood
-
-- **Input:** Platform constraints.
-- **Analysis:** Select a distinctive theme that matches the product purpose (from `DESIGN.md`).
-- **Result:** Swiss Precision, Brutalist, Dark Luxury, Editorial, Neo-Glassmorphism, Soft Minimal, Retro Analog, or Neon Cyberpunk.
-
-### 11. Design System Selection
-
-- **Input:** Visual Direction.
-- **Analysis:** Match colors, radius, and shadows to the Visual Direction.
-- **Result:** Never use raw hex colors. Use OKLCH semantic variables (`--bg-surface`, `--color-primary`, `--border-subtle`).
-
-### 12. Component Architecture
-
-- **Input:** Design system.
-- **Analysis:** Decompose the UI into primitives (headless buttons, fields), components (cards, forms), and patterns (dashboards, headers).
-- **Result:** Prevent duplication. Reuse existing UI tokens and patterns.
-
-### 13. Responsive Strategy
-
-- **Input:** Component list.
-- **Analysis:** Plan reflow, resizing, and pointer changes.
-- **Result:** Avoid scaling down desktop interfaces. Reorganize layouts using container queries (`@container`) and CSS clamp functions.
-
-### 14. Accessibility (A11y) Strategy
-
-- **Input:** Responsive plan.
-- **Analysis:** Verify contrast, keyboard paths, and ARIA labels.
-- **Result:** Verify target sizes are at least 24px (standard AA) and preferably 44px (touch). Contrast must meet APCA Lc ratios.
-
-### 15. Motion Strategy
-
-- **Input:** Accessibility strategy.
-- **Analysis:** Define transitions and state changes.
-- **Result:** Ensure all animations serve a purpose (feedback, orientation, or progression) and respect `prefers-reduced-motion`.
-
-### 16. Implementation
-
-- **Input:** All prior steps trace.
-- **Analysis:** Generate the actual semantic markup, CSS custom properties, and logic.
-- **Result:** Output code block.
-
----
-
-## Enforcement Protocol
-
-When building any UI, the Maker Agent must document this reasoning loop before returning the final code. Output the reasoning as a collapsed markdown block:
-
-```markdown
-<details>
-<summary>🧠 UI Reasoning Engine Trace</summary>
-
-1. **Intent:** [Analytical/Operational/etc.]
-2. **Product Category:** [SaaS/DevTool/etc.]
-3. **User Type:** [Expert/Casual]
-4. **Primary Goals:** [Goal 1, 2, 3]
-5. **Frequency:** [High/Low]
-6. **IA & Grouping:** [Data relationships]
-7. **Interaction Model:** [Modals/Drawers/Tabs]
-8. **Content Hierarchy:** [Primary → Secondary → Muted]
-9. **Platform:** [Desktop/Mobile/Tablet]
-10. **Visual Mood:** [Swiss/Editorial/etc.]
-11. **Tokens Used:** [OKLCH variables]
-12. **A11y Strategy:** [Focus paths, contrast levels]
-13. **Responsive Plan:** [Breakpoints & clamp sizes]
-14. **Motion Plan:** [Easing, durations]
-
-</details>
-```
+---
+name: ui-reasoning-engine
+description: "Use when Enforces a structured cognitive pipeline that forces the agent to analyze user goals, information architecture, platform constraints, and design tokens before styling any component."
+version: 5.0.0
+last-updated: 2026-09-13
+skills:
+  - product-aware-heuristics
+  - interface-design
+  - better-colors
+  - better-ui
+tools: Read, Grep, Glob, Bash, Edit, Write
+scripts-binding:
+  - .agent/scripts/lint_runner.js
+  - .agent/scripts/verify_all.js
+---
+
+# UI Reasoning Engine — The Cognitive Design Loop
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+---
+
+---
+
+## The 16-Step Reasoning Pipeline
+
+```
+User Intent ↓ Product Classification ↓ User Classification ↓ Primary User Goals ↓ Task Frequency ↓ Information Architecture ↓ Interaction Model ↓ Content Hierarchy ↓ Platform Constraints ↓ Visual Direction ↓ Design System Selection ↓ Component Architecture ↓ Responsive Strategy ↓ Accessibility Strategy ↓ Motion Strategy ↓ Implementation
+```
+
+### 1. User Intent
+
+- **Input:** User prompt description.
+- **Analysis:** Analyze what the user is _actually_ trying to accomplish.
+- **Result:** Is this an analytical task (comparing figures), an operational task (inputting records), a navigational task (getting to another screen), or an emotional/brand task (purchasing, onboarding)?
+
+### 2. Product Classification
+
+- **Input:** Chosen intent.
+- **Analysis:** Categorize the product to choose the correct heuristic pack (see `product-aware-heuristics` skill).
+- **Result:** SaaS, Developer Tool, Analytics Dashboard, Luxury/Marketing, AI Interface, Healthcare, Fintech, E-commerce, or Experimental.
+
+### 3. User Classification
+
+- **Input:** Product category.
+- **Analysis:** Identify the target audience's demographics and expertise.
+- **Result:** Is the user an expert operator (requires high density, shortcuts, speed), a casual consumer (requires clarity, onboarding, simplicity), or someone with temporary/permanent accessibility challenges?
+
+### 4. Primary User Goals
+
+- **Input:** User classification.
+- **Analysis:** List the 3 most frequent tasks the user will perform on this screen.
+- **Result:** How do we make the primary task take the least physical and cognitive effort (Fitts's Law)?
+
+### 5. Task Frequency & Pace
+
+- **Input:** Primary user goals.
+- **Analysis:** Determine whether this is a high-frequency daily tool (e.g., terminal, text editor) or a low-frequency workflow (e.g., onboarding, checkout).
+- **Result:** High frequency demands extreme speed, efficiency, and keyboard workflows. Low frequency demands validation, guardrails, and instructional microcopy.
+
+### 6. Information Architecture (IA)
+
+- **Input:** Spacing guidelines.
+- **Analysis:** Map the relationships between data fields and screen areas.
+- **Result:** Group related data items together using Gestalt principles of proximity and common region. Do not separate related data with arbitrary containers.
+
+### 7. Interaction Model
+
+- **Input:** IA relationships.
+- **Analysis:** Define how users navigate, filter, and modify data.
+- **Result:** Are we using modal dialogs, slide-out drawers, inline disclosures, tabs, or split-screen panels? Choose based on cognitive load and screen size.
+
+### 8. Content Hierarchy
+
+- **Input:** Interaction model.
+- **Analysis:** Rank items by visual weight.
+- **Result:** The eye must see the most important element first (Primary Action / Primary Figure), followed by secondary details, then supporting metadata.
+
+### 9. Platform Constraints
+
+- **Input:** Content hierarchy.
+- **Analysis:** Identify the target environment.
+- **Result:** Desktop (mouse precision, wide viewport), Mobile (coarse pointer, bottom action zone), or Cross-Platform.
+
+### 10. Visual Direction & Mood
+
+- **Input:** Platform constraints.
+- **Analysis:** Select a distinctive theme that matches the product purpose (from `DESIGN.md`).
+- **Result:** Swiss Precision, Brutalist, Dark Luxury, Editorial, Neo-Glassmorphism, Soft Minimal, Retro Analog, or Neon Cyberpunk.
+
+### 11. Design System Selection
+
+- **Input:** Visual Direction.
+- **Analysis:** Match colors, radius, and shadows to the Visual Direction.
+- **Result:** Never use raw hex colors. Use OKLCH semantic variables (`--bg-surface`, `--color-primary`, `--border-subtle`).
+
+### 12. Component Architecture
+
+- **Input:** Design system.
+- **Analysis:** Decompose the UI into primitives (headless buttons, fields), components (cards, forms), and patterns (dashboards, headers).
+- **Result:** Prevent duplication. Reuse existing UI tokens and patterns.
+
+### 13. Responsive Strategy
+
+- **Input:** Component list.
+- **Analysis:** Plan reflow, resizing, and pointer changes.
+- **Result:** Avoid scaling down desktop interfaces. Reorganize layouts using container queries (`@container`) and CSS clamp functions.
+
+### 14. Accessibility (A11y) Strategy
+
+- **Input:** Responsive plan.
+- **Analysis:** Verify contrast, keyboard paths, and ARIA labels.
+- **Result:** Verify target sizes are at least 24px (standard AA) and preferably 44px (touch). Contrast must meet APCA Lc ratios.
+
+### 15. Motion Strategy
+
+- **Input:** Accessibility strategy.
+- **Analysis:** Define transitions and state changes.
+- **Result:** Ensure all animations serve a purpose (feedback, orientation, or progression) and respect `prefers-reduced-motion`.
+
+### 16. Implementation
+
+- **Input:** All prior steps trace.
+- **Analysis:** Generate the actual semantic markup, CSS custom properties, and logic.
+- **Result:** Output code block.
+
+---
+
+## Enforcement Protocol
+
+When building any UI, the Maker Agent must document this reasoning loop before returning the final code. Output the reasoning as a collapsed markdown block:
+
+```markdown
+<details>
+<summary>🧠 UI Reasoning Engine Trace</summary>
+
+1. **Intent:** [Analytical/Operational/etc.]
+2. **Product Category:** [SaaS/DevTool/etc.]
+3. **User Type:** [Expert/Casual]
+4. **Primary Goals:** [Goal 1, 2, 3]
+5. **Frequency:** [High/Low]
+6. **IA & Grouping:** [Data relationships]
+7. **Interaction Model:** [Modals/Drawers/Tabs]
+8. **Content Hierarchy:** [Primary → Secondary → Muted]
+9. **Platform:** [Desktop/Mobile/Tablet]
+10. **Visual Mood:** [Swiss/Editorial/etc.]
+11. **Tokens Used:** [OKLCH variables]
+12. **A11y Strategy:** [Focus paths, contrast levels]
+13. **Responsive Plan:** [Breakpoints & clamp sizes]
+14. **Motion Plan:** [Easing, durations]
+
+</details>
+```

package/.agent/skills/ui-skill-packs/SKILL.md

@@ -1,57 +1,57 @@
----
-name: ui-skill-packs
-description: "Use when Mandatory skill loading packs for UI generation. Consolidates 42+ individual UI skills into 3 tiered packs (Core Craft, Immersive & System, High-End Design) to guarantee non-generic, high-fidelity UI outputs."
-version: 5.0.0
-last-updated: 2026-09-13
-skills:
-  - taste-skill
-  - better-colors
-  - impeccable
-  - micro-interaction
-  - gpt-taste
-tools: Read, Grep, Glob, Bash, Edit, Write
-scripts-binding:
-  - .agent/scripts/lint_runner.js
-  - .agent/scripts/verify_all.js
----
-
-# UI Skill Packs — Master Design Engineering Bundles
-
----
-
-## 🛠️ Technical Architecture & Reference Recipes
-
----
-
-## 1. Pack Definitions
-
-When generating UI code, the agent MUST load the appropriate UI Skill Pack based on the complexity level of the requested interface:
-
-### Pack 1: Core UI Craft (Standard Components & Forms)
-
-- **Skills Included:** `taste-skill`, `better-ui`, `better-colors`, `typeset`, `build-primitive`
-- **Use For:** Buttons, cards, form controls, modals, tables, simple dashboards.
-- **Enforces:** OKLCH colors, 8pt spacing grid, fluid typography, explicit interactive states.
-
-### Pack 2: System & Micro-Interactions (Dynamic Web Apps)
-
-- **Skills Included:** `impeccable`, `micro-interaction`, `framer-motion-expert`, `transitions-dev`, `delight`
-- **Use For:** Interactive web apps, complex dashboards, multi-step flows, animated components.
-- **Enforces:** Micro-animations, spring easings, tactile click/hover feedback, clean state transitions.
-
-### Pack 3: High-End Immersive & Landing (Full Page / Showcase)
-
-- **Skills Included:** `gpt-taste`, `swiss-design`, `compact-landing`, `masked-reveal`, `marquee-loop`, `progressive-blur`
-- **Use For:** Landing pages, hero sections, marketing sites, showcase portfolios.
-- **Enforces:** Typographic hierarchy, asymmetric visual rhythm, noise grain overlays, luminous borders.
-
----
-
-## 2. Mandatory Pre-Execution Binding
-
-Before generating any frontend component, identify the required pack and declare loaded skills:
-
-```
-Loaded UI Skill Pack: [Pack 1 | Pack 2 | Pack 3]
-Binding skills: taste-skill, better-colors, micro-interaction, impeccable...
-```
+---
+name: ui-skill-packs
+description: "Use when Mandatory skill loading packs for UI generation. Consolidates 42+ individual UI skills into 3 tiered packs (Core Craft, Immersive & System, High-End Design) to guarantee non-generic, high-fidelity UI outputs."
+version: 5.0.0
+last-updated: 2026-09-13
+skills:
+  - taste-skill
+  - better-colors
+  - impeccable
+  - micro-interaction
+  - gpt-taste
+tools: Read, Grep, Glob, Bash, Edit, Write
+scripts-binding:
+  - .agent/scripts/lint_runner.js
+  - .agent/scripts/verify_all.js
+---
+
+# UI Skill Packs — Master Design Engineering Bundles
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+---
+
+## 1. Pack Definitions
+
+When generating UI code, the agent MUST load the appropriate UI Skill Pack based on the complexity level of the requested interface:
+
+### Pack 1: Core UI Craft (Standard Components & Forms)
+
+- **Skills Included:** `taste-skill`, `better-ui`, `better-colors`, `typeset`, `build-primitive`
+- **Use For:** Buttons, cards, form controls, modals, tables, simple dashboards.
+- **Enforces:** OKLCH colors, 8pt spacing grid, fluid typography, explicit interactive states.
+
+### Pack 2: System & Micro-Interactions (Dynamic Web Apps)
+
+- **Skills Included:** `impeccable`, `micro-interaction`, `framer-motion-expert`, `transitions-dev`, `delight`
+- **Use For:** Interactive web apps, complex dashboards, multi-step flows, animated components.
+- **Enforces:** Micro-animations, spring easings, tactile click/hover feedback, clean state transitions.
+
+### Pack 3: High-End Immersive & Landing (Full Page / Showcase)
+
+- **Skills Included:** `gpt-taste`, `swiss-design`, `compact-landing`, `masked-reveal`, `marquee-loop`, `progressive-blur`
+- **Use For:** Landing pages, hero sections, marketing sites, showcase portfolios.
+- **Enforces:** Typographic hierarchy, asymmetric visual rhythm, noise grain overlays, luminous borders.
+
+---
+
+## 2. Mandatory Pre-Execution Binding
+
+Before generating any frontend component, identify the required pack and declare loaded skills:
+
+```
+Loaded UI Skill Pack: [Pack 1 | Pack 2 | Pack 3]
+Binding skills: taste-skill, better-colors, micro-interaction, impeccable...
+```