tribunal-kit 2.4.6 → 3.1.0

package/.agent/skills/app-builder/templates/nextjs-static/TEMPLATE.md

@@ -7,15 +7,15 @@ description: Modern template for Next.js 16, React 19 & Tailwind v4. Optimized f
 
 ## Tech Stack
 
-| Component | Technology | Notes |
+|Component|Technology|Notes|
 |-----------|------------|-------|
-| Framework | Next.js 16+ | App Router, Turbopack, Static Exports |
-| Core | React 19 | Server Components, New Hooks, Compiler |
-| Language | TypeScript | Strict Mode |
-| Styling | Tailwind CSS v4 | CSS-first configuration (No js config), Oxide Engine |
-| Animations | Framer Motion | Layout animations & gestures |
-| Icons | Lucide React | Lightweight SVG icons |
-| SEO | Metadata API | Native Next.js API (Replaces next-seo) |
+|Framework|Next.js 16+|App Router, Turbopack, Static Exports|
+|Core|React 19|Server Components, New Hooks, Compiler|
+|Language|TypeScript|Strict Mode|
+|Styling|Tailwind CSS v4|CSS-first configuration (No js config), Oxide Engine|
+|Animations|Framer Motion|Layout animations & gestures|
+|Icons|Lucide React|Lightweight SVG icons|
+|SEO|Metadata API|Native Next.js API (Replaces next-seo)|
 
 ---
 
@@ -95,26 +95,26 @@ export const metadata: Metadata = {
 
 ## Landing Page Sections
 
-| Section | Purpose | Suggested Component |
+|Section|Purpose|Suggested Component|
 |---------|---------|---------------------|
-| Hero | First impression, H1 & Main CTA | `<HeroSection />` |
-| Features | Product benefits (Grid/Bento layout) | `<FeaturesGrid />` |
-| Social Proof | Partner logos, User numbers | `<LogoCloud />` |
-| Testimonials | Customer reviews | `<TestimonialCarousel />` |
-| Pricing | Service plans | `<PricingCards />` |
-| FAQ | Questions & Answers (Good for SEO) | `<Accordion />` |
-| CTA | Final conversion | `<CallToAction />` |
+|Hero|First impression, H1 & Main CTA|`<HeroSection />`|
+|Features|Product benefits (Grid/Bento layout)|`<FeaturesGrid />`|
+|Social Proof|Partner logos, User numbers|`<LogoCloud />`|
+|Testimonials|Customer reviews|`<TestimonialCarousel />`|
+|Pricing|Service plans|`<PricingCards />`|
+|FAQ|Questions & Answers (Good for SEO)|`<Accordion />`|
+|CTA|Final conversion|`<CallToAction />`|
 
 ---
 
 ## Animation Patterns (Framer Motion)
 
-| Pattern | Usage | Implementation |
+|Pattern|Usage|Implementation|
 |---------|-------|----------------|
-| Fade Up | Headlines, paragraphs | `initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}` |
-| Stagger | Lists of Features/Cards | Use variants with `staggerChildren` |
-| Parallax | Background images or floating elements | `useScroll` & `useTransform` |
-| Micro-interactions | Hover buttons, click effects | `whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}` |
+|Fade Up|Headlines, paragraphs|`initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}`|
+|Stagger|Lists of Features/Cards|Use variants with `staggerChildren`|
+|Parallax|Background images or floating elements|`useScroll` & `useTransform`|
+|Micro-interactions|Hover buttons, click effects|`whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}`|
 
 ---
 
@@ -152,12 +152,12 @@ export const metadata: Metadata = {
 
 ## Deployment
 
-| Platform | Method | Important Notes |
+|Platform|Method|Important Notes|
 |----------|--------|-----------------|
-| Vercel | Git Push | Auto-detects Next.js. Best for performance. |
-| GitHub Pages | GitHub Actions | Need to set `basePath` in `next.config.ts` if not using a custom domain. |
-| AWS S3 / CloudFront | Upload out folder | Ensure Error Document is configured to `404.html`. |
-| Netlify | Git Push | Set build command to `npm run build`. |
+|Vercel|Git Push|Auto-detects Next.js. Best for performance.|
+|GitHub Pages|GitHub Actions|Need to set `basePath` in `next.config.ts` if not using a custom domain.|
+|AWS S3 / CloudFront|Upload out folder|Ensure Error Document is configured to `404.html`.|
+|Netlify|Git Push|Set build command to `npm run build`.|
 
 ---
 

package/.agent/skills/app-builder/templates/nuxt-app/TEMPLATE.md

@@ -9,16 +9,16 @@ Mẫu template Full-Stack hiện đại cho Nuxt 4, tối ưu hóa hiệu suất
 
 ## Tech Stack
 
-| Component | Technology | Version / Notes |
+|Component|Technology|Version / Notes|
 |-----------|------------|-----------------|
-| Framework | Nuxt | v4.0+ (App Directory structure) |
-| UI Engine | Vue | v3.6+ (Vapor Mode enabled) |
-| Language | TypeScript | v5+ (Strict Mode) |
-| State | Pinia | v3+ (Store syntax) |
-| Database | PostgreSQL | Prisma ORM |
-| Styling | Tailwind CSS | v4.0 (Vite Plugin, Zero-config) |
-| UI Lib | Nuxt UI | v3 (Tailwind v4 native) |
-| Validation | Zod | Schema validation |
+|Framework|Nuxt|v4.0+ (App Directory structure)|
+|UI Engine|Vue|v3.6+ (Vapor Mode enabled)|
+|Language|TypeScript|v5+ (Strict Mode)|
+|State|Pinia|v3+ (Store syntax)|
+|Database|PostgreSQL|Prisma ORM|
+|Styling|Tailwind CSS|v4.0 (Vite Plugin, Zero-config)|
+|UI Lib|Nuxt UI|v3 (Tailwind v4 native)|
+|Validation|Zod|Schema validation|
 
 ---
 
@@ -53,23 +53,23 @@ project-name/
 
 ## Key Concepts (2026)
 
-| Concept | Description | Future Update |
+|Concept|Description|Future Update|
 |---------|-------------|---------------|
-| **App Directory** | `app/` | Tách biệt mã nguồn ứng dụng và file cấu hình root. |
-| **Vapor Mode** | Opt-in performance | Render không cần Virtual DOM (như SolidJS). Bật trong `nuxt.config`. |
-| **Server Functions** | RPC-style calls | Gọi hàm server trực tiếp từ client (thay thế dần API routes thủ công). |
-| **Tailwind v4** | CSS-first | Cấu hình theme trực tiếp trong CSS, không cần `tailwind.config.js`. |
-| **Nuxt Islands** | Server Components | Render component cô lập trên server (`<NuxtIsland name="..." />`). |
+|**App Directory**|`app/`|Tách biệt mã nguồn ứng dụng và file cấu hình root.|
+|**Vapor Mode**|Opt-in performance|Render không cần Virtual DOM (như SolidJS). Bật trong `nuxt.config`.|
+|**Server Functions**|RPC-style calls|Gọi hàm server trực tiếp từ client (thay thế dần API routes thủ công).|
+|**Tailwind v4**|CSS-first|Cấu hình theme trực tiếp trong CSS, không cần `tailwind.config.js`.|
+|**Nuxt Islands**|Server Components|Render component cô lập trên server (`<NuxtIsland name="..." />`).|
 
 ---
 
 ## Environment Variables
 
-| Variable | Purpose |
+|Variable|Purpose|
 |----------|---------|
-| DATABASE_URL | Prisma connection string (PostgreSQL) |
-| NUXT_PUBLIC_APP_URL | Canonical URL |
-| NUXT_SESSION_PASSWORD | Session encryption key |
+|DATABASE_URL|Prisma connection string (PostgreSQL)|
+|NUXT_PUBLIC_APP_URL|Canonical URL|
+|NUXT_SESSION_PASSWORD|Session encryption key|
 
 ---
 

package/.agent/skills/app-builder/templates/python-fastapi/TEMPLATE.md

@@ -7,14 +7,14 @@ description: FastAPI REST API template principles. SQLAlchemy, Pydantic, Alembic
 
 ## Tech Stack
 
-| Component | Technology |
+|Component|Technology|
 |-----------|------------|
-| Framework | FastAPI |
-| Language | Python 3.11+ |
-| ORM | SQLAlchemy 2.0 |
-| Validation | Pydantic v2 |
-| Migrations | Alembic |
-| Auth | JWT + passlib |
+|Framework|FastAPI|
+|Language|Python 3.11+|
+|ORM|SQLAlchemy 2.0|
+|Validation|Pydantic v2|
+|Migrations|Alembic|
+|Auth|JWT + passlib|
 
 ---
 
@@ -42,24 +42,24 @@ project-name/
 
 ## Key Concepts
 
-| Concept | Description |
+|Concept|Description|
 |---------|-------------|
-| Async | async/await throughout |
-| Dependency Injection | FastAPI Depends |
-| Pydantic v2 | Validation + serialization |
-| SQLAlchemy 2.0 | Async sessions |
+|Async|async/await throughout|
+|Dependency Injection|FastAPI Depends|
+|Pydantic v2|Validation + serialization|
+|SQLAlchemy 2.0|Async sessions|
 
 ---
 
 ## API Structure
 
-| Layer | Responsibility |
+|Layer|Responsibility|
 |-------|---------------|
-| Routers | HTTP handling |
-| Dependencies | Auth, validation |
-| Services | Business logic |
-| Models | Database entities |
-| Schemas | Request/response |
+|Routers|HTTP handling|
+|Dependencies|Auth, validation|
+|Services|Business logic|
+|Models|Database entities|
+|Schemas|Request/response|
 
 ---
 

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

@@ -9,15 +9,15 @@ Modern mobile app template, optimized for New Architecture and React 19.
 
 ## Tech Stack
 
-| Component | Technology | Version / Notes |
+|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 |
+|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|
 
 ---
 
@@ -56,25 +56,25 @@ project-name/
 
 ## Navigation Patterns (Expo Router)
 
-| Pattern | Description | Implement |
+|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 |
+|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 |
+|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 |
+|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|
 
 ---
 

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

@@ -1,114 +1,87 @@
----
-name: appflow-wireframe
-description: Skill for the planner agent to generate deterministic application flows (Mermaid) and structural UI wireframes (Pseudo-XML) prior to code execution.
----
-
-# Appflow & Wireframing Skill
-
-This skill empowers the planner agent to outline precise user journeys and screen layouts directly in `PLAN-{slug}.md` files. The output must be perfectly readable by humans and easily parsed by downstream code generation agents (like `frontend-specialist`).
-
-## Phase 1: App Flow Mapping (Mermaid.js)
-
-Before creating wireframes, you must map the logical user journey using a Mermaid.js flowchart. 
-
-### Rules for Flows:
-- Use `mermaid` blocks with `flowchart TD` (Top-to-Down) or `LR` (Left-to-Right).
-- Focus strictly on state transitions, conditional logic, auth barriers, and API boundaries.
-- Label all decision edges clearly.
-
-**Example:**
-```mermaid
-flowchart TD
-    Start([User visits /checkout]) --> Auth{Is Logged In?}
-    Auth -- No --> Redirect[Send to /login?return=/checkout]
-    Auth -- Yes --> Validate{Cart Not Empty?}
-    Validate -- No --> ShowEmpty[Render EmptyCart component]
-    Validate -- Yes --> ShowCheckout[Render CheckoutLayout]
-```
-
-## Phase 2: Semantic Wireframing (Pseudo-XML) & UI Accuracy
-
-For mapping UI elements, NEVER use vague bullet points or basic ASCII art. You must use the **Tribunal Structural XML** format. This enforces a component-thinking mindset and provides 1:1 structural intent for the frontend agent.
-
-### Rules for UI Accuracy & Tokens:
-To ensure the frontend agent translates the wireframe with pixel-perfect accuracy, you must use explicit spacing, typography, and layout generic tokens (based on a 4px grid) rather than vague words like "large" or "small".
-
-- Use PascalCase for components (`<Sidebar>`, `<DataGrid>`, `<MetricCard>`).
-- Define exact layout constraints: `layout="flex-col"`, `flex="1"`, `items="center"`, `justify="between"`.
-- Define spacing using standard numeric scales (1 = 4px): `p="4"`, `gap="2"`, `m="8"`.
-- Define typography explicit roles: `text="xs | sm | base | lg | xl | 2xl"`, `font="bold"`, `text-color="muted"`.
-- Define explicit widths/heights: `w="full"`, `max-w="7xl"`, `h="100vh"`.
-- Provide responsive breakpoints explicitly: `<Grid cols="1" md-cols="3">`.
-
-**Example:**
-```xml
-<Screen name="Checkout" layout="flex-row" max-w="7xl" mx="auto" p="4" md-p="8">
-  <MainColumn layout="flex-col" gap="8" flex="1">
-    <Section title="Shipping Details" text="xl" font="semibold">
-      <AddressForm fields="Name, Street, City, Zip" gap="4" />
-    </Section>
-    <Section title="Payment Method" text="xl" font="semibold">
-      <PaymentElement provider="Stripe" p="4" border="1" radius="md" />
-    </Section>
-  </MainColumn>
-
-  <SidebarColumn layout="sticky" w="full" md-w="96" p="6" bg="surface-variant" radius="lg">
-    <OrderSummary layout="flex-col" gap="4">
-      <CartList items="[CartContext]" />
-      <Divider />
-      <Subtotal layout="flex-row" justify="between" text="sm" text-color="muted" />
-      <Tax calculation="dynamic" layout="flex-row" justify="between" text="sm" text-color="muted" />
-      <Divider />
-      <Total layout="flex-row" justify="between" text="lg" font="bold" />
-      <Button action="submitCheckout" variant="primary" w="full" py="3" radius="md">Pay Now</Button>
-    </OrderSummary>
-  </SidebarColumn>
-</Screen>
-```
-
-## Execution Checklist for the Planner:
-- [ ] Has the logical flow been verified in the Mermaid graph?
-- [ ] Does every screen mentioned in the flow have a corresponding `<Screen>` XML wireframe?
-- [ ] Are the wireframe nodes purely structural (no hallucinated styles)?
+---
+name: appflow-wireframe
+description: 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.
+allowed-tools: Read, Write, Edit, Glob, Grep
+version: 2.0.0
+last-updated: 2026-04-02
+applies-to-model: gemini-2.5-pro, claude-3-7-sonnet
+---
 
+# Appflow & Wireframing — Visualization Mastery
 
 ---
 
-## 🤖 LLM-Specific Traps
+## 1. The Mermaid Appflow Protocol
 
-AI coding assistants often fall into specific bad habits when dealing with this domain. These are strictly forbidden:
+When asked to "design the flow", do not write prose. Write deterministic Mermaid diagrams that map state interactions.
 
-1. **Over-engineering:** Proposing complex abstractions or distributed systems when a simpler approach suffices.
-2. **Hallucinated Libraries/Methods:** Using non-existent methods or packages. Always `// VERIFY` or check `package.json` / `requirements.txt`.
-3. **Skipping Edge Cases:** Writing the "happy path" and ignoring error handling, timeouts, or data validation.
-4. **Context Amnesia:** Forgetting the user's constraints and offering generic advice instead of tailored solutions.
-5. **Silent Degradation:** Catching and suppressing errors without logging or re-raising.
+### 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
+```
 
 ---
 
-## 🏛️ Tribunal Integration (Anti-Hallucination)
+## 2. Low-Fidelity Wireframe Notation
 
-**Slash command: `/review` or `/tribunal-full`**
-**Active reviewers: `logic-reviewer` · `security-auditor`**
+When asked to define the UI layout conceptually before building Shadcn/Tailwind components, use structural ASCII/Markdown notation to establish layout boundaries.
 
-### ❌ Forbidden AI Tropes
+```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]      ]
+[........................] |  [..........................................]
+```
 
-1. **Blind Assumptions:** Never make an assumption without documenting it clearly with `// VERIFY: [reason]`.
-2. **Silent Degradation:** Catching and suppressing errors without logging or handling.
-3. **Context Amnesia:** Forgetting the user's constraints and offering generic advice instead of tailored solutions.
+**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.
 
-### ✅ Pre-Flight Self-Audit
+---
 
-Review these questions before confirming output:
-```
-✅ Did I rely ONLY on real, verified tools and methods?
-✅ Is this solution appropriately scoped to the user's constraints?
-✅ Did I handle potential failure modes and edge cases?
-✅ Have I avoided generic boilerplate that doesn't add value?
-```
+## 3. The Empty State / Loading State Mandate
 
-### 🛑 Verification-Before-Completion (VBC) Protocol
+When mapping application flows, AI frequently charts the "Happy Path" (User logs in -> User sees 10 items). 
 
-**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.
+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|
+
+---