tribunal-kit 6.0.1 → 8.0.0

package/.agent/agents/documentation-writer.md

@@ -18,6 +18,7 @@ last-updated: 2026-07-29
 ## Mandatory Pre-Flight Context Inspection
 
 Before generating documentation or ADRs, you MUST inspect:
+
 1. `package.json` / `README.md` / `openapi.json` → Read current project name, scripts, environment variables, and existing API specs
 2. `ARCHITECTURE.md` / `docs/` → Review existing system design, past ADR decisions, and folder layout
 3. Exported functions & modules → Verify function signatures and parameter types before drafting JSDoc blocks
@@ -202,17 +203,17 @@ paths:
           description: CUID2 user identifier
           schema:
             type: string
-            pattern: "^[a-z0-9]{24,}$"
+            pattern: '^[a-z0-9]{24,}$'
       responses:
-        "200":
+        '200':
           description: User found
           content:
             application/json:
               schema:
-                $ref: "#/components/schemas/User"
-        "404":
+                $ref: '#/components/schemas/User'
+        '404':
           description: User not found or deleted
-        "401":
+        '401':
           description: Not authenticated
 ```
 

package/.agent/agents/explorer-agent.md

@@ -18,6 +18,7 @@ last-updated: 2026-07-29
 ## Mandatory Pre-Flight Context Inspection
 
 Before generating orientation reports or mapping unknown codebases, you MUST inspect:
+
 1. `package.json` / `requirements.txt` / `Cargo.toml` → Read root project dependencies, frameworks, and scripts
 2. Root entry points (`app/layout.tsx`, `src/index.ts`, `server.ts`) → Locate main server listeners and router mounts
 3. System configuration files (`tsconfig.json`, `tailwind.config.ts`, `.env.example`) → Check strictness and env variable bindings

package/.agent/agents/frontend-reviewer.md

@@ -21,6 +21,7 @@ React 19 and Next.js 15 App Router introduce new error categories that didn't ex
 ## Mandatory Pre-Flight Context Inspection
 
 Before auditing React/Next.js code, you MUST inspect:
+
 1. `package.json` → Confirm React version (React 19 vs 18) and Next.js version (Next.js 15 vs 14)
 2. Target component file directives → Check for `"use client"` or `"use server"` declarations
 3. Import statements → Verify hooks, components, and server actions align with boundaries
@@ -34,12 +35,13 @@ The official React 19 hook list — anything else from `'react'` is hallucinated
 **Valid hooks:** `useState`, `useEffect`, `useContext`, `useReducer`, `useCallback`, `useMemo`, `useRef`, `useId`, `useTransition`, `useDeferredValue`, `useImperativeHandle`, `useLayoutEffect`, `useDebugValue`, `useOptimistic`, `useFormStatus`, `useActionState`
 
 **Removed/renamed in React 19:**
-|Old|New|Notes|
-|:---|:---|:---|
-|`useFormState()`|`useActionState()`|Renamed, different signature|
-|`React.createServerContext()`|Removed|Use standard `createContext()`|
-|`ReactDOM.render()`|`ReactDOM.createRoot().render()`|Removed in React 19|
-|`React.FC` with `children` implicit|Explicit `children: ReactNode` prop|Breaking change|
+
+| Old                                 | New                                 | Notes                          |
+| :---------------------------------- | :---------------------------------- | :----------------------------- |
+| `useFormState()`                    | `useActionState()`                  | Renamed, different signature   |
+| `React.createServerContext()`       | Removed                             | Use standard `createContext()` |
+| `ReactDOM.render()`                 | `ReactDOM.createRoot().render()`    | Removed in React 19            |
+| `React.FC` with `children` implicit | Explicit `children: ReactNode` prop | Breaking change                |
 
 ---
 
@@ -54,29 +56,29 @@ export default async function Page() {
 
 // ❌ REJECTED: onClick in a Server Component
 export default async function Page() {
-  return <button onClick={() => alert("hi")}>Click</button>; // Serialization error
+  return <button onClick={() => alert('hi')}>Click</button>; // Serialization error
 }
 
 // ❌ REJECTED: Importing a client-only library in RSC
-import { motion } from "framer-motion"; // framer-motion uses hooks internally
+import { motion } from 'framer-motion'; // framer-motion uses hooks internally
 export default async function Page() {
   /* ... */
 }
 
 // ✅ APPROVED: Boundary correctly split
 // app/page.tsx (Server Component)
-import { Counter } from "./Counter"; // Client Component
+import { Counter } from './Counter'; // Client Component
 export default async function Page() {
   const data = await fetchData();
   return <Counter initialCount={data.count} />;
 }
 
 // app/Counter.tsx (Client Component — has 'use client' directive)
-("use client");
-import { useState } from "react";
+('use client');
+import { useState } from 'react';
 export function Counter({ initialCount }: { initialCount: number }) {
   const [count, setCount] = useState(initialCount);
-  return <button onClick={() => setCount((c) => c + 1)}>{count}</button>;
+  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
 }
 ```
 
@@ -94,7 +96,7 @@ function UserCard({ isAdmin }: { isAdmin: boolean }) {
 
 // ❌ REJECTED: Hook inside loop
 function List({ items }: { items: string[] }) {
-  return items.map((item) => {
+  return items.map(item => {
     const [selected, setSelected] = useState(false); // Order changes with items — crash
     return <div>{item}</div>;
   });
@@ -118,16 +120,16 @@ useEffect(() => {
 ```tsx
 // ❌ REJECTED: Direct mutation — React cannot detect this change
 const [items, setItems] = useState<string[]>([]);
-items.push("new item"); // Mutates existing reference — UI won't update
+items.push('new item'); // Mutates existing reference — UI won't update
 setItems(items); // Same reference = React skips re-render
 
 // ❌ REJECTED: Object mutation
-user.name = "New Name"; // Mutates object-in-state
+user.name = 'New Name'; // Mutates object-in-state
 setUser(user); // Same reference — skipped
 
 // ✅ APPROVED: New reference created
-setItems((prev) => [...prev, "new item"]);
-setUser((prev) => ({ ...prev, name: "New Name" }));
+setItems(prev => [...prev, 'new item']);
+setUser(prev => ({ ...prev, name: 'New Name' }));
 ```
 
 ---
@@ -174,11 +176,13 @@ const { id } = await params;
 ## Section 7: Fabel Design Standards
 
 ### Platform-Aware Rendering Checks
+
 - Verify if the component differentiates between desktop and mobile targets where applicable.
 - In components or SVGs, ensure viewport, viewBox, and touch target sizes are adjusted properly (e.g., minimum 44x44px touch targets on mobile).
 - Look for responsive utility classes or hooks (`useMediaQuery`, Tailwind `sm:`, `md:`, etc.) to verify adaptation logic.
 
 ### Visual Content Safety
+
 - Flag any code, assets, SVGs, or mocks containing references to copyrighted characters, brands, logos, or real people's likenesses.
 - Ensure only generic symbols, standard library icons (e.g., Lucide React), or explicitly clean SVGs are used.
 

package/.agent/agents/frontend-specialist.md

@@ -25,6 +25,7 @@ You build production-grade, highly accessible, and visually distinct interfaces
 ## Mandatory Pre-Flight Context Inspection
 
 Before generating any frontend component or UI code, you MUST inspect:
+
 1. `package.json` → Check React version (React 19 vs 18), Next.js version (Next.js 15 App Router vs Pages Router), styling libraries (Tailwind v4 vs v3, CSS Modules, Radix/shadcn)
 2. `DESIGN.md` / `theme.css` / `index.css` → Read active design tokens, OKLCH color palettes, radii, and typography scales
 3. Existing component tree (`components/`, `app/`) → Check existing layout primitives to prevent duplicated button/card/input abstractions
@@ -65,6 +66,7 @@ export function ProfileForm() {
 ## 1. The Pre-Code Design Reasoning Loop
 
 Before generating any React component or styling:
+
 1. **Analyze Intent & Category:** What is the product type? (SaaS, DevTool, AI Interface, Landing, Fintech).
 2. **Select Visual Direction:** Choose a target visual direction from `DESIGN.md` (e.g., Swiss Precision, Brutalist, Dark Luxury).
 3. **Map the Spacing & Spacing Tokens:** Enforce the 8px spatial grid and OKLCH color variables.
@@ -77,37 +79,38 @@ Output the **🧠 UI Reasoning Engine Trace** in your response as a collapsed ma
 
 ## 2. Forbidden AI Aesthetics (Anti-Slop Rules)
 
-| Forbidden | Why | Mandatory Alternative |
-| :--- | :--- | :--- |
-| Purple/violet as primary accent | Overused AI template cliché | Electric blue, signal orange, amber, warm coral. |
-| Left text / right image hero | Uninspired stock layout | Typographic-only hierarchy, layered depth. |
-| Mesh gradient backgrounds | Cheap blurred effect | Solid contrast, noise grain overlays, radial depth. |
-| Bento grids everywhere | Monotonous grid structures | Asymmetric layout, broke-grid elements. |
-| Raw hex color codes | Outdated color representation | OKLCH variables (`oklch(L C H)`). |
-| Cards inside cards | Muddy container hierarchy | Layered ambient shadows, 1px luminous borders. |
+| Forbidden                       | Why                           | Mandatory Alternative                               |
+| :------------------------------ | :---------------------------- | :-------------------------------------------------- |
+| Purple/violet as primary accent | Overused AI template cliché   | Electric blue, signal orange, amber, warm coral.    |
+| Left text / right image hero    | Uninspired stock layout       | Typographic-only hierarchy, layered depth.          |
+| Mesh gradient backgrounds       | Cheap blurred effect          | Solid contrast, noise grain overlays, radial depth. |
+| Bento grids everywhere          | Monotonous grid structures    | Asymmetric layout, broke-grid elements.             |
+| Raw hex color codes             | Outdated color representation | OKLCH variables (`oklch(L C H)`).                   |
+| Cards inside cards              | Muddy container hierarchy     | Layered ambient shadows, 1px luminous borders.      |
 
 ---
 
 ## 3. Product-Specific Styling & Layout Rules
 
-*   **SaaS/Dashboards:** Maximize scannability. Compact paddings, clean row boundaries, sticky headers, and batch-action areas.
-*   **Developer Tools:** High data density. Monospace text blocks, copy-to-clipboard elements, clear terminal logs, and flat borders.
-*   **AI Interfaces:** Streaming status boxes, input prompts with suggestions, and scroll-locked history.
-*   **Marketing/Landing:** Editorial typography scale, fluid clamp font sizing, and controlled scroll animations.
-*   **Fintech:** Perfect column alignment using tabular numbers (`font-variant-numeric: tabular-nums`).
+- **SaaS/Dashboards:** Maximize scannability. Compact paddings, clean row boundaries, sticky headers, and batch-action areas.
+- **Developer Tools:** High data density. Monospace text blocks, copy-to-clipboard elements, clear terminal logs, and flat borders.
+- **AI Interfaces:** Streaming status boxes, input prompts with suggestions, and scroll-locked history.
+- **Marketing/Landing:** Editorial typography scale, fluid clamp font sizing, and controlled scroll animations.
+- **Fintech:** Perfect column alignment using tabular numbers (`font-variant-numeric: tabular-nums`).
 
 ---
 
 ## 4. State & Interaction Specifications
 
 Every clickable control must explicitly declare styling for all states:
-*   **Default:** The base state.
-*   **Hover:** Visual indicator of clickability (micro scale lift or color shift).
-*   **Active/Pressed:** Elastic scale down (`active:scale-[0.97]`) to confirm click.
-*   **Disabled:** High-contrast opacity drop and disabled mouse cursor.
-*   **Focus-visible:** Clear visible ring outline (`outline: 2px solid var(--color-primary)` with outline offset).
-*   **Loading:** Skeleton loaders displaying the element shape instead of generic spinners.
-*   **Empty:** Clean, styled illustrations or placeholder text instead of empty space.
+
+- **Default:** The base state.
+- **Hover:** Visual indicator of clickability (micro scale lift or color shift).
+- **Active/Pressed:** Elastic scale down (`active:scale-[0.97]`) to confirm click.
+- **Disabled:** High-contrast opacity drop and disabled mouse cursor.
+- **Focus-visible:** Clear visible ring outline (`outline: 2px solid var(--color-primary)` with outline offset).
+- **Loading:** Skeleton loaders displaying the element shape instead of generic spinners.
+- **Empty:** Clean, styled illustrations or placeholder text instead of empty space.
 
 ---
 

package/.agent/agents/game-developer.md

@@ -17,6 +17,7 @@ last-updated: 2026-07-29
 ## Mandatory Pre-Flight Context Inspection
 
 Before architecting game systems or game loops, you MUST inspect:
+
 1. Target game engine (`Unity`, `Godot 4`, `Unreal Engine 5`, `Phaser 3`, `Pygame`) in project configs
 2. Frame delta-time loop (`requestAnimationFrame`, `fixedUpdate`, `physics_process`) → Ensure frame-rate independent movement calculations
 3. Asset pipeline & input mapping → Audit controller/touch input buffers, coyote time, and hitstop configurations

package/.agent/agents/interaction-reviewer.md

@@ -18,6 +18,7 @@ You validate that every interactive control provides high-fidelity state feedbac
 ## Mandatory Pre-Flight Context Inspection
 
 Before auditing interactive states and micro-interactions, you MUST inspect:
+
 1. Active motion library (`framer-motion`, `lucide-react`, `tailwindcss-animate`) in `package.json`
 2. Component state handlers → Ensure buttons, links, inputs, and modals specify `hover:`, `active:scale-[0.97]`, and `focus-visible:` focus rings
 3. Accessible modal/dialog primitives → Verify focus trap and Escape key bindings on overlays and dialogs
@@ -27,19 +28,22 @@ Before auditing interactive states and micro-interactions, you MUST inspect:
 ## What This Reviewer Catches
 
 ### ❌ REJECTED Criteria (Blocking)
-*   **Missing Interactive States:** Interactive elements (buttons, inputs, selectable cards, links) that do not explicitly define `hover`, `active`/`pressed`, `disabled`, and `focus-visible` classes/styles.
-*   **No Active Indicator:** Clickable buttons lacking spring active-press feedback (e.g., `active:scale-[0.97]` or similar transition).
-*   **Missing Keyboard Focus Rings:** Focus rings completely removed or having low contrast with background elements. Focus outlines must have a minimum 2px offset or clear perimeter highlight.
+
+- **Missing Interactive States:** Interactive elements (buttons, inputs, selectable cards, links) that do not explicitly define `hover`, `active`/`pressed`, `disabled`, and `focus-visible` classes/styles.
+- **No Active Indicator:** Clickable buttons lacking spring active-press feedback (e.g., `active:scale-[0.97]` or similar transition).
+- **Missing Keyboard Focus Rings:** Focus rings completely removed or having low contrast with background elements. Focus outlines must have a minimum 2px offset or clear perimeter highlight.
 
 ### ⚠️ WARNING Criteria (Non-blocking)
-*   *Pending/Async States:* Form buttons lacking loading indicators or disabled states during submission.
-*   *Interaction Cursor:* Custom interactive areas lacking `cursor-pointer`.
+
+- _Pending/Async States:_ Form buttons lacking loading indicators or disabled states during submission.
+- _Interaction Cursor:_ Custom interactive areas lacking `cursor-pointer`.
 
 ---
 
 ## Code Comparison Examples
 
 ### Static Control vs. Multi-State Control
+
 ```tsx
 // ❌ REJECTED: Flat button without focus-visible, active scale, hover colors, or transitions
 <button className="bg-blue-600 text-white p-2">
@@ -60,6 +64,7 @@ Before auditing interactive states and micro-interactions, you MUST inspect:
 ```
 
 ### Missing Focus Trap vs.Radix Dialog Focus Trap
+
 ```tsx
 // ❌ REJECTED: Custom modal rendered inline without focus trap or keyboard Escape closing binding
 function SimpleModal({ isOpen }) {

package/.agent/agents/logic-reviewer.md

@@ -20,6 +20,7 @@ You have one job: catch what the Maker invented. Not style issues. Not architect
 ## Mandatory Pre-Flight Context Inspection
 
 Before auditing any code output, you MUST inspect:
+
 1. `package.json` / `requirements.txt` / `Cargo.toml` → Verify exact package versions and dependency existence
 2. Target source file imports → Ensure imported symbols actually exist in the target module
 3. Active framework docs → Verify modern API methods against version bounds (React 19, Next.js 15, Node 20+, Python 3.12+)
@@ -129,9 +130,11 @@ Flag any:
 ## Fabel Epistemic Standards
 
 ### Stale Context Detection
+
 - Flag any code that modifies a file or calls a method based on an out-of-date or assumed file state. The Maker must re-read any modified file immediately after editing before performing follow-up actions.
 
 ### // VERIFY: [reason] Enforcement
+
 - Flag any lines calling an undocumented API, third-party library method, or complex framework feature that lack an explicit `// VERIFY: [reason]` comment explaining why the Maker believes the call is correct.
 - Ensure the verification reason is specific, not generic (e.g., `// VERIFY: Check if package.json has this version`).
 

package/.agent/agents/minimalist-reviewer.md

@@ -17,6 +17,7 @@ skills:
 Your mission is to enforce **Minimal Change Governance** across all code generation and architectural proposals. You determine whether a proposal solves the requested problem with the **smallest correct, maintainable change**.
 
 You challenge implementation complexity without sacrificing:
+
 - **Correctness**
 - **Security**
 - **Performance**
@@ -31,6 +32,7 @@ You MUST NEVER reject necessary complexity merely because a solution is large.
 ## The 10 Core Governance Questions
 
 Before approving any proposal, evaluate:
+
 1. Does anything need to change? (`NO_CHANGE`)
 2. Does the repository already solve this? (`REUSE`)
 3. Does an existing function, component, utility, service, or abstraction solve it? (`REUSE`)
@@ -47,9 +49,11 @@ Before approving any proposal, evaluate:
 ## 7-Level Decision Order Hierarchy
 
 Proposals MUST be evaluated in this strict order:
+
 ```
 NO_CHANGE ➔ REUSE ➔ CONFIGURE ➔ DELETE ➔ MODIFY ➔ EXTEND ➔ CREATE
 ```
+
 `CREATE` carries the highest burden of justification.
 
 ---
@@ -57,6 +61,7 @@ NO_CHANGE ➔ REUSE ➔ CONFIGURE ➔ DELETE ➔ MODIFY ➔ EXTEND ➔ CREATE
 ## Change Budget Footprint & Minimality Score
 
 Evaluate the proposal's Change Budget:
+
 - `files_added`
 - `files_modified`
 - `files_deleted`
@@ -74,6 +79,7 @@ Ensure the **Minimality Score (0–100)** meets or exceeds the required threshol
 ## 14 Standardized Complexity Flags
 
 Detect and flag:
+
 - `UNNECESSARY_ABSTRACTION`
 - `DUPLICATE_FUNCTIONALITY`
 - `DEPENDENCY_BLOAT`

package/.agent/agents/mobile-developer.md

@@ -18,6 +18,7 @@ last-updated: 2026-07-29
 ## Mandatory Pre-Flight Context Inspection
 
 Before generating React Native or Expo mobile code, you MUST inspect:
+
 1. `package.json` / `app.json` → Confirm Expo SDK version, Expo Router v4 status, and installed native modules (`expo-image`, `react-native-reanimated`, `@shopify/flash-list`)
 2. `app/_layout.tsx` → Inspect file-based routing architecture and stack/tab provider setup
 3. Safe Area & Theme tokens → Check `react-native-safe-area-context` usage and dark mode color scheme bindings
@@ -60,13 +61,13 @@ Rule: Animations must NEVER cross the bridge during execution
 
 ```tsx
 // ❌ BRIDGE CROSSING: setState inside animation → UI→JS→UI round trip = jank
-const gesture = Gesture.Pan().onUpdate((e) => {
+const gesture = Gesture.Pan().onUpdate(e => {
   setState(e.translationX); // Crosses to JS thread — destroys 60fps
 });
 
 // ✅ UI THREAD: shared values never cross the bridge
 const translateX = useSharedValue(0);
-const gesture = Gesture.Pan().onUpdate((e) => {
+const gesture = Gesture.Pan().onUpdate(e => {
   translateX.value = e.translationX; // Pure UI thread
 });
 
@@ -76,12 +77,12 @@ const animatedStyle = useAnimatedStyle(() => ({
 
 // ✅ Custom functions in animations need 'worklet' directive
 const clamp = (val: number, min: number, max: number): number => {
-  "worklet";
+  'worklet';
   return Math.min(Math.max(val, min), max);
 };
 
 // ✅ runOnJS: deliberate bridge crossing after animation completes
-const gesture = Gesture.Pan().onEnd((e) => {
+const gesture = Gesture.Pan().onEnd(e => {
   if (e.translationX > 100) {
     runOnJS(handleDismiss)(); // Explicit bridge crossing — acceptable on end, not onUpdate
   }
@@ -190,12 +191,12 @@ const { id } = useLocalSearchParams<{ id: string }>();
 ```tsx
 // ✅ Always clean up subscriptions
 useEffect(() => {
-  const subscription = AppState.addEventListener("change", handleAppState);
+  const subscription = AppState.addEventListener('change', handleAppState);
   return () => subscription.remove();
 }, []);
 
 // ✅ Expo Image over Image component (automatic memory management)
-import { Image } from "expo-image";
+import { Image } from 'expo-image';
 <Image
   source={{ uri: imageUrl }}
   contentFit="cover"

package/.agent/agents/mobile-reviewer.md

@@ -21,6 +21,7 @@ Mobile performance failure is permanent — the app store reviews mention it, th
 ## Mandatory Pre-Flight Context Inspection
 
 Before auditing React Native code, you MUST inspect:
+
 1. `package.json` / `app.json` → Confirm Expo SDK version, `@shopify/flash-list`, `react-native-reanimated` 3+, and native dependencies
 2. Animation callbacks → Audit Reanimated shared value updates and verify `"worklet"` directives on non-bridge functions
 3. List components → Verify `FlashList` usage over `FlatList` for virtualized datasets exceeding 20 items
@@ -34,24 +35,24 @@ React Native Reanimated 3 runs animations entirely on the UI thread — but only
 ```tsx
 // ❌ BRIDGE CROSSING: Regular setState inside animation callback
 const translateX = useSharedValue(0);
-const gesture = Gesture.Pan().onUpdate((e) => {
+const gesture = Gesture.Pan().onUpdate(e => {
   setState(e.translationX); // Crosses from UI thread to JS thread — jank guaranteed
 });
 
 // ❌ BRIDGE CROSSING: Using regular function instead of worklet
-const gesture = Gesture.Pan().onUpdate((e) => {
+const gesture = Gesture.Pan().onUpdate(e => {
   doSomething(e.translationX); // Regular function can't run on UI thread
 });
 
 // ✅ APPROVED: Everything stays on UI thread
 const translateX = useSharedValue(0);
-const gesture = Gesture.Pan().onUpdate((e) => {
+const gesture = Gesture.Pan().onUpdate(e => {
   translateX.value = e.translationX; // Direct shared value update — UI thread only
 });
 
 // ✅ APPROVED: worklet directive for custom functions used in animations
 const clamp = (value: number, min: number, max: number): number => {
-  "worklet";
+  'worklet';
   return Math.min(Math.max(value, min), max);
 };
 ```
@@ -123,20 +124,20 @@ function Screen() {
 ```tsx
 // ❌ MEMORY LEAK: AppState subscription not removed
 useEffect(() => {
-  const subscription = AppState.addEventListener("change", handleChange);
+  const subscription = AppState.addEventListener('change', handleChange);
   // Missing: return () => subscription.remove();
 }, []);
 
 // ❌ MEMORY LEAK: Keyboard listener not removed
 useEffect(() => {
-  const show = Keyboard.addListener("keyboardWillShow", onShow);
-  const hide = Keyboard.addListener("keyboardWillHide", onHide);
+  const show = Keyboard.addListener('keyboardWillShow', onShow);
+  const hide = Keyboard.addListener('keyboardWillHide', onHide);
   // Missing cleanup!
 }, []);
 
 // ✅ APPROVED: Always return cleanup
 useEffect(() => {
-  const subscription = AppState.addEventListener("change", handleChange);
+  const subscription = AppState.addEventListener('change', handleChange);
   return () => subscription.remove();
 }, []);
 ```
@@ -147,22 +148,22 @@ useEffect(() => {
 
 ```tsx
 // ❌ CRASH: iOS-only API used without platform check
-import { DatePickerIOS } from "react-native"; // Removed in RN 0.65+
+import { DatePickerIOS } from 'react-native'; // Removed in RN 0.65+
 
 // ❌ WARN: Platform-specific style without guard
 const styles = StyleSheet.create({
   shadow: {
-    shadowColor: "#000", // iOS only
+    shadowColor: '#000', // iOS only
     elevation: 5, // Android only — both fine, but document intent
   },
 });
 
 // ❌ CRASH on web: Linking.openURL with tel: on web platforms
-await Linking.openURL("tel:+1234567890"); // Throws on Expo Web
+await Linking.openURL('tel:+1234567890'); // Throws on Expo Web
 
 // ✅ APPROVED: Platform guard
-if (Platform.OS !== "web") {
-  await Linking.openURL("tel:+1234567890");
+if (Platform.OS !== 'web') {
+  await Linking.openURL('tel:+1234567890');
 }
 ```
 

package/.agent/agents/orchestrator.md

@@ -18,6 +18,7 @@ last-updated: 2026-07-29
 ## Mandatory Pre-Flight Context Inspection
 
 Before orchestrating multi-domain tasks, you MUST inspect:
+
 1. `ARCHITECTURE.md` / `task.md` → Verify master component breakdown, system bounds, and multi-domain scope
 2. Domain specialist agent availability (`.agent/agents/`) → Check routing capability for each domain in scope (UI, API, DB, DevOps)
 3. Total token window budget → Ensure combined context passed to parallel worker dispatches remains under token limits
@@ -199,11 +200,13 @@ Approve?  Y = write to disk | N = discard | R = revise with feedback
 ## 9. Fabel Tool Selection & Scaling Rules
 
 ### Tool Priority Hierarchy
+
 1. **Workspace Tools** — prioritize local file search, grep, view, and edit. These are fast and conserve token space.
 2. **Knowledge Assets** — prioritize loaded skills/rules over external web searches.
 3. **Web Search** — use exclusively for time-sensitive metadata, unknown APIs, or library version checks.
 
 ### Complexity-Scaled budgets
+
 - **Simple Lookup / Fact:** 1 tool call max.
 - **Single-File Edit / Bug Fix:** 2–4 tool calls.
 - **Complex Implementation:** 5–10 tool calls.

package/.agent/agents/penetration-tester.md

@@ -20,6 +20,7 @@ You find what the security auditor misses: exploitable chains, not just individu
 ## Mandatory Pre-Flight Context Inspection
 
 Before running an offensive security scan or report, you MUST inspect:
+
 1. Target architecture files (`server.ts`, `routes/`, `auth.ts`) → Identify attack surface and endpoint trust boundaries
 2. CORS and Auth configs (`middleware.ts`, `next.config.js`, `cors.ts`) → Audit CORS headers, JWT secrets, and rate limit rules
 3. Scope declaration → Confirm explicit authorization for targeted endpoints and components

package/.agent/agents/performance-optimizer.md

@@ -18,6 +18,7 @@ last-updated: 2026-07-29
 ## Mandatory Pre-Flight Context Inspection
 
 Before optimizing application performance, you MUST inspect:
+
 1. `package.json` → Check bundle size dependencies (`lodash`, `moment`, `aws-sdk`) and bundler config (`next.config.js`, `vite.config.ts`)
 2. Core Web Vitals metrics / Lighthouse report → Identify exact bottlenecks (LCP > 2.5s, INP > 200ms, CLS > 0.1)
 3. Asset Preload & Font configs → Verify `font-display: swap`, `<link rel="preload">`, and image `priority` declarations
@@ -108,10 +109,10 @@ const handleSearch = (query: string) => {
 // → User sees immediate response, results update without blocking input
 
 // ✅ INP WIN: Move heavy computation off main thread
-const worker = new Worker(new URL("./search.worker.ts", import.meta.url));
+const worker = new Worker(new URL('./search.worker.ts', import.meta.url));
 const handleSearch = (query: string) => {
   worker.postMessage({ query, items: allItems });
-  worker.onmessage = (e) => setResults(e.data);
+  worker.onmessage = e => setResults(e.data);
 };
 ```
 
@@ -136,7 +137,7 @@ import { format } from 'date-fns'; # Only imports format (2kb vs 67kb)
 
 ```tsx
 // ✅ Dynamic imports for non-critical code
-const HeavyChart = dynamic(() => import("./HeavyChart"), {
+const HeavyChart = dynamic(() => import('./HeavyChart'), {
   loading: () => <Skeleton height={400} />,
   ssr: false, // Don't load chart code on server
 });
@@ -159,11 +160,11 @@ export const revalidate = 3600; // Cache for 1 hour
 // ✅ Redis cache wrapper
 const CACHE_TTL = 60 * 60; // 1 hour
 async function getCachedProducts() {
-  const cached = await redis.get("products:all");
+  const cached = await redis.get('products:all');
   if (cached) return JSON.parse(cached);
 
   const products = await db.products.findMany();
-  await redis.setex("products:all", CACHE_TTL, JSON.stringify(products));
+  await redis.setex('products:all', CACHE_TTL, JSON.stringify(products));
   return products;
 }
 ```

package/.agent/agents/performance-reviewer.md

@@ -85,12 +85,12 @@ function handleSearch(query: string) {
 }
 
 // ❌ INP DAMAGE: Artificial setTimeout delay on user interaction
-button.addEventListener("click", () => {
+button.addEventListener('click', () => {
   setTimeout(() => processAction(), 300); // Added latency on every click
 });
 
 // ❌ INP DAMAGE: Complex animation on input events (keydown/mousemove)
-document.addEventListener("mousemove", (e) => {
+document.addEventListener('mousemove', e => {
   renderComplexGradient(e.clientX, e.clientY); // Fires 60+ times/second
 });
 ```
@@ -110,7 +110,7 @@ document.addEventListener("mousemove", (e) => {
 container.prepend(adBanner); // Shifts all existing content down
 
 // ✅ APPROVED: Reserved space prevents CLS
-<div style={{ aspectRatio: "16/9", width: "100%" }}>
+<div style={{ aspectRatio: '16/9', width: '100%' }}>
   <Image src="/photo.jpg" fill alt="Photo" />
 </div>;
 ```
@@ -150,7 +150,7 @@ const CartContext = createContext(cart);     // Changes often — isolated consu
 ```tsx
 // ❌ MEMORY LEAK: Event listener never cleaned up
 useEffect(() => {
-  window.addEventListener("resize", handleResize);
+  window.addEventListener('resize', handleResize);
   // Missing cleanup!
 }, []);
 
@@ -162,13 +162,13 @@ useEffect(() => {
 
 // ❌ MEMORY LEAK: Async operation updates unmounted component
 useEffect(() => {
-  fetchData().then((data) => setData(data)); // Can run after unmount
+  fetchData().then(data => setData(data)); // Can run after unmount
 }, []);
 
 // ✅ APPROVED: AbortController for async + cleanup
 useEffect(() => {
   const controller = new AbortController();
-  fetchData({ signal: controller.signal }).then((data) => {
+  fetchData({ signal: controller.signal }).then(data => {
     if (!controller.signal.aborted) setData(data);
   });
   return () => controller.abort();