tribunal-kit 3.0.0 → 3.1.0

package/.agent/skills/webapp-testing/SKILL.md

@@ -1,145 +1,111 @@
----
-name: webapp-testing
-description: Comprehensive Web Application Testing strategy. Test Pyramid, Vitest/Jest for unit logic, React Testing Library for component integrity, MSW (Mock Service Worker) for API layer simulation, and visual regression. Use when setting up testing environments or defining global test strategies across a web stack.
-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
----
-
-# Webapp Testing — Full Stack Pipeline Mastery
-
-> Write tests. Not too many. Mostly integration. — Guillermo Rauch
-> A test suite that takes 30 minutes to run is a suite that engineers will actively subvert.
-
----
-
-## 1. The Strategy (The Testing Trophy)
-
-The traditional "Testing Pyramid" (lots of Unit, little E2E) is outdated for rich UI applications. Use the **Testing Trophy**:
-
-1. **Static Analysis (10%)**: TypeScript, ESLint, Prettier (Catches typos and type mismatches instantly).
-2. **Unit Tests (20%)**: Vitest (Tests complex pure functions: math, formatting, data mapping).
-3. **Integration Tests (60%)**: React Testing Library + MSW (Tests components and network mock interactions together).
-4. **End-to-End Tests (10%)**: Playwright (Tests the critical path: Login, Checkout, Account Creation on a real browser).
-
----
-
-## 2. Integration Layer (React Testing Library + MSW)
-
-Do not mock child components. Render the specific DOM tree and interact with it as a user would. 
-
-To prevent network calls, utilize Mock Service Worker (MSW) which intercepts requests at the network layer natively.
-
-```typescript
-// ❌ BAD: Mocking implementation details
-jest.mock('axios');
-axios.get.mockResolvedValue({ data: { users: [] } });
-
-// ✅ GOOD: MSW (Mock Service Worker) network level interception
-// The component functions EXACTLY as it would in production
-import { http, HttpResponse } from 'msw'
-import { setupServer } from 'msw/node'
-
-export const handlers = [
-  http.get('/api/users', () => {
-    return HttpResponse.json([
-      { id: 1, name: 'John Appleseed' },
-    ])
-  }),
-]
-const server = setupServer(...handlers)
-
-beforeAll(() => server.listen())
-afterEach(() => server.resetHandlers())
-afterAll(() => server.close())
-```
-
-### Component Testing (RTL)
-
-```typescript
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-test('Should load users and render names', async () => {
-  // userEvent closely replicates real browser physics (focusing, keystrokes)
-  const user = userEvent.setup();
-  
-  render(<UserDashboard />);
-
-  // Initial State
-  expect(screen.getByText('Loading...')).toBeInTheDocument();
-
-  // Async Resolution (Auto-waits for the MSW mock to return)
-  const johnNode = await screen.findByText('John Appleseed');
-  expect(johnNode).toBeInTheDocument();
-
-  // Interaction
-  const deleteBtn = screen.getByRole('button', { name: "Delete John" });
-  await user.click(deleteBtn);
-
-  // Verification 
-  expect(johnNode).not.toBeInTheDocument();
-});
-```
-
----
-
-## 3. Pure Unit Testing (Vitest)
-
-Isolate business logic entirely from React.
-
-```typescript
-// ✅ Move complex logic OUT of the React component entirely
-export function calculateTax(subtotal: number, state: string): number {
-  if (subtotal < 0) throw new Error("Subtotal cannot be negative");
-  if (state === "CA") return subtotal * 0.0825;
-  return 0; // Default
-}
-
-// ✅ Test with extreme precision and coverage
-import { describe, it, expect } from 'vitest';
-
-describe('calculateTax()', () => {
-  it('applies CA tax correctly', () => {
-    expect(calculateTax(100, 'CA')).toBe(8.25);
-  });
-  
-  it('throws on negative input', () => {
-    expect(() => calculateTax(-50, 'CA')).toThrowError('negative');
-  });
-});
-```
-
----
-
-## 🤖 LLM-Specific Traps (Webapp Testing)
-
-1. **Shallow Rendering Illusion:** AI suggests `shallow()` rendering from Enzyme. Enzyme is dead and lacks React 18+ hook visibility. RTL requires full DOM rendering.
-2. **`fireEvent` over `userEvent`:** AI defaults to `fireEvent.click()`. It skips critical browser lifecycle checks. Demand `@testing-library/user-event`.
-3. **Mocking Fear:** Over-mocking `fetch` natively inside unit tests instead of setting up clean HTTP interception layers (MSW).
-4. **Brittle Selectors in RTL:** AI uses `container.querySelector('.my-class')` instead of semantic accessibility queries (`screen.getByRole`). Tests will instantly break on design changes.
-5. **Testing Framework Overhead:** Suggesting Jest in 2026 for generic Vite/Next apps. Vitest is significantly faster, native ESM, and highly compatible.
-6. **`act()` Warning Panic:** Sprinkling `act()` randomly throughout the test code to suppress React warnings, instead of fixing the root async timing issues with `findBy` properly.
-7. **Ignoring Assertions Context:** Forgetting cleanup methodologies leading to state leaking between tests randomly. (Vitest and RTL handle this automatically if configured, but AI often creates weird global singleton state variables).
-8. **Endless Mock Imports:** Trying to `vi.mock` deeply nested dependencies across 4 layers of hooks. This proves the architecture is overly coupled. The test should stimulate a refactor, not a complex mock.
-9. **100% Coverage Addiction:** Recommending strict `coverageThreshold: 100`. The ROI of testing standard UI visual states drops to zero. Focus coverage on algorithms and data mapping functions.
-10. **Skipping Accessibility in Integration:** Forgetting that `getByRole` explicitly verifies the component is rendering accessible a11y boundaries correctly. Using `getByTestId` everywhere skips this verification.
-
----
-
-## 🏛️ Tribunal Integration
-
-### ✅ Pre-Flight Self-Audit
-```
-✅ Are complex pure functions isolated from React hooks for high-speed Vitest execution?
-✅ Does the testing suite rely fundamentally heavily on MSW network/API interception instead of `vi.mock`?
-✅ Did I exclusively leverage `screen.getByRole` / `findByRole` instead of CSS selector querying?
-✅ Am I using `@testing-library/user-event` rather than raw `fireEvent` to simulate realistic DOM interaction?
-✅ Has the `act()` wrapper been avoided, in favor of proper async `await screen.findByX` queries?
-✅ Is the coverage optimized for business logic precision, rather than blind 100% coverage chasing?
-✅ Are the React components fully rendered (no shallow mocking)?
-✅ Did I prevent state leakage completely by relying on isolated server handlers per-test where necessary?
-✅ Is the suite configured under Vitest for ESM speed instead of heavier, legacy Jest integrations?
-✅ Are there distinct layers deployed (Unit for logic, RTL for component flow, Playwright for E2E)?
-```
+---
+name: webapp-testing
+description: Comprehensive Web Application Testing strategy. Test Pyramid, Vitest/Jest for unit logic, React Testing Library for component integrity, MSW (Mock Service Worker) for API layer simulation, and visual regression. Use when setting up testing environments or defining global test strategies across a web stack.
+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
+---
+
+# Webapp Testing — Full Stack Pipeline Mastery
+
+---
+
+## 1. The Strategy (The Testing Trophy)
+
+The traditional "Testing Pyramid" (lots of Unit, little E2E) is outdated for rich UI applications. Use the **Testing Trophy**:
+
+1. **Static Analysis (10%)**: TypeScript, ESLint, Prettier (Catches typos and type mismatches instantly).
+2. **Unit Tests (20%)**: Vitest (Tests complex pure functions: math, formatting, data mapping).
+3. **Integration Tests (60%)**: React Testing Library + MSW (Tests components and network mock interactions together).
+4. **End-to-End Tests (10%)**: Playwright (Tests the critical path: Login, Checkout, Account Creation on a real browser).
+
+---
+
+## 2. Integration Layer (React Testing Library + MSW)
+
+Do not mock child components. Render the specific DOM tree and interact with it as a user would. 
+
+To prevent network calls, utilize Mock Service Worker (MSW) which intercepts requests at the network layer natively.
+
+```typescript
+// ❌ BAD: Mocking implementation details
+jest.mock('axios');
+axios.get.mockResolvedValue({ data: { users: [] } });
+
+// ✅ GOOD: MSW (Mock Service Worker) network level interception
+// The component functions EXACTLY as it would in production
+import { http, HttpResponse } from 'msw'
+import { setupServer } from 'msw/node'
+
+export const handlers = [
+  http.get('/api/users', () => {
+    return HttpResponse.json([
+      { id: 1, name: 'John Appleseed' },
+    ])
+  }),
+]
+const server = setupServer(...handlers)
+
+beforeAll(() => server.listen())
+afterEach(() => server.resetHandlers())
+afterAll(() => server.close())
+```
+
+### Component Testing (RTL)
+
+```typescript
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+test('Should load users and render names', async () => {
+  // userEvent closely replicates real browser physics (focusing, keystrokes)
+  const user = userEvent.setup();
+  
+  render(<UserDashboard />);
+
+  // Initial State
+  expect(screen.getByText('Loading...')).toBeInTheDocument();
+
+  // Async Resolution (Auto-waits for the MSW mock to return)
+  const johnNode = await screen.findByText('John Appleseed');
+  expect(johnNode).toBeInTheDocument();
+
+  // Interaction
+  const deleteBtn = screen.getByRole('button', { name: "Delete John" });
+  await user.click(deleteBtn);
+
+  // Verification 
+  expect(johnNode).not.toBeInTheDocument();
+});
+```
+
+---
+
+## 3. Pure Unit Testing (Vitest)
+
+Isolate business logic entirely from React.
+
+```typescript
+// ✅ Move complex logic OUT of the React component entirely
+export function calculateTax(subtotal: number, state: string): number {
+  if (subtotal < 0) throw new Error("Subtotal cannot be negative");
+  if (state === "CA") return subtotal * 0.0825;
+  return 0; // Default
+}
+
+// ✅ Test with extreme precision and coverage
+import { describe, it, expect } from 'vitest';
+
+describe('calculateTax()', () => {
+  it('applies CA tax correctly', () => {
+    expect(calculateTax(100, 'CA')).toBe(8.25);
+  });
+  
+  it('throws on negative input', () => {
+    expect(() => calculateTax(-50, 'CA')).toThrowError('negative');
+  });
+});
+```
+
+---

package/.agent/skills/whimsy-injector/SKILL.md

@@ -24,11 +24,11 @@ You are a specialized agent for injecting "micro-delights" into user interfaces
 
 ## Whimsy Philosophy
 
-> **Whimsy is not decoration.** Every animation must serve a purpose:
-> - Guide attention → where should the user look?
-> - Confirm action → did the thing work?
-> - Create continuity → where did I come from, where am I going?
-> - Build personality → does this app feel human?
+**Whimsy is not decoration.** Every animation must serve a purpose:
+- Guide attention → where should the user look?
+- Confirm action → did the thing work?
+- Create continuity → where did I come from, where am I going?
+- Build personality → does this app feel human?
 
 **If an animation doesn't serve one of these purposes, don't add it.**
 
@@ -36,13 +36,13 @@ You are a specialized agent for injecting "micro-delights" into user interfaces
 
 ### Category 1: Entrance Animations
 
-| Pattern | Purpose | Duration | Trigger |
+|Pattern|Purpose|Duration|Trigger|
 |---|---|---|---|
-| Fade-up | Content appearing naturally | 300-400ms | On mount / viewport entry |
-| Scale-in | Modal or card emphasis | 200-300ms | On open / on mount |
-| Stagger cascade | List items loading sequentially | 50ms delay × index | On mount / data load |
-| Slide-in | Side panels, drawers | 250-350ms | On toggle |
-| Blur-to-sharp | Hero images, lazy content | 400-600ms | On image load |
+|Fade-up|Content appearing naturally|300-400ms|On mount / viewport entry|
+|Scale-in|Modal or card emphasis|200-300ms|On open / on mount|
+|Stagger cascade|List items loading sequentially|50ms delay × index|On mount / data load|
+|Slide-in|Side panels, drawers|250-350ms|On toggle|
+|Blur-to-sharp|Hero images, lazy content|400-600ms|On image load|
 
 **Framework Implementations:**
 
@@ -94,14 +94,14 @@ document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
 
 ### Category 2: Hover & Interaction States
 
-| Pattern | CSS Implementation | Purpose |
+|Pattern|CSS Implementation|Purpose|
 |---|---|---|
-| Card lift | `transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.12)` | Clickable affordance |
-| Button press | `transform: scale(0.97)` on `:active` | Tactile feedback |
-| Link underline draw | `background-size: 100% 2px` from `0% 2px` | Navigation affordance |
-| Icon rotate | `transform: rotate(90deg)` on expand | State change indicator |
-| Color shift | `background-color` transition on hover | Interactive affordance |
-| Border glow | `box-shadow: 0 0 0 3px rgba(primary, 0.2)` on focus | Accessibility + delight |
+|Card lift|`transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.12)`|Clickable affordance|
+|Button press|`transform: scale(0.97)` on `:active`|Tactile feedback|
+|Link underline draw|`background-size: 100% 2px` from `0% 2px`|Navigation affordance|
+|Icon rotate|`transform: rotate(90deg)` on expand|State change indicator|
+|Color shift|`background-color` transition on hover|Interactive affordance|
+|Border glow|`box-shadow: 0 0 0 3px rgba(primary, 0.2)` on focus|Accessibility + delight|
 
 ```css
 /* Card Lift — Universal */
@@ -135,12 +135,12 @@ document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
 
 ### Category 3: Loading & Skeleton States
 
-| Pattern | When | Duration |
+|Pattern|When|Duration|
 |---|---|---|
-| Shimmer pulse | Data fetching, image loading | Continuous until loaded |
-| Spinner-to-content | Short waits (< 2s) | Until complete |
-| Progress bar | File uploads, long processes | Mapped to actual progress |
-| Skeleton screen | Initial page paint | Until first data render |
+|Shimmer pulse|Data fetching, image loading|Continuous until loaded|
+|Spinner-to-content|Short waits (< 2s)|Until complete|
+|Progress bar|File uploads, long processes|Mapped to actual progress|
+|Skeleton screen|Initial page paint|Until first data render|
 
 ```css
 /* Shimmer Skeleton */
@@ -163,13 +163,13 @@ document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
 
 ### Category 4: Micro-Feedback
 
-| Pattern | Trigger | Duration |
+|Pattern|Trigger|Duration|
 |---|---|---|
-| Success checkmark draw | Form submit success | 300ms |
-| Error shake | Validation failure | 300ms (3 oscillations) |
-| Counter tick-up | Stat change | 600ms (ease-out) |
-| Toast slide-in | Notification | 250ms in, 200ms out |
-| Confetti burst | Achievement, first-time completion | 1.5s |
+|Success checkmark draw|Form submit success|300ms|
+|Error shake|Validation failure|300ms (3 oscillations)|
+|Counter tick-up|Stat change|600ms (ease-out)|
+|Toast slide-in|Notification|250ms in, 200ms out|
+|Confetti burst|Achievement, first-time completion|1.5s|
 
 ```css
 /* Error Shake */
@@ -185,12 +185,12 @@ document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
 
 ### Category 5: Page Transitions
 
-| Pattern | When | CSS Approach |
+|Pattern|When|CSS Approach|
 |---|---|---|
-| Crossfade | Default page change | `view-transition-name` (View Transitions API) |
-| Slide lateral | Tab switching, step wizard | `transform: translateX(±100%)` |
-| Scale + fade | Modal open/close | `scale(0.95)` + `opacity: 0` → `scale(1)` + `opacity: 1` |
-| Morph | Shared element between pages | `view-transition-name` on shared elements |
+|Crossfade|Default page change|`view-transition-name` (View Transitions API)|
+|Slide lateral|Tab switching, step wizard|`transform: translateX(±100%)`|
+|Scale + fade|Modal open/close|`scale(0.95)` + `opacity: 0` → `scale(1)` + `opacity: 1`|
+|Morph|Shared element between pages|`view-transition-name` on shared elements|
 
 ```css
 /* View Transitions API (Chrome 111+) */
@@ -206,33 +206,33 @@ document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
 ## Whimsy Quota Rules
 
 > [!IMPORTANT]
-> Whimsy must be **tasteful, not invasive**. These are hard limits:
+Whimsy must be **tasteful, not invasive**. These are hard limits:
 
 ### Hard Constraints
-| Rule | Limit | Reason |
+|Rule|Limit|Reason|
 |---|---|---|
-| Max animation types per page | 3 distinct | Visual coherence |
-| Max concurrent animations | 5 elements | Performance |
-| `prefers-reduced-motion` | **MANDATORY** | Accessibility (WCAG 2.3.3) |
-| CLS impact | **Zero** | Core Web Vitals |
+|Max animation types per page|3 distinct|Visual coherence|
+|Max concurrent animations|5 elements|Performance|
+|`prefers-reduced-motion`|**MANDATORY**|Accessibility (WCAG 2.3.3)|
+|CLS impact|**Zero**|Core Web Vitals|
 
 ### Duration Constraints
-| Animation Type | Min | Max | Sweet Spot |
+|Animation Type|Min|Max|Sweet Spot|
 |---|---|---|---|
-| Entrance | 200ms | 500ms | 300ms |
-| Hover / Interaction | 100ms | 250ms | 150ms |
-| Feedback | 100ms | 400ms | 200ms |
-| Page transition | 150ms | 400ms | 250ms |
-| Loading (loop) | 1000ms | 2000ms | 1500ms |
+|Entrance|200ms|500ms|300ms|
+|Hover / Interaction|100ms|250ms|150ms|
+|Feedback|100ms|400ms|200ms|
+|Page transition|150ms|400ms|250ms|
+|Loading (loop)|1000ms|2000ms|1500ms|
 
 ### Easing Reference
-| Easing | CSS Value | Use For |
+|Easing|CSS Value|Use For|
 |---|---|---|
-| Standard | `cubic-bezier(0.4, 0, 0.2, 1)` | Most UI motion |
-| Decelerate | `cubic-bezier(0, 0, 0.2, 1)` | Entrances (coming into view) |
-| Accelerate | `cubic-bezier(0.4, 0, 1, 1)` | Exits (leaving view) |
-| Spring-like | `cubic-bezier(0.34, 1.56, 0.64, 1)` | Playful UI, toggles |
-| **Never** | `linear` | ❌ Not for UI motion |
+|Standard|`cubic-bezier(0.4, 0, 0.2, 1)`|Most UI motion|
+|Decelerate|`cubic-bezier(0, 0, 0.2, 1)`|Entrances (coming into view)|
+|Accelerate|`cubic-bezier(0.4, 0, 1, 1)`|Exits (leaving view)|
+|Spring-like|`cubic-bezier(0.34, 1.56, 0.64, 1)`|Playful UI, toggles|
+|**Never**|`linear`|❌ Not for UI motion|
 
 ### Mandatory Accessibility Block
 Every file with animations MUST include:
@@ -254,49 +254,15 @@ Every file with animations MUST include:
 - **Use `will-change` sparingly** — only on elements that are actively animating.
 - **Remove observers** when components unmount.
 
-## Output Format
-
-```
-🎭 Whimsy Injection Report
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-Page/Component:  [name]
-Injections:      [count]
-Total duration:  [max concurrent animation time]
-
-━━━ Injection 1 ━━━━━━━━━━━━━━━━━━━━━━━━
-Target:     [element/component]
-Type:       [Entrance / Hover / Feedback / Loading / Transition]
-Animation:  [description]
-Duration:   [ms]
-Easing:     [value]
-Trigger:    [on-load / on-hover / on-scroll / on-action]
-A11y:       prefers-reduced-motion handled? ✅
-CLS risk:   None (transform + opacity only)
-Framework:  [CSS / Framer Motion / Vue / GSAP]
-
-[Code snippet]
-
-━━━ Injection 2 ━━━━━━━━━━━━━━━━━━━━━━━━
-...
-
-━━━ Checklist ━━━━━━━━━━━━━━━━━━━━━━━━━━
-✅ prefers-reduced-motion media query present
-✅ Only transform/opacity animated
-✅ Max 3 animation types on this page
-✅ No layout shift risk
-✅ Observers cleaned up on unmount
-```
-
 ## Cross-Skill Integration
 
-| Paired Skill | Integration Point |
+|Paired Skill|Integration Point|
 |---|---|
-| `trend-researcher` | Receives motion intent → implements specific animations |
-| `ui-ux-researcher` | Addresses P2.5 audit findings (missing micro-interactions) |
-| `frontend-design` | Ensures animations match component design tokens |
-| `performance-profiling` | Monitors that injections don't degrade Web Vitals |
-| `web-design-guidelines` | Validates animations against established UI patterns |
+|`trend-researcher`|Receives motion intent → implements specific animations|
+|`ui-ux-researcher`|Addresses P2.5 audit findings (missing micro-interactions)|
+|`frontend-design`|Ensures animations match component design tokens|
+|`performance-profiling`|Monitors that injections don't degrade Web Vitals|
+|`web-design-guidelines`|Validates animations against established UI patterns|
 
 ## Anti-Hallucination Guard
 
@@ -306,44 +272,4 @@ Framework:  [CSS / Framer Motion / Vue / GSAP]
 - **Never suggest animations that cause layout shift** — enforce `transform` and `opacity` only.
 - **Verify `will-change` usage** — only apply to actively animating elements, remove after animation completes.
 
-
----
-
-## 🤖 LLM-Specific Traps
-
-AI coding assistants often fall into specific bad habits when dealing with this domain. These are strictly forbidden:
-
-1. **Over-engineering:** Proposing complex abstractions or distributed systems when a simpler approach suffices.
-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.
-
 ---
-
-## 🏛️ Tribunal Integration (Anti-Hallucination)
-
-**Slash command: `/review` or `/tribunal-full`**
-**Active reviewers: `logic-reviewer` · `security-auditor`**
-
-### ❌ Forbidden AI Tropes
-
-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.
-
-### ✅ 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?
-```
-
-### 🛑 Verification-Before-Completion (VBC) Protocol
-
-**CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
-- ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
-- ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.