tribunal-kit 5.8.2 → 5.8.4

package/.agent/skills/audit-and-fix/SKILL.md

@@ -0,0 +1,83 @@
+---
+name: audit-and-fix
+description: Accessibility auditing and remediation workflow combining detection, prioritization, and practical code fixes for WCAG 2.2 AA compliance issues.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Accessibility Auditing & Remediation
+  tier: pro
+  co-requires: [web-accessibility-auditor, fixing-accessibility]
+  trigger-signals:
+    strong: [audit-and-fix, accessibility audit, WCAG remediation, fix accessibility, a11y audit, AccessLint]
+    weak: [a11y check, accessibility fix]
+---
+
+# Audit and Fix — Accessibility Remediation Workflow
+
+Systematically audit HTML/JSX markup against WCAG 2.2 AA standards, prioritize accessibility violations, and apply verified code fixes.
+
+---
+
+## 4-Step Remediation Pipeline
+
+### 1. Automated Violation Detection
+Scan component code for:
+- Missing `alt` tags on `<img>` elements.
+- Form controls (`<input>`, `<select>`) missing associated `<label>` or `aria-label`.
+- Buttons with icon-only content missing `aria-label`.
+- Non-interactive elements (`<div>`, `<span>`) with `onClick` handlers missing `role="button"` and `tabIndex={0}`.
+
+### 2. Prioritization Matrix
+
+| Severity Level | Violation Type | Remediation Action |
+| --- | --- | --- |
+| 🔴 **Blocker (Level A)** | Inaccessible form inputs, un-trapped focus in modal, zero keyboard access | Add explicit `<label>`, focus trap, and keyboard handlers immediately. |
+| 🟠 **Critical (Level AA)** | Low text contrast ratio ($< 4.5:1$), missing ARIA states on custom dropdowns | Adjust text colors to OKLCH contrast targets; add `aria-expanded`. |
+| 🟡 **Moderate (Level AA)** | Missing landmark regions (`<main>`, `<nav>`, `<header>`), heading hierarchy gaps | Wrap layout blocks in semantic HTML5 tags. |
+
+### 3. Concrete Code Fix Examples
+
+```tsx
+// BEFORE (Inaccessible)
+<div onClick={submitForm} className="btn">Submit</div>
+
+// AFTER (Accessible)
+<button type="submit" onClick={submitForm} className="btn">Submit</button>
+```
+
+```tsx
+// BEFORE (Icon Only Button)
+<button onClick={openSettings}><SettingsIcon /></button>
+
+// AFTER (Accessible Icon Button)
+<button onClick={openSettings} aria-label="Open settings"><SettingsIcon aria-hidden="true" /></button>
+```
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Adding Redundant ARIA**: Adding `role="button"` to native `<button>` tags (valid HTML5 buttons don't need redundant roles).
+2. **Deleting Decorative SVGs from Screen Readers**: Forgetting `aria-hidden="true"` on decorative icons inside labeled buttons.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `accessibility-reviewer` · `frontend-reviewer`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are all icon-only buttons provided with descriptive `aria-label` attributes?
+✅ Are decorative SVG icons hidden from screen readers with `aria-hidden="true"`?
+✅ Do custom interactive controls support Enter and Space key triggers?
+```
+
+### 🛑 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/baseline-ui/SKILL.md

@@ -0,0 +1,74 @@
+---
+name: baseline-ui
+description: Quickly deslop UI code by fixing spacing, hierarchy, typography, contrast, and small layout issues. Use when the interface needs a fast cleanup or polish pass.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: UI Cleanup & Refinement
+  tier: basic
+  co-requires: [better-ui, frontend-design]
+  trigger-signals:
+    strong: [baseline-ui, deslop, cleanup ui, fix spacing, visual hierarchy, fix alignment]
+    weak: [tidy up, fix css, layout cleanup]
+---
+
+# Baseline UI — Fast Deslopping & Hierarchy Cleanup
+
+Enforces an opinionated UI baseline to clean up sloppy code and prevent AI-generated interface slop without changing product architecture or feature scope.
+
+---
+
+## 1. Stack & System Constraints
+
+- **Tailwind CSS Defaults**: MUST use Tailwind CSS default utilities unless custom values already exist or are explicitly requested.
+- **Animation Primitives**: MUST use `motion/react` (formerly `framer-motion`) when JavaScript animation is required.
+- **Utility Class Merging**: MUST use `cn` utility (`clsx` + `tailwind-merge`) for dynamic class logic.
+- **Accessible Component Primitives**: MUST use established accessible primitives (`Base UI`, `React Aria`, `Radix`) for anything with keyboard or focus behavior. Prefer `Base UI` for new unstyled primitives.
+- **Destructive Actions**: MUST use an `AlertDialog` for destructive or irreversible actions.
+- **Loading States**: SHOULD use structural skeletons for loading states instead of plain spinners.
+
+---
+
+## 2. The 5-Step UI Deslop Protocol
+
+1. **Fix Spacing Violations**: Replace hardcoded arbitrary margins/paddings (`margin-top: 13px`, `padding: 7px 11px`) with an 8px grid system (`4px`, `8px`, `12px`, `16px`, `24px`, `32px`, `48px`).
+2. **Establish Typographic Hierarchy**: Max 3 font sizes per component context. Headings bold/semibold with tight letter-spacing (`-0.025em`) and `text-wrap: balance`. Body text regular with `1.5` line height.
+3. **Elevate Contrast Ratios**: Eliminate low-contrast gray-on-gray text. Ensure text meets minimum WCAG AA 4.5:1 ratio against background.
+4. **Clean Up Borders & Dividers**: Replace harsh 100% opaque black/white borders with subtle 8%-12% opacity borders (`border-color: rgba(255,255,255,0.08)` or `var(--border)`).
+5. **Enforce Container Alignment & Active Feedback**: Align text left with action buttons, group related controls with flex gaps, and add instant press feedback (`scale(0.97)`) on all interactive targets.
+
+---
+
+## Anti-Slop Table
+
+| Slop Pattern | Baseline Fix | Rationale |
+| --- | --- | --- |
+| `color: #888` on dark background | `color: var(--text-muted)` (min 4.5:1 ratio) | Improves readability and WCAG compliance |
+| `padding: 15px 23px` | `padding: 16px 24px` | Aligns to 8px structural grid |
+| `border: 1px solid black` | `border: 1px solid rgba(0,0,0,0.1)` | Removes harsh, distracting lines |
+| Mixed font sizes (13px, 14px, 15px) | Standardized scale (12px, 14px, 16px) | Establishes clear visual hierarchy |
+| Plain text buttons without states | Rounded button with hover/active press feedback | Indicates clickability and tactile response |
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Re-architecting when asked to deslop**: Modifying component state, context, or props when only CSS/visual cleanup was requested.
+2. **Rebuilding native accessibility by hand**: Writing custom keyboard listener loops instead of using primitives (`Base UI`, `Radix`).
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Did I retain existing product logic and HTML structure?
+✅ Are all spacing values aligned to standard multiples (4/8/12/16/24/32)?
+✅ Is text contrast WCAG AA compliant and are icon buttons labeled with aria-label?
+```
+
+### 🛑 Verification-Before-Completion (VBC) Protocol
+
+Inspect UI layout across desktop and mobile viewports in browser preview to verify visual polish.

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

@@ -0,0 +1,124 @@
+---
+name: better-colors
+description: OKLCH color space for web projects. Convert hex/rgb/hsl to oklch, generate palettes, check contrast, handle gamut boundaries, and theme with Tailwind v4. Triggers on oklch, color conversion, palette generation, contrast ratio, gamut, display p3, design tokens, hue drift, chroma, dark mode colors.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: UI Craft & Design Engineering
+  tier: pro
+  co-requires: [colorize, better-ui]
+  trigger-signals:
+    strong: [better-colors, oklch, color palette, contrast ratio, gamut, display p3, hue drift, dark mode colors]
+    weak: [colors, palette, theme, dark mode]
+---
+
+# Better Colors — OKLCH & Modern Web Color Systems
+
+Design engineering guidelines for building perceptually uniform, WCAG 2.2 AA compliant, P3-gamut color systems using the modern **OKLCH** color space.
+
+---
+
+## 1. Why OKLCH Over HSL / RGB
+
+- **Perceptual Uniformity**: In HSL, yellow (`hsl(60, 100%, 50%)`) is far brighter than blue (`hsl(240, 100%, 50%)`) at the exact same lightness value. OKLCH fixes this: lightness (`L`) corresponds directly to human eye perception.
+- **Predictable Palette Steps**: Changing lightness in OKLCH scales brightness smoothly without hue drift (e.g. blue turning purple when lightened in HSL).
+- **Wide Gamut Access**: Access Display P3 wide-gamut colors (`oklch(L C H)`), producing significantly richer, punchier vibrant tones on modern displays.
+
+---
+
+## 2. OKLCH Syntax & Variables
+
+$$\text{Format: } \text{oklch}(L \quad C \quad H [\quad / \quad A])$$
+
+- `L` (Lightness): `0%` (black) to `100%` (white) or `0` to `1`.
+- `C` (Chroma): `0` (gray) to `0.37+` (vibrant peak). Typical UI chroma range: `0.02` to `0.22`.
+- `H` (Hue): `0` to `360` degrees.
+  - `0` / `360`: Red / Magenta
+  - `90`: Yellow / Gold
+  - `140`: Green / Emerald
+  - `250`: Blue / Indigo
+  - `300`: Purple / Violet
+
+### CSS Custom Properties Setup
+
+```css
+:root {
+  /* Brand Primary: Vibrant Indigo */
+  --color-primary: oklch(0.55 0.22 260);
+  --color-primary-hover: oklch(0.50 0.24 260);
+  --color-primary-active: oklch(0.45 0.25 260);
+  --color-primary-subtle: oklch(0.94 0.04 260);
+
+  /* Neutrals: Subtly Tinted (Chroma ~ 0.015) */
+  --bg-surface: oklch(0.99 0.005 260);
+  --bg-surface-raised: oklch(0.96 0.01 260);
+  --text-main: oklch(0.20 0.02 260);
+  --text-muted: oklch(0.45 0.02 260);
+  --border-subtle: oklch(0.88 0.015 260);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-surface: oklch(0.14 0.015 260);
+    --bg-surface-raised: oklch(0.19 0.02 260);
+    --text-main: oklch(0.96 0.01 260);
+    --text-muted: oklch(0.68 0.02 260);
+    --border-subtle: oklch(0.26 0.02 260);
+  }
+}
+```
+
+---
+
+## 3. WCAG 2.2 AA Contrast Standards
+
+Always verify contrast using WCAG AA minimum thresholds:
+- **Normal Text (< 18pt / < 24px)**: Minimum **4.5:1** contrast ratio.
+- **Large Text (≥ 18pt / ≥ 24px bold)**: Minimum **3.0:1** contrast ratio.
+- **UI Components & Icons**: Minimum **3.0:1** contrast ratio against adjacent surface.
+
+### Rule of Thumb in OKLCH:
+To achieve 4.5:1 text contrast against a surface:
+- Against Light Surface (`L ≈ 98%`): Text lightness `L` MUST be **`≤ 45%`**.
+- Against Dark Surface (`L ≈ 14%`): Text lightness `L` MUST be **`≥ 70%`**.
+
+---
+
+## 4. Dark Mode & Gamut Boundaries
+
+- **Avoid Raw Black (`#000`)**: Use deep OKLCH neutrals (`oklch(0.14 0.015 250)`). Pure black destroys depth perception and makes borders look harsh.
+- **Desaturate Accent Colors in Dark Mode**: High chroma values (`C > 0.20`) cause visual fatigue and vibration on dark backgrounds. Lower chroma by ~20-30% (`C ≈ 0.14-0.16`).
+
+---
+
+## Anti-Slop Table
+
+| Anti-Pattern | OKLCH Solution | Rationale |
+| --- | --- | --- |
+| Single gray for all backgrounds | Neutral tinted with brand hue (`C: 0.01-0.02`) | Creates cohesive, harmonious UI surfaces |
+| Over-saturated dark mode accents | Scale chroma down (`C: 0.22` → `C: 0.15`) in dark mode | Eliminates glowing text vibration & visual strain |
+| Harsh pure black borders (`#000`) | Alpha-tinted borders (`rgba(255,255,255,0.08)`) | Smooths elevation layers |
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Using HSL for Dark Mode Inversion**: Inverting `lightness` in HSL causes dramatic hue shifts and contrast failures.
+2. **Exceeding Display P3 Gamut**: Setting Chroma `C > 0.32` without fallback causes clipping or dull rendering on non-P3 displays.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are all color custom properties defined using OKLCH?
+✅ Does text meet the minimum 4.5:1 WCAG AA contrast ratio?
+✅ Are dark mode surfaces subtly tinted rather than pure #000000 black?
+```
+
+### 🛑 Verification-Before-Completion (VBC) Protocol
+
+Inspect colors across light and dark modes in browser preview to verify contrast and visual harmony.

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

@@ -0,0 +1,111 @@
+---
+name: better-typography
+description: 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: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: UI Craft & Design Engineering
+  tier: pro
+  co-requires: [typeset, better-ui]
+  trigger-signals:
+    strong: [better-typography, typography, type scale, font pairing, tabular numbers, text-wrap balance, line-length, optical sizing]
+    weak: [fonts, text style, line height]
+---
+
+# Better Typography — Web Typography & Font Engineering
+
+Design engineering guidelines for setting up modern, readable, scalable typography with OpenType features, fluid type scales, and optimal measure.
+
+---
+
+## 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 |
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Using Pixel Font Sizes**: Defining `font-size: 14px` instead of `0.875rem` breaks user browser accessibility font size preferences.
+2. **Missing `text-wrap` Support**: Forgetting `text-wrap: balance` on multi-line card titles.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are all body paragraph containers capped at max-width: 65ch?
+✅ Is text-wrap: balance applied to headings?
+✅ Are tabular numbers enabled on price grids and timer counters?
+```
+
+### 🛑 Verification-Before-Completion (VBC) Protocol
+
+Inspect typography scaling and line wrapping across desktop and mobile viewports in browser preview.

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

@@ -0,0 +1,102 @@
+---
+name: better-ui
+description: 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: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: UI Craft & Design Engineering
+  tier: pro
+  co-requires: [emil-design-eng, baseline-ui]
+  trigger-signals:
+    strong: [better-ui, ui polish, feels off, design details, optical alignment, micro-interactions, stagger animations, box shadows, make-interfaces-feel-better]
+    weak: [polish, refine, clean up ui, border radius]
+---
+
+# Better UI — Design Engineering & Polish Rules
+
+Distilled design engineering principles for transforming functional UIs into polished, state-of-the-art software interfaces, based on Jakub Krehel's *Details that make interfaces feel better*.
+
+---
+
+## 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 |
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **`transition: all` Laziness**: Causes layout recalculations and flashes during dark/light mode toggles.
+2. **Missing Active States**: Adding hover effects but forgetting `:active` click feedback.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are all inner vs outer radii mathematically aligned?
+✅ Did I use specific CSS transition properties instead of transition: all?
+✅ Is hover and active state feedback explicit on all interactive targets?
+```
+
+### 🛑 Verification-Before-Completion (VBC) Protocol
+
+Inspect micro-interactions and nested corner geometry in browser preview before delivery.

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

@@ -0,0 +1,68 @@
+---
+name: bolder
+description: 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: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Visual Design & Brand Identity
+  tier: pro
+  co-requires: [better-colors, better-typography, impeccable]
+  trigger-signals:
+    strong: [bolder, make it pop, more punch, stand out, add character, feel less generic]
+    weak: [bold design, vibrant, striking]
+---
+
+# Bolder — Injecting Punch & Personality into UI
+
+Transform generic, boring template UIs into high-impact, distinctive interfaces with strong visual presence.
+
+---
+
+## 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)`).
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Adding Generic Purple Gradients**: Relying on generic AI gradient presets instead of distinct brand colors.
+2. **Making Everything Loud**: Applying high contrast to all text and cards, which destroys readability. Keep body copy clean and legible.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `frontend-reviewer` · `ui-ux-auditor`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Is the primary accent color distinct and used intentionally?
+✅ Does the display typography maintain legibility while being high-impact?
+✅ Is body text kept crisp and high-contrast on readable backgrounds?
+```
+
+### 🛑 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/build-primitive/SKILL.md

@@ -0,0 +1,70 @@
+---
+name: build-primitive
+description: Build foundational, unstyled, accessible UI primitives from scratch with strong ARIA attributes, keyboard navigation, focus traps, and state management. Use when creating custom Headless UI components (Dialog, Combobox, Accordion, Popover, Menu).
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Headless UI & Accessible Primitives
+  tier: pro
+  co-requires: [web-accessibility-auditor, react-specialist]
+  trigger-signals:
+    strong: [build-primitive, headless UI, custom dialog primitive, custom popover, accessible primitive, ARIA combobox, keyboard navigation primitive]
+    weak: [custom component, headless component]
+---
+
+# Build Primitive — Headless & Accessible UI Primitives
+
+Build rock-solid, framework-agnostic or React headless UI primitives with complete ARIA pattern compliance, keyboard control, and focus management.
+
+---
+
+## 4 Rules for UI Primitives
+
+### 1. Complete ARIA Pattern Compliance
+- **Dialog / Modal**: `role="dialog"`, `aria-modal="true"`, `aria-labelledby="{titleId}"`, `aria-describedby="{descId}"`.
+- **Combobox / Autocomplete**: `role="combobox"`, `aria-expanded="{isOpen}"`, `aria-autocomplete="list"`, `aria-controls="{listboxId}"`.
+- **Tabs**: Tablist `role="tablist"`, Tab `role="tab"`, `aria-selected="{isActive}"`, `aria-controls="{panelId}"`, TabPanel `role="tabpanel"`.
+
+### 2. Focus Management & Focus Traps
+- **Modal Focus Lock**: When a dialog opens, trap focus within the modal container. On close, return focus to the element that triggered it.
+- **Escape Key Dismiss**: Pressing `Escape` MUST close popovers, modals, and dropdown menus instantly.
+
+### 3. Keyboard Navigation Sequences
+- **Listbox / Menu Navigation**:
+  - `ArrowDown`: Move active descendant down.
+  - `ArrowUp`: Move active descendant up.
+  - `Home`: Move to first item.
+  - `End`: Move to last item.
+  - `Enter` / `Space`: Select highlighted item.
+
+### 4. Zero Unnecessary Styling
+- Primitives MUST output clean data attributes (`data-state="open|closed"`, `data-disabled`, `data-highlighted`) so consumers can style them effortlessly with CSS or Tailwind variants.
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Forgetting `type="button"`**: Omitting `type="button"` on custom trigger buttons inside forms, causing unintended form submissions.
+2. **Missing `aria-expanded`**: Toggle triggers missing `aria-expanded` attributes.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `accessibility-reviewer` · `type-safety`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are all WAI-ARIA roles and states correctly attached?
+✅ Is keyboard navigation fully implemented (Arrow keys, Enter, Escape)?
+✅ Is focus trapped inside modals and restored to the trigger upon exit?
+```
+
+### 🛑 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.