tribunal-kit 6.0.0 → 7.0.0

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.
-

package/.agent/skills/nextjs-react-expert/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before engineering Next.js 15+ App Router code, you MUST inspect:
+
 1. Client Boundary rules (`"use client"` vs Server Components) → Use Server Components by default; add `"use client"` only for interactivity/hooks
 2. Server Actions Validation (Section 68) → Always include `"use server"` and validate form inputs with Zod (`Schema.safeParse`)
 3. Next.js 15 Caching & Dynamic APIs (Section 106) → `fetch()` is UNCACHED by default in Next.js 15; `cookies()` and `headers()` are `async`
@@ -64,7 +65,7 @@ app/
 export default function Page() {
   return (
     <ClientSidebar>
-      {" "}
+      {' '}
       {/* "use client" */}
       <ServerStats /> {/* Server: zero JS bundle, fetches DB */}
     </ClientSidebar>
@@ -77,19 +78,19 @@ export default function Page() {
 ## Server Actions (Mutations)
 
 ```tsx
-"use server";
-import { revalidatePath } from "next/cache";
-import { z } from "zod";
+'use server';
+import { revalidatePath } from 'next/cache';
+import { z } from 'zod';
 
 const Schema = z.object({ name: z.string().min(2) });
 
 export async function createUser(prevState: any, formData: FormData) {
   // ❌ TRAP: ALWAYS validate formData. Never trust client input.
-  const parsed = Schema.safeParse({ name: formData.get("name") });
+  const parsed = Schema.safeParse({ name: formData.get('name') });
   if (!parsed.success) return { errors: parsed.error.flatten().fieldErrors };
 
   await db.user.create({ data: parsed.data });
-  revalidatePath("/users"); // Clears cache so next render shows new user
+  revalidatePath('/users'); // Clears cache so next render shows new user
   return { success: true };
 }
 ```
@@ -97,9 +98,9 @@ export async function createUser(prevState: any, formData: FormData) {
 Client usage (React 19):
 
 ```tsx
-"use client";
-import { useActionState } from "react";
-import { createUser } from "./actions";
+'use client';
+import { useActionState } from 'react';
+import { createUser } from './actions';
 
 export function UserForm() {
   const [state, formAction, isPending] = useActionState(createUser, null);
@@ -120,13 +121,17 @@ export function UserForm() {
 ```tsx
 // Next.js 15 caching defaults
 const dynamic = await fetch(url); // 15 default: NO CACHE
-const static = await fetch(url, { cache: "force-cache" }); // Static
+const static = await fetch(url, { cache: 'force-cache' }); // Static
 const isr = await fetch(url, { next: { revalidate: 3600 } }); // Revalidate every hour
-const tagged = await fetch(url, { next: { tags: ["user-1"] } }); // On-demand via revalidateTag()
+const tagged = await fetch(url, { next: { tags: ['user-1'] } }); // On-demand via revalidateTag()
 
 // DB calls without fetch
-import { unstable_cache } from "next/cache";
-const getCachedUser = unstable_cache(async (id) => db.user.findUnique({ where: { id } }), ["user-cache-key"], { revalidate: 60, tags: ["users"] });
+import { unstable_cache } from 'next/cache';
+const getCachedUser = unstable_cache(
+  async id => db.user.findUnique({ where: { id } }),
+  ['user-cache-key'],
+  { revalidate: 60, tags: ['users'] },
+);
 ```
 
 ### Waterfall Elimination
@@ -160,11 +165,11 @@ PPR static-generates the route shell and streams dynamic parts.
 export default { experimental: { ppr: true } };
 
 // Any component reading cookies/headers inside a Suspense boundary becomes a dynamic hole
-import { cookies } from "next/headers";
+import { cookies } from 'next/headers';
 
 async function Cart() {
   const c = await cookies(); // Next.js 15 cookies are async!
-  const cartId = c.get("cartId");
+  const cartId = c.get('cartId');
 }
 
 export default function Page() {
@@ -185,18 +190,18 @@ export default function Page() {
 
 ```typescript
 // middleware.ts (Root of project)
-import { NextResponse } from "next/server";
-import type { NextRequest } from "next/server";
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
 
 export function middleware(req: NextRequest) {
-  const token = req.cookies.get("auth-token");
-  if (!token && req.nextUrl.pathname.startsWith("/dashboard")) {
-    return NextResponse.redirect(new URL("/login", req.url));
+  const token = req.cookies.get('auth-token');
+  if (!token && req.nextUrl.pathname.startsWith('/dashboard')) {
+    return NextResponse.redirect(new URL('/login', req.url));
   }
 }
 
 export const config = {
-  matcher: ["/dashboard/:path*"], // Strict matcher is critical for performance
+  matcher: ['/dashboard/:path*'], // Strict matcher is critical for performance
 };
 ```