tribunal-kit 9.2.4 → 9.2.6

package/.agents/skills/expo-router-v4/SKILL.md

@@ -1,8 +1,8 @@
 ---
 name: expo-router-v4
-description: "Use when React Native 0.76+ New Architecture (Fabric/TurboModules), Expo Router v4 typed file-based navigation, native haptics, and biometrics."
-version: 5.0.0
-last-updated: 2026-09-13
+description: "Use when building, optimizing, and securing expo router v4 mobile interfaces, native bridges, touch gestures, and offline states."
+version: 6.0.0
+last-updated: 2026-09-29
 skills:
   - mobile-developer
   - mobile-design
@@ -15,58 +15,130 @@ scripts-binding:
 
 # Expo Router v4 & React Native New Architecture
 
----
+## Mandatory Pre-Flight Context Inspection
+Before reading, generating, or refactoring code in the `expo-router-v4` 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, optimizing, and securing expo router v4 mobile interfaces, native bridges, touch gestures, and offline states.
+- **DO NOT activate when:** The task falls outside the `expo-router-v4` domain or is managed by a different dedicated specialist agent.
+
+
+## 🔁 Multi-Pass Execution Protocol
 
-## 🛠️ Technical Architecture & Reference Recipes
-
-## Layout Navigation Architecture (`app/_layout.tsx`)
-
-```tsx
-import { Stack } from 'expo-router';
-import { StatusBar } from 'expo-status-bar';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
-
-export default function RootLayout() {
-  return (
-    <SafeAreaProvider>
-      <StatusBar style="light" />
-      <Stack
-        screenOptions={{
-          headerStyle: { backgroundColor: '#0f172a' },
-          headerTintColor: '#f8fafc',
-          animation: 'slide_from_right',
-        }}
-      >
-        <Stack.Screen name="index" options={{ title: 'Feed' }} />
-        <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
-      </Stack>
-    </SafeAreaProvider>
-  );
-}
+| 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
+
+## Layout Navigation Architecture (`app/_layout.tsx`)
+
+```tsx
+import { Stack } from 'expo-router';
+import { StatusBar } from 'expo-status-bar';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+
+export default function RootLayout() {
+  return (
+    <SafeAreaProvider>
+      <StatusBar style="light" />
+      <Stack
+        screenOptions={{
+          headerStyle: { backgroundColor: '#0f172a' },
+          headerTintColor: '#f8fafc',
+          animation: 'slide_from_right',
+        }}
+      >
+        <Stack.Screen name="index" options={{ title: 'Feed' }} />
+        <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
+      </Stack>
+    </SafeAreaProvider>
+  );
+}
+```
+
+## Native Haptic Touch Button Component
+
+```tsx
+import * as Haptics from 'expo-haptics';
+import { Pressable, Text, PressableProps } from 'react-native';
+
+interface TouchButtonProps extends PressableProps {
+  label: string;
+}
+
+export function TouchButton({ label, onPress, ...props }: TouchButtonProps) {
+  return (
+    <Pressable
+      {...props}
+      onPress={e => {
+        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+        onPress?.(e);
+      }}
+      className="px-5 py-3 bg-indigo-600 rounded-xl active:scale-95 transition-transform"
+    >
+      <Text className="text-white font-medium text-center">{label}</Text>
+    </Pressable>
+  );
+}
 ```
 
-## Native Haptic Touch Button Component
-
-```tsx
-import * as Haptics from 'expo-haptics';
-import { Pressable, Text, PressableProps } from 'react-native';
-
-interface TouchButtonProps extends PressableProps {
-  label: string;
-}
-
-export function TouchButton({ label, onPress, ...props }: TouchButtonProps) {
-  return (
-    <Pressable
-      {...props}
-      onPress={e => {
-        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-        onPress?.(e);
-      }}
-      className="px-5 py-3 bg-indigo-600 rounded-xl active:scale-95 transition-transform"
-    >
-      <Text className="text-white font-medium text-center">{label}</Text>
-    </Pressable>
-  );
-}
+## 🚨 Edge-Case & Failure Mode Matrix
+
+| 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 |
+
+
+## 🤖 LLM-Specific Traps Table
+
+| Anti-Pattern | What AI Commonly Does Wrong | What Is Actually Correct |
+|:---|:---|:---|
+| **JS Thread Animation Lag** | Driving gestures and scrolling physics on the React Native JS thread | Use React Native Reanimated worklets running directly on the UI thread |
+| **Missing Keyboard Offset** | Forms hidden behind native software keyboard on iOS/Android | Wrap form views in KeyboardAvoidingView with platform-calibrated behavior |
+| **Uncached Image Flooding** | Rendering raw image URLs in list items without memory caching | Use FastImage or Expo Image with disk cache policies and thumbnail previews |
+
+
+## 🏛️ Tribunal Verification & Guardrails
+
+**Active Reviewers:** `mobile-reviewer` · `frontend-reviewer` · `type-safety`
+**Slash Command:** `/review` or `/tribunal-full`
+
+### 🔬 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
 ```
+✅ Do touch targets satisfy the 44x44px minimum touch boundary standard?
+✅ Are gesture handlers and native animations offloaded via Reanimated worklets on the UI thread?
+✅ Are keyboard avoiding views, safe areas, and notch offsets handled?
+✅ Is offline storage and state hydration handled with optimistic sync?
+✅ Did I verify compatibility across iOS, Android, and varying screen densities?
+```
+
+### 🛑 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/extract-design-system/SKILL.md

@@ -1,8 +1,8 @@
 ---
 name: extract-design-system
-description: "Use when Design system extraction and tokenization mastery. Identifying repeated HTML/CSS patterns, extracting CSS variables, generating design tokens (colors, spacing, typography), building reusable component schemas, and standardizing ad-hoc styles into cohesive global systems. Use when refactoring messy CSS into a unified design system."
-version: 5.0.0
-last-updated: 2026-09-13
+description: "Use when building, styling, optimizing, and auditing extract design system components, responsive layouts, design systems, and frontend state."
+version: 6.0.0
+last-updated: 2026-09-29
 skills:
   - create-design-md
   - tailwind-patterns
@@ -15,106 +15,164 @@ scripts-binding:
 
 # Extract Design System — Tokenization Mastery
 
----
+## Mandatory Pre-Flight Context Inspection
+Before reading, generating, or refactoring code in the `extract-design-system` 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 building, styling, optimizing, and auditing extract design system components, responsive layouts, design systems, and frontend state.
+- **DO NOT activate when:** The task falls outside the `extract-design-system` domain or is managed by a different dedicated specialist agent.
 
-## Hallucination Traps (Read First)
 
-- ❌ Creating CSS variables for every possible value -> ✅ Only tokenize values that appear 3+ times across components
-- ❌ Extracting a design system before the UI is stable -> ✅ Wait until patterns are proven by real usage before standardizing
-- ❌ Naming tokens by appearance (`--blue-500`) instead of purpose (`--color-primary`) -> ✅ Semantic names survive theme changes
-
----
+## 🔁 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 |
 
-## 1. The Token Extraction Protocol
 
-When reviewing a messy, legacy UI file (`<div style="background: #e23e2a; border-radius: 6px; padding: 12px">`), the agent must extract these hardcoded values into Global Tokens.
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
 
-### Tier 1: Core Design Tokens (The Foundation)
+## Hallucination Traps (Read First)
+
+- ❌ Creating CSS variables for every possible value -> ✅ Only tokenize values that appear 3+ times across components
+- ❌ Extracting a design system before the UI is stable -> ✅ Wait until patterns are proven by real usage before standardizing
+- ❌ Naming tokens by appearance (`--blue-500`) instead of purpose (`--color-primary`) -> ✅ Semantic names survive theme changes
+
+---
+## 1. The Token Extraction Protocol
+
+When reviewing a messy, legacy UI file (`<div style="background: #e23e2a; border-radius: 6px; padding: 12px">`), the agent must extract these hardcoded values into Global Tokens.
+
+### Tier 1: Core Design Tokens (The Foundation)
+
+Tokens should be semantic, not literal. `color-brand` > `color-red`.
+
+```css
+:root {
+  /* Colors (HSL is preferred for programmatic manipulation) */
+  --brand-primary: 360, 76%, 53%; /* The specific red */
+  --surface-default: 0, 0%, 100%;
+  --surface-muted: 210, 40%, 96%;
+
+  /* Typography */
+  --font-sans: 'Inter', system-ui, sans-serif;
+
+  /* Space / Geometry (8px grid scale) */
+  --space-1: 0.25rem; /* 4px */
+  --space-2: 0.5rem; /* 8px */
+  --space-3: 0.75rem; /* 12px */
+  --space-4: 1rem; /* 16px */
+
+  /* Radaii */
+  --radius-sm: 4px;
+  --radius-md: 6px; /* Extracted from the 6px legacy element */
+}
+```
+
+### Tier 2: The Refactor
+
+(Using Tailwind v4 CSS-First as the standard delivery mechanism)
+
+```css
+@theme {
+  --color-primary: hsl(var(--brand-primary));
+  --spacing-3: var(--space-3);
+  --radius-md: var(--radius-md);
+}
+```
+
+---
+
+## 2. Standardizing the 3 "C" Configurations
+
+If building a design system inside React/Next.js, standardize the system through 3 primary mechanisms.
+
+1. **Colors (Dark Mode First):** Every single color extracted must have an inverse defined for `[data-theme='dark']`.
+2. **Container Queries:** Media queries (`@media (min-width)`) define the _device_. Container queries (`@container (min-width)`) define the _component context_. Always extract component sizing to rely on container-driven layouts for ultimate reusability.
+3. **Compound Variants (CVA):** Group extracted CSS classes into logical component states rather than passing 10 boolean props.
+
+```typescript
+// ✅ Efficient Extracted Component Architecture
+import { cva } from 'class-variance-authority';
+
+const buttonStyles = cva(
+  'inline-flex items-center justify-center rounded-md font-medium transition-colors', // Base
+  {
+    variants: {
+      intent: {
+        primary: 'bg-primary text-white hover:bg-primary/90',
+        destructive: 'bg-red-500 text-white hover:bg-red-600',
+        outline: 'border border-input hover:bg-accent',
+      },
+      size: {
+        sm: 'h-9 px-3 text-sm',
+        default: 'h-10 px-4 py-2', // Extracted standard size
+        lg: 'h-11 px-8',
+      },
+    },
+    defaultVariants: {
+      intent: 'primary',
+      size: 'default',
+    },
+  },
+);
+```
+
+---
+
+## 3. Auditing the Accessibility Baseline
+
+A Design System must mandate accessibility at the token level, preventing developers from manually breaking contrast ratios later.
+
+1. Extracted primary text colors must hit a **4.5:1 contrast ratio** against the extracted background surfaces.
+2. Focus rings must be decoupled and standardized globally (`ring-2 ring-primary ring-offset-2`).
 
-Tokens should be semantic, not literal. `color-brand` > `color-red`.
+## 🚨 Edge-Case & Failure Mode Matrix
 
-```css
-:root {
-  /* Colors (HSL is preferred for programmatic manipulation) */
-  --brand-primary: 360, 76%, 53%; /* The specific red */
-  --surface-default: 0, 0%, 100%;
-  --surface-muted: 210, 40%, 96%;
+| 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 |
 
-  /* Typography */
-  --font-sans: 'Inter', system-ui, sans-serif;
 
-  /* Space / Geometry (8px grid scale) */
-  --space-1: 0.25rem; /* 4px */
-  --space-2: 0.5rem; /* 8px */
-  --space-3: 0.75rem; /* 12px */
-  --space-4: 1rem; /* 16px */
+## 🏛️ Tribunal Verification & Guardrails
 
-  /* Radaii */
-  --radius-sm: 4px;
-  --radius-md: 6px; /* Extracted from the 6px legacy element */
-}
-```
+**Active Reviewers:** `frontend-reviewer` · `type-safety` · `ui-ux-auditor` · `complexity-reviewer`
+**Slash Command:** `/review` or `/tribunal-full`
 
-### Tier 2: The Refactor
+### 🔬 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.
 
-(Using Tailwind v4 CSS-First as the standard delivery mechanism)
-
-```css
-@theme {
-  --color-primary: hsl(var(--brand-primary));
-  --spacing-3: var(--space-3);
-  --radius-md: var(--radius-md);
-}
+### ✅ Pre-Flight Self-Audit Checklist
 ```
-
----
-
-## 2. Standardizing the 3 "C" Configurations
-
-If building a design system inside React/Next.js, standardize the system through 3 primary mechanisms.
-
-1. **Colors (Dark Mode First):** Every single color extracted must have an inverse defined for `[data-theme='dark']`.
-2. **Container Queries:** Media queries (`@media (min-width)`) define the _device_. Container queries (`@container (min-width)`) define the _component context_. Always extract component sizing to rely on container-driven layouts for ultimate reusability.
-3. **Compound Variants (CVA):** Group extracted CSS classes into logical component states rather than passing 10 boolean props.
-
-```typescript
-// ✅ Efficient Extracted Component Architecture
-import { cva } from 'class-variance-authority';
-
-const buttonStyles = cva(
-  'inline-flex items-center justify-center rounded-md font-medium transition-colors', // Base
-  {
-    variants: {
-      intent: {
-        primary: 'bg-primary text-white hover:bg-primary/90',
-        destructive: 'bg-red-500 text-white hover:bg-red-600',
-        outline: 'border border-input hover:bg-accent',
-      },
-      size: {
-        sm: 'h-9 px-3 text-sm',
-        default: 'h-10 px-4 py-2', // Extracted standard size
-        lg: 'h-11 px-8',
-      },
-    },
-    defaultVariants: {
-      intent: 'primary',
-      size: 'default',
-    },
-  },
-);
+✅ 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?
 ```
 
----
-
-## 3. Auditing the Accessibility Baseline
-
-A Design System must mandate accessibility at the token level, preventing developers from manually breaking contrast ratios later.
-
-1. Extracted primary text colors must hit a **4.5:1 contrast ratio** against the extracted background surfaces.
-2. Focus rings must be decoupled and standardized globally (`ring-2 ring-primary ring-offset-2`).
+### 🛑 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.