tribunal-kit 3.0.0 → 3.1.0

package/.agent/workflows/tribunal-mobile.md

@@ -1,119 +1,94 @@
----
-description: Mobile-specific Tribunal. Runs Logic + Security + Mobile reviewers. Use for React Native, Expo, gesture handlers, animations, navigation, and any iOS/Android-targeted code.
----
-
-# /tribunal-mobile — Mobile Code Audit
-
-$ARGUMENTS
-
----
-
-## When to Use /tribunal-mobile
-
-| Use `/tribunal-mobile` when... | Use something else when... |
-|:---|:---|
-| React Native components | Web-only components → `/tribunal-frontend` |
-| Expo Router navigation | API routes → `/tribunal-backend` |
-| Reanimated animations/gestures | Full audit → `/tribunal-full` |
-| FlashList / FlatList code | |
-| Platform-specific (ios/android) code | |
-
----
-
-## 3 Active Reviewers (All Run Simultaneously)
-
-### logic-reviewer
-- `runOnJS` called inside `onUpdate` instead of `onEnd` (runs every frame)
-- Missing `'worklet'` directive on functions called inside Reanimated
-- FlatList inside ScrollView (disables virtualization)
-- `useSharedValue` vs `useState` confusion (SharedValue on wrong thread)
-
-### security-auditor
-- AsyncStorage storing sensitive data (tokens, PII) unencrypted
-- API keys in source code (should be in EAS Secrets)
-- cleartext HTTP traffic (should be HTTPS on all platforms)
-- Deep link not validated before processing URL scheme
-
-### mobile-reviewer
-- `setState` inside Reanimated `onUpdate` (JS bridge crossing = jank)
-- Missing `'worklet'` on custom functions used in Reanimated
-- FlatList for large lists (use FlashList with `estimatedItemSize`)
-- Hardcoded pixel insets instead of `useSafeAreaInsets()`
-- `Platform.OS === 'ios'` inside StyleSheet.create (not evaluated correctly)
-- Missing `AppState` subscription cleanup (`subscription.remove()`)
-- `react-native Image` used instead of `expo-image` (poor caching)
-
----
-
-## Verdict System
-
-```
-If ANY reviewer → ❌ REJECTED: fix before Human Gate
-If any reviewer → ⚠️ WARNING:  proceed with flagged items
-If all reviewers → ✅ APPROVED: Human Gate
-```
-
----
-
-## Output Format
-
-```
-━━━ Tribunal Mobile ━━━━━━━━━━━━━━━━━━━━━━
-
-logic-reviewer:  ✅ APPROVED
-security-auditor: ⚠️ WARNING
-mobile-reviewer: ❌ REJECTED
-
-━━━ VERDICT: ❌ REJECTED ━━━━━━━━━━━━━━━━━
-
-Blockers:
-- mobile-reviewer: [HIGH] setState inside onUpdate gesture handler — JS bridge crossing every frame
-  Line: onUpdate: (e) => { setState(e.translationX); } // jank at scale
-  Fix:  const tx = useSharedValue(0);
-        onUpdate: (e) => { tx.value = e.translationX; } // pure UI thread
-
-- mobile-reviewer: [HIGH] FlatList with 500+ items — use FlashList
-  Line: <FlatList data={products} renderItem={renderItem} />
-  Fix:  <FlashList data={products} renderItem={renderItem} estimatedItemSize={72} />
-
-Warnings:
-- security-auditor: [MEDIUM] JWT token stored in AsyncStorage — use expo-secure-store
-```
-
----
-
-## Mobile-Specific Hallucination Traps (Common LLM Mistakes)
-
-```tsx
-// ❌ Missing 'worklet' — animation function crashes silently
-const clamp = (val: number, min: number, max: number) => Math.min(Math.max(val, min), max);
-// ✅ Must have worklet directive
-const clamp = (val: number, min: number, max: number): number => {
-  'worklet';
-  return Math.min(Math.max(val, min), max);
-};
-
-// ❌ Expo Router: navigate() was refactored in v4 — old API
-import { navigate } from 'expo-router';   // Named export doesn't exist
-// ✅ Current Expo Router v4
-import { router } from 'expo-router';
-router.push('/products/123');
-
-// ❌ React Native: StyleSheet.create doesn't eval functions
-const styles = StyleSheet.create({
-  box: { paddingTop: Platform.OS === 'ios' ? 20 : 0 } // Doesn't work in all contexts
-});
-// ✅ Use Platform.select or dynamic style object
-const boxStyle = Platform.select({ ios: { paddingTop: 20 }, android: { paddingTop: 0 } });
-```
-
----
-
-## Usage Examples
-
-```
-/tribunal-mobile the SwipeToDelete gesture implementation with Reanimated 3
-/tribunal-mobile the ProductList component using FlashList
-/tribunal-mobile the auth token storage and retrieval functions
-/tribunal-mobile the ProfileScreen with safe area insets
-```
+---
+description: Mobile-specific Tribunal. Runs Logic + Security + Mobile reviewers. Use for React Native, Expo, gesture handlers, animations, navigation, and any iOS/Android-targeted code.
+---
+
+# /tribunal-mobile — Mobile Code Audit
+
+$ARGUMENTS
+
+---
+
+## When to Use /tribunal-mobile
+
+|Use `/tribunal-mobile` when...|Use something else when...|
+|:---|:---|
+|React Native components|Web-only components → `/tribunal-frontend`|
+|Expo Router navigation|API routes → `/tribunal-backend`|
+|Reanimated animations/gestures|Full audit → `/tribunal-full`|
+|FlashList / FlatList code||
+|Platform-specific (ios/android) code||
+
+---
+
+## 3 Active Reviewers (All Run Simultaneously)
+
+### logic-reviewer
+- `runOnJS` called inside `onUpdate` instead of `onEnd` (runs every frame)
+- Missing `'worklet'` directive on functions called inside Reanimated
+- FlatList inside ScrollView (disables virtualization)
+- `useSharedValue` vs `useState` confusion (SharedValue on wrong thread)
+
+### security-auditor
+- AsyncStorage storing sensitive data (tokens, PII) unencrypted
+- API keys in source code (should be in EAS Secrets)
+- cleartext HTTP traffic (should be HTTPS on all platforms)
+- Deep link not validated before processing URL scheme
+
+### mobile-reviewer
+- `setState` inside Reanimated `onUpdate` (JS bridge crossing = jank)
+- Missing `'worklet'` on custom functions used in Reanimated
+- FlatList for large lists (use FlashList with `estimatedItemSize`)
+- Hardcoded pixel insets instead of `useSafeAreaInsets()`
+- `Platform.OS === 'ios'` inside StyleSheet.create (not evaluated correctly)
+- Missing `AppState` subscription cleanup (`subscription.remove()`)
+- `react-native Image` used instead of `expo-image` (poor caching)
+
+---
+
+## Verdict System
+
+```
+If ANY reviewer → ❌ REJECTED: fix before Human Gate
+If any reviewer → ⚠️ WARNING:  proceed with flagged items
+If all reviewers → ✅ APPROVED: Human Gate
+```
+
+---
+
+---
+
+## Mobile-Specific Hallucination Traps (Common LLM Mistakes)
+
+```tsx
+// ❌ Missing 'worklet' — animation function crashes silently
+const clamp = (val: number, min: number, max: number) => Math.min(Math.max(val, min), max);
+// ✅ Must have worklet directive
+const clamp = (val: number, min: number, max: number): number => {
+  'worklet';
+  return Math.min(Math.max(val, min), max);
+};
+
+// ❌ Expo Router: navigate() was refactored in v4 — old API
+import { navigate } from 'expo-router';   // Named export doesn't exist
+// ✅ Current Expo Router v4
+import { router } from 'expo-router';
+router.push('/products/123');
+
+// ❌ React Native: StyleSheet.create doesn't eval functions
+const styles = StyleSheet.create({
+  box: { paddingTop: Platform.OS === 'ios' ? 20 : 0 } // Doesn't work in all contexts
+});
+// ✅ Use Platform.select or dynamic style object
+const boxStyle = Platform.select({ ios: { paddingTop: 20 }, android: { paddingTop: 0 } });
+```
+
+---
+
+## Usage Examples
+
+```
+/tribunal-mobile the SwipeToDelete gesture implementation with Reanimated 3
+/tribunal-mobile the ProductList component using FlashList
+/tribunal-mobile the auth token storage and retrieval functions
+/tribunal-mobile the ProfileScreen with safe area insets
+```

package/.agent/workflows/tribunal-performance.md

@@ -1,133 +1,109 @@
----
-description: Performance-specific Tribunal. Runs Logic + Performance reviewers. Use when code is slow, for optimization tasks, bundle analysis, Core Web Vitals improvement, memory leak investigation, and before deploying performance-critical features.
----
-
-# /tribunal-performance — Performance Audit
-
-$ARGUMENTS
-
----
-
-## When to Use /tribunal-performance
-
-| Use `/tribunal-performance` when... | Use something else when... |
-|:---|:---|
-| LCP, INP, or CLS is above threshold | General code review → `/tribunal-full` |
-| Bundle size is too large | Backend perf only → `/tribunal-backend` |
-| Memory usage grows unbounded | Database perf → `/tribunal-database` |
-| Node.js event loop is saturated | |
-| Optimizing rendering performance | |
-
----
-
-## 2 Active Reviewers (Both Run Simultaneously)
-
-### logic-reviewer
-- Expensive computation in render function (runs every render)
-- Missing memoization where React.memo/useMemo would help
-- Infinite re-render loop (effect updates a value that triggers the effect)
-
-### performance-reviewer
-- INP: expensive synchronous work on user interaction (> 50ms blocking)
-- LCP: hero image without priority={true} or preload hint
-- CLS: missing width/height on images causing layout shift
-- Bundle: large library imported without tree-shaking or dynamic import
-- Memory: event listeners added without cleanup in useEffect
-- N+1: database queries in loop should be batched
-- Cache: expensive DB query without Redis/memory cache
-
----
-
-## 2026 CWV Targets (Verdict Reference)
-
-| Metric | Good | Needs Work | Poor (REJECTED) |
-|:---|:---|:---|:---|
-| INP | < 200ms | 200–500ms | > 500ms |
-| LCP | < 2.5s | 2.5–4.0s | > 4.0s |
-| CLS | < 0.1 | 0.1–0.25 | > 0.25 |
-
----
-
-## Verdict System
-
-```
-If code contains patterns causing POOR rating → ❌ REJECTED
-If code contains patterns causing NEEDS WORK → ⚠️ WARNING
-If all patterns cause GOOD rating → ✅ APPROVED
-```
-
----
-
-## Output Format
-
-```
-━━━ Tribunal Performance ━━━━━━━━━━━━━━━━━━
-
-logic-reviewer:       ✅ APPROVED
-performance-reviewer: ❌ REJECTED
-
-━━━ VERDICT: ❌ REJECTED ━━━━━━━━━━━━━━━━━
-
-Blockers:
-- performance-reviewer: [HIGH — INP] Synchronous filterMillion() called in onClick handler
-  Impact: Blocks main thread 200ms+ on each click — INP will be POOR
-  Fix: Wrap in startTransition(() => setResults(filterMillion(items, q)))
-
-- performance-reviewer: [HIGH — LCP] Hero image missing priority
-  Impact: Browser discovers image late — LCP will be POOR (> 4s)
-  Fix: <Image src="/hero.webp" priority={true} ... />
-
-Warnings:
-- performance-reviewer: [MEDIUM — Bundle] lodash imported directly (+67kb unminified)
-  Fix: Replace with native Array methods or specific lodash-es import
-```
-
----
-
-## Performance-Specific Hallucination Traps
-
-```typescript
-// ❌ React.memo doesn't help when parent re-renders with new objects every time
-const MemoCard = React.memo(Card);
-<MemoCard style={{ margin: 8 }} /> // New object {} every render → memo has no effect
-
-// ✅ Memoize the object itself
-const cardStyle = useMemo(() => ({ margin: 8 }), []);
-<MemoCard style={cardStyle} />
-
-// ❌ useMemo with no deps array — runs every render (same as no memo)
-const sorted = useMemo(() => items.sort(...)); // Missing deps array!
-
-// ✅ Correct deps array
-const sorted = useMemo(() => [...items].sort(compareFn), [items]);
-
-// ❌ Non-measurement claim
-// "This is fast" — never write this without a Lighthouse score to back it
-```
-
----
-
-## Measurement Protocol
-
-Performance optimization without measurement is guessing:
-
-```
-Before optimizing:
-□ Run Lighthouse: record LCP, INP, CLS, bundle size
-□ Profile with Chrome DevTools: identify actual bottleneck
-
-After optimizing:
-□ Run Lighthouse again: confirm improvement
-□ Show before/after scores in audit output
-```
-
----
-
-## Usage Examples
-
-```
-/tribunal-performance the product listing page with image grid
-/tribunal-performance the search component with real-time filtering
-/tribunal-performance the checkout flow for CWV compliance
-/tribunal-performance the API route with expensive DB query for caching
-```
+---
+description: Performance-specific Tribunal. Runs Logic + Performance reviewers. Use when code is slow, for optimization tasks, bundle analysis, Core Web Vitals improvement, memory leak investigation, and before deploying performance-critical features.
+---
+
+# /tribunal-performance — Performance Audit
+
+$ARGUMENTS
+
+---
+
+## When to Use /tribunal-performance
+
+|Use `/tribunal-performance` when...|Use something else when...|
+|:---|:---|
+|LCP, INP, or CLS is above threshold|General code review → `/tribunal-full`|
+|Bundle size is too large|Backend perf only → `/tribunal-backend`|
+|Memory usage grows unbounded|Database perf → `/tribunal-database`|
+|Node.js event loop is saturated||
+|Optimizing rendering performance||
+
+---
+
+## 2 Active Reviewers (Both Run Simultaneously)
+
+### logic-reviewer
+- Expensive computation in render function (runs every render)
+- Missing memoization where React.memo/useMemo would help
+- Infinite re-render loop (effect updates a value that triggers the effect)
+
+### performance-reviewer
+- INP: expensive synchronous work on user interaction (> 50ms blocking)
+- LCP: hero image without priority={true} or preload hint
+- CLS: missing width/height on images causing layout shift
+- Bundle: large library imported without tree-shaking or dynamic import
+- Memory: event listeners added without cleanup in useEffect
+- N+1: database queries in loop should be batched
+- Cache: expensive DB query without Redis/memory cache
+
+---
+
+## 2026 CWV Targets (Verdict Reference)
+
+|Metric|Good|Needs Work|Poor (REJECTED)|
+|:---|:---|:---|:---|
+|INP|< 200ms|200–500ms|> 500ms|
+|LCP|< 2.5s|2.5–4.0s|> 4.0s|
+|CLS|< 0.1|0.1–0.25|> 0.25|
+
+---
+
+## Verdict System
+
+```
+If code contains patterns causing POOR rating → ❌ REJECTED
+If code contains patterns causing NEEDS WORK → ⚠️ WARNING
+If all patterns cause GOOD rating → ✅ APPROVED
+```
+
+---
+
+---
+
+## Performance-Specific Hallucination Traps
+
+```typescript
+// ❌ React.memo doesn't help when parent re-renders with new objects every time
+const MemoCard = React.memo(Card);
+<MemoCard style={{ margin: 8 }} /> // New object {} every render → memo has no effect
+
+// ✅ Memoize the object itself
+const cardStyle = useMemo(() => ({ margin: 8 }), []);
+<MemoCard style={cardStyle} />
+
+// ❌ useMemo with no deps array — runs every render (same as no memo)
+const sorted = useMemo(() => items.sort(...)); // Missing deps array!
+
+// ✅ Correct deps array
+const sorted = useMemo(() => [...items].sort(compareFn), [items]);
+
+// ❌ Non-measurement claim
+// "This is fast" — never write this without a Lighthouse score to back it
+```
+
+---
+
+## Measurement Protocol
+
+Performance optimization without measurement is guessing:
+
+```
+Before optimizing:
+□ Run Lighthouse: record LCP, INP, CLS, bundle size
+□ Profile with Chrome DevTools: identify actual bottleneck
+
+After optimizing:
+□ Run Lighthouse again: confirm improvement
+□ Show before/after scores in audit output
+```
+
+---
+
+## Usage Examples
+
+```
+/tribunal-performance the product listing page with image grid
+/tribunal-performance the search component with real-time filtering
+/tribunal-performance the checkout flow for CWV compliance
+/tribunal-performance the API route with expensive DB query for caching
+```