tribunal-kit 5.8.2 → 5.8.4

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

@@ -0,0 +1,101 @@
+---
+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]
+---
+
+# Transitions Dev — Production CSS Transition Snippets
+
+Drop-in, hardware-accelerated CSS transition utility classes for modern web components.
+
+---
+
+## 4 Production Snippets
+
+### 1. Card Lift & Shadow Scale
+```css
+.tx-card {
+  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms ease, border-color 200ms ease;
+}
+.tx-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.1);
+}
+```
+
+### 2. Accordion Expand/Collapse (`grid-template-rows`)
+Animate element height smoothly without hardcoding fixed pixel heights:
+```css
+.tx-accordion-content {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 250ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.tx-accordion-content[data-state="open"] {
+  grid-template-rows: 1fr;
+}
+.tx-accordion-inner {
+  overflow: hidden;
+}
+```
+
+### 3. Slide & Fade Modal Overlay
+```css
+.tx-modal-overlay {
+  transition: opacity 200ms ease;
+}
+.tx-modal-content {
+  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease;
+}
+.tx-modal-content[data-state="closed"] {
+  opacity: 0;
+  transform: scale(0.96) translateY(8px);
+}
+.tx-modal-content[data-state="open"] {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+```
+
+### 4. Sliding Tab Highlight (`layoutId` or CSS Variables)
+```css
+.tx-tab-indicator {
+  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1), width 200ms ease;
+}
+```
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Animating `height` directly**: Animating `height: 0` to `height: auto` in CSS (which fails in CSS). Use `grid-template-rows: 0fr -> 1fr`.
+2. **Missing `overflow: hidden`**: Forgetting `overflow: hidden` on accordion inner wrappers, causing content to spill out during collapse.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `frontend-reviewer` · `motion-reviewer`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are accordions using `grid-template-rows: 0fr -> 1fr` for smooth height expansion?
+✅ Are modal enter/exit states scaling from `scale(0.96)` with opacity?
+```
+
+### 🛑 Verification-Before-Completion (VBC) Protocol
+
+**CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
+
+- ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
+- ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.

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

@@ -0,0 +1,76 @@
+---
+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]
+---
+
+# Typeset — Professional Web Typography System
+
+Architect disciplined, optically balanced typography systems across web components.
+
+---
+
+## 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;
+}
+```
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Uniform Line Height**: Setting `line-height: 1.5` on large 4rem display headings, causing massive awkward vertical gaps.
+2. **Missing Text Wrap Rules**: Allowing headings to wrap into single orphaned words.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `frontend-reviewer` · `ui-ux-auditor`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are line-heights inversely proportional to font sizes (Display: 1.1, Body: 1.5)?
+✅ Is `text-wrap: balance` applied to display titles and headings?
+✅ Do numeric columns use tabular numbers (`font-variant-numeric: tabular-nums`)?
+```
+
+### 🛑 Verification-Before-Completion (VBC) Protocol
+
+**CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
+
+- ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
+- ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.

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

@@ -0,0 +1,85 @@
+---
+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]
+---
+
+# UI Skills Master Router
+
+The master decision engine for routing user UI requests to the precise set of design-engineering skills.
+
+---
+
+## 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` |
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Skill Bloat:** Loading more than 3 skills at once for a single request. Pick the 1-2 highest precision skills.
+2. **Ignoring Intent:** Applying animation skills when the user asked for simple layout structure.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Did I select the most specific UI skill for the user's explicit intent?
+✅ Am I respecting modern web design standards (CSS Variables, container queries, OKLCH)?
+✅ Is the proposed UI accessible (WCAG 2.2 AA contrast, keyboard nav)?
+```
+
+### 🛑 Verification-Before-Completion (VBC) Protocol
+
+You MUST verify that selected UI skills are present in `.agent/skills/` and read their instructions before generating code.

package/.agent/skills/web-quality-audit/SKILL.md

@@ -0,0 +1,67 @@
+---
+name: web-quality-audit
+description: Web quality auditing skill for Lighthouse-style analysis across Performance, Accessibility, Best Practices, and SEO signals.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Full-Stack Web Quality & Lighthouse Signals
+  tier: pro
+  co-requires: [web-accessibility-auditor, fixing-metadata, performance-profiling]
+  trigger-signals:
+    strong: [web-quality-audit, Lighthouse audit, Core Web Vitals audit, web quality report, LCP CLS INP audit]
+    weak: [quality audit, site audit]
+---
+
+# Web Quality Audit — Lighthouse & Core Web Vitals
+
+Conduct a comprehensive multi-pillar web quality audit covering Performance, Accessibility, Best Practices, and SEO signals.
+
+---
+
+## 4 Quality Pillars
+
+### 1. Core Web Vitals (Performance)
+- **Largest Contentful Paint (LCP)**: Target $\le 2.5\text{s}$. Preload hero images using `<link rel="preload" as="image">` and fetchpriority="high".
+- **Interaction to Next Paint (INP)**: Target $\le 200\text{ms}$. Break long JS tasks into smaller chunks using `setTimeout` or `requestIdleCallback`.
+- **Cumulative Layout Shift (CLS)**: Target $\le 0.1$. Set explicit `width` and `height` attributes on images and videos; reserve space for dynamic ads/banners.
+
+### 2. Accessibility (a11y)
+- Target 100/100 score. Verify all interactive controls have accessible names, proper contrast ($\ge 4.5:1$), and complete keyboard accessibility.
+
+### 3. Web Best Practices
+- Serve images in modern formats (`.webp` or `.avif`).
+- Enforce HTTPS security headers (`Content-Security-Policy`, `X-Frame-Options`, `Strict-Transport-Security`).
+- Eliminate console errors and unhandled promise rejections.
+
+### 4. Search Engine Optimization (SEO)
+- Valid HTML5 document structure (`<!DOCTYPE html>`, `<html>` with `lang`, single `<h1>`).
+- Robots.txt, sitemap.xml, canonical URLs, and structured JSON-LD data.
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Ignoring Image Dimensions**: Omitting `width` and `height` on images, causing layout shifts (CLS penalties).
+2. **Synchronous Heavy Scripts**: Loading render-blocking third-party scripts in the document `<head>` without `async` or `defer`.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `vitals-reviewer` · `accessibility-reviewer` · `seo-specialist`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are explicit `width` and `height` aspect ratios declared on all media tags?
+✅ Are script tags in the `<head>` marked with `defer` or `async`?
+✅ Is text contrast WCAG AA compliant across all components?
+```
+
+### 🛑 Verification-Before-Completion (VBC) Protocol
+
+**CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
+
+- ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
+- ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.

package/.agent/workflows/fix.md

@@ -1,5 +1,5 @@
 ---
-description: Auto-fix known issues with lint, formatting, imports, and TypeScript errors. Runs lint_runner.py and auto-fixers. Human approval required before applying any changes. Shows a diff of what will change before writing to disk.
+description: Auto-fix known issues with lint, formatting, imports, and TypeScript errors. Runs lint_runner.js and auto-fixers. Human approval required before applying any changes. Shows a diff of what will change before writing to disk.
 required-skills: lint-and-validate, clean-code
 ---
 
@@ -55,7 +55,7 @@ Read BEFORE fixing:
 
 ```bash
 # 1. Run lint with auto-fix
-python .agent/scripts/lint_runner.py . --fix
+node .agent/scripts/lint_runner.js . --fix
 
 # 2. Fix remaining TypeScript errors (auto-detectable only)
 npx tsc --noEmit 2>&1 | grep "error TS"

package/.agent/workflows/preview.md

@@ -1,5 +1,5 @@
 ---
-description: Preview server start, stop, and status check. Local development server management. Uses auto_preview.py for automated lifecycle control. Shows current URL and hot-reload status.
+description: Preview server start, stop, and status check. Local development server management. Uses auto_preview.js for automated lifecycle control. Shows current URL and hot-reload status.
 required-skills: bash-linux, frontend-specialist
 ---
 
@@ -34,16 +34,16 @@ Read BEFORE managing preview:
 
 ```bash
 # Start
-python .agent/scripts/auto_preview.py start
+node .agent/scripts/auto_preview.js start
 
 # Stop
-python .agent/scripts/auto_preview.py stop
+node .agent/scripts/auto_preview.js stop
 
 # Restart
-python .agent/scripts/auto_preview.py restart
+node .agent/scripts/auto_preview.js restart
 
 # Status
-python .agent/scripts/auto_preview.py status
+node .agent/scripts/auto_preview.js status
 ```
 
 ---

package/.agent/workflows/status.md

@@ -44,7 +44,7 @@ git log --oneline -5
 find src/ -name "*.ts" -o -name "*.tsx" -newer package.json 2>/dev/null | head -10
 
 # 4. Server status (non-blocking)
-python .agent/scripts/auto_preview.py status 2>/dev/null
+node .agent/scripts/auto_preview.js status 2>/dev/null
 
 # 5. Quick type check
 npx tsc --noEmit 2>&1 | tail -5

package/.agent/workflows/tribunal-full.md

@@ -1,9 +1,9 @@
 ---
-description: Run ALL 20 Tribunal reviewer agents simultaneously. Maximum hallucination coverage. Use before merging any AI-generated code, before production deployments, or when maximum confidence is required.
+description: Runs ALL 19 parallel reviewers simultaneously. Maximum hallucination coverage. Use before merging any AI-generated code, before production deployments, or when maximum confidence is required.
 required-skills: all domain skills auto-loaded
 ---
 
-# /tribunal-full — Complete 20-Reviewer Audit
+# /tribunal-full — Complete 19-Reviewer Audit
 
 $ARGUMENTS
 
@@ -32,7 +32,7 @@ Read BEFORE full review:
 
 ---
 
-## 20 Reviewers — All Active Simultaneously
+## 19 Reviewers — All Active Simultaneously
 
 ```
 Tier 1: Always active (universal concerns)

package/.agent/workflows/tribunal-speed.md

@@ -92,7 +92,7 @@ Rule 4: Synthesis call receives only verdict summaries, not full file contents
 
 ---
 
-## 3 Specialist Agents
+## 3 Scoped Specialists
 
 ### vitals-reviewer (Frontend)
 
@@ -181,7 +181,7 @@ If a specialist fails after 3 retries:
 | :------------------------- | :------------------------------- | :--------------------- | :--------------------------------------- |
 | `/tribunal-performance`    | logic + performance-reviewer     | Generic CWV check      | Quick single-file perf scan              |
 | `/tribunal-speed`          | vitals + db-latency + throughput | Deep 3-domain parallel | Full-stack perf audit                    |
-| `/tribunal-full`           | All 19 agents                    | Everything             | Maximum coverage (security + perf + all) |
+| `/tribunal-full`           | All 19 reviewers                 | Everything             | Maximum coverage (security + perf + all) |
 | `/performance-benchmarker` | Lighthouse + bundle              | Measurement only       | Get actual scores, not code review       |
 
 ---