tribunal-kit 9.2.4 → 9.2.6

package/.agent/skills/app-builder/templates/react-native-app/TEMPLATE.md

@@ -1,122 +1,122 @@
----
-name: react-native-app
-description: React Native mobile app template principles. Expo, TypeScript, navigation.
----
-
-# React Native App Template (2026 Edition)
-
-Modern mobile app template, optimized for New Architecture and React 19.
-
-## Tech Stack
-
-| Component  | Technology            | Version / Notes                        |
-| ---------- | --------------------- | -------------------------------------- |
-| Core       | React Native + Expo   | SDK 52+ (New Architecture Enabled)     |
-| Language   | TypeScript            | v5+ (Strict Mode)                      |
-| UI Logic   | React                 | v19 (React Compiler, auto-memoization) |
-| Navigation | Expo Router           | v4+ (File-based, Universal Links)      |
-| Styling    | NativeWind            | v4.0 (Tailwind v4, CSS-first config)   |
-| State      | Zustand + React Query | v5+ (Async State Management)           |
-| Storage    | Expo SecureStore      | Encrypted local storage                |
-
----
-
-## Directory Structure
-
-Standardized structure for Expo Router and NativeWind v4.
-
-```
-project-name/
-├── app/                 # Expo Router (File-based routing)
-│   ├── _layout.tsx      # Root Layout (Stack/Tabs config)
-│   ├── index.tsx        # Main Screen
-│   ├── (tabs)/          # Route Group for Tab Bar
-│   │   ├── _layout.tsx
-│   │   ├── home.tsx
-│   │   └── profile.tsx
-│   ├── +not-found.tsx   # 404 Page
-│   └── [id].tsx         # Dynamic Route (Typed)
-├── components/
-│   ├── ui/              # Primitive Components (Button, Text)
-│   └── features/        # Complex Components
-├── hooks/               # Custom Hooks
-├── lib/
-│   ├── api.ts           # Axios/Fetch client
-│   └── storage.ts       # SecureStore wrapper
-├── store/               # Zustand stores
-├── constants/           # Colors, Theme config
-├── assets/              # Fonts, Images
-├── global.css           # Entry point for NativeWind v4
-├── tailwind.config.ts   # Tailwind Config (if custom theme needed)
-├── babel.config.js      # NativeWind Babel Plugin
-└── app.json             # Expo Config
-```
-
----
-
-## Navigation Patterns (Expo Router)
-
-| Pattern | Description                        | Implement                               |
-| ------- | ---------------------------------- | --------------------------------------- |
-| Stack   | Hierarchical navigation (Push/Pop) | `<Stack />` in `_layout.tsx`            |
-| Tabs    | Bottom navigation bar              | `<Tabs />` in `(tabs)/_layout.tsx`      |
-| Drawer  | Side slide-out menu                | `expo-router/drawer`                    |
-| Modals  | Overlay screens                    | `presentation: 'modal'` in Stack screen |
-
----
-
-## Key Packages & Purpose
-
-| Package                 | Purpose                                        |
-| ----------------------- | ---------------------------------------------- |
-| expo-router             | File-based routing (Next.js like)              |
-| nativewind              | Use Tailwind CSS classes in React Native       |
-| react-native-reanimated | Smooth animations (runs on UI thread)          |
-| @tanstack/react-query   | Server state management, caching, pre-fetching |
-| zustand                 | Global state management (lighter than Redux)   |
-| expo-image              | Optimized image rendering for performance      |
-
----
-
-## Setup Steps (2026 Standard)
-
-1. Initialize Project:
-
-   ```bash
-   npx create-expo-app@latest my-app --template default
-   cd my-app
-   ```
-
-2. Install Core Dependencies:
-
-   ```bash
-   npx expo install expo-router react-native-safe-area-context react-native-screens expo-link expo-constants expo-status-bar
-   ```
-
-3. Install NativeWind v4:
-
-   ```bash
-   npm install nativewind tailwindcss react-native-reanimated
-   ```
-
-4. Configure NativeWind (Babel & CSS):
-   - Add plugin to `babel.config.js`: `plugins: ["nativewind/babel"]`.
-   - Create `global.css` with: `@import "tailwindcss";`.
-   - Import `global.css` in `app/_layout.tsx`.
-
-5. Run Project:
-   ```bash
-   npx expo start -c
-   # Press 'i' for iOS simulator or 'a' for Android emulator
-   ```
-
----
-
-## Best Practices (Updated)
-
-- **New Architecture**: Ensure `newArchEnabled: true` in `app.json` to leverage TurboModules and Fabric Renderer.
-- **Typed Routes**: Use Expo Router's "Typed Routes" feature for type-safe routing (e.g., `router.push('/path')`).
-- **React 19**: Reduce usage of `useMemo` or `useCallback` thanks to React Compiler (if enabled).
-- **Components**: Build UI primitives (Box, Text) with NativeWind className for reusability.
-- **Assets**: Use `expo-image` instead of default `<Image />` for better caching and performance.
-- **API**: Always wrap API calls with TanStack Query, avoid direct calls in `useEffect`.
+---
+name: react-native-app
+description: React Native mobile app template principles. Expo, TypeScript, navigation.
+---
+
+# React Native App Template (2026 Edition)
+
+Modern mobile app template, optimized for New Architecture and React 19.
+
+## Tech Stack
+
+| Component  | Technology            | Version / Notes                        |
+| ---------- | --------------------- | -------------------------------------- |
+| Core       | React Native + Expo   | SDK 52+ (New Architecture Enabled)     |
+| Language   | TypeScript            | v5+ (Strict Mode)                      |
+| UI Logic   | React                 | v19 (React Compiler, auto-memoization) |
+| Navigation | Expo Router           | v4+ (File-based, Universal Links)      |
+| Styling    | NativeWind            | v4.0 (Tailwind v4, CSS-first config)   |
+| State      | Zustand + React Query | v5+ (Async State Management)           |
+| Storage    | Expo SecureStore      | Encrypted local storage                |
+
+---
+
+## Directory Structure
+
+Standardized structure for Expo Router and NativeWind v4.
+
+```
+project-name/
+├── app/                 # Expo Router (File-based routing)
+│   ├── _layout.tsx      # Root Layout (Stack/Tabs config)
+│   ├── index.tsx        # Main Screen
+│   ├── (tabs)/          # Route Group for Tab Bar
+│   │   ├── _layout.tsx
+│   │   ├── home.tsx
+│   │   └── profile.tsx
+│   ├── +not-found.tsx   # 404 Page
+│   └── [id].tsx         # Dynamic Route (Typed)
+├── components/
+│   ├── ui/              # Primitive Components (Button, Text)
+│   └── features/        # Complex Components
+├── hooks/               # Custom Hooks
+├── lib/
+│   ├── api.ts           # Axios/Fetch client
+│   └── storage.ts       # SecureStore wrapper
+├── store/               # Zustand stores
+├── constants/           # Colors, Theme config
+├── assets/              # Fonts, Images
+├── global.css           # Entry point for NativeWind v4
+├── tailwind.config.ts   # Tailwind Config (if custom theme needed)
+├── babel.config.js      # NativeWind Babel Plugin
+└── app.json             # Expo Config
+```
+
+---
+
+## Navigation Patterns (Expo Router)
+
+| Pattern | Description                        | Implement                               |
+| ------- | ---------------------------------- | --------------------------------------- |
+| Stack   | Hierarchical navigation (Push/Pop) | `<Stack />` in `_layout.tsx`            |
+| Tabs    | Bottom navigation bar              | `<Tabs />` in `(tabs)/_layout.tsx`      |
+| Drawer  | Side slide-out menu                | `expo-router/drawer`                    |
+| Modals  | Overlay screens                    | `presentation: 'modal'` in Stack screen |
+
+---
+
+## Key Packages & Purpose
+
+| Package                 | Purpose                                        |
+| ----------------------- | ---------------------------------------------- |
+| expo-router             | File-based routing (Next.js like)              |
+| nativewind              | Use Tailwind CSS classes in React Native       |
+| react-native-reanimated | Smooth animations (runs on UI thread)          |
+| @tanstack/react-query   | Server state management, caching, pre-fetching |
+| zustand                 | Global state management (lighter than Redux)   |
+| expo-image              | Optimized image rendering for performance      |
+
+---
+
+## Setup Steps (2026 Standard)
+
+1. Initialize Project:
+
+   ```bash
+   npx create-expo-app@latest my-app --template default
+   cd my-app
+   ```
+
+2. Install Core Dependencies:
+
+   ```bash
+   npx expo install expo-router react-native-safe-area-context react-native-screens expo-link expo-constants expo-status-bar
+   ```
+
+3. Install NativeWind v4:
+
+   ```bash
+   npm install nativewind tailwindcss react-native-reanimated
+   ```
+
+4. Configure NativeWind (Babel & CSS):
+   - Add plugin to `babel.config.js`: `plugins: ["nativewind/babel"]`.
+   - Create `global.css` with: `@import "tailwindcss";`.
+   - Import `global.css` in `app/_layout.tsx`.
+
+5. Run Project:
+   ```bash
+   npx expo start -c
+   # Press 'i' for iOS simulator or 'a' for Android emulator
+   ```
+
+---
+
+## Best Practices (Updated)
+
+- **New Architecture**: Ensure `newArchEnabled: true` in `app.json` to leverage TurboModules and Fabric Renderer.
+- **Typed Routes**: Use Expo Router's "Typed Routes" feature for type-safe routing (e.g., `router.push('/path')`).
+- **React 19**: Reduce usage of `useMemo` or `useCallback` thanks to React Compiler (if enabled).
+- **Components**: Build UI primitives (Box, Text) with NativeWind className for reusability.
+- **Assets**: Use `expo-image` instead of default `<Image />` for better caching and performance.
+- **API**: Always wrap API calls with TanStack Query, avoid direct calls in `useEffect`.

package/.agent/skills/appflow-wireframe/SKILL.md

@@ -1,8 +1,8 @@
 ---
 name: appflow-wireframe
-description: "Use when Application flow and wireframing mastery. Mermaid.js flowcharting, state diagrams, user journey mapping, interaction matrices, explicit screen boundary demarcation, and accessibility flow modeling. Use when planning UI architectures, designing user onboarding flows, or visualizing complex state machines before writing code."
-version: 5.0.0
-last-updated: 2026-09-13
+description: "Use when building, styling, optimizing, and auditing appflow wireframe components, responsive layouts, design systems, and frontend state."
+version: 6.0.0
+last-updated: 2026-09-29
 tools: Read, Grep, Glob, Bash, Edit, Write
 scripts-binding:
   - .agent/scripts/lint_runner.js
@@ -11,86 +11,146 @@ scripts-binding:
 
 # Appflow & Wireframing — Visualization Mastery
 
----
+## Mandatory Pre-Flight Context Inspection
+Before reading, generating, or refactoring code in the `appflow-wireframe` 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
 
-## Hallucination Traps (Read First)
+## Activation Boundaries
+- **Activate when:** Use when building, styling, optimizing, and auditing appflow wireframe components, responsive layouts, design systems, and frontend state.
+- **DO NOT activate when:** The task falls outside the `appflow-wireframe` domain or is managed by a different dedicated specialist agent.
 
----
 
----
+## 🔁 Multi-Pass Execution Protocol
 
-## 1. The Mermaid Appflow 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 |
 
-When asked to "design the flow", do not write prose. Write deterministic Mermaid diagrams that map state interactions.
 
-### Example: E-Commerce Checkout Flow
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+## Hallucination Traps (Read First)
+
+---
+## 1. The Mermaid Appflow Protocol
+
+When asked to "design the flow", do not write prose. Write deterministic Mermaid diagrams that map state interactions.
+
+### Example: E-Commerce Checkout Flow
+
+```mermaid
+stateDiagram-v2
+    [*] --> CartView
+
+    state CartView {
+        [*] --> Empty: Load
+        Empty --> Populated: Add Item
+    }
+
+    CartView --> CheckoutModal: Click Checkout
+
+    state CheckoutModal {
+        [*] --> AuthCheck
+        AuthCheck --> GuestCheckout: Not Logged In
+        AuthCheck --> ProfilePreFill: Logged In
+
+        GuestCheckout --> PaymentProcessing: Submit
+        ProfilePreFill --> PaymentProcessing: Submit
+    }
+
+    PaymentProcessing --> Success: Stripe 200 OK
+    PaymentProcessing --> CheckoutModal: Stripe 402 Error (Retry)
+
+    Success --> [*]: Redirect Dashboard
+```
+
+---
+
+## 2. Low-Fidelity Wireframe Notation
+
+When asked to define the UI layout conceptually before building Shadcn/Tailwind components, use structural ASCII/Markdown notation to establish layout boundaries.
+
+```text
+[ HEADER: Logo (Left) | Search Bar (Center, expanding) | User Avatar (Right) ]
+-------------------------------------------------------------------------
+[ SIDEBAR (Sticky, W-64) ] |  [ HERO SECTION: H1 Hook | CTA Button Primary ]
+- Dashboard                |  [ .......................................... ]
+- Analytics                |  [ FEATURE GRID (CSS Grid columns-3)        ]
+- Settings                 |  [ [Card 1]     [Card 2]      [Card 3]      ]
+[........................] |  [..........................................]
+```
+
+**Why do this?**
+Because moving an ASCII box takes 3 seconds. Rewriting 4 nested div flexbox tails takes 5 minutes. Secure the approval on the wireframe before touching code.
+
+---
+
+## 3. The Empty State / Loading State Mandate
+
+When mapping application flows, AI frequently charts the "Happy Path" (User logs in -> User sees 10 items).
+
+Every single screen designed in an App Flow MUST explicitly define:
+
+1. **The Loading State:** What does the user see while the network executes? (Skeleton loaders vs Spinners).
+2. **The Empty State:** What does the UI look like on Day 1 when the user has zero data? (An empty white screen is an instant bounce-rate death sentence; use an Empty State CTA).
+
+---
+
+## 4. Interaction Matrices (Event Mapping)
+
+Before writing React, chart exactly what the user can do on the screen and what the system does in response.
+
+| Interaction         | Trigger                | System Response Hook         | Edge Case                      |
+| :------------------ | :--------------------- | :--------------------------- | :----------------------------- |
+| Click `Add to Cart` | `onClick`              | Dispatch `Zustand.add(item)` | If out of stock, render Toast  |
+| Scroll to Bottom    | `IntersectionObserver` | `fetchNextPage()`            | Reached max items, show footer |
+| Click outside Modal | `useClickAway`         | `setIsOpen(false)`           | Prevent close if form is dirty |
 
-```mermaid
-stateDiagram-v2
-    [*] --> CartView
+## 🚨 Edge-Case & Failure Mode Matrix
 
-    state CartView {
-        [*] --> Empty: Load
-        Empty --> Populated: Add Item
-    }
+| 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 |
 
-    CartView --> CheckoutModal: Click Checkout
 
-    state CheckoutModal {
-        [*] --> AuthCheck
-        AuthCheck --> GuestCheckout: Not Logged In
-        AuthCheck --> ProfilePreFill: Logged In
+## 🏛️ Tribunal Verification & Guardrails
 
-        GuestCheckout --> PaymentProcessing: Submit
-        ProfilePreFill --> PaymentProcessing: Submit
-    }
+**Active Reviewers:** `frontend-reviewer` · `type-safety` · `ui-ux-auditor` · `complexity-reviewer`
+**Slash Command:** `/review` or `/tribunal-full`
 
-    PaymentProcessing --> Success: Stripe 200 OK
-    PaymentProcessing --> CheckoutModal: Stripe 402 Error (Retry)
+### 🔬 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 --> [*]: Redirect Dashboard
+### ✅ Pre-Flight Self-Audit Checklist
 ```
-
----
-
-## 2. Low-Fidelity Wireframe Notation
-
-When asked to define the UI layout conceptually before building Shadcn/Tailwind components, use structural ASCII/Markdown notation to establish layout boundaries.
-
-```text
-[ HEADER: Logo (Left) | Search Bar (Center, expanding) | User Avatar (Right) ]
--------------------------------------------------------------------------
-[ SIDEBAR (Sticky, W-64) ] |  [ HERO SECTION: H1 Hook | CTA Button Primary ]
-- Dashboard                |  [ .......................................... ]
-- Analytics                |  [ FEATURE GRID (CSS Grid columns-3)        ]
-- Settings                 |  [ [Card 1]     [Card 2]      [Card 3]      ]
-[........................] |  [..........................................]
+✅ 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?
 ```
 
-**Why do this?**
-Because moving an ASCII box takes 3 seconds. Rewriting 4 nested div flexbox tails takes 5 minutes. Secure the approval on the wireframe before touching code.
-
----
-
-## 3. The Empty State / Loading State Mandate
-
-When mapping application flows, AI frequently charts the "Happy Path" (User logs in -> User sees 10 items).
-
-Every single screen designed in an App Flow MUST explicitly define:
-
-1. **The Loading State:** What does the user see while the network executes? (Skeleton loaders vs Spinners).
-2. **The Empty State:** What does the UI look like on Day 1 when the user has zero data? (An empty white screen is an instant bounce-rate death sentence; use an Empty State CTA).
-
----
-
-## 4. Interaction Matrices (Event Mapping)
-
-Before writing React, chart exactly what the user can do on the screen and what the system does in response.
-
-| Interaction         | Trigger                | System Response Hook         | Edge Case                      |
-| :------------------ | :--------------------- | :--------------------------- | :----------------------------- |
-| Click `Add to Cart` | `onClick`              | Dispatch `Zustand.add(item)` | If out of stock, render Toast  |
-| Scroll to Bottom    | `IntersectionObserver` | `fetchNextPage()`            | Reached max items, show footer |
-| Click outside Modal | `useClickAway`         | `setIsOpen(false)`           | Prevent close if form is dirty |
+### 🛑 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.