tribunal-kit 6.0.1 → 8.0.0

package/.agent/skills/local-first/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before implementing local-first storage or CRDT synchronization, you MUST inspect:
+
 1. Conflict Resolution Strategy (Section 15) → Define explicit conflict resolution (LWW timestamps or Yjs CRDTs) before writing local sync logic
 2. Persistent Storage (Section 16) → Use IndexedDB (via Dexie/idb) or SQLite WASM for local persistence; ban localStorage for >5MB data
 3. Incremental Watermark Sync (Section 17) → Perform delta syncs using timestamps/watermarks rather than re-fetching full datasets
@@ -55,20 +56,20 @@ Do not use React Query / SWR to build local-first. They are HTTP caching mechani
 // ❌ CLOUD-FIRST (React Query / Fetch)
 // Fails when offline. Subject to UI latency.
 const { data, isLoading } = useQuery({
-  queryKey: ["todos"],
-  queryFn: () => fetch("/api/todos").then((res) => res.json()),
+  queryKey: ['todos'],
+  queryFn: () => fetch('/api/todos').then(res => res.json()),
 });
 
 // ✅ LOCAL-FIRST (e.g. PowerSync / ElectricSQL / WatermelonDB)
 // Resolves instantly. Data lives locally. Syncs silently in background.
-import { useQuery } from "@powersync/react";
+import { useQuery } from '@powersync/react';
 
-const { data, isLoading } = useQuery("SELECT * FROM todos ORDER BY created_at DESC");
+const { data, isLoading } = useQuery('SELECT * FROM todos ORDER BY created_at DESC');
 
 // Writes are also local First
 const addTodo = async (text: string) => {
   // Written to the local SQLite WASM database instantly.
-  await localDb.execute("INSERT INTO todos (id, text) VALUES (uuid(), ?)", [text]);
+  await localDb.execute('INSERT INTO todos (id, text) VALUES (uuid(), ?)', [text]);
   // Background worker syncs to Postgres later.
 };
 ```
@@ -83,22 +84,22 @@ When two users edit the exact same document offline and then reconnect, how is i
 
 ```typescript
 // Yjs - The leading CRDT library for collaborative text/state
-import * as Y from "yjs";
-import { WebsocketProvider } from "y-websocket";
+import * as Y from 'yjs';
+import { WebsocketProvider } from 'y-websocket';
 
 const ydoc = new Y.Doc();
-const provider = new WebsocketProvider("wss://sync.example.com", "room-1", ydoc);
+const provider = new WebsocketProvider('wss://sync.example.com', 'room-1', ydoc);
 
 // Shared state array
-const yarray = ydoc.getArray("todos");
+const yarray = ydoc.getArray('todos');
 
 // Observe changes (Fires locally and when peers sync)
-yarray.observe((event) => {
-  console.log("State updated natively without conflict:", yarray.toArray());
+yarray.observe(event => {
+  console.log('State updated natively without conflict:', yarray.toArray());
 });
 
 // Insert data (Instantly merges cleanly with remote peers)
-yarray.insert(0, ["Buy milk"]);
+yarray.insert(0, ['Buy milk']);
 ```
 
 ---
@@ -117,7 +118,7 @@ Storing megabytes of relational data in `localStorage` will crash the browser.
 
 ```typescript
 // Clean IndexedDB Wrapper Example (Dexie)
-import Dexie, { type EntityTable } from "dexie";
+import Dexie, { type EntityTable } from 'dexie';
 
 interface Friend {
   id: number;
@@ -125,21 +126,21 @@ interface Friend {
   age: number;
 }
 
-const db = new Dexie("FriendsDatabase") as Dexie & {
-  friends: EntityTable<Friend, "id">;
+const db = new Dexie('FriendsDatabase') as Dexie & {
+  friends: EntityTable<Friend, 'id'>;
 };
 
 // Schema configuration
 db.version(1).stores({
-  friends: "++id, name, age", // Primary key and indexed props
+  friends: '++id, name, age', // Primary key and indexed props
 });
 
 // Write to DB instantly
-await db.friends.add({ name: "Alice", age: 25 });
+await db.friends.add({ name: 'Alice', age: 25 });
 
 // Live query natively drives React state without network calls
-import { useLiveQuery } from "dexie-react-hooks";
-const friends = useLiveQuery(() => db.friends.where("age").above(21).toArray());
+import { useLiveQuery } from 'dexie-react-hooks';
+const friends = useLiveQuery(() => db.friends.where('age').above(21).toArray());
 ```
 
 ---

package/.agent/skills/local-first-architecture/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before implementing local-first architecture or offline sync engines, you MUST inspect:
+
 1. Zero Network Latency Rule (Section 24) → Execute reads and writes against local storage (IndexedDB/SQLite) first before queueing outbound sync
 2. Outbound Mutation Queue (Section 28) → Persist mutation logs in IndexedDB with client-generated UUID `idempotencyKey` fields
 3. Conflict Resolution Strategy (Section 33) → Use Last-Write-Wins (LWW) for simple fields or CRDTs (Yjs/Automerge) for collaborative state
@@ -31,19 +32,23 @@ Architect software that reads and writes to local storage (SQLite/IndexedDB) fir
 ## 4 Pillars of Local-First Architecture
 
 ### 1. Read & Write Local First
+
 - **Zero Network Latency**: UI queries (`select * from tasks`) run synchronously or near-instantaneously against in-memory or IndexedDB caches.
-- Mutations update the local cache immediately (*optimistic write*), appending a mutation log item to an outbound sync queue.
+- Mutations update the local cache immediately (_optimistic write_), appending a mutation log item to an outbound sync queue.
 
 ### 2. Outbound Mutation Queue & Idempotency
+
 - Store mutation logs in a persistent local queue (`IndexedDB` / `SQLite`).
 - Assign every client mutation a unique UUID (`idempotencyKey`).
 - When network connection is restored, flush queue items sequentially with automatic retry on 5xx failures.
 
 ### 3. Conflict Resolution (CRDTs & LWW)
+
 - **Last-Write-Wins (LWW)**: Timestamp + Client ID ordering for simple fields.
 - **CRDTs (Yjs / Automerge)**: Conflict-free Replicated Data Types for collaborative text editing and array state.
 
 ### 4. Background Delta Streaming
+
 - Receive database updates via WebSockets or Server-Sent Events (SSE) as thin binary deltas (`sync_version > client_version`), applying changes to local storage without re-fetching full datasets.
 
 ---

package/.agent/skills/lottie-animation/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before integrating Lottie animations, you MUST inspect:
+
 1. Asset Format (.lottie vs .json) → Prefer compressed `.lottie` (dotLottie) assets for 80% smaller bundle file sizes
 2. Playback Triggers (Section 34) → Bind playback to user hover/click or viewport intersection instead of aggressive continuous looping
 3. Package Manifest (`package.json`) → Verify `@dotlottie/react-player` or `lottie-web` library dependencies
@@ -31,10 +32,11 @@ Integrate lightweight, vector-based Lottie animations with interactive trigger c
 ## 3 Lottie Integration Recipes
 
 ### 1. React dotLottie Interactive Player (`@dotlottie/react-player`)
+
 ```tsx
-import React, { useRef } from "react";
-import { DotLottiePlayer, Controls } from "@dotlottie/react-player";
-import "@dotlottie/react-player/dist/index.css";
+import React, { useRef } from 'react';
+import { DotLottiePlayer, Controls } from '@dotlottie/react-player';
+import '@dotlottie/react-player/dist/index.css';
 
 export function InteractiveLottieIcon() {
   const lottieRef = useRef<any>(null);
@@ -57,9 +59,11 @@ export function InteractiveLottieIcon() {
 ```
 
 ### 2. Runtime Color Injection / Theming
+
 Pass custom CSS variable overrides to dotLottie players to dynamically recolor vector paths at runtime without re-downloading JSON assets.
 
 ### 3. Performance & Lazy Loading
+
 - Use `.lottie` (dotLottie format) instead of uncompressed `.json` Lottie files to achieve **80% smaller bundle file sizes**.
 - Lazy-load offscreen Lottie animations using `IntersectionObserver`.
 

package/.agent/skills/marquee-loop/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before implementing marquee loop tracks, you MUST inspect:
+
 1. DOM Structure (Section 24) → Duplicate item tracks MUST be rendered with `aria-hidden="true"` to prevent screen reader redundancy
 2. Hover Accessibility (Section 50) → Enforce `animation-play-state: paused` on `:hover` and `:focus-within`
 3. Reduced Motion Fallback (Section 61) → Collapse marquee into static wrapped flex grid when `prefers-reduced-motion: reduce` is active

package/.agent/skills/masked-reveal/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before implementing clip-path or SVG mask reveals, you MUST inspect:
+
 1. Target DOM elements → Enforce `overflow: hidden` on text line wrappers to prevent unmasked overflow artifacts
 2. `clip-path: inset()` syntax (Section 26) → Prefer CSS `clip-path` over heavy SVG masks for linear curtain wipes
 3. Transition Easing → Use custom ease-out curves (`cubic-bezier(0.16, 1, 0.3, 1)`) for smooth deceleration
@@ -31,10 +32,15 @@ Create editorial, high-end visual reveals using CSS `clip-path` and SVG masks.
 ## 3 Masked Reveal Patterns
 
 ### 1. CSS `clip-path` Curtain Reveal
+
 ```css
 @keyframes curtain-reveal {
-  from { clip-path: inset(0 100% 0 0); }
-  to { clip-path: inset(0 0 0 0); }
+  from {
+    clip-path: inset(0 100% 0 0);
+  }
+  to {
+    clip-path: inset(0 0 0 0);
+  }
 }
 
 .reveal-image-curtain {
@@ -43,10 +49,15 @@ Create editorial, high-end visual reveals using CSS `clip-path` and SVG masks.
 ```
 
 ### 2. Radial Spotlight Clip Reveal
+
 ```css
 @keyframes circle-expand {
-  from { clip-path: circle(0% at 50% 50%); }
-  to { clip-path: circle(150% at 50% 50%); }
+  from {
+    clip-path: circle(0% at 50% 50%);
+  }
+  to {
+    clip-path: circle(150% at 50% 50%);
+  }
 }
 
 .spotlight-reveal {
@@ -55,7 +66,9 @@ Create editorial, high-end visual reveals using CSS `clip-path` and SVG masks.
 ```
 
 ### 3. Masked Text Line Wipe (Editorial Typography)
+
 Wrap text lines inside overflow-hidden wrappers and animate inner text lines upward:
+
 ```css
 .text-line-wrapper {
   overflow: hidden;

package/.agent/skills/mcp-builder/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before architecting MCP tools or resource handlers, you MUST inspect:
+
 1. Strict Zod Input Validation (Section 45) → Enforce explicit JSON Schema parameter validation (Zod) for every tool exposed to the LLM
 2. Resource vs Tool Distinction (Section 68) → Use Resources for static read-only data (`file:///`, `db://schema`), Tools strictly for dynamic parameterized actions
 3. Output Payload Truncation Safeguard (Section 94) → Forcibly truncate large tool response outputs before returning payload to protect LLM context windows
@@ -47,27 +48,29 @@ A robust MCP server exposes exactly 3 primary concepts:
 
 ```typescript
 // Standardize exposing a Tool securely via an MCP Server Wrapper
-import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
-import { z } from "zod";
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+import { z } from 'zod';
 
 const server = new McpServer({
-  name: "internal-database-auditor",
-  version: "1.0.0",
+  name: 'internal-database-auditor',
+  version: '1.0.0',
 });
 
 // Defining a rigorous tool parameter boundary
 server.tool(
-  "query_production_database",
-  "Executes a read-only sanitized query against the production analytical replica.",
+  'query_production_database',
+  'Executes a read-only sanitized query against the production analytical replica.',
   {
-    table: z.enum(["users", "transactions", "audit_logs"]).describe("The specific table to analyze"),
-    limit: z.number().max(100).default(10).describe("Maximum row returns to prevent context bloat"),
+    table: z
+      .enum(['users', 'transactions', 'audit_logs'])
+      .describe('The specific table to analyze'),
+    limit: z.number().max(100).default(10).describe('Maximum row returns to prevent context bloat'),
   },
   async ({ table, limit }) => {
     // Execution logic
     const data = await secureDatabaseClient.query(`SELECT * FROM ${table} LIMIT ${limit}`);
     return {
-      content: [{ type: "text", text: JSON.stringify(data) }],
+      content: [{ type: 'text', text: JSON.stringify(data) }],
     };
   },
 );
@@ -91,7 +94,7 @@ If your description is vague, the LLM will hallucinate executions unpredictably.
 
 ```typescript
 // ❌ VAGUE (The LLM will guess when to use this, often incorrectly)
-description: "Changes the system status.";
+description: 'Changes the system status.';
 
 // ✅ DETERMINISTIC (The LLM knows the exact boundaries and consequences)
 description: "Transitions the payment processing gateway between 'ACTIVE' and 'MAINTENANCE' modes. Use this ONLY after verifying traffic logs to halt impending queue flooding. Requires Admin clearance.";

package/.agent/skills/micro-interaction/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before engineering component micro-interactions, you MUST inspect:
+
 1. Duration Caps → Keep interactive component feedback (press/hover/toggle) under 180ms
 2. Popover Origin Rules (Section 60) → Set `transform-origin` dynamically to match trigger button position
 3. SVG Path Draw-on (Section 48) → Use `stroke-dashoffset` transitions for checkboxes and toggle icons
@@ -31,9 +32,12 @@ Craft responsive, physically grounded micro-interactions for everyday UI control
 ## 4 Micro-Interaction Recipes
 
 ### 1. Tactile Button Press
+
 ```css
 .btn-tactile {
-  transition: transform 120ms cubic-bezier(0.2, 0, 0, 1), box-shadow 120ms ease;
+  transition:
+    transform 120ms cubic-bezier(0.2, 0, 0, 1),
+    box-shadow 120ms ease;
 }
 .btn-tactile:hover {
   transform: translateY(-1px);
@@ -44,30 +48,35 @@ Craft responsive, physically grounded micro-interactions for everyday UI control
 ```
 
 ### 2. Animated Toggle Switch
+
 ```css
 .toggle-thumb {
   transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1); /* Subtle spring overshoot */
 }
-[data-state="checked"] .toggle-thumb {
+[data-state='checked'] .toggle-thumb {
   transform: translateX(20px);
 }
 ```
 
 ### 3. Animated Checkbox Morph
+
 Use an SVG path draw-on keyframe when checked:
+
 ```css
 .checkbox-svg-path {
   stroke-dasharray: 24;
   stroke-dashoffset: 24;
   transition: stroke-dashoffset 180ms ease-out;
 }
-[data-state="checked"] .checkbox-svg-path {
+[data-state='checked'] .checkbox-svg-path {
   stroke-dashoffset: 0;
 }
 ```
 
 ### 4. Origin-Aware Popover / Dropdown
+
 Popovers scale out from their trigger source using CSS variables:
+
 ```css
 .popover-content {
   transform-origin: var(--radix-popover-content-transform-origin, center top);
@@ -75,8 +84,14 @@ Popovers scale out from their trigger source using CSS variables:
 }
 
 @keyframes popover-enter {
-  from { opacity: 0; transform: scale(0.95); }
-  to { opacity: 1; transform: scale(1); }
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
 }
 ```
 

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

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before designing mobile interfaces or writing React Native code, you MUST inspect:
+
 1. Reanimated 3 & Worklet Rules (Section 47) → Execute animations on the UI thread using Reanimated 3 worklets; ban legacy `Animated.View`
 2. List Optimization (Section 32) → Use `@shopify/flash-list` with required `estimatedItemSize` instead of `ScrollView` or `FlatList`
 3. Safe Area Insets (Section 100) → Always wrap content with `useSafeAreaInsets()` to accommodate notch, dynamic island, and home indicators
@@ -47,13 +48,13 @@ Before designing mobile interfaces or writing React Native code, you MUST inspec
 ### FlashList (Required for Lists)
 
 ```tsx
-import { FlashList } from "@shopify/flash-list";
+import { FlashList } from '@shopify/flash-list';
 <FlashList
   data={items}
   renderItem={({ item }) => <ItemCard item={item} />}
   estimatedItemSize={100} // REQUIRED — measure actual item height first
-  keyExtractor={(item) => item.id}
-  getItemType={(item) => item.type} // multi-type optimization
+  keyExtractor={item => item.id}
+  getItemType={item => item.type} // multi-type optimization
 />;
 // ❌ NEVER: <ScrollView>{items.map(...)}</ScrollView> for lists
 // ❌ NEVER: <FlatList> for perf-critical lists — FlashList is 5-10x faster
@@ -62,7 +63,13 @@ import { FlashList } from "@shopify/flash-list";
 ### Reanimated 3 — Worklet Animations (Required for 120Hz)
 
 ```tsx
-import { useSharedValue, useAnimatedStyle, withSpring, withTiming, runOnJS } from "react-native-reanimated";
+import {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+  withTiming,
+  runOnJS,
+} from 'react-native-reanimated';
 
 // Shared values run on the UI thread — never on JS thread
 const scale = useSharedValue(1);
@@ -99,7 +106,7 @@ scale.value = withSpring(1, {}, onComplete);
 ## Haptics
 
 ```tsx
-import * as Haptics from "expo-haptics";
+import * as Haptics from 'expo-haptics';
 // light → switch toggle, tap feedback
 // medium → selection change, confirm
 // heavy → destructive action, strong confirm
@@ -115,18 +122,22 @@ Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success); // save com
 ## Safe Areas & Platform Layout
 
 ```tsx
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Platform, StatusBar } from "react-native";
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Platform, StatusBar } from 'react-native';
 
 function Screen() {
   const insets = useSafeAreaInsets();
-  return <View style={{ paddingTop: insets.top, paddingBottom: insets.bottom }}>{/* Content safe from Dynamic Island, home indicator, status bar */}</View>;
+  return (
+    <View style={{ paddingTop: insets.top, paddingBottom: insets.bottom }}>
+      {/* Content safe from Dynamic Island, home indicator, status bar */}
+    </View>
+  );
 }
 // Android status bar
-const STATUS_BAR_HEIGHT = Platform.OS === "android" ? (StatusBar.currentHeight ?? 24) : 0;
+const STATUS_BAR_HEIGHT = Platform.OS === 'android' ? (StatusBar.currentHeight ?? 24) : 0;
 
 // Foldable/tablet — dual pane
-import { useWindowDimensions } from "react-native";
+import { useWindowDimensions } from 'react-native';
 function AdaptiveLayout() {
   const { width } = useWindowDimensions();
   const isTablet = width >= 600;
@@ -160,17 +171,17 @@ function AdaptiveLayout() {
 // app/(modal)/settings.tsx — modal group
 
 // Stack navigation with gesture
-import { Stack } from "expo-router";
-<Stack screenOptions={{ headerShown: false, animation: "slide_from_right" }}>
+import { Stack } from 'expo-router';
+<Stack screenOptions={{ headerShown: false, animation: 'slide_from_right' }}>
   <Stack.Screen name="(tabs)" />
-  <Stack.Screen name="[id]" options={{ presentation: "modal" }} />
+  <Stack.Screen name="[id]" options={{ presentation: 'modal' }} />
 </Stack>;
 
 // Deep linking (Expo Router handles automatically via app.json scheme)
 // ❌ TRAP: Don't use react-navigation Link for deep links in Expo Router — use expo-router Link
-import { Link, useRouter } from "expo-router";
+import { Link, useRouter } from 'expo-router';
 const router = useRouter();
-router.push("/user/42");
+router.push('/user/42');
 ```
 
 ---

package/.agent/skills/monorepo-management/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before organizing workspace packages or writing Turborepo/pnpm configs, you MUST inspect:
+
 1. Internal Package Protocol (Section 128) → Reference internal monorepo dependencies via `"workspace:*"` protocol and mark them `"private": true`
 2. Topological Task Dependencies (Section 146) → Define topological ordering (`"^build"`) in `turbo.json` to ensure dependencies build before consumers
 3. Domain-Focused Package Partitioning (Section 261) → Divide shared code into domain packages (`packages/ui`, `packages/db`, `packages/utils`); ban single monolithic `packages/shared` dumpsters
@@ -93,8 +94,8 @@ my-monorepo/
 ```yaml
 # pnpm-workspace.yaml
 packages:
-  - "apps/*"
-  - "packages/*"
+  - 'apps/*'
+  - 'packages/*'
 ```
 
 ```json

package/.agent/skills/morphing-icons/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before implementing morphing icon components, you MUST inspect:
+
 1. Target states (e.g. Hamburger Menu <-> Close X, Play <-> Pause) → Verify matching SVG path point count and coordinate bounds
 2. Accessibility (Section 65) → Ensure `aria-label` updates dynamically alongside state changes
 3. Interpolation Curves → Use snappy ease-out curves (`cubic-bezier(0.16, 1, 0.3, 1)`) with duration $\le 200\text{ms}$
@@ -31,32 +32,41 @@ Architect crisp, interactive SVG icon components that morph seamlessly between o
 ## The Hamburger Menu <-> Close X Morph Recipe
 
 ```tsx
-import React from "react";
-import { motion } from "framer-motion";
+import React from 'react';
+import { motion } from 'framer-motion';
 
 export function MenuToCloseIcon({ isOpen, onClick }: { isOpen: boolean; onClick: () => void }) {
   return (
     <button
       onClick={onClick}
       className="p-2 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
-      aria-label={isOpen ? "Close menu" : "Open menu"}
+      aria-label={isOpen ? 'Close menu' : 'Open menu'}
     >
       <svg className="w-6 h-6 stroke-current stroke-2 fill-none" viewBox="0 0 24 24">
         {/* Top Line -> Top diagonal of X */}
         <motion.line
-          x1="4" y1="6" x2="20" y2="6"
+          x1="4"
+          y1="6"
+          x2="20"
+          y2="6"
           animate={isOpen ? { x1: 6, y1: 6, x2: 18, y2: 18 } : { x1: 4, y1: 6, x2: 20, y2: 6 }}
           transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
         />
         {/* Middle Line -> Fade out */}
         <motion.line
-          x1="4" y1="12" x2="20" y2="12"
+          x1="4"
+          y1="12"
+          x2="20"
+          y2="12"
           animate={isOpen ? { opacity: 0, x: -4 } : { opacity: 1, x: 0 }}
           transition={{ duration: 0.15 }}
         />
         {/* Bottom Line -> Bottom diagonal of X */}
         <motion.line
-          x1="4" y1="18" x2="20" y2="18"
+          x1="4"
+          y1="18"
+          x2="20"
+          y2="18"
           animate={isOpen ? { x1: 6, y1: 18, x2: 18, y2: 6 } : { x1: 4, y1: 18, x2: 20, y2: 18 }}
           transition={{ duration: 0.2, ease: [0.16, 1, 0.3, 1] }}
         />

package/.agent/skills/motion-engineering/SKILL.md

@@ -21,6 +21,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before engineering web animations or selecting motion libraries, you MUST inspect:
+
 1. Master Library Decision Matrix (Section 29) → Select appropriate library (Framer Motion, GSAP, View Transitions API, Lottie) based on interaction category
 2. 120fps GPU Compositing Rule (Section 181) → Restrict animations strictly to `transform` and `opacity` to avoid layout thrashing
 3. Accessibility & `prefers-reduced-motion` (Section 158) → Ensure fallback to instant opacity or no-op motion for reduced-motion preference
@@ -80,7 +81,11 @@ Used for immediate feedback, clarifying actions, and improving perceived respons
 
 ```tsx
 // Framer Motion — button with spring micro-interaction
-<motion.button whileHover={{ scale: 1.02, filter: "brightness(1.08)" }} whileTap={{ scale: 0.97 }} transition={{ type: "spring", stiffness: 400, damping: 17 }}>
+<motion.button
+  whileHover={{ scale: 1.02, filter: 'brightness(1.08)' }}
+  whileTap={{ scale: 0.97 }}
+  transition={{ type: 'spring', stiffness: 400, damping: 17 }}
+>
   Submit
 </motion.button>
 ```
@@ -91,18 +96,18 @@ Triggers narrative flow and depth based on user scrolling.
 
 ```javascript
 // GSAP ScrollTrigger — industry standard
-gsap.from(".reveal-section", {
-  scrollTrigger: { trigger: ".reveal-section", start: "top 80%", scrub: 1 },
+gsap.from('.reveal-section', {
+  scrollTrigger: { trigger: '.reveal-section', start: 'top 80%', scrub: 1 },
   y: 60,
   opacity: 0,
   stagger: 0.1,
 });
 
 // Lenis — smooth scroll compatible with GSAP
-import Lenis from "lenis";
+import Lenis from 'lenis';
 const lenis = new Lenis({ lerp: 0.1, wheelMultiplier: 0.8 });
-lenis.on("scroll", ScrollTrigger.update);
-gsap.ticker.add((time) => lenis.raf(time * 1000));
+lenis.on('scroll', ScrollTrigger.update);
+gsap.ticker.add(time => lenis.raf(time * 1000));
 gsap.ticker.lagSmoothing(0);
 ```
 
@@ -146,9 +151,9 @@ function navigateWithTransition(url: string, navigate: (path: string) => void) {
   display: none;
   opacity: 0;
   transform: scale(0.95);
-  transition: 
-    opacity 0.2s ease, 
-    transform 0.2s cubic-bezier(0.2, 0.8, 0.4, 1), 
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s cubic-bezier(0.2, 0.8, 0.4, 1),
     display 0.2s allow-discrete;
 }
 
@@ -174,16 +179,16 @@ function navigateWithTransition(url: string, navigate: (path: string) => void) {
    Always respect `prefers-reduced-motion`. Fall back to instant opacity or no-op motion.
 
 ```tsx
-import { useReducedMotion } from "motion/react";
+import { useReducedMotion } from 'motion/react';
 
 function AccessibleComponent() {
   const shouldReduceMotion = useReducedMotion();
-  
+
   return (
     <motion.div
-      animate={{ 
-        x: shouldReduceMotion ? 0 : 100, 
-        opacity: 1 
+      animate={{
+        x: shouldReduceMotion ? 0 : 100,
+        opacity: 1,
       }}
       transition={{ duration: shouldReduceMotion ? 0 : 0.3 }}
     />
@@ -220,4 +225,3 @@ function AccessibleComponent() {
 ### 🛑 Verification-Before-Completion (VBC) Protocol
 
 Inspect motion frame performance in DevTools Rendering tab to verify 60/120fps compositor execution without layout thrashing.
-