tribunal-kit 6.0.0 → 7.0.0

package/.agent/skills/expo-router-v4/SKILL.md

@@ -0,0 +1,81 @@
+---
+name: expo-router-v4
+description: React Native 0.76+ New Architecture (Fabric/TurboModules), Expo Router v4 typed file-based navigation, native haptics, and biometrics.
+tools: Read, Grep, Glob, Edit, Write
+version: 3.0.0
+last-updated: 2026-08-05
+script: .agent/scripts/lint_runner.js
+scripts-binding:
+  - .agent/scripts/lint_runner.js
+skills:
+  - mobile-developer
+  - mobile-design
+  - react-specialist
+---
+
+# Expo Router v4 & React Native New Architecture
+
+## Mandatory Pre-Flight Context Inspection
+
+Before building mobile navigation or components:
+
+1. New Architecture Enforcement → Enable Fabric renderer and TurboModules in `app.json` (`"newArchEnabled": true`)
+2. Typed Routing → Use `expo-router` typed routes for safe navigation
+3. Safe Area & Haptics → Wrap screens in `SafeAreaView` and provide subtle `expo-haptics` feedback
+
+## Layout Navigation Architecture (`app/_layout.tsx`)
+
+```tsx
+import { Stack } from 'expo-router';
+import { StatusBar } from 'expo-status-bar';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+
+export default function RootLayout() {
+  return (
+    <SafeAreaProvider>
+      <StatusBar style="light" />
+      <Stack
+        screenOptions={{
+          headerStyle: { backgroundColor: '#0f172a' },
+          headerTintColor: '#f8fafc',
+          animation: 'slide_from_right',
+        }}
+      >
+        <Stack.Screen name="index" options={{ title: 'Feed' }} />
+        <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
+      </Stack>
+    </SafeAreaProvider>
+  );
+}
+```
+
+## Native Haptic Touch Button Component
+
+```tsx
+import * as Haptics from 'expo-haptics';
+import { Pressable, Text, PressableProps } from 'react-native';
+
+interface TouchButtonProps extends PressableProps {
+  label: string;
+}
+
+export function TouchButton({ label, onPress, ...props }: TouchButtonProps) {
+  return (
+    <Pressable
+      {...props}
+      onPress={e => {
+        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+        onPress?.(e);
+      }}
+      className="px-5 py-3 bg-indigo-600 rounded-xl active:scale-95 transition-transform"
+    >
+      <Text className="text-white font-medium text-center">{label}</Text>
+    </Pressable>
+  );
+}
+```
+
+## 🛑 Verification-Before-Completion (VBC) Protocol
+
+- Verify zero bridge warnings during navigation.
+- Ensure safe area insets are respected across iOS notch and Android gesture bars.

package/.agent/skills/extract-design-system/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before extracting design systems or tokenizing CSS variables, you MUST inspect:
+
 1. 3+ Repetition Frequency Rule (Section 15) → Only tokenize values that recur 3+ times across components to prevent variable bloat
 2. Semantic Naming Convention (Section 17) → Use functional/semantic names (`--color-primary`) rather than literal colors (`--red-500`)
 3. Accessibility Token Contract (Section 110) → Ensure extracted text and surface tokens satisfy a min 4.5:1 WCAG AA contrast ratio
@@ -52,7 +53,7 @@ Tokens should be semantic, not literal. `color-brand` > `color-red`.
   --surface-muted: 210, 40%, 96%;
 
   /* Typography */
-  --font-sans: "Inter", system-ui, sans-serif;
+  --font-sans: 'Inter', system-ui, sans-serif;
 
   /* Space / Geometry (8px grid scale) */
   --space-1: 0.25rem; /* 4px */
@@ -90,26 +91,26 @@ If building a design system inside React/Next.js, standardize the system through
 
 ```typescript
 // ✅ Efficient Extracted Component Architecture
-import { cva } from "class-variance-authority";
+import { cva } from 'class-variance-authority';
 
 const buttonStyles = cva(
-  "inline-flex items-center justify-center rounded-md font-medium transition-colors", // Base
+  'inline-flex items-center justify-center rounded-md font-medium transition-colors', // Base
   {
     variants: {
       intent: {
-        primary: "bg-primary text-white hover:bg-primary/90",
-        destructive: "bg-red-500 text-white hover:bg-red-600",
-        outline: "border border-input hover:bg-accent",
+        primary: 'bg-primary text-white hover:bg-primary/90',
+        destructive: 'bg-red-500 text-white hover:bg-red-600',
+        outline: 'border border-input hover:bg-accent',
       },
       size: {
-        sm: "h-9 px-3 text-sm",
-        default: "h-10 px-4 py-2", // Extracted standard size
-        lg: "h-11 px-8",
+        sm: 'h-9 px-3 text-sm',
+        default: 'h-10 px-4 py-2', // Extracted standard size
+        lg: 'h-11 px-8',
       },
     },
     defaultVariants: {
-      intent: "primary",
-      size: "default",
+      intent: 'primary',
+      size: 'default',
     },
   },
 );

package/.agent/skills/fabel-protocol/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before executing reasoning loops, you MUST inspect:
+
 1. `package.json` / dependency manifests → Verify exact framework version boundaries (React 19 vs 18, Next.js 15 vs 14)
 2. Epistemic Confidence Checklist (Section 1) → Categorize implementation confidence L1 to L5
 3. High-Risk Hallucination Heatmap (Section 7) → Tag uncertain ORM/SDK method calls with `// VERIFY: [reason]` tags
@@ -52,6 +53,7 @@ CONFIDENCE CHECK:
 ### Epistemic Confidence Levels (L1-L5)
 
 Rate the certainty of your implementation decisions using this hierarchy:
+
 - **L1: Absolute Certainty (Verified Truth)**: Code is fully checked against active files in the workspace or verified in up-to-date documentation.
 - **L2: High Confidence (Standard API)**: Using standard library or stable, unchanged language features (e.g. standard Node `fs` methods, basic Python functions).
 - **L3: Moderate Confidence (Likely but Unverified)**: Custom utilities or package features that are likely correct but not actively verified. Must add `// VERIFY: [reason]` tags.
@@ -222,18 +224,21 @@ ALWAYS:
 ## 6. Fabel-5 Cognitive Boundaries (Wellbeing, Evenhandedness, Memory)
 
 ### User Wellbeing & Safety
-* **No Psychoanalysis / Diagnosis**: Reflect what is said without diagnosing or assigning psychological narratives (e.g. "you restrict because of trauma"). Suggest professional help without clinical labels.
-* **Self-Harm Interruptions**: Never suggest physical substitutes (holding ice, snapping rubber bands, drawing lines) or mimic self-harm. They reinforce the self-harm loop.
-* **No Over-reliance**: Do not thank the user for reaching out, encourage them to stay, or reiterate willingness to continue. Avoid conversational dependencies.
-* **Positive Paths**: Acknowledge distress without reflective listening that amplifies negative spirals. Keep paths to external help open.
+
+- **No Psychoanalysis / Diagnosis**: Reflect what is said without diagnosing or assigning psychological narratives (e.g. "you restrict because of trauma"). Suggest professional help without clinical labels.
+- **Self-Harm Interruptions**: Never suggest physical substitutes (holding ice, snapping rubber bands, drawing lines) or mimic self-harm. They reinforce the self-harm loop.
+- **No Over-reliance**: Do not thank the user for reaching out, encourage them to stay, or reiterate willingness to continue. Avoid conversational dependencies.
+- **Positive Paths**: Acknowledge distress without reflective listening that amplifies negative spirals. Keep paths to external help open.
 
 ### Moral & Political Evenhandedness
-* **Nuance Over Brevity**: Reject requests for simple yes/no or one-word answers on contested political, ethical, or policy issues. Give a fair, balanced overview of existing positions.
-* **Opposing Perspectives**: Conclude arguments for positions by presenting opposing viewpoints or empirical disputes even if the user/AI agrees with the primary view.
+
+- **Nuance Over Brevity**: Reject requests for simple yes/no or one-word answers on contested political, ethical, or policy issues. Give a fair, balanced overview of existing positions.
+- **Opposing Perspectives**: Conclude arguments for positions by presenting opposing viewpoints or empirical disputes even if the user/AI agrees with the primary view.
 
 ### Memory & Preference Boundaries
-* **Invisible Integration**: Integrate remembered user context silently without attribution or observation verbs ("I notice in your profile...", "Based on your memory...").
-* **Expertise Tuning**: Match language and technical depth to the user's stated background without lecturing.
+
+- **Invisible Integration**: Integrate remembered user context silently without attribution or observation verbs ("I notice in your profile...", "Based on your memory...").
+- **Expertise Tuning**: Match language and technical depth to the user's stated background without lecturing.
 
 ---
 
@@ -241,15 +246,15 @@ ALWAYS:
 
 High-risk hallucination zones (verify before using):
 
-| Category | Common Hallucinations | Why |
-|---|---|---|
-| **Prisma ORM** | `findOne()`, `updateMany({where:{id}})` | Renamed/misused methods |
-| **React 19** | `useFormState()`, `useServerComponent()` | Renamed or never existed |
-| **Next.js 15** | `headers()` without await, `notFound()` in client | Breaking changes |
-| **OpenAI SDK** | `response.text`, `chat.stream()`, `gpt-5` | Wrong properties/methods |
-| **Anthropic SDK** | `claude-4-opus`, `temperature: "low"` | Wrong model strings/types |
-| **Node.js** | `fs.readAsync()`, `fetch()` below Node 18 | Methods that don't exist |
-| **Python** | `list.findIndex()`, `dict.filter()` | JS methods on Python types |
+| Category          | Common Hallucinations                             | Why                        |
+| ----------------- | ------------------------------------------------- | -------------------------- |
+| **Prisma ORM**    | `findOne()`, `updateMany({where:{id}})`           | Renamed/misused methods    |
+| **React 19**      | `useFormState()`, `useServerComponent()`          | Renamed or never existed   |
+| **Next.js 15**    | `headers()` without await, `notFound()` in client | Breaking changes           |
+| **OpenAI SDK**    | `response.text`, `chat.stream()`, `gpt-5`         | Wrong properties/methods   |
+| **Anthropic SDK** | `claude-4-opus`, `temperature: "low"`             | Wrong model strings/types  |
+| **Node.js**       | `fs.readAsync()`, `fetch()` below Node 18         | Methods that don't exist   |
+| **Python**        | `list.findIndex()`, `dict.filter()`               | JS methods on Python types |
 
 When in doubt: **search the official docs**. Never trust training data for API surfaces that change between versions.
 
@@ -279,10 +284,12 @@ Before finalizing any response, ask yourself:
 ---
 
 ## Pre-Flight Checklist
+
 - [ ] Have I reviewed the Fabel epistemic confidence guidelines before starting?
 - [ ] Have I checked the framework version context in the workspace?
 
 ## VBC Protocol
+
 - [ ] Verify that any APIs or files to be updated are loaded and checked for stale context prior to execution.
 
 ---

package/.agent/skills/fixing-accessibility/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before remediating HTML accessibility defects, you MUST inspect:
+
 1. Priority Matrix (Section 22) → Ensure accessible names on icon buttons (P1) and native HTML keyboard controls (P2) before styling
 2. Focus Ring Policy (Section 29) → Ban `outline: none` without providing explicit `:focus-visible` replacement (`2px` ring + offset)
 3. Form Error Association (Section 32) → Attach `aria-invalid="true"` and `aria-describedby` pointing to error text IDs
@@ -30,21 +31,22 @@ Guidelines for detecting, prioritizing, and fixing accessibility defects across
 
 ## 1. Priority Priority Matrix (WCAG 2.2 AA)
 
-| Priority | Category | Critical Requirements |
-| --- | --- | --- |
-| **P1** | **Accessible Names** | Every icon button MUST have `aria-label` or `aria-labelledby`. Decorative icons MUST have `aria-hidden="true"`. |
-| **P2** | **Keyboard Access** | All interactive controls MUST be reachable and operable via `Tab` / `Shift+Tab`, `Space`, `Enter`. NEVER use `<div>` or `<span>` as clickable elements without `role="button"`, `tabIndex={0}`, and key handlers. |
-| **P3** | **Focus & Dialogs (SC 2.4.11)** | Modals/Dialogs MUST trap focus within the dialog container while open, return focus on close, dismiss on `Escape`, and ensure focused items are **never fully obscured by sticky headers/footers**. |
-| **P4** | **Focus Appearance (SC 2.4.13)** | Focus indicators MUST be clearly visible (`:focus-visible`), achieve at least **3:1 contrast** against adjacent background, and have a min **2px thickness**. |
-| **P5** | **Target Size (SC 2.5.8)** | Interactive controls MUST measure at least **24x24 CSS pixels** (min **44x44px** recommended for mobile touch targets) or have sufficient non-intersecting spacing. |
-| **P6** | **Color & Contrast** | Text MUST satisfy WCAG AA 4.5:1 ratio (3.0:1 for large text). Color alone MUST NOT be the only indicator of state or error. |
-| **P7** | **Form Validation** | Inputs MUST have explicit `<label>` or `aria-labelledby`. Errors MUST use `aria-invalid="true"` and `aria-describedby` pointing to error text. |
+| Priority | Category                         | Critical Requirements                                                                                                                                                                                             |
+| -------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **P1**   | **Accessible Names**             | Every icon button MUST have `aria-label` or `aria-labelledby`. Decorative icons MUST have `aria-hidden="true"`.                                                                                                   |
+| **P2**   | **Keyboard Access**              | All interactive controls MUST be reachable and operable via `Tab` / `Shift+Tab`, `Space`, `Enter`. NEVER use `<div>` or `<span>` as clickable elements without `role="button"`, `tabIndex={0}`, and key handlers. |
+| **P3**   | **Focus & Dialogs (SC 2.4.11)**  | Modals/Dialogs MUST trap focus within the dialog container while open, return focus on close, dismiss on `Escape`, and ensure focused items are **never fully obscured by sticky headers/footers**.               |
+| **P4**   | **Focus Appearance (SC 2.4.13)** | Focus indicators MUST be clearly visible (`:focus-visible`), achieve at least **3:1 contrast** against adjacent background, and have a min **2px thickness**.                                                     |
+| **P5**   | **Target Size (SC 2.5.8)**       | Interactive controls MUST measure at least **24x24 CSS pixels** (min **44x44px** recommended for mobile touch targets) or have sufficient non-intersecting spacing.                                               |
+| **P6**   | **Color & Contrast**             | Text MUST satisfy WCAG AA 4.5:1 ratio (3.0:1 for large text). Color alone MUST NOT be the only indicator of state or error.                                                                                       |
+| **P7**   | **Form Validation**              | Inputs MUST have explicit `<label>` or `aria-labelledby`. Errors MUST use `aria-invalid="true"` and `aria-describedby` pointing to error text.                                                                    |
 
 ---
 
 ## 2. Accessible Code Patterns
 
 ### Icon-Only Button
+
 ```tsx
 // ✅ SAFE & ACCESSIBLE
 <button
@@ -58,6 +60,7 @@ Guidelines for detecting, prioritizing, and fixing accessibility defects across
 ```
 
 ### Accessible Modal Dialog Focus Trap
+
 ```tsx
 // ✅ SAFE & ACCESSIBLE
 <div
@@ -68,8 +71,12 @@ Guidelines for detecting, prioritizing, and fixing accessibility defects across
   className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
 >
   <div className="bg-surface p-6 rounded-xl max-w-md w-full">
-    <h2 id="dialog-title" className="text-xl font-bold">Confirm Deletion</h2>
-    <p id="dialog-description" className="text-muted mt-2">This action cannot be undone.</p>
+    <h2 id="dialog-title" className="text-xl font-bold">
+      Confirm Deletion
+    </h2>
+    <p id="dialog-description" className="text-muted mt-2">
+      This action cannot be undone.
+    </p>
     {/* Actions */}
   </div>
 </div>
@@ -79,11 +86,11 @@ Guidelines for detecting, prioritizing, and fixing accessibility defects across
 
 ## Anti-Slop Table
 
-| Violation | Accessible Fix | Impact |
-| --- | --- | --- |
-| `<div onClick={submit}>Submit</div>` | `<button type="button" onClick={submit}>Submit</button>` | Fixes screen reader announcement & keyboard trigger |
-| `<button><TrashIcon /></button>` | `<button aria-label="Delete item"><TrashIcon aria-hidden="true" /></button>` | Gives screen reader clear accessible name |
-| `outline: none` in CSS | `:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }` | Restores visible keyboard focus indicator |
+| Violation                            | Accessible Fix                                                               | Impact                                              |
+| ------------------------------------ | ---------------------------------------------------------------------------- | --------------------------------------------------- |
+| `<div onClick={submit}>Submit</div>` | `<button type="button" onClick={submit}>Submit</button>`                     | Fixes screen reader announcement & keyboard trigger |
+| `<button><TrashIcon /></button>`     | `<button aria-label="Delete item"><TrashIcon aria-hidden="true" /></button>` | Gives screen reader clear accessible name           |
+| `outline: none` in CSS               | `:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }`    | Restores visible keyboard focus indicator           |
 
 ---
 

package/.agent/skills/fixing-metadata/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before engineering metadata or Open Graph tags, you MUST inspect:
+
 1. Title & Meta Description Caps (Section 24) → Restrict title tags to 50–60 chars and meta descriptions to 140–155 chars
 2. Absolute Image URL Rule (Section 74) → Enforce full absolute HTTPS URLs (`https://domain.com/og.jpg`) for `og:image` and `twitter:image`
 3. Twitter Card Type (Section 39) → Always specify `<meta name="twitter:card" content="summary_large_image" />` for prominent social previews
@@ -31,15 +32,20 @@ Audit, generate, and fix page metadata for rich social previews, search engine i
 ## 4 Metadata Standard Requirements
 
 ### 1. Title & Meta Description Length & Formatting
-- **Title Tag**: 50–60 characters max (*"Product Title | Brand Name"*).
+
+- **Title Tag**: 50–60 characters max (_"Product Title | Brand Name"_).
 - **Meta Description**: 140–155 characters max. Must contain active call to value without truncating on search result cards.
 
 ### 2. Open Graph & Twitter Card Matrix
+
 ```html
 <!-- Open Graph / Facebook / LinkedIn -->
 <meta property="og:type" content="website" />
 <meta property="og:title" content="UI Skills for Design Engineers" />
-<meta property="og:description" content="A curated collection of design-engineering skills for accessibility, motion, and frontend craft." />
+<meta
+  property="og:description"
+  content="A curated collection of design-engineering skills for accessibility, motion, and frontend craft."
+/>
 <meta property="og:image" content="https://example.com/og-image.jpg" />
 <meta property="og:image:width" content="1200" />
 <meta property="og:image:height" content="630" />
@@ -47,32 +53,37 @@ Audit, generate, and fix page metadata for rich social previews, search engine i
 <!-- Twitter / X -->
 <meta name="twitter:card" content="summary_large_image" />
 <meta name="twitter:title" content="UI Skills for Design Engineers" />
-<meta name="twitter:description" content="A curated collection of design-engineering skills for accessibility, motion, and frontend craft." />
+<meta
+  name="twitter:description"
+  content="A curated collection of design-engineering skills for accessibility, motion, and frontend craft."
+/>
 <meta name="twitter:image" content="https://example.com/twitter-image.jpg" />
 ```
 
 ### 3. Canonical Tag Verification
+
 ```html
 <link rel="canonical" href="https://example.com/current-page-path" />
 ```
 
 ### 4. Next.js App Router Metadata Export Example
+
 ```typescript
-import type { Metadata } from "next";
+import type { Metadata } from 'next';
 
 export const metadata: Metadata = {
-  title: "UI Skills for Design Engineers",
-  description: "Curated design-engineering skills for accessibility, motion, and frontend craft.",
+  title: 'UI Skills for Design Engineers',
+  description: 'Curated design-engineering skills for accessibility, motion, and frontend craft.',
   openGraph: {
-    title: "UI Skills for Design Engineers",
-    description: "Curated design-engineering skills for accessibility, motion, and frontend craft.",
-    url: "https://example.com",
-    images: [{ url: "https://example.com/og.jpg", width: 1200, height: 630 }],
+    title: 'UI Skills for Design Engineers',
+    description: 'Curated design-engineering skills for accessibility, motion, and frontend craft.',
+    url: 'https://example.com',
+    images: [{ url: 'https://example.com/og.jpg', width: 1200, height: 630 }],
   },
   twitter: {
-    card: "summary_large_image",
-    title: "UI Skills for Design Engineers",
-    images: ["https://example.com/twitter.jpg"],
+    card: 'summary_large_image',
+    title: 'UI Skills for Design Engineers',
+    images: ['https://example.com/twitter.jpg'],
   },
 };
 ```

package/.agent/skills/fixing-motion-performance/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before auditing or fixing animation performance, you MUST inspect:
+
 1. Browser Rendering Pipeline (Section 22) → Restrict properties to Composite-only (`transform`, `opacity`) and eliminate Layout/Paint animators
 2. Layout Thrashing (Section 33) → Batch all DOM reads (`offsetHeight`, `getBoundingClientRect`) before executing DOM writes (`style.height = ...`)
 3. `will-change` VRAM management (Section 53) → Remove `will-change` hints upon animation completion
@@ -31,6 +32,7 @@ Guidelines for auditing and resolving web animation jank, layout thrashing, and
 ## 1. Browser Rendering Pipeline & Compositor Rules
 
 Animations trigger one of 3 rendering costs:
+
 1. **Layout (Expensive)**: Animating `width`, `height`, `margin`, `padding`, `top`, `left`, `flex`, `grid`. Forces full geometry recalculation across the page.
 2. **Paint (Moderate)**: Animating `color`, `background-color`, `border-color`, `box-shadow`, `filter`. Forces pixel repaint.
 3. **Composite (GPU Fast)**: Animating **`transform`** (`translate`, `scale`, `rotate`) and **`opacity`**. Offloaded entirely to GPU compositor thread!
@@ -75,11 +77,11 @@ elements.forEach((el, i) => {
 
 ## Anti-Slop Table
 
-| Performance Issue | Motion Performance Fix | FPS Gain |
-| --- | --- | --- |
-| Animating `height: 0` to `auto` | FLIP technique or `scaleY` transform animation | 15fps → 60fps |
-| Scroll listener mutating inline CSS | `CSS scroll-timeline` or `IntersectionObserver` | Prevents main-thread scroll jank |
-| `transition: all 0.3s` | `transition: transform 200ms cubic-bezier(0.16,1,0.3,1), opacity 200ms ease` | Eliminates accidental layout/color recalculations |
+| Performance Issue                   | Motion Performance Fix                                                       | FPS Gain                                          |
+| ----------------------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------- |
+| Animating `height: 0` to `auto`     | FLIP technique or `scaleY` transform animation                               | 15fps → 60fps                                     |
+| Scroll listener mutating inline CSS | `CSS scroll-timeline` or `IntersectionObserver`                              | Prevents main-thread scroll jank                  |
+| `transition: all 0.3s`              | `transition: transform 200ms cubic-bezier(0.16,1,0.3,1), opacity 200ms ease` | Eliminates accidental layout/color recalculations |
 
 ---
 

package/.agent/skills/framer-motion-expert/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before writing Framer Motion code in React, you MUST inspect:
+
 1. `package.json` / Next.js Client Boundaries → Add `"use client"` directive on Next.js App Router files containing `motion.X`
 2. AnimatePresence & layoutId Rules (Section 117) → Enforce `mode="wait"` and ensure every `<AnimatePresence>` child has a unique `key`
 3. Bundle Optimization (Section 182) → Use `<LazyMotion features={domAnimation}>` with `m.div` for lightweight production bundles
@@ -44,8 +45,13 @@ Before writing Framer Motion code in React, you MUST inspect:
 ### `motion.X` / Declarative Animation
 
 ```tsx
-import { motion } from "framer-motion";
-<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -20 }} transition={{ duration: 0.3, ease: "easeOut" }} />;
+import { motion } from 'framer-motion';
+<motion.div
+  initial={{ opacity: 0, y: 20 }}
+  animate={{ opacity: 1, y: 0 }}
+  exit={{ opacity: 0, y: -20 }}
+  transition={{ duration: 0.3, ease: 'easeOut' }}
+/>;
 ```
 
 ### Variants (Stagger / Orchestration)
@@ -56,11 +62,11 @@ const container = {
   visible: { transition: { staggerChildren: 0.08, delayChildren: 0.1 } },
 };
 const item = {
-  hidden: { opacity: 0, y: 20, filter: "blur(4px)" },
-  visible: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: 0.4 } },
+  hidden: { opacity: 0, y: 20, filter: 'blur(4px)' },
+  visible: { opacity: 1, y: 0, filter: 'blur(0px)', transition: { duration: 0.4 } },
 };
 <motion.ul variants={container} initial="hidden" animate="visible">
-  {list.map((e) => (
+  {list.map(e => (
     <motion.li key={e.id} variants={item}>
       {e.name}
     </motion.li>
@@ -131,10 +137,15 @@ import { LayoutGroup } from "framer-motion";
 
 ```tsx
 <AnimatePresence mode="sync">
-  {" "}
+  {' '}
   {/* "sync"|"wait"|"popLayout" */}
-  {items.map((item) => (
-    <motion.div key={item.id} /* ← REQUIRED */ initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: "auto" }} exit={{ opacity: 0, height: 0 }} />
+  {items.map(item => (
+    <motion.div
+      key={item.id}
+      /* ← REQUIRED */ initial={{ opacity: 0, height: 0 }}
+      animate={{ opacity: 1, height: 'auto' }}
+      exit={{ opacity: 0, height: 0 }}
+    />
   ))}
 </AnimatePresence>
 // mode="wait" — waits for exit before entering
@@ -146,7 +157,7 @@ import { LayoutGroup } from "framer-motion";
 ## Scroll Animations
 
 ```tsx
-import { useScroll, useTransform } from "framer-motion";
+import { useScroll, useTransform } from 'framer-motion';
 // Page scroll progress (0–1)
 const { scrollYProgress } = useScroll();
 const y = useTransform(scrollYProgress, [0, 1], [0, -200]);
@@ -155,7 +166,7 @@ const opacity = useTransform(scrollYProgress, [0, 0.5], [1, 0]);
 
 // Element-scoped scroll
 const ref = useRef(null);
-const { scrollYProgress } = useScroll({ target: ref, offset: ["start end", "end start"] });
+const { scrollYProgress } = useScroll({ target: ref, offset: ['start end', 'end start'] });
 ```
 
 ---
@@ -165,9 +176,9 @@ const { scrollYProgress } = useScroll({ target: ref, offset: ["start end", "end
 ### `useAnimate` — Imperative sequences
 
 ```tsx
-import { useAnimate, stagger } from "framer-motion";
+import { useAnimate, stagger } from 'framer-motion';
 const [scope, animate] = useAnimate(); // ← returns [scope, animate] NOT [ref, controls]
-await animate(".item", { opacity: 1 }, { delay: stagger(0.1) });
+await animate('.item', { opacity: 1 }, { delay: stagger(0.1) });
 <div ref={scope}>...</div>;
 ```
 
@@ -194,7 +205,7 @@ const skewX = useTransform(xVel, [-1000, 0, 1000], [-15, 0, 15]);
 
 ```tsx
 // LazyMotion — ~5KB vs ~30KB full bundle
-import { LazyMotion, domAnimation, m } from "framer-motion";
+import { LazyMotion, domAnimation, m } from 'framer-motion';
 // domAnimation ≈ 5KB | domMax ≈ 20KB (needed for layout/drag)
 <LazyMotion features={domAnimation}>
   <m.div animate={{ opacity: 1 }} />
@@ -204,10 +215,13 @@ import { LazyMotion, domAnimation, m } from "framer-motion";
 ### Accessibility
 
 ```tsx
-import { useReducedMotion } from "framer-motion";
+import { useReducedMotion } from 'framer-motion';
 const reduce = useReducedMotion();
 // opacity/color: always safe | position/scale/rotation: must be disabled when reduce=true
-<motion.div animate={{ x: reduce ? 0 : 100, opacity: 1 }} transition={{ duration: reduce ? 0 : 0.5 }} />;
+<motion.div
+  animate={{ x: reduce ? 0 : 100, opacity: 1 }}
+  transition={{ duration: reduce ? 0 : 0.5 }}
+/>;
 ```
 
 ### Rules

package/.agent/skills/frontend-design/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before implementing front-end designs or CSS layout systems, you MUST inspect:
+
 1. Relative Color Syntax (Section 16) → Derive hover/active states dynamically with `oklch(from var(--color-primary) calc(l - 0.08) c h)`
 2. Nested Radius Math (Section 54) → Enforce `outer_radius = inner_radius + padding_inner` for nested card containers
 3. APCA Contrast Thresholds (Section 81) → Ensure Lc > 75 for body text, Lc > 60 for headings, and Lc > 45 for borders and labels
@@ -31,21 +32,22 @@ This skill guides the implementation of responsive layout systems, color science
 ## 1. Relative Color Syntax & OKLCH Theme Tokens
 
 Perceptually uniform color science ensures stable contrast. Use CSS **Relative Color Syntax** to derive state colors dynamically:
+
 ```css
 :root {
   /* base color values */
-  --color-primary: oklch(62% 0.21 250);       /* Brand electric blue */
-  
+  --color-primary: oklch(62% 0.21 250); /* Brand electric blue */
+
   /* Deriving hover states dynamically: reduce lightness, preserve chroma and hue */
   --color-primary-hover: oklch(from var(--color-primary) calc(l - 0.08) c h);
   --color-primary-active: oklch(from var(--color-primary) calc(l - 0.12) c h);
-  
+
   /* Backgrounds */
   --bg-surface: oklch(100% 0 0);
   --text-main: oklch(20% 0.02 250);
 }
 
-[data-theme="dark"] {
+[data-theme='dark'] {
   --bg-surface: oklch(14% 0.008 250);
   --text-main: oklch(93% 0.003 250);
 }
@@ -56,19 +58,21 @@ Perceptually uniform color science ensures stable contrast. Use CSS **Relative C
 ## 2. Spatial Grid Math & Radius Tokens
 
 Enforce an 8px spatial grid calculated mathematically to ensure alignment precision:
+
 ```css
 :root {
   --base-grid: 8px;
-  
-  --space-xs:  calc(var(--base-grid) * 0.5);  /* 4px  - icon gaps */
-  --space-sm:  calc(var(--base-grid) * 1);    /* 8px  - tag paddings */
-  --space-md:  calc(var(--base-grid) * 2);    /* 16px - inputs */
-  --space-lg:  calc(var(--base-grid) * 3);    /* 24px - card padding */
-  --space-xl:  calc(var(--base-grid) * 4);    /* 32px - section gaps */
+
+  --space-xs: calc(var(--base-grid) * 0.5); /* 4px  - icon gaps */
+  --space-sm: calc(var(--base-grid) * 1); /* 8px  - tag paddings */
+  --space-md: calc(var(--base-grid) * 2); /* 16px - inputs */
+  --space-lg: calc(var(--base-grid) * 3); /* 24px - card padding */
+  --space-xl: calc(var(--base-grid) * 4); /* 32px - section gaps */
 }
 ```
 
 ### Nested Radius Formula
+
 Ensure component inner borders track correctly:
 `outer_radius = inner_radius + padding_inner`
 If container padding is `16px` and inner content radius is `8px`, then container outer radius must be exactly `24px` (`8px + 16px`).
@@ -78,6 +82,7 @@ If container padding is `16px` and inner content radius is `8px`, then container
 ## 3. Responsive Layouts & Container Queries
 
 Avoid viewport-level media queries for self-contained components. Use container queries to make components portable:
+
 ```css
 .component-wrapper {
   container-type: inline-size;
@@ -98,15 +103,18 @@ Avoid viewport-level media queries for self-contained components. Use container
 ## 4. APCA Contrast Guidelines
 
 Ensure that typography meets the APCA Lc guidelines:
-*   Lc > 75 for body text elements.
-*   Lc > 60 for large titles and headings.
-*   Lc > 45 for secondary input labels and border guides.
+
+- Lc > 75 for body text elements.
+- Lc > 60 for large titles and headings.
+- Lc > 45 for secondary input labels and border guides.
 
 ---
 
 ## Pre-Flight Checklist
+
 - [ ] Have I reviewed the user's specific constraints and requests?
 - [ ] Have I checked the environment for relevant existing implementations?
 
 ## VBC Protocol (Verification-Before-Completion)
+
 You MUST verify existing code signatures and variables before attempting to modify or call them. No hallucination is permitted.

package/.agent/skills/frontend-security-expert/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before auditing or writing client-side code, you MUST inspect:
+
 1. XSS Sanitize Rules (Section 28) → Require DOMPurify for any `dangerouslySetInnerHTML` and audit dynamic `javascript:` URIs
 2. HttpOnly Auth Token Storage (Section 34) → Ban storing JWTs or auth tokens in `localStorage` or `sessionStorage`; use `HttpOnly`, `Secure`, `SameSite` cookies
 3. PostMessage Origin Verification (Section 46) → Never use `targetOrigin: '*'` and always validate `event.origin` on receiving handlers

package/.agent/skills/game-design-expert/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before designing gameplay systems or controller feel, you MUST inspect:
+
 1. 3Cs Foundation (Character, Camera, Controls) (Section 25) → Implement input buffering (~150ms) and coyote time (~100ms) before designing enemy AI or progression
 2. Macro Gameplay Loop Validation (Section 42) → Ensure upgrading systems directly alter action and combat feel to prevent player churn
 3. Juicing & Hitstop Feel (Section 58) → Incorporate screen shake, hitstop (3 freeze frames), particle explosions, and squash-and-stretch for impact feedback