tribunal-kit 6.0.1 → 7.0.0

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

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

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before engineering game state loops or physics engines, you MUST inspect:
+
 1. Clamped DeltaTime Rule (Section 25) → Clamp `deltaTime` (max 0.05s) to prevent physics explosions on frame rate drops
 2. Garbage Collection & Object Pooling (Section 50) → Pre-allocate and pool game objects; ban `Instantiate()` or dynamic memory allocations in frame update loops
 3. FixedUpdate vs Update Separation (Section 43) → Put all physics logic in `FixedUpdate()`; use `Update()` strictly for visual interpolation and input collection

package/.agent/skills/generative-ui-expert/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before implementing Generative UI streaming pipelines, you MUST inspect:
+
 1. Tool Parameter Schemas (Section 87) → Validate all LLM tool parameters with Zod schemas
 2. RSC Server Action Boundaries (Section 33) → Annotate server actions with `"use server"` and yield Server Components directly from `streamUI`
 3. Intermediate Skeleton Yielding (Section 80) → Always `yield <SkeletonLoader />` before awaiting async APIs or external LLM tool calls
@@ -74,11 +75,11 @@ Use this when you need strict JSON streams for charts, tables, or complex states
 
 ```typescript
 const result = await streamObject({
-  model: openai("gpt-4-turbo"),
+  model: openai('gpt-4-turbo'),
   schema: z.object({
     points: z.array(z.object({ x: z.number(), y: z.number() })),
   }),
-  prompt: "Generate a sales forecast chart data",
+  prompt: 'Generate a sales forecast chart data',
 });
 // Client consumes via useObject
 ```

package/.agent/skills/geo-fundamentals/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before optimizing content for AI engine ingestion, you MUST inspect:
+
 1. High Information Density Rule (Section 25) → Maximize factual density; eliminate marketing boilerplate so LLM context windows aren't truncated
 2. Explicit Claim-to-Source Mapping (Section 51) → Map stats and claims directly to explicit `<cite>` sources/links; ban vague unanchored assertions
 3. Text-Based Architecture Diagrams (Section 94) → Represent architecture via text/Mermaid.js code blocks; ban image-only architecture diagrams
@@ -49,7 +50,7 @@ Modern sites should natively serve structured markdown if they detect an AI User
 ```typescript
 // Next.js Edge Middleware for GEO
 export function middleware(req: NextRequest) {
-  const ua = req.headers.get("user-agent") || "";
+  const ua = req.headers.get('user-agent') || '';
   const isBot = /ChatGPT|Perplexity|ClaudeBot/i.test(ua);
 
   if (isBot) {

package/.agent/skills/git-pro/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before running complex Git operations or writing release workflows, you MUST inspect:
+
 1. Safe Force Push Rule (Section 18) → Use `--force-with-lease` exclusively; ban raw `git push --force` on shared/remote branches
 2. Reflog Recovery Strategy (Section 30) → Inspect `git reflog` to recover lost commits or bad resets before discarding uncommitted state
 3. OIDC Authentication Protocol (Section 208) → Configure OIDC AWS auth (`id-token: write`) in GitHub Actions workflows; ban static AWS access keys
@@ -166,18 +167,18 @@ git checkout main
 ```javascript
 // release.config.js
 export default {
-  branches: ["main", { name: "beta", prerelease: true }],
+  branches: ['main', { name: 'beta', prerelease: true }],
   plugins: [
-    "@semantic-release/commit-analyzer", // reads conventional commits
-    "@semantic-release/release-notes-generator",
-    "@semantic-release/changelog", // updates CHANGELOG.md
-    "@semantic-release/npm", // bumps package.json version
-    "@semantic-release/github", // creates GitHub Release
+    '@semantic-release/commit-analyzer', // reads conventional commits
+    '@semantic-release/release-notes-generator',
+    '@semantic-release/changelog', // updates CHANGELOG.md
+    '@semantic-release/npm', // bumps package.json version
+    '@semantic-release/github', // creates GitHub Release
     [
-      "@semantic-release/git",
+      '@semantic-release/git',
       {
-        assets: ["CHANGELOG.md", "package.json"],
-        message: "chore(release): ${nextRelease.version} [skip ci]",
+        assets: ['CHANGELOG.md', 'package.json'],
+        message: 'chore(release): ${nextRelease.version} [skip ci]',
       },
     ],
   ],

package/.agent/skills/github-operations/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before running Git commands or writing GitHub workflows, you MUST inspect:
+
 1. Local-Only Interactive Rebase (Section 172) → Perform interactive rebases (`git rebase -i`) ONLY on local unpushed commits; ban rebasing public/shared history
 2. Conventional Commit Standards (Section 55) → Format commit messages using Conventional Commits (`type(scope): description`) for automated changelogs
 3. Squash Merge Default (Section 146) → Enforce squash merge strategy for feature branches merging into main to keep history linear and clean
@@ -295,7 +296,7 @@ npx commitlint --edit $1
 ```javascript
 // commitlint.config.js
 export default {
-  extends: ["@commitlint/config-conventional"],
+  extends: ['@commitlint/config-conventional'],
 };
 ```
 

package/.agent/skills/gpt-taste/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before generating UI layouts or visual code, you MUST inspect:
+
 1. Structural Layout Variance (Section 24) → Vary structural layout across sections; ban uniform 3-card bento grids
 2. OKLCH Perceptual Palette (Section 30) → Declare all color tokens using OKLCH color space for perceptual uniformity
 3. Zero Truncation Rule (Section 39) → Strictly ban `// TODO: add remaining items` placeholder comments; generate complete production-ready code
@@ -31,21 +32,27 @@ Inject high-agency visual judgment and layout variance into AI-generated interfa
 ## 4 High-Agency Visual Constraints
 
 ### 1. Structural Layout Variance
+
 Never use standard symmetrical layouts by default. Vary structural axes across sections:
+
 - **Hero**: Asymmetric 60/40 split or left-aligned stacked text with offset app preview frame.
 - **Features**: Alternating 2-column image/text rhythm or horizontal scroll cards.
 - **CTA**: Single full-width card with progressive backdrop blur overlay.
 
 ### 2. OKLCH Perceptual Palette Generation
+
 Always generate color schemes in OKLCH:
+
 - Background: `oklch(0.98 0.005 240)`
 - Foreground: `oklch(0.18 0.01 240)`
 - Accent: `oklch(0.62 0.22 250)`
 
 ### 3. GSAP / Motion Engineering Integration
+
 When animation is requested, use explicit GSAP timelines with custom easing curves (`power3.out`, `expo.out`), avoiding default linear transitions.
 
 ### 4. Zero Output Truncation
+
 Never output placeholder `// TODO: add remaining items` comments in UI code. Generate full, production-ready JSX/CSS markup.
 
 ---

package/.agent/skills/gsap-core/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before creating or editing GSAP animations, you MUST inspect:
+
 1. Transform Aliases vs Layout Properties (Section 74) → Animate transform aliases (`x`, `y`, `scale`, `rotation`); ban animating layout-heavy properties (`width`, `height`, `top`, `left`)
 2. GSAP 3 Object Syntax (Section 280) → Use GSAP 3 object parameter syntax (`gsap.to(target, { duration: 1, x: 100 })`); ban legacy GSAP 2 signature (`gsap.to(target, 1, { x: 100 })`)
 3. Accessible Responsive Motion with matchMedia (Section 213) → Wrap responsive or reduced-motion animations in `gsap.matchMedia()`; set `duration: 0` when `prefers-reduced-motion` matches
@@ -109,9 +110,9 @@ Relative values work: `x: "+=20"`, `rotation: "-=30"`. Default units: x/y in px,
 - **clearProps** — Comma-separated list of property names (or `"all"` / `true`) to **remove** from the element’s inline style when the tween completes. Use when a class or other CSS should take over after the animation. Clearing any transform-related property (e.g. `x`, `scale`, `rotation`) clears the **entire** transform.
 
 ```javascript
-gsap.to(".box", { x: 100, rotation: "360_cw", duration: 1 });
-gsap.to(".fade", { autoAlpha: 0, duration: 0.5, clearProps: "visibility" });
-gsap.to(svgEl, { rotation: 90, svgOrigin: "100 100" });
+gsap.to('.box', { x: 100, rotation: '360_cw', duration: 1 });
+gsap.to('.fade', { autoAlpha: 0, duration: 0.5, clearProps: 'visibility' });
+gsap.to(svgEl, { rotation: 90, svgOrigin: '100 100' });
 ```
 
 ## Targets
@@ -123,7 +124,7 @@ gsap.to(svgEl, { rotation: 90, svgOrigin: "100 100" });
 Offset the animation of each item by 0.1 second like this:
 
 ```javascript
-gsap.to(".item", {
+gsap.to('.item', {
   y: -20,
   stagger: 0.1,
 });
@@ -140,11 +141,11 @@ https://gsap.com/resources/getting-started/Staggers
 Use string eases unless a custom curve is needed:
 
 ```javascript
-ease: "power1.out"; // default feel
-ease: "power3.inOut";
-ease: "back.out(1.7)"; // overshoot
-ease: "elastic.out(1, 0.3)";
-ease: "none"; // linear
+ease: 'power1.out'; // default feel
+ease: 'power3.inOut';
+ease: 'back.out(1.7)'; // overshoot
+ease: 'elastic.out(1, 0.3)';
+ease: 'none'; // linear
 ```
 
 Built-in eases: base (same as `.out`), `.in`, `.out`, `.inOut` where "power" refers to the strength of the curve (1 is more gradual, 4 is steepest):
@@ -169,17 +170,20 @@ base (out)        .in                .out               .inOut
 Simple cubic-bezier values (as used in CSS `cubic-bezier()`):
 
 ```javascript
-const myEase = CustomEase.create("my-ease", ".17,.67,.83,.67");
+const myEase = CustomEase.create('my-ease', '.17,.67,.83,.67');
 
-gsap.to(".item", { x: 100, ease: myEase, duration: 1 });
+gsap.to('.item', { x: 100, ease: myEase, duration: 1 });
 ```
 
 Complex curve with any number of control points, described as normalized SVG path data:
 
 ```javascript
-const myEase = CustomEase.create("hop", "M0,0 C0,0 0.056,0.442 0.175,0.442 0.294,0.442 0.332,0 0.332,0 0.332,0 0.414,1 0.671,1 0.991,1 1,0 1,0");
+const myEase = CustomEase.create(
+  'hop',
+  'M0,0 C0,0 0.056,0.442 0.175,0.442 0.294,0.442 0.332,0 0.332,0 0.332,0 0.414,1 0.671,1 0.991,1 1,0 1,0',
+);
 
-gsap.to(".item", { x: 100, ease: myEase, duration: 1 });
+gsap.to('.item', { x: 100, ease: myEase, duration: 1 });
 ```
 
 ## Returning and Controlling Tweens
@@ -187,7 +191,7 @@ gsap.to(".item", { x: 100, ease: myEase, duration: 1 });
 All tween methods return a **Tween** instance. Store the return value when controlling playback is needed:
 
 ```javascript
-const tween = gsap.to(".box", { x: 100, duration: 1, repeat: 1, yoyo: true });
+const tween = gsap.to('.box', { x: 100, duration: 1, repeat: 1, yoyo: true });
 tween.pause();
 tween.play();
 tween.reverse();
@@ -202,7 +206,7 @@ tween.totalTime(1.5);
 Use a function for a `vars` value and it will get called **once for each target** the first time the tween renders, and whatever is returned by that function will be used as the animation value.
 
 ```javascript
-gsap.to(".item", {
+gsap.to('.item', {
   x: (i, target, targetsArray) => i * 50, // first item animates to 0, the second to 50, the third to 100, etc.
   stagger: 0.1,
 });
@@ -213,7 +217,7 @@ gsap.to(".item", {
 Use a `+=`, `-=`, `*=`, or `/=` prefix to indicate a **relative** value. For example, the following will animate x to 20 pixels less than whatever it is when the tween renders for the first time.
 
 ```javascript
-gsap.to(".class", { x: "-=20" });
+gsap.to('.class', { x: '-=20' });
 ```
 
 `x: "+=20"` would add 20 to the current value. `"*=2"` would multiply by 2, and `"/=2"` would divide by 2.
@@ -223,7 +227,7 @@ gsap.to(".class", { x: "-=20" });
 Set project-wide Tween defaults with **gsap.defaults()**:
 
 ```javascript
-gsap.defaults({ duration: 0.6, ease: "power2.out" });
+gsap.defaults({ duration: 0.6, ease: 'power2.out' });
 ```
 
 ## Accessibility and responsive (gsap.matchMedia())
@@ -240,13 +244,13 @@ gsap.defaults({ duration: 0.6, ease: "power2.out" });
 ```javascript
 mm.add(
   {
-    isDesktop: "(min-width: 800px)",
-    isMobile: "(max-width: 799px)",
-    reduceMotion: "(prefers-reduced-motion: reduce)",
+    isDesktop: '(min-width: 800px)',
+    isMobile: '(max-width: 799px)',
+    reduceMotion: '(prefers-reduced-motion: reduce)',
   },
-  (context) => {
+  context => {
     const { isDesktop, reduceMotion } = context.conditions;
-    gsap.to(".box", {
+    gsap.to('.box', {
       rotation: isDesktop ? 360 : 180,
       duration: reduceMotion ? 0 : 2, // skip animation when user prefers reduced motion
     });

package/.agent/skills/gsap-frameworks/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before using GSAP in Vue, Svelte, or non-React frameworks, you MUST inspect:
+
 1. Lifecycle Initialization Rule (Section 175) → Create GSAP animations strictly inside `onMounted` / `onMount`; ban creating tweens in un-mounted setup phases
 2. Scoped Selector Context (Section 176) → Scope selectors via `gsap.context(callback, containerRef)`; ban un-scoped global class selectors (`.item`)
 3. Mandatory Context Reversion on Unmount (Section 177) → Call `ctx.revert()` inside `onUnmounted` / returned cleanup function to prevent memory leaks
@@ -43,9 +44,9 @@ Apply when writing or reviewing GSAP code in Vue (or Nuxt), Svelte (or SvelteKit
 Use **onMounted** to run GSAP after the component is in the DOM. Use **onUnmounted** to clean up.
 
 ```javascript
-import { onMounted, onUnmounted, ref } from "vue";
-import { gsap } from "gsap";
-import { ScrollTrigger } from "gsap/ScrollTrigger";
+import { onMounted, onUnmounted, ref } from 'vue';
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
 gsap.registerPlugin(ScrollTrigger); // once per app, e.g. in main.js
 
 export default {
@@ -56,8 +57,8 @@ export default {
     onMounted(() => {
       if (!container.value) return;
       ctx = gsap.context(() => {
-        gsap.to(".box", { x: 100, duration: 0.6 });
-        gsap.from(".item", { autoAlpha: 0, y: 20, stagger: 0.1 });
+        gsap.to('.box', { x: 100, duration: 0.6 });
+        gsap.from('.item', { autoAlpha: 0, y: 20, stagger: 0.1 });
       }, container.value);
     });
 

package/.agent/skills/gsap-performance/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before optimizing GSAP animations for performance, you MUST inspect:
+
 1. Target properties (Section 18) → Animate Composite properties (`x`, `y`, `scale`, `rotation`, `opacity`) instead of layout properties (`left`, `top`, `width`, `height`)
 2. Frequent Updates (Section 45) → Use `gsap.quickTo()` for mouse followers or rapid pointer movement loops
 3. Batching & Staggering (Section 39) → Use GSAP `stagger` instead of creating multiple individual delayed tweens
@@ -62,10 +63,10 @@ GSAP batches updates internally. When mixing GSAP with direct DOM reads/writes o
 Prefer **gsap.quickTo()** for properties that are updated often (e.g. mouse-follower x/y). It reuses a single tween instead of creating new tweens on each update.
 
 ```javascript
-let xTo = gsap.quickTo("#id", "x", { duration: 0.4, ease: "power3" }),
-  yTo = gsap.quickTo("#id", "y", { duration: 0.4, ease: "power3" });
+let xTo = gsap.quickTo('#id', 'x', { duration: 0.4, ease: 'power3' }),
+  yTo = gsap.quickTo('#id', 'y', { duration: 0.4, ease: 'power3' });
 
-document.querySelector("#container").addEventListener("mousemove", (e) => {
+document.querySelector('#container').addEventListener('mousemove', e => {
   xTo(e.pageX);
   yTo(e.pageY);
 });