tribunal-kit 9.2.4 → 9.2.6

package/.agents/skills/codebase-design/SKILL.md

@@ -1,8 +1,8 @@
 ---
 name: codebase-design
-description: "Use when Guidance for designing deep modules with small interfaces and clean seams. Use when structuring a new module, refactoring complex codebases, or designing internal library boundaries."
-version: 5.0.0
-last-updated: 2026-09-13
+description: "Use when executing, coordinating, planning, or reviewing codebase design agent workflows, cognitive loops, and architecture standards."
+version: 6.0.0
+last-updated: 2026-09-29
 skills:
   - architecture
   - clean-code
@@ -15,62 +15,123 @@ scripts-binding:
 
 # Codebase Design — Deep Modules & Clean Seams
 
----
+## Mandatory Pre-Flight Context Inspection
+Before reading, generating, or refactoring code in the `codebase-design` domain, inspect these 5 critical parameters:
+1. **System Boundaries & Dependencies**: Verify that all required dependencies exist in target package manifests and environment paths.
+2. **Runtime Context & Platform Invariants**: Confirm target platform constraints (Node.js, Browser, Mobile OS, Edge runtime) before applying APIs.
+3. **Execution Guardrails**: Identify potential side-effects, state mutations, and unhandled asynchronous exceptions.
+4. **Validation & Type Contracts**: Validate input data schemas and strict type constraints across all module interfaces.
+5. **Observability & Proof of Execution**: Ensure execution produces tangible verification signals (terminal output, tests, metrics).
 
-## 🛠️ Technical Architecture & Reference Recipes
 
----
+## Activation Boundaries
+- **Activate when:** Use when executing, coordinating, planning, or reviewing codebase design agent workflows, cognitive loops, and architecture standards.
+- **DO NOT activate when:** The task falls outside the `codebase-design` domain or is managed by a different dedicated specialist agent.
 
-## 2026 Architecture & Module Invariants
 
-1. **Deep vs Shallow Ratio**: Aim for interfaces with ≤ 3 primary methods that encapsulate multi-step workflows. If a consumer must orchestrate 5 method calls in sequence, your module interface is too shallow.
-2. **Domain Model Immutability**: Return frozen or readonly representations (`Readonly<User>`) from module boundaries to prevent callers from mutating internal state without going through domain methods.
-3. **Seam Testing with Stubs**: When modules have clean seams, testing requires stubbing only the narrow boundary interface rather than mocking 15 internal methods.
+## 🔁 Multi-Pass Execution Protocol
 
-## Hallucination Traps (Read First)
+| Pass | Phase | Core Action | Adaptive Depth |
+|:---|:---|:---|:---|
+| **Pass 1** | **Understand** | Deconstruct the user's explicit objective, implicit requirements, and platform constraints. | Fast / Standard / Deep |
+| **Pass 2** | **Plan** | Decompose task into smallest logical steps; map dependencies, affected files, and tool calls. | Standard / Deep |
+| **Pass 3** | **Execute** | Implement solution with production-grade craft, zero placeholders, and strict typing. | All Modes |
+| **Pass 4** | **Verify** | Run linters, unit tests, or compiler checks to validate structural correctness. | All Modes |
+| **Pass 5** | **Attack & Falsify** | Perform adversarial search for edge-case failures, counterexamples, race conditions, and traps. | Standard / Deep |
+| **Pass 6** | **Harden** | Eliminate discovered friction, optimize performance, and harden error boundaries. | Standard / Deep |
+| **Pass 7** | **Quality Gate** | Enforce Verification-Before-Completion (VBC) with concrete terminal proof before finalizing. | All Modes |
 
-- ❌ Exposing Prisma/Mongoose documents directly to API callers → ✅ Map to domain DTOs at the module boundary
-- ❌ Creating "manager", "helper", or "util" classes with 40 unrelated methods → ✅ Group around cohesive bounded contexts
-- ❌ Passing 10 configuration flags to a function → ✅ Use sensible defaults and the builder or options pattern
-- ❌ Breaking a 50-line method into five 10-line shallow classes → ✅ Keep cohesive code together unless there is real reuse
 
----
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
 
-## 4 Principles of Deep Module Design
-
-### 1. High Depth Ratio (Simple Interface / Heavy Implementation)
-
-- **Deep Module**: Small surface area interface hiding extensive internal machinery. (e.g. `fs.readFile()` is 1 simple function hiding thousands of lines of OS file descriptor buffer logic).
-- **Shallow Module**: Large interface surface area relative to its implementation (e.g. a 5-line wrapper function with a 6-argument configuration object). Avoid shallow modules!
-
-```typescript
-// ❌ SHALLOW MODULE: Forces consumer to manage low-level state
-class ShallowUserStorage {
-  public validateUser(u: User): boolean { ... }
-  public serializeUser(u: User): string { ... }
-  public writeToFile(path: string, data: string): void { ... }
-}
-
-// ✅ DEEP MODULE: Hides file serialization & validation under 1 method
-class DeepUserStorage {
-  public async save(user: User): Promise<void> {
-    this.validate(user);
-    const data = this.serialize(user);
-    await this.persist(data);
-  }
-}
-```
+## 2026 Architecture & Module Invariants
+
+1. **Deep vs Shallow Ratio**: Aim for interfaces with ≤ 3 primary methods that encapsulate multi-step workflows. If a consumer must orchestrate 5 method calls in sequence, your module interface is too shallow.
+2. **Domain Model Immutability**: Return frozen or readonly representations (`Readonly<User>`) from module boundaries to prevent callers from mutating internal state without going through domain methods.
+3. **Seam Testing with Stubs**: When modules have clean seams, testing requires stubbing only the narrow boundary interface rather than mocking 15 internal methods.
+
+## Hallucination Traps (Read First)
+
+- ❌ Exposing Prisma/Mongoose documents directly to API callers → ✅ Map to domain DTOs at the module boundary
+- ❌ Creating "manager", "helper", or "util" classes with 40 unrelated methods → ✅ Group around cohesive bounded contexts
+- ❌ Passing 10 configuration flags to a function → ✅ Use sensible defaults and the builder or options pattern
+- ❌ Breaking a 50-line method into five 10-line shallow classes → ✅ Keep cohesive code together unless there is real reuse
+
+---
+
+## 4 Principles of Deep Module Design
+
+### 1. High Depth Ratio (Simple Interface / Heavy Implementation)
+
+- **Deep Module**: Small surface area interface hiding extensive internal machinery. (e.g. `fs.readFile()` is 1 simple function hiding thousands of lines of OS file descriptor buffer logic).
+- **Shallow Module**: Large interface surface area relative to its implementation (e.g. a 5-line wrapper function with a 6-argument configuration object). Avoid shallow modules!
+
+```typescript
+// ❌ SHALLOW MODULE: Forces consumer to manage low-level state
+class ShallowUserStorage {
+  public validateUser(u: User): boolean { ... }
+  public serializeUser(u: User): string { ... }
+  public writeToFile(path: string, data: string): void { ... }
+}
+
+// ✅ DEEP MODULE: Hides file serialization & validation under 1 method
+class DeepUserStorage {
+  public async save(user: User): Promise<void> {
+    this.validate(user);
+    const data = this.serialize(user);
+    await this.persist(data);
+  }
+}
+```
+
+### 2. Information Hiding & Encapsulation
+
+- Keep internal data structures, caching mechanisms, and third-party vendor clients strictly private (`private` / `#privateField`).
+- Expose intent-driven methods (`user.rename("Alice")`) rather than raw property setters (`user.name = "Alice"`).
+
+### 3. Clean Seams for Testability
+
+- Define interfaces at subsystem boundaries so dependencies can be replaced with mock doubles or fake implementations in tests without modifying production code.
+
+### 4. Separate Policy from Mechanism
+
+- **Mechanism**: _How_ something executes (e.g. HTTP fetching, SQL query building, JSON parsing).
+- **Policy**: _What_ business decision is made (e.g. retry 3 times if status is 503). Keep policy pure and mechanism generic.
 
-### 2. Information Hiding & Encapsulation
+## 🚨 Edge-Case & Failure Mode Matrix
 
-- Keep internal data structures, caching mechanisms, and third-party vendor clients strictly private (`private` / `#privateField`).
-- Expose intent-driven methods (`user.rename("Alice")`) rather than raw property setters (`user.name = "Alice"`).
+| Scenario | Risk | Production Mitigation |
+|:---|:---|:---|
+| **Empty or Null Inputs** | Unhandled exception or unexpected rendering collapse | Enforce fallback guards, optional chaining, and explicit empty state handlers |
+| **Network Timeout / Latency** | Hanging operations or duplicate side-effects | Implement bounded abort controllers, exponential backoff, and idempotency keys |
+| **Concurrency / Race Conditions** | Stale state overwrite or inconsistent data mutations | Use atomic transactions, mutex locking, or cancel-on-resubmit controls |
+| **Invalid Schema / Malformed Payload** | Downstream runtime errors or security injection | Validate boundary payloads with Zod/Pydantic schemas prior to execution |
+| **Resource / Memory Saturation** | OOM errors, frame drops, or memory leaks | Clean up listeners, cancel active timers, and enforce pagination/virtualization |
 
-### 3. Clean Seams for Testability
 
-- Define interfaces at subsystem boundaries so dependencies can be replaced with mock doubles or fake implementations in tests without modifying production code.
+## 🏛️ Tribunal Verification & Guardrails
 
-### 4. Separate Policy from Mechanism
+**Active Reviewers:** `orchestrator` · `agent-organizer` · `logic-reviewer`
+**Slash Command:** `/review` or `/tribunal-full`
 
-- **Mechanism**: _How_ something executes (e.g. HTTP fetching, SQL query building, JSON parsing).
-- **Policy**: _What_ business decision is made (e.g. retry 3 times if status is 503). Keep policy pure and mechanism generic.
+### 🔬 Evidence Standard (Tri-State Verification)
+Every finding, audit statement, or completion claim must classify its factual certainty:
+- **`[OBSERVED]`**: Directly confirmed in the codebase or verified via executed terminal command.
+- **`[INFERRED]`**: Logically deduced from code patterns, architectural data flow, or schema relations.
+- **`[UNVERIFIED]`**: Speculative hypothesis or runtime possibility requiring active testing or measurement.
+
+### ✅ Pre-Flight Self-Audit Checklist
+```
+✅ Did I deconstruct the root objective before proposing architecture?
+✅ Did I identify dependencies, bottlenecks, and parallelizable sub-tasks?
+✅ Did I avoid over-engineering and select the simplest effective pattern?
+✅ Did I verify assumptions with concrete file reads instead of speculation?
+✅ Did I establish measurable verification criteria before completion?
+```
+
+### 🛑 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 test suites, compiler success, or equivalent operational proof) that your output works as intended.

package/.agents/skills/colorize/SKILL.md

@@ -1,8 +1,8 @@
 ---
 name: colorize
-description: "Use when Introduce strategic, harmonious, accessible color systems and OKLCH color palettes to visually flat or dull interfaces."
-version: 5.0.0
-last-updated: 2026-09-13
+description: "Use when building, styling, optimizing, and auditing colorize components, responsive layouts, design systems, and frontend state."
+version: 6.0.0
+last-updated: 2026-09-29
 skills:
   - better-colors
   - baseline-ui
@@ -15,43 +15,113 @@ scripts-binding:
 
 # Colorize — Color System & OKLCH Palette Design
 
----
+## Mandatory Pre-Flight Context Inspection
+Before reading, generating, or refactoring code in the `colorize` domain, inspect these 5 critical parameters:
+1. **System Boundaries & Dependencies**: Verify that all required dependencies exist in target package manifests and environment paths.
+2. **Runtime Context & Platform Invariants**: Confirm target platform constraints (Node.js, Browser, Mobile OS, Edge runtime) before applying APIs.
+3. **Execution Guardrails**: Identify potential side-effects, state mutations, and unhandled asynchronous exceptions.
+4. **Validation & Type Contracts**: Validate input data schemas and strict type constraints across all module interfaces.
+5. **Observability & Proof of Execution**: Ensure execution produces tangible verification signals (terminal output, tests, metrics).
+
+
+## Activation Boundaries
+- **Activate when:** Use when building, styling, optimizing, and auditing colorize components, responsive layouts, design systems, and frontend state.
+- **DO NOT activate when:** The task falls outside the `colorize` domain or is managed by a different dedicated specialist agent.
+
 
+## 🔁 Multi-Pass Execution Protocol
+
+| Pass | Phase | Core Action | Adaptive Depth |
+|:---|:---|:---|:---|
+| **Pass 1** | **Understand** | Deconstruct the user's explicit objective, implicit requirements, and platform constraints. | Fast / Standard / Deep |
+| **Pass 2** | **Plan** | Decompose task into smallest logical steps; map dependencies, affected files, and tool calls. | Standard / Deep |
+| **Pass 3** | **Execute** | Implement solution with production-grade craft, zero placeholders, and strict typing. | All Modes |
+| **Pass 4** | **Verify** | Run linters, unit tests, or compiler checks to validate structural correctness. | All Modes |
+| **Pass 5** | **Attack & Falsify** | Perform adversarial search for edge-case failures, counterexamples, race conditions, and traps. | Standard / Deep |
+| **Pass 6** | **Harden** | Eliminate discovered friction, optimize performance, and harden error boundaries. | Standard / Deep |
+| **Pass 7** | **Quality Gate** | Enforce Verification-Before-Completion (VBC) with concrete terminal proof before finalizing. | All Modes |
+
+
+---
+
 ## 🛠️ Technical Architecture & Reference Recipes
 
----
+---
+
+## 4 Color System Principles
+
+### 1. Why OKLCH Over HSL/Hex
+
+- Traditional HSL suffers from perceptual lightness jumps (e.g. pure yellow `#FFFF00` at Lightness 50% looks blindingly bright compared to pure blue `#0000FF` at Lightness 50%).
+- OKLCH enforces constant perceptual lightness ($L$), predictable chroma ($C$), and hue angles ($H$).
+
+```css
+:root {
+  /* Primary Brand Scale in OKLCH: L C H */
+  --primary-50: oklch(0.97 0.02 250);
+  --primary-100: oklch(0.92 0.04 250);
+  --primary-500: oklch(0.6 0.18 250); /* Main Brand Color */
+  --primary-700: oklch(0.42 0.16 250);
+  --primary-900: oklch(0.24 0.1 250);
+}
+```
+
+### 2. The 60-30-10 Color Budget Rule
+
+- **60% Dominant Neutral**: Backgrounds, page canvas, card surfaces (`oklch(0.98 0.005 240)`).
+- **30% Structural Secondary**: Typography, borders, icons, navigation chrome (`oklch(0.20 0.01 240)`).
+- **10% Intentional Accent**: Primary actions, key badges, status confirmations (`oklch(0.60 0.18 250)`).
+
+### 3. Functional Status Color Tokens
+
+Never use random red/green/yellow hex codes. Maintain matching chroma and lightness across status semantic scales:
+
+- **Success**: `oklch(0.62 0.17 145)` (Emerald)
+- **Warning**: `oklch(0.72 0.16 75)` (Amber)
+- **Destructive**: `oklch(0.58 0.22 25)` (Coral Red)
+- **Info**: `oklch(0.62 0.16 240)` (Sky Blue)
 
----
+## 🚨 Edge-Case & Failure Mode Matrix
 
-## 4 Color System Principles
+| Scenario | Risk | Production Mitigation |
+|:---|:---|:---|
+| **Empty or Null Inputs** | Unhandled exception or unexpected rendering collapse | Enforce fallback guards, optional chaining, and explicit empty state handlers |
+| **Network Timeout / Latency** | Hanging operations or duplicate side-effects | Implement bounded abort controllers, exponential backoff, and idempotency keys |
+| **Concurrency / Race Conditions** | Stale state overwrite or inconsistent data mutations | Use atomic transactions, mutex locking, or cancel-on-resubmit controls |
+| **Invalid Schema / Malformed Payload** | Downstream runtime errors or security injection | Validate boundary payloads with Zod/Pydantic schemas prior to execution |
+| **Resource / Memory Saturation** | OOM errors, frame drops, or memory leaks | Clean up listeners, cancel active timers, and enforce pagination/virtualization |
 
-### 1. Why OKLCH Over HSL/Hex
 
-- Traditional HSL suffers from perceptual lightness jumps (e.g. pure yellow `#FFFF00` at Lightness 50% looks blindingly bright compared to pure blue `#0000FF` at Lightness 50%).
-- OKLCH enforces constant perceptual lightness ($L$), predictable chroma ($C$), and hue angles ($H$).
+## 🤖 LLM-Specific Traps Table
 
-```css
-:root {
-  /* Primary Brand Scale in OKLCH: L C H */
-  --primary-50: oklch(0.97 0.02 250);
-  --primary-100: oklch(0.92 0.04 250);
-  --primary-500: oklch(0.6 0.18 250); /* Main Brand Color */
-  --primary-700: oklch(0.42 0.16 250);
-  --primary-900: oklch(0.24 0.1 250);
-}
-```
+| Anti-Pattern | What AI Commonly Does Wrong | What Is Actually Correct |
+|:---|:---|:---|
+| **Uncontrolled Re-render Loop** | Mutating state inside render bodies or omitting hook dependencies | Wrap effects with explicit deps and isolate reactive derivations in useMemo |
+| **Accessibility Neglect** | Interactive <div> without role="button", tabIndex, or onKeyDown | Use semantic <button> or provide ARIA role, keyboard handlers, and focus ring |
+| **Layout Shift Flash** | Images/dynamic content without aspect-ratio or explicit dimensions | Enforce aspect-ratio or skeleton placeholders to guarantee zero CLS |
 
-### 2. The 60-30-10 Color Budget Rule
 
-- **60% Dominant Neutral**: Backgrounds, page canvas, card surfaces (`oklch(0.98 0.005 240)`).
-- **30% Structural Secondary**: Typography, borders, icons, navigation chrome (`oklch(0.20 0.01 240)`).
-- **10% Intentional Accent**: Primary actions, key badges, status confirmations (`oklch(0.60 0.18 250)`).
+## 🏛️ Tribunal Verification & Guardrails
 
-### 3. Functional Status Color Tokens
+**Active Reviewers:** `frontend-reviewer` · `type-safety` · `ui-ux-auditor` · `complexity-reviewer`
+**Slash Command:** `/review` or `/tribunal-full`
 
-Never use random red/green/yellow hex codes. Maintain matching chroma and lightness across status semantic scales:
+### 🔬 Evidence Standard (Tri-State Verification)
+Every finding, audit statement, or completion claim must classify its factual certainty:
+- **`[OBSERVED]`**: Directly confirmed in the codebase or verified via executed terminal command.
+- **`[INFERRED]`**: Logically deduced from code patterns, architectural data flow, or schema relations.
+- **`[UNVERIFIED]`**: Speculative hypothesis or runtime possibility requiring active testing or measurement.
 
-- **Success**: `oklch(0.62 0.17 145)` (Emerald)
-- **Warning**: `oklch(0.72 0.16 75)` (Amber)
-- **Destructive**: `oklch(0.58 0.22 25)` (Coral Red)
-- **Info**: `oklch(0.62 0.16 240)` (Sky Blue)
+### ✅ Pre-Flight Self-Audit Checklist
+```
+✅ Are all component props strictly typed with zero implicit "any"?
+✅ Are responsive breakpoints, fluid typography, and optical balance verified?
+✅ Is accessibility (ARIA labels, keyboard navigation, contrast ratio >= 4.5:1) validated?
+✅ Are re-renders minimized and state lifecycles cleanly separated?
+✅ Did I verify all imported UI components and icon sets actually exist?
+```
+
+### 🛑 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 test suites, compiler success, or equivalent operational proof) that your output works as intended.

package/.agents/skills/compact-landing/SKILL.md

@@ -1,8 +1,8 @@
 ---
 name: compact-landing
-description: "Use when Build compact, premium landing pages with clear CTA hierarchy, quiet typography, restrained visual noise, and high conversion flow."
-version: 5.0.0
-last-updated: 2026-09-13
+description: "Use when building, styling, optimizing, and auditing compact landing components, responsive layouts, design systems, and frontend state."
+version: 6.0.0
+last-updated: 2026-09-29
 skills:
   - landing-page
   - quieter
@@ -15,36 +15,106 @@ scripts-binding:
 
 # Compact Landing — Premium Minimalist Landing Pages
 
----
+## Mandatory Pre-Flight Context Inspection
+Before reading, generating, or refactoring code in the `compact-landing` domain, inspect these 5 critical parameters:
+1. **System Boundaries & Dependencies**: Verify that all required dependencies exist in target package manifests and environment paths.
+2. **Runtime Context & Platform Invariants**: Confirm target platform constraints (Node.js, Browser, Mobile OS, Edge runtime) before applying APIs.
+3. **Execution Guardrails**: Identify potential side-effects, state mutations, and unhandled asynchronous exceptions.
+4. **Validation & Type Contracts**: Validate input data schemas and strict type constraints across all module interfaces.
+5. **Observability & Proof of Execution**: Ensure execution produces tangible verification signals (terminal output, tests, metrics).
+
+
+## Activation Boundaries
+- **Activate when:** Use when building, styling, optimizing, and auditing compact landing components, responsive layouts, design systems, and frontend state.
+- **DO NOT activate when:** The task falls outside the `compact-landing` domain or is managed by a different dedicated specialist agent.
+
+
+## 🔁 Multi-Pass Execution Protocol
+
+| Pass | Phase | Core Action | Adaptive Depth |
+|:---|:---|:---|:---|
+| **Pass 1** | **Understand** | Deconstruct the user's explicit objective, implicit requirements, and platform constraints. | Fast / Standard / Deep |
+| **Pass 2** | **Plan** | Decompose task into smallest logical steps; map dependencies, affected files, and tool calls. | Standard / Deep |
+| **Pass 3** | **Execute** | Implement solution with production-grade craft, zero placeholders, and strict typing. | All Modes |
+| **Pass 4** | **Verify** | Run linters, unit tests, or compiler checks to validate structural correctness. | All Modes |
+| **Pass 5** | **Attack & Falsify** | Perform adversarial search for edge-case failures, counterexamples, race conditions, and traps. | Standard / Deep |
+| **Pass 6** | **Harden** | Eliminate discovered friction, optimize performance, and harden error boundaries. | Standard / Deep |
+| **Pass 7** | **Quality Gate** | Enforce Verification-Before-Completion (VBC) with concrete terminal proof before finalizing. | All Modes |
 
+
+---
+
 ## 🛠️ Technical Architecture & Reference Recipes
 
----
+---
+
+## 4 Compact Landing Rules
+
+### 1. The Single Viewport Value Pitch
+
+- Above-the-fold content must answer 3 questions instantly within 1 single screen viewport:
+  1. _What is it?_ (Clear, un-hypey headline + subhead)
+  2. _What does it look like?_ (Crisp UI screenshot or interactive preview component)
+  3. _How do I get it?_ (Unambiguous primary CTA input/button)
+
+### 2. Quiet Typographic Hierarchy
+
+- Use subdued monochrome typography (`oklch(0.95 0.005 240)` background with `oklch(0.20 0.01 240)` body copy).
+- Keep display font sizes restrained (`clamp(1.75rem, 4vw, 2.75rem)`) rather than giant 5rem text blocks.
+
+### 3. Tight Spatial Grid
+
+- Limit total page section count to max 4 sections:
+  1. Hero + Primary CTA + Product Preview
+  2. Social Proof / Logo Bar
+  3. Feature Grid (3 core benefits max)
+  4. Conversion Footer Card
+
+### 4. Zero Unnecessary Visual Noise
+
+- Omit decorative background shapes, floating 3D spheres, and rainbow gradients. Let contrast and typography drive visual quality.
 
----
+## 🚨 Edge-Case & Failure Mode Matrix
 
-## 4 Compact Landing Rules
+| Scenario | Risk | Production Mitigation |
+|:---|:---|:---|
+| **Empty or Null Inputs** | Unhandled exception or unexpected rendering collapse | Enforce fallback guards, optional chaining, and explicit empty state handlers |
+| **Network Timeout / Latency** | Hanging operations or duplicate side-effects | Implement bounded abort controllers, exponential backoff, and idempotency keys |
+| **Concurrency / Race Conditions** | Stale state overwrite or inconsistent data mutations | Use atomic transactions, mutex locking, or cancel-on-resubmit controls |
+| **Invalid Schema / Malformed Payload** | Downstream runtime errors or security injection | Validate boundary payloads with Zod/Pydantic schemas prior to execution |
+| **Resource / Memory Saturation** | OOM errors, frame drops, or memory leaks | Clean up listeners, cancel active timers, and enforce pagination/virtualization |
 
-### 1. The Single Viewport Value Pitch
 
-- Above-the-fold content must answer 3 questions instantly within 1 single screen viewport:
-  1. _What is it?_ (Clear, un-hypey headline + subhead)
-  2. _What does it look like?_ (Crisp UI screenshot or interactive preview component)
-  3. _How do I get it?_ (Unambiguous primary CTA input/button)
+## 🤖 LLM-Specific Traps Table
 
-### 2. Quiet Typographic Hierarchy
+| Anti-Pattern | What AI Commonly Does Wrong | What Is Actually Correct |
+|:---|:---|:---|
+| **Uncontrolled Re-render Loop** | Mutating state inside render bodies or omitting hook dependencies | Wrap effects with explicit deps and isolate reactive derivations in useMemo |
+| **Accessibility Neglect** | Interactive <div> without role="button", tabIndex, or onKeyDown | Use semantic <button> or provide ARIA role, keyboard handlers, and focus ring |
+| **Layout Shift Flash** | Images/dynamic content without aspect-ratio or explicit dimensions | Enforce aspect-ratio or skeleton placeholders to guarantee zero CLS |
 
-- Use subdued monochrome typography (`oklch(0.95 0.005 240)` background with `oklch(0.20 0.01 240)` body copy).
-- Keep display font sizes restrained (`clamp(1.75rem, 4vw, 2.75rem)`) rather than giant 5rem text blocks.
 
-### 3. Tight Spatial Grid
+## 🏛️ Tribunal Verification & Guardrails
 
-- Limit total page section count to max 4 sections:
-  1. Hero + Primary CTA + Product Preview
-  2. Social Proof / Logo Bar
-  3. Feature Grid (3 core benefits max)
-  4. Conversion Footer Card
+**Active Reviewers:** `frontend-reviewer` · `type-safety` · `ui-ux-auditor` · `complexity-reviewer`
+**Slash Command:** `/review` or `/tribunal-full`
 
-### 4. Zero Unnecessary Visual Noise
+### 🔬 Evidence Standard (Tri-State Verification)
+Every finding, audit statement, or completion claim must classify its factual certainty:
+- **`[OBSERVED]`**: Directly confirmed in the codebase or verified via executed terminal command.
+- **`[INFERRED]`**: Logically deduced from code patterns, architectural data flow, or schema relations.
+- **`[UNVERIFIED]`**: Speculative hypothesis or runtime possibility requiring active testing or measurement.
 
-- Omit decorative background shapes, floating 3D spheres, and rainbow gradients. Let contrast and typography drive visual quality.
+### ✅ Pre-Flight Self-Audit Checklist
+```
+✅ Are all component props strictly typed with zero implicit "any"?
+✅ Are responsive breakpoints, fluid typography, and optical balance verified?
+✅ Is accessibility (ARIA labels, keyboard navigation, contrast ratio >= 4.5:1) validated?
+✅ Are re-renders minimized and state lifecycles cleanly separated?
+✅ Did I verify all imported UI components and icon sets actually exist?
+```
+
+### 🛑 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 test suites, compiler success, or equivalent operational proof) that your output works as intended.

package/.agents/skills/company-logos/SKILL.md

@@ -1,8 +1,8 @@
 ---
 name: company-logos
-description: "Use when Social proof rows, logo grids, customer carousels, and trust badges layout rules for balanced visual weight and responsive alignment."
-version: 5.0.0
-last-updated: 2026-09-13
+description: "Use when building, styling, optimizing, and auditing company logos components, responsive layouts, design systems, and frontend state."
+version: 6.0.0
+last-updated: 2026-09-29
 skills:
   - baseline-ui
   - landing-page
@@ -15,40 +15,110 @@ scripts-binding:
 
 # Company Logos — Social Proof & Trust Grids
 
----
+## Mandatory Pre-Flight Context Inspection
+Before reading, generating, or refactoring code in the `company-logos` domain, inspect these 5 critical parameters:
+1. **System Boundaries & Dependencies**: Verify that all required dependencies exist in target package manifests and environment paths.
+2. **Runtime Context & Platform Invariants**: Confirm target platform constraints (Node.js, Browser, Mobile OS, Edge runtime) before applying APIs.
+3. **Execution Guardrails**: Identify potential side-effects, state mutations, and unhandled asynchronous exceptions.
+4. **Validation & Type Contracts**: Validate input data schemas and strict type constraints across all module interfaces.
+5. **Observability & Proof of Execution**: Ensure execution produces tangible verification signals (terminal output, tests, metrics).
+
+
+## Activation Boundaries
+- **Activate when:** Use when building, styling, optimizing, and auditing company logos components, responsive layouts, design systems, and frontend state.
+- **DO NOT activate when:** The task falls outside the `company-logos` domain or is managed by a different dedicated specialist agent.
+
+
+## 🔁 Multi-Pass Execution Protocol
+
+| Pass | Phase | Core Action | Adaptive Depth |
+|:---|:---|:---|:---|
+| **Pass 1** | **Understand** | Deconstruct the user's explicit objective, implicit requirements, and platform constraints. | Fast / Standard / Deep |
+| **Pass 2** | **Plan** | Decompose task into smallest logical steps; map dependencies, affected files, and tool calls. | Standard / Deep |
+| **Pass 3** | **Execute** | Implement solution with production-grade craft, zero placeholders, and strict typing. | All Modes |
+| **Pass 4** | **Verify** | Run linters, unit tests, or compiler checks to validate structural correctness. | All Modes |
+| **Pass 5** | **Attack & Falsify** | Perform adversarial search for edge-case failures, counterexamples, race conditions, and traps. | Standard / Deep |
+| **Pass 6** | **Harden** | Eliminate discovered friction, optimize performance, and harden error boundaries. | Standard / Deep |
+| **Pass 7** | **Quality Gate** | Enforce Verification-Before-Completion (VBC) with concrete terminal proof before finalizing. | All Modes |
+
 
+---
+
 ## 🛠️ Technical Architecture & Reference Recipes
 
----
+---
+
+## 4 Logo Layout Rules
+
+### 1. Optical Weight Normalization
+
+Logos vary wildly in aspect ratio (e.g. square logos vs wide wordmarks).
+
+- **Rule**: Set a maximum bounding box (`max-height: 28px`, `max-width: 120px`) and use `object-fit: contain` with `filter: grayscale(100%) opacity(0.7)`.
+- On hover, transition `opacity(1)` and remove grayscale smoothly over `200ms`.
+
+### 2. Monochromatic Harmonization
+
+- Never display multi-colored corporate logos together—they create visual chaos.
+- Render all logos in monochromatic SVG fill (`fill="currentColor"`) matching `--text-muted` or `--foreground-muted`.
+
+### 3. Responsive Flex Grid
+
+```css
+.logo-trust-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 2rem 3.5rem; /* Row gap 2rem, Column gap 3.5rem */
+}
+```
+
+### 4. Seamless Ticker Marquee (Optional)
+
+- For 8+ logos, use a hardware-accelerated CSS marquee animation with duplicate items for seamless continuous looping and `animation-play-state: paused` on hover.
 
----
+## 🚨 Edge-Case & Failure Mode Matrix
 
-## 4 Logo Layout Rules
+| Scenario | Risk | Production Mitigation |
+|:---|:---|:---|
+| **Empty or Null Inputs** | Unhandled exception or unexpected rendering collapse | Enforce fallback guards, optional chaining, and explicit empty state handlers |
+| **Network Timeout / Latency** | Hanging operations or duplicate side-effects | Implement bounded abort controllers, exponential backoff, and idempotency keys |
+| **Concurrency / Race Conditions** | Stale state overwrite or inconsistent data mutations | Use atomic transactions, mutex locking, or cancel-on-resubmit controls |
+| **Invalid Schema / Malformed Payload** | Downstream runtime errors or security injection | Validate boundary payloads with Zod/Pydantic schemas prior to execution |
+| **Resource / Memory Saturation** | OOM errors, frame drops, or memory leaks | Clean up listeners, cancel active timers, and enforce pagination/virtualization |
 
-### 1. Optical Weight Normalization
 
-Logos vary wildly in aspect ratio (e.g. square logos vs wide wordmarks).
+## 🤖 LLM-Specific Traps Table
 
-- **Rule**: Set a maximum bounding box (`max-height: 28px`, `max-width: 120px`) and use `object-fit: contain` with `filter: grayscale(100%) opacity(0.7)`.
-- On hover, transition `opacity(1)` and remove grayscale smoothly over `200ms`.
+| Anti-Pattern | What AI Commonly Does Wrong | What Is Actually Correct |
+|:---|:---|:---|
+| **Uncontrolled Re-render Loop** | Mutating state inside render bodies or omitting hook dependencies | Wrap effects with explicit deps and isolate reactive derivations in useMemo |
+| **Accessibility Neglect** | Interactive <div> without role="button", tabIndex, or onKeyDown | Use semantic <button> or provide ARIA role, keyboard handlers, and focus ring |
+| **Layout Shift Flash** | Images/dynamic content without aspect-ratio or explicit dimensions | Enforce aspect-ratio or skeleton placeholders to guarantee zero CLS |
 
-### 2. Monochromatic Harmonization
 
-- Never display multi-colored corporate logos together—they create visual chaos.
-- Render all logos in monochromatic SVG fill (`fill="currentColor"`) matching `--text-muted` or `--foreground-muted`.
+## 🏛️ Tribunal Verification & Guardrails
 
-### 3. Responsive Flex Grid
+**Active Reviewers:** `frontend-reviewer` · `type-safety` · `ui-ux-auditor` · `complexity-reviewer`
+**Slash Command:** `/review` or `/tribunal-full`
 
-```css
-.logo-trust-row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  gap: 2rem 3.5rem; /* Row gap 2rem, Column gap 3.5rem */
-}
-```
+### 🔬 Evidence Standard (Tri-State Verification)
+Every finding, audit statement, or completion claim must classify its factual certainty:
+- **`[OBSERVED]`**: Directly confirmed in the codebase or verified via executed terminal command.
+- **`[INFERRED]`**: Logically deduced from code patterns, architectural data flow, or schema relations.
+- **`[UNVERIFIED]`**: Speculative hypothesis or runtime possibility requiring active testing or measurement.
 
-### 4. Seamless Ticker Marquee (Optional)
+### ✅ Pre-Flight Self-Audit Checklist
+```
+✅ Are all component props strictly typed with zero implicit "any"?
+✅ Are responsive breakpoints, fluid typography, and optical balance verified?
+✅ Is accessibility (ARIA labels, keyboard navigation, contrast ratio >= 4.5:1) validated?
+✅ Are re-renders minimized and state lifecycles cleanly separated?
+✅ Did I verify all imported UI components and icon sets actually exist?
+```
 
-- For 8+ logos, use a hardware-accelerated CSS marquee animation with duplicate items for seamless continuous looping and `animation-play-state: paused` on hover.
+### 🛑 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 test suites, compiler success, or equivalent operational proof) that your output works as intended.