tribunal-kit 5.8.4 → 6.0.0

package/.agent/skills/transitions-dev/SKILL.md

@@ -1,20 +1,29 @@
 ---
 name: transitions-dev
 description: Production-ready CSS transition patterns for web apps with drop-in snippets for cards, modals, dropdowns, panels, and accordions.
-version: 1.0.0
-last-updated: 2026-07-22
-applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
-routing:
-  domain: CSS Transitions & Production Snippets
-  tier: pro
-  co-requires: [better-ui, micro-interaction, 60fps-animation]
-  trigger-signals:
-    strong: [transitions-dev, CSS transition snippets, card hover transition, modal transition CSS, accordion expand animation]
-    weak: [css transitions, transition snippet]
+version: 3.0.0
+last-updated: 2026-07-30
+skills:
+  - better-ui
+  - micro-interaction
+  - 60fps-animation
+tools: Read, Grep, Glob, Bash, Edit, Write
+scripts-binding:
+  - .agent/scripts/lint_runner.js
+  - .agent/scripts/verify_all.js
 ---
 
 # Transitions Dev — Production CSS Transition Snippets
 
+---
+
+## Mandatory Pre-Flight Context Inspection
+
+Before implementing CSS transitions, you MUST inspect:
+1. Accordion Pattern (Section 35) → Use `grid-template-rows: 0fr -> 1fr` with `overflow: hidden` on inner wrapper instead of animating `height: auto`
+2. Modal Overlay Transitions (Section 52) → Scale modal content from `scale(0.96) translateY(8px)` with opacity
+3. Target transition properties → Enforce explicit property transitions (`transform`, `opacity`, `box-shadow`) and ban `transition: all`
+
 Drop-in, hardware-accelerated CSS transition utility classes for modern web components.
 
 ---

package/.agent/skills/trend-researcher/SKILL.md

@@ -1,20 +1,31 @@
 ---
 name: trend-researcher
 description: Creative muse and design trend analyzer for modern web/mobile interfaces.
+tools: Read, Grep, Glob, Bash, Edit, Write
+version: 3.0.0
+last-updated: 2026-07-30
 skills:
   - frontend-design
   - web-design-guidelines
   - seo-fundamentals
-version: 1.0.0
-last-updated: 2026-03-12
-applies-to-model: gemini-2.5-pro, claude-3-7-sonnet
-routing:
-  domain: general
-  tier: basic
+scripts-binding:
+  - .agent/scripts/lint_runner.js
+  - .agent/scripts/verify_all.js
 ---
 
 # Trend Researcher Skill
 
+---
+
+## Mandatory Pre-Flight Context Inspection
+
+Before recommending design trends or visual directions, you MUST inspect:
+1. Banned AI Cliché Rule (Section 40) → Ban purple/violet gradients, generic mesh backgrounds, and un-justified left-text/right-image hero layouts
+2. WCAG 2.2 AA Contrast Compliance (Section 61) → Calculate HSL palette contrast ($\ge 4.5:1$ text, $\ge 3:1$ large text) before finalizing tokens
+3. Verified Google Fonts Only (Section 175) → Ensure typography recommendations are active in Google Fonts or system defaults
+
+# Trend Researcher Skill
+
 You are a creative muse and design trend analyst. Your purpose is to bridge the gap between "generic UI" and "stunning, intentional design" by grounding aesthetic decisions in real-world trends, documented design systems, and measurable user impact.
 
 ## When to Activate

package/.agent/skills/typescript-advanced/SKILL.md

@@ -1,15 +1,29 @@
 ---
 name: typescript-advanced
 description: Advanced TypeScript mastery. Generics with constraints, conditional types, mapped types, template literal types, the satisfies operator, discriminated unions, branded/nominal types, type-level programming, utility type internals, variance annotations, module augmentation, and declaration merging. Use when writing complex type definitions, building type-safe libraries, or solving "how do I type this?" problems.
-allowed-tools: Read, Write, Edit, Glob, Grep
-version: 1.0.0
-last-updated: 2026-04-17
-applies-to-model: gemini-2.5-pro, claude-3-7-sonnet
-routing:
-  domain: general
-  tier: basic
+tools: Read, Grep, Glob, Bash, Edit, Write
+version: 3.0.0
+last-updated: 2026-07-30
+skills:
+  - clean-code
+  - data-validation-schemas
+  - lint-and-validate
+scripts-binding:
+  - .agent/scripts/lint_runner.js
+  - .agent/scripts/verify_all.js
 ---
 
+# Advanced TypeScript — Type-Level Mastery
+
+---
+
+## Mandatory Pre-Flight Context Inspection
+
+Before writing complex TypeScript types or library abstractions, you MUST inspect:
+1. Zero `as any` Cast Rule (Section 15) → Fix the underlying type signature or use `as unknown as T` with explicit reasoning comment; ban `as any`
+2. Discriminated Unions for State Machine Modeling (Section 62) → Model multi-state objects with tagged discriminated unions for compile-time exhaustive checks
+3. The `satisfies` Operator vs Type Assertion (Section 193) → Use `satisfies` to validate types without widening object literals
+
 ## Hallucination Traps (Read First)
 
 - ❌ Using `as any` to silence type errors -> ✅ Fix the type; `as any` hides bugs that crash at runtime

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

@@ -1,20 +1,29 @@
 ---
 name: typeset
 description: 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: 1.0.0
-last-updated: 2026-07-22
-applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
-routing:
-  domain: Typography & Typesetting
-  tier: pro
-  co-requires: [better-typography, frontend-design]
-  trigger-signals:
-    strong: [typeset, typography scale, font pairing, optical sizing, tracking, line height cadence, text-wrap balance, OpenType features]
-    weak: [text styling, font setup]
+version: 3.0.0
+last-updated: 2026-07-30
+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
 
+---
+
+## Mandatory Pre-Flight Context Inspection
+
+Before refining typography scales or text styles, you MUST inspect:
+1. `DESIGN.md` / `index.css` → Verify typography scale variables, font families, and OpenType settings
+2. Optical Tracking & Line-Height Cadence (Section 24) → Enforce `1.1` line-height for display headings, `1.5` for body text, and `-0.03em` tracking
+3. Modern Text Wrapping (Section 36) → Apply `text-wrap: balance` to headings and limit paragraph line width to `65ch`
+
 Architect disciplined, optically balanced typography systems across web components.
 
 ---

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

@@ -0,0 +1,154 @@
+---
+name: ui-reasoning-engine
+description: 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: 3.0.0
+last-updated: 2026-07-30
+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
+
+---
+
+## Mandatory Pre-Flight Context Inspection
+
+Before generating UI component code, you MUST inspect:
+1. `DESIGN.md` / `package.json` → Identify visual style direction, color token specifications, and UI dependencies
+2. The 16-Step Reasoning Pipeline (Section 1) → Execute intent classification, accessibility constraints, and platform layout rules
+3. Target viewport & input mode → Check desktop vs mobile touch bounds (minimum 44x44px for coarse pointers)
+
+To build state-of-the-art interfaces, you must think before you style. This skill enforces a structured reasoning process. Before writing any HTML, CSS, or Component code, you must execute the following 16-step analysis.
+
+---
+
+## 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>
+```
+
+---
+
+## Pre-Flight Checklist
+- [ ] Have I executed the 16-step UI Reasoning Loop?
+- [ ] Have I identified the target Product Category and Visual Direction?
+- [ ] Have I verified touch targets are 24px minimum (and 44px+ for coarse pointers)?
+
+## VBC Protocol (Verification-Before-Completion)
+You MUST verify existing code signatures and variables before attempting to modify or call them. No hallucination is permitted.

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

@@ -0,0 +1,77 @@
+---
+name: ui-skill-packs
+description: 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: 3.0.0
+last-updated: 2026-07-30
+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
+
+---
+
+## Mandatory Pre-Flight Context Inspection
+
+Before generating UI code, you MUST inspect:
+1. `package.json` / `tailwind.config.ts` / `index.css` → Check UI stack (Tailwind v4, Vanilla CSS, OKLCH, Framer Motion)
+2. `DESIGN.md` / color token definitions → Verify palette rules and dark mode contrast variables
+3. Active UI component target → Assign Pack 1 (Core UI), Pack 2 (System Micro-Interactions), or Pack 3 (Immersive Landing)
+
+## 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...
+```
+
+---
+
+## Pre-Flight Checklist
+
+Before generating UI component code:
+1. Verify target framework (React, Next.js, Vue, Svelte) and styling system (CSS Modules, Tailwind, OKLCH CSS).
+2. Select appropriate UI Skill Pack (Pack 1, Pack 2, or Pack 3).
+3. Ensure color variables use OKLCH color space for accessible contrast ratios.
+4. Verify micro-interaction focus and hover states for keyboard and mouse accessibility.
+
+---
+
+## VBC Protocol
+
+Visual Balance & Contrast Protocol:
+1. **Contrast Ratio**: Enforce WCAG 2.2 AA (4.5:1 text, 3:1 graphical elements).
+2. **Typography Cadence**: Enforce strict fluid font sizing and line-height cadence.
+3. **Motion Hygiene**: Respect `prefers-reduced-motion` media queries on all animations.
+

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

@@ -1,19 +1,31 @@
 ---
 name: ui-skills-root
 description: 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: 1.0.0
-last-updated: 2026-07-22
-applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
-routing:
-  domain: UI/UX & Design Engineering
-  tier: master
-  trigger-signals:
-    strong: [ui-skills, design engineering, ui craft, UI polish, design router, interface quality]
-    weak: [design, styling, layout, animation]
+version: 3.0.0
+last-updated: 2026-07-30
+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
 
+---
+
+## Mandatory Pre-Flight Context Inspection
+
+Before routing UI requests, you MUST inspect:
+1. `package.json` / `DESIGN.md` → Identify tech stack (React, Next.js, Vue, Tailwind, CSS) and visual design language
+2. Intent Routing Matrix (Section 2) → Select maximum 2-3 precise skills matching the user's primary UI goal
+3. Skill pack bindings (`ui-skill-packs`) → Use consolidated packs for multi-component frontend builds
+
 The master decision engine for routing user UI requests to the precise set of design-engineering skills.
 
 ---