tribunal-kit 5.8.3 → 5.8.5

package/.agent/skills/fixing-metadata/SKILL.md

@@ -0,0 +1,97 @@
+---
+name: fixing-metadata
+description: Audit and fix page metadata including page titles, meta descriptions, Open Graph, Twitter cards, canonical URLs, and JSON-LD structured data.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Technical SEO & Metadata Optimization
+  tier: pro
+  co-requires: [seo-fundamentals, web-quality-audit]
+  trigger-signals:
+    strong: [fixing-metadata, Open Graph tags, Twitter card metadata, canonical URL, JSON-LD structured data, meta description fix]
+    weak: [fix metadata, SEO tags]
+---
+
+# Fixing Metadata — Technical SEO & Open Graph Tags
+
+Audit, generate, and fix page metadata for rich social previews, search engine indexing, and structured data.
+
+---
+
+## 4 Metadata Standard Requirements
+
+### 1. Title & Meta Description Length & Formatting
+- **Title Tag**: 50–60 characters max (*"Product Title | Brand Name"*).
+- **Meta Description**: 140–155 characters max. Must contain active call to value without truncating on search result cards.
+
+### 2. Open Graph & Twitter Card Matrix
+```html
+<!-- Open Graph / Facebook / LinkedIn -->
+<meta property="og:type" content="website" />
+<meta property="og:title" content="UI Skills for Design Engineers" />
+<meta property="og:description" content="A curated collection of design-engineering skills for accessibility, motion, and frontend craft." />
+<meta property="og:image" content="https://example.com/og-image.jpg" />
+<meta property="og:image:width" content="1200" />
+<meta property="og:image:height" content="630" />
+
+<!-- Twitter / X -->
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:title" content="UI Skills for Design Engineers" />
+<meta name="twitter:description" content="A curated collection of design-engineering skills for accessibility, motion, and frontend craft." />
+<meta name="twitter:image" content="https://example.com/twitter-image.jpg" />
+```
+
+### 3. Canonical Tag Verification
+```html
+<link rel="canonical" href="https://example.com/current-page-path" />
+```
+
+### 4. Next.js App Router Metadata Export Example
+```typescript
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "UI Skills for Design Engineers",
+  description: "Curated design-engineering skills for accessibility, motion, and frontend craft.",
+  openGraph: {
+    title: "UI Skills for Design Engineers",
+    description: "Curated design-engineering skills for accessibility, motion, and frontend craft.",
+    url: "https://example.com",
+    images: [{ url: "https://example.com/og.jpg", width: 1200, height: 630 }],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "UI Skills for Design Engineers",
+    images: ["https://example.com/twitter.jpg"],
+  },
+};
+```
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Relative Image URLs in OG Metadata**: Using `<meta property="og:image" content="/og.jpg">` instead of full absolute HTTPS URLs (`https://domain.com/og.jpg`).
+2. **Missing `summary_large_image`**: Forgetting `twitter:card` type, causing Twitter/X to render a tiny square thumbnail instead of a prominent banner preview.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `seo-specialist` · `frontend-reviewer`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are OpenGraph and Twitter card image URLs absolute HTTPS links?
+✅ Is title length between 50 and 60 characters?
+✅ Is canonical URL explicitly defined?
+```
+
+### 🛑 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/fixing-motion-performance/SKILL.md

@@ -0,0 +1,96 @@
+---
+name: fixing-motion-performance
+description: Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: UI Motion & Performance
+  tier: pro
+  co-requires: [60fps-animation, gsap-performance]
+  trigger-signals:
+    strong: [fixing-motion-performance, layout thrashing, compositor properties, scroll jank, animation stutter, GPU acceleration, will-change]
+    weak: [jank, slow animation, stutter]
+---
+
+# Fixing Motion Performance — 60/120fps Jank-Free Animation
+
+Guidelines for auditing and resolving web animation jank, layout thrashing, and GPU rendering bottlenecks.
+
+---
+
+## 1. Browser Rendering Pipeline & Compositor Rules
+
+Animations trigger one of 3 rendering costs:
+1. **Layout (Expensive)**: Animating `width`, `height`, `margin`, `padding`, `top`, `left`, `flex`, `grid`. Forces full geometry recalculation across the page.
+2. **Paint (Moderate)**: Animating `color`, `background-color`, `border-color`, `box-shadow`, `filter`. Forces pixel repaint.
+3. **Composite (GPU Fast)**: Animating **`transform`** (`translate`, `scale`, `rotate`) and **`opacity`**. Offloaded entirely to GPU compositor thread!
+
+$$\text{Rule: } \text{Animate ONLY } \mathbf{transform} \text{ and } \mathbf{opacity}$$
+
+---
+
+## 2. Layout Thrashing (Read/Write Interleaving)
+
+NEVER interleave DOM layout measurements (`offsetHeight`, `getBoundingClientRect()`) with DOM mutations (`style.height = ...`) in the same event loop or frame loop!
+
+```javascript
+// ❌ WRONG — Triggers Layout Thrashing (Multiple Recalculations)
+elements.forEach(el => {
+  const h = el.offsetHeight; // READ (Forces Layout Calculation)
+  el.style.height = `${h + 10}px`; // WRITE (Invalidates Layout)
+});
+
+// ✅ CORRECT — Batch Reads First, Then Batch Writes
+const heights = elements.map(el => el.offsetHeight); // BATCH READS
+elements.forEach((el, i) => {
+  el.style.height = `${heights[i] + 10}px`; // BATCH WRITES
+});
+```
+
+---
+
+## 3. GPU Hinting (`will-change`)
+
+- Use `will-change: transform, opacity` ONLY on actively animated elements right before interaction begins.
+- Remove `will-change` when animation ends to free GPU memory. NEVER place `will-change: transform` globally on hundreds of DOM nodes.
+
+```css
+/* Apply hardware acceleration hint to GPU */
+.animated-card {
+  will-change: transform, opacity;
+}
+```
+
+---
+
+## Anti-Slop Table
+
+| Performance Issue | Motion Performance Fix | FPS Gain |
+| --- | --- | --- |
+| Animating `height: 0` to `auto` | FLIP technique or `scaleY` transform animation | 15fps → 60fps |
+| Scroll listener mutating inline CSS | `CSS scroll-timeline` or `IntersectionObserver` | Prevents main-thread scroll jank |
+| `transition: all 0.3s` | `transition: transform 200ms cubic-bezier(0.16,1,0.3,1), opacity 200ms ease` | Eliminates accidental layout/color recalculations |
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **`transition: all`**: Using `all` causes layout recalculation and repaint on every hover.
+2. **`requestAnimationFrame` Memory Leaks**: Launching continuous `rAF` loops without cancellation logic (`cancelAnimationFrame`).
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are all continuous animations restricted strictly to transform and opacity?
+✅ Are DOM reads and writes batched to eliminate layout thrashing?
+✅ Is will-change used sparingly on active animated elements only?
+```
+
+### 🛑 Verification-Before-Completion (VBC) Protocol
+
+Inspect Chrome Performance tab rendering profile in live preview to verify 60/120fps motion without frame drops.

package/.agent/skills/frontend-design/SKILL.md

@@ -25,143 +25,142 @@ routing:
 
 ---
 
-## 1. Color Theory (HSL over HEX)
+## 1. Modern Color Systems (OKLCH & HSL)
 
-Never use raw flat HEX colors. Use HSL to build cohesive scales.
+Never use raw flat HEX colors. Use OKLCH (perceptually uniform) or HSL to build scalable, harmonic themes.
 
 ```css
 :root {
-  /* HSL allows programmatic adjustment of lightness/saturation */
-  --hue: 220;
-  --sat: 80%;
-
-  --bg-base: hsl(var(--hue), 15%, 98%);
-  --bg-surface: hsl(var(--hue), 20%, 100%);
-
-  --text-main: hsl(var(--hue), 40%, 10%);
-  --text-muted: hsl(var(--hue), 20%, 40%);
-
-  --primary: hsl(var(--hue), var(--sat), 50%);
-  --primary-hover: hsl(var(--hue), var(--sat), 40%); /* Darken via L */
+  /* OKLCH perceptual uniformity: lightness (0-100%), chroma (0-0.37), hue (0-360) */
+  --brand-primary: oklch(62% 0.21 275);
+  --brand-hover: oklch(from var(--brand-primary) calc(l - 0.1) c h); /* Relative Color Syntax */
+  
+  --bg-base: oklch(98% 0.005 240);
+  --bg-surface: oklch(100% 0 0);
+  --text-main: oklch(20% 0.02 240);
+  --text-muted: oklch(50% 0.02 240);
 }
 
-/* OLED Dark Mode */
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg-base: hsl(var(--hue), 10%, 2%);
-    --bg-surface: hsl(var(--hue), 10%, 6%);
-    --text-main: hsl(var(--hue), 20%, 95%);
-    --text-muted: hsl(var(--hue), 10%, 60%);
-  }
+/* Light/Dark mode via native light-dark() function or OLED media query */
+:root {
+  color-scheme: light dark;
+  --bg-surface: light-dark(oklch(100% 0 0), oklch(15% 0.01 240));
+  --text-main: light-dark(oklch(20% 0.02 240), oklch(95% 0.01 240));
 }
 ```
 
-## 2. Spatial Systems & Grid Mathematics
+---
+
+## 2. Spatial Systems & Container Queries
 
-Design relies on structural rhythm. Use an **8px base system**.
+Design relies on structural rhythm and component-level adaptability.
 
-- **Micro padding**: `4px`, `8px` (Tags, List items)
-- **Component padding**: `16px`, `24px` (Cards, Inputs, Modals)
-- **Section spacing**: `48px`, `64px`, `96px` (Page sections)
-- **Line height**: Body `1.5`, Headings `1.1` or `1.2`.
+- **Base Spacing Grid (8px)**: Micro `4px`, `8px` | Component `16px`, `24px` | Section `48px`, `64px`, `96px`
+- **Nested Border Radius Formula**: `outer_radius = inner_radius + padding`
+- **Fluid Typography**: Use `clamp()` and `cqi` container units over macro media queries.
 
 ```css
-/* Fluid Typography (Clamp) */
-h1 {
-  /* Min 2rem, fluidly scale between 480px-1200px, Max 4rem */
-  font-size: clamp(2rem, 5vw, 4rem);
-  letter-spacing: -0.02em; /* Tighten large text */
+/* Container Queries for Portable Components */
+.card-container {
+  container-type: inline-size;
+  container-name: card;
+}
+
+@container card (min-width: 400px) {
+  .card-body {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    gap: 1.5cqi;
+  }
+}
+
+/* Typographic Balance */
+h1, h2, h3 {
+  font-size: clamp(2rem, 4vw + 1rem, 4rem);
+  letter-spacing: -0.02em;
+  text-wrap: balance; /* Prevents awkward multiline headline breaks */
 }
 
 p {
   font-size: 1rem;
-  max-width: 65ch; /* Optimal reading length */
+  max-width: 65ch;
+  text-wrap: pretty; /* Eliminates typographical orphans in body text */
 }
 ```
 
 ---
 
-## 3. Interaction & "Juice" (Micro-interactions)
+## 3. Interaction & Entry Motion (@starting-style)
 
-A premium UI reacts to the user instantly and smoothly. Focus on state transitions.
+A premium UI reacts to user actions instantly and provides smooth DOM mount transitions.
 
 ```css
-/* Smooth generic transition */
+/* Physical press feedback */
 .btn {
-  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.4, 1), box-shadow 0.15s ease;
 }
-
-/* Active Depth - The physical button push */
 .btn:active {
   transform: scale(0.97);
 }
 
-/* Hardware-Accelerated Shadows */
-.card {
-  box-shadow:
-    0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  transition:
-    transform 0.3s ease,
-    box-shadow 0.3s ease;
+/* Entry/Exit Animations for DOM Elements (@starting-style) */
+.toast {
+  display: none;
+  opacity: 0;
+  transform: translateY(8px);
+  transition: opacity 0.25s ease, transform 0.25s ease, display 0.25s allow-discrete;
+}
+.toast.is-open {
+  display: flex;
+  opacity: 1;
+  transform: translateY(0);
 }
-.card:hover {
-  transform: translateY(-4px); /* Float effect */
-  box-shadow:
-    0 20px 25px -5px rgba(0, 0, 0, 0.1),
-    0 10px 10px -5px rgba(0, 0, 0, 0.04);
+@starting-style {
+  .toast.is-open {
+    opacity: 0;
+    transform: translateY(8px);
+  }
 }
 ```
 
 ---
 
-## 4. Modern Glassmorphism & Depth
+## 4. Modern Glassmorphism & Multi-Layer Depth
 
-Flat design is dead. Modern UI uses depth, layering, and blur.
+Avoid flat 1px borders and muddy single shadows. Use multi-layered elevation.
 
 ```css
-/* Frosted Glass */
-.glass {
-  background: rgba(255, 255, 255, 0.7);
+.card {
+  background: light-dark(rgba(255, 255, 255, 0.8), rgba(20, 20, 25, 0.8));
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  border: 1px solid light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.12));
   border-radius: 16px;
+  box-shadow: 
+    0 1px 2px oklch(0% 0 0 / 0.05),
+    0 4px 12px oklch(0% 0 0 / 0.08);
 }
 ```
 
 ---
 
-## 5. Forms and High-Friction UI
-
-Forms are where users drop off. They must be flawless.
+## 5. Accessibility (WCAG 2.2 AA Standards)
 
-- **Auto-focus** the first input on modal open.
-- **Labels** must be visible outside the input (not just placeholders).
-- **Validation** happens `onBlur` (when leaving), NOT `onChange` (typing).
-- **Submit buttons** show loading spinners, disable inputs, and prevent double-clicks.
+Design is broken if it excludes users.
+- ✅ **SC 2.5.8 Target Size**: Interactive controls must be at least `24x24px` CSS pixels (min `44x44px` for touch targets).
+- ✅ **SC 2.4.11 Focus Not Obscured**: Focused elements must never be completely hidden by sticky headers/footers.
+- ✅ **SC 2.4.13 Focus Appearance**: Visible focus rings must achieve `3:1` contrast ratio with a minimum 2px perimeter offset.
+- ✅ **Color Alone**: Never rely solely on color to convey state (pair error alerts with icons).
 
 ```css
-/* Focus-visible: Only show ring for keyboard nav, not mouse clicks */
-button:focus-visible {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
+button:focus-visible, a:focus-visible {
+  outline: 2px solid var(--brand-primary);
+  outline-offset: 3px;
 }
 ```
 
 ---
 
-## 6. Accessibility (WCAG 2.2 AA)
-
-Design is fundamentally broken if it excludes users.
-
-- ✅ Interactive elements need `aria-label` if not visually labeled.
-- ✅ Custom dropdowns/selects must support Arrow Keys and Escape.
-- ✅ Color alone cannot convey state (Error text must have an icon too `❌ Password invalid`).
-- ✅ Hide decorative SVG/icons from screen readers `aria-hidden="true"`.
-
----
-
 AI coding assistants often fall into specific bad habits when dealing with this domain. These are strictly forbidden:
 
 1. **Over-engineering:** Proposing complex abstractions or distributed systems when a simpler approach suffices.

package/.agent/skills/gpt-taste/SKILL.md

@@ -0,0 +1,68 @@
+---
+name: gpt-taste
+description: High-agency UX/UI skill with strict layout variance, typography, and GSAP motion engineering constraints for superior visual judgment.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: High-Agency Aesthetic Judgment
+  tier: pro
+  co-requires: [taste-skill, better-ui, frontend-design]
+  trigger-signals:
+    strong: [gpt-taste, high agency UI, visual refinement, layout variance, superior aesthetic judgment]
+    weak: [aesthetic UI, refined visual]
+---
+
+# GPT Taste — High-Agency Visual Refinement & Layout Variance
+
+Inject high-agency visual judgment and layout variance into AI-generated interfaces.
+
+---
+
+## 4 High-Agency Visual Constraints
+
+### 1. Structural Layout Variance
+Never use standard symmetrical layouts by default. Vary structural axes across sections:
+- **Hero**: Asymmetric 60/40 split or left-aligned stacked text with offset app preview frame.
+- **Features**: Alternating 2-column image/text rhythm or horizontal scroll cards.
+- **CTA**: Single full-width card with progressive backdrop blur overlay.
+
+### 2. OKLCH Perceptual Palette Generation
+Always generate color schemes in OKLCH:
+- Background: `oklch(0.98 0.005 240)`
+- Foreground: `oklch(0.18 0.01 240)`
+- Accent: `oklch(0.62 0.22 250)`
+
+### 3. GSAP / Motion Engineering Integration
+When animation is requested, use explicit GSAP timelines with custom easing curves (`power3.out`, `expo.out`), avoiding default linear transitions.
+
+### 4. Zero Output Truncation
+Never output placeholder `// TODO: add remaining items` comments in UI code. Generate full, production-ready JSX/CSS markup.
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Truncated Code Outputs**: Outputting incomplete code snippets or placeholder comments.
+2. **Symmetrical Grid Boredom**: Using 3 identical square cards side-by-side without visual hierarchy differentiation.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `frontend-reviewer` · `ui-ux-auditor`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are code outputs 100% complete without placeholder TODOs?
+✅ Is structural layout varied across different page sections?
+✅ Are colors declared via OKLCH variables?
+```
+
+### 🛑 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/harden/SKILL.md

@@ -0,0 +1,74 @@
+---
+name: harden
+description: Make interfaces production-resilient with robust empty states, error boundaries, loading skeletons, offline indicators, and internationalization (i18n) layout support.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: UI Resilience & Production Safety
+  tier: pro
+  co-requires: [error-resilience, polish, web-accessibility-auditor]
+  trigger-signals:
+    strong: [harden, ui resilience, error states, empty states, loading skeletons, offline support, i18n layout]
+    weak: [error handling ui, loading state]
+---
+
+# Harden — Production UI Resilience & Edge Case Protection
+
+Ensure UI components gracefully handle network failures, missing data, slow connections, extreme text lengths, and internationalization.
+
+---
+
+## 5 Resilience Domains
+
+### 1. Zero-Data Empty States
+- Never render empty blank slates or blank boxes.
+- Always render a dedicated empty state component featuring:
+  - Contextual icon or subtle illustration
+  - Clear heading explaining the zero state (*"No active projects found"*)
+  - Secondary helper copy (*"Get started by creating your first project."*)
+  - Prominent primary action CTA button (*"Create Project"*)
+
+### 2. Error Boundary UI & Retry Hooks
+- Wrap high-risk component trees in React/framework Error Boundaries.
+- Display localized inline error callouts with explicit "Retry" action buttons rather than crashing the full page view.
+
+### 3. Cumulative Layout Shift (CLS) Loading Skeletons
+- Match skeleton placeholder dimensions EXACTLY to incoming data elements.
+- Use animated pulse keyframes (`@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }`).
+
+### 4. Extreme String Expansion (i18n)
+- German, French, and Spanish strings are 30% - 50% longer than English.
+- Avoid fixed button or container widths (`width: 120px`). Use `min-width` with flexible auto sizing and `flex-wrap: wrap` or text truncation.
+
+### 5. Offline & Network Disconnection Handling
+- Detect `navigator.onLine` state and display subtle offline status banners.
+- Disable mutation buttons during offline mode with explicit tooltip explanation.
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Swallowing Errors**: Catching API errors and displaying a blank container without informing the user.
+2. **Fixed Container Widths**: Using hardcoded `width: 200px` on containers with international text.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `resilience-reviewer` · `frontend-reviewer`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Does every async data container have explicit loading, error, and empty states?
+✅ Are all containers built flexibly to accommodate 50% text expansion (i18n)?
+✅ Do error fallbacks include actionable retry buttons?
+```
+
+### 🛑 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/impeccable/SKILL.md

@@ -0,0 +1,74 @@
+---
+name: impeccable
+description: Flagship design engineering skill for creating production-grade, anti-generic frontend interfaces with supreme craftsmanship, visual hierarchy, typography, spatial systems, and micro-interactions.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Premium Frontend Craft
+  tier: flagship
+  co-requires: [frontend-design, better-ui, emil-design-eng]
+  trigger-signals:
+    strong: [impeccable, supreme craft, world-class ui, anti-generic design, production-grade interface]
+    weak: [beautiful ui, premium frontend]
+---
+
+# Impeccable — Production-Grade Frontend Craft
+
+The gold standard framework for crafting bespoke, world-class web applications that feel custom-built by elite design engineers.
+
+---
+
+## Core Pillars of Impeccable UI
+
+### 1. Typography & Typographic Rhythm
+- **Optical Sizing & Tracking**: Large display headings (32px+) require tight letter-spacing (`letter-spacing: -0.03em`). Small caption text (12px) requires positive tracking (`letter-spacing: +0.01em`).
+- **Tabular Numbers**: Any numeric data that updates, increments, or displays in columns MUST use `font-variant-numeric: tabular-nums` or `font-feature-settings: "tnum"` to prevent visual jitter.
+- **Text Wrapping & Balance**: Headings MUST use `text-wrap: balance` to prevent typographic orphans. Body paragraphs MUST use `text-wrap: pretty` (where supported) or max `65ch` width.
+
+### 2. Color Systems & Gamut Precision
+- **OKLCH Color Space**: Prefer `oklch()` over `hsl()` or `hex` for smooth perceptual uniformity across hue and lightness shifts.
+- **Subtle Surface Steps**: Define surface colors with small perceptual lightness steps ($L \pm 2\%$) to create hierarchy without harsh dividers.
+- **Adaptive Contrast**: Text contrast MUST adapt automatically across light/dark themes with high legibility ratios ($\ge 7:1$ for primary, $\ge 4.5:1$ for secondary).
+
+### 3. Motion & Micro-Interactions
+- **Intentional Motion**: Animations exist ONLY to convey spatial continuity, provide press feedback, or indicate state changes.
+- **Duration Constraints**: Micro-interactions $\le 160\text{ms}$; dropdowns/popovers $\le 220\text{ms}$; page transitions $\le 300\text{ms}$.
+- **Physically Grounded Entrances**: Elements scale in from `scale(0.96)` and opacity `0`, anchored to their trigger origin.
+- **DOM Entry (@starting-style)**: Use `@starting-style` with `transition-behavior: allow-discrete` for smooth `display: none` to `display: block` entrance animations without JS overhead.
+
+### 4. Layout Mechanics & Spatial Math
+- **8px Grid System**: Every margin, padding, gap, and height MUST derive from an 8px grid (or 4px micro-grid).
+- **Asymmetrical Balance**: Avoid cookie-cutter centered layouts for SaaS apps. Use strong left-aligned structural axes with generous negative space.
+- **Container Queries**: Components adjust layout based on container size (`@container`), not viewport size (`@media`), making them context-agnostic.
+- **WCAG 2.2 AA Target Size (SC 2.5.8)**: All interactive targets MUST measure at least `24x24px` CSS pixels (min `44x44px` for touch).
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Generic AI Aesthetics**: Using purple-to-blue gradients, glow effects on every button, or heavy glassmorphism on white text.
+2. **Hardcoded Pixel Values**: Writing hardcoded `px` font sizes and dimensions instead of `rem` and fluid `clamp()` utilities.
+3. **Orphaned Text**: Failing to apply `text-wrap: balance` to multi-line headings.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `frontend-reviewer` · `ui-ux-auditor` · `motion-reviewer`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are tabular numbers enabled on all changing numeric values?
+✅ Is heading text wrapped using `text-wrap: balance`?
+✅ Is container query responsiveness utilized where components are reused?
+✅ Are transitions tuned with custom cubic-bezier curves under 300ms?
+```
+
+### 🛑 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.