tribunal-kit 6.0.0 → 7.0.0

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);
 });

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

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before invoking GSAP plugins, you MUST inspect:
+
 1. `package.json` → Verify plugin installation and check for Club GSAP licensing requirements (`MorphSVG`, `SplitText`, `ScrollSmoother`)
 2. Plugin Registration (Section 18) → Always register plugins explicitly via `gsap.registerPlugin(...)` at module root
 3. Revert & Cleanup (Section 418) → Call `.revert()` on SplitText and Flip instances during component unmount
@@ -35,10 +36,10 @@ Apply when using or reviewing code that uses GSAP plugins: registering plugins,
 Register each plugin once so GSAP (and bundlers) know to include it. Use **gsap.registerPlugin()** with every plugin used in the project:
 
 ```javascript
-import gsap from "gsap";
-import { ScrollToPlugin } from "gsap/ScrollToPlugin";
-import { Flip } from "gsap/Flip";
-import { Draggable } from "gsap/Draggable";
+import gsap from 'gsap';
+import { ScrollToPlugin } from 'gsap/ScrollToPlugin';
+import { Flip } from 'gsap/Flip';
+import { Draggable } from 'gsap/Draggable';
 
 gsap.registerPlugin(ScrollToPlugin, Flip, Draggable);
 ```
@@ -56,8 +57,8 @@ Animates scroll position (window or a scrollable element). Use for “scroll to
 gsap.registerPlugin(ScrollToPlugin);
 
 gsap.to(window, { duration: 1, scrollTo: { y: 500 } });
-gsap.to(window, { duration: 1, scrollTo: { y: "#section", offsetY: 50 } });
-gsap.to(scrollContainer, { duration: 1, scrollTo: { x: "max" } });
+gsap.to(window, { duration: 1, scrollTo: { y: '#section', offsetY: 50 } });
+gsap.to(scrollContainer, { duration: 1, scrollTo: { x: 'max' } });
 ```
 
 **ScrollToPlugin — key config (scrollTo object):**
@@ -92,9 +93,9 @@ Capture state with `Flip.getState()`, then apply changes (e.g. layout or class c
 ```javascript
 gsap.registerPlugin(Flip);
 
-const state = Flip.getState(".item");
+const state = Flip.getState('.item');
 // change DOM (reorder, add/remove, change classes)
-Flip.from(state, { duration: 0.5, ease: "power2.inOut" });
+Flip.from(state, { duration: 0.5, ease: 'power2.inOut' });
 ```
 
 **Flip — key config (Flip.from vars):**
@@ -118,8 +119,8 @@ Makes elements draggable, spinnable, or throwable with mouse/touch. Use for slid
 ```javascript
 gsap.registerPlugin(Draggable, InertiaPlugin);
 
-Draggable.create(".box", { type: "x,y", bounds: "#container", inertia: true });
-Draggable.create(".knob", { type: "rotation" });
+Draggable.create('.box', { type: 'x,y', bounds: '#container', inertia: true });
+Draggable.create('.knob', { type: 'rotation' });
 ```
 
 **Draggable — key config options:**
@@ -140,19 +141,19 @@ Works with Draggable for momentum after release, or track the inertia/velocity o
 
 ```javascript
 gsap.registerPlugin(Draggable, InertiaPlugin);
-Draggable.create(".box", { type: "x,y", inertia: true });
+Draggable.create('.box', { type: 'x,y', inertia: true });
 ```
 
 Or track velocity of a property:
 
 ```javascript
-InertiaPlugin.track(".box", "x");
+InertiaPlugin.track('.box', 'x');
 ```
 
 Then use `"auto"` to continue the current velocity and glide to a stop:
 
 ```javascript
-gsap.to(obj, { inertia: { x: "auto" } });
+gsap.to(obj, { inertia: { x: 'auto' } });
 ```
 
 ### Observer
@@ -163,7 +164,7 @@ Normalizes pointer and scroll input across devices. Use for swipe, scroll direct
 gsap.registerPlugin(Observer);
 
 Observer.create({
-  target: "#area",
+  target: '#area',
   onUp: () => {},
   onDown: () => {},
   onLeft: () => {},
@@ -190,7 +191,7 @@ Splits an element’s text into characters, words, and/or lines (each in its own
 ```javascript
 gsap.registerPlugin(SplitText);
 
-const split = SplitText.create(".heading", { type: "words, chars" });
+const split = SplitText.create('.heading', { type: 'words, chars' });
 gsap.from(split.chars, { opacity: 0, y: 20, stagger: 0.03, duration: 0.4 });
 // later: split.revert() or let gsap.context() cleanup revert
 ```
@@ -198,8 +199,8 @@ gsap.from(split.chars, { opacity: 0, y: 20, stagger: 0.03, duration: 0.4 });
 With **onSplit()** (v3.13.0+), animations run on each split and on re-split when **autoSplit** is used; returning a tween/timeline from **onSplit()** lets SplitText clean up and sync progress on re-split:
 
 ```javascript
-SplitText.create(".split", {
-  type: "lines",
+SplitText.create('.split', {
+  type: 'lines',
   autoSplit: true,
   onSplit(self) {
     return gsap.from(self.lines, { y: 100, opacity: 0, stagger: 0.05, duration: 0.5 });
@@ -238,9 +239,9 @@ Animates text with a scramble/glitch effect. Use when revealing or transitioning
 ```javascript
 gsap.registerPlugin(ScrambleTextPlugin);
 
-gsap.to(".text", {
+gsap.to('.text', {
   duration: 1,
-  scrambleText: { text: "New message", chars: "01", revealDelay: 0.5 },
+  scrambleText: { text: 'New message', chars: '01', revealDelay: 0.5 },
 });
 ```
 
@@ -258,11 +259,11 @@ Reveals or hides the stroke of SVG elements by animating `stroke-dashoffset` / `
 gsap.registerPlugin(DrawSVGPlugin);
 
 // draw from nothing to full stroke
-gsap.from("#path", { duration: 1, drawSVG: 0 });
+gsap.from('#path', { duration: 1, drawSVG: 0 });
 // or explicit segment: from 0–0 to 0–100%
-gsap.fromTo("#path", { drawSVG: "0% 0%" }, { drawSVG: "0% 100%", duration: 1 });
+gsap.fromTo('#path', { drawSVG: '0% 0%' }, { drawSVG: '0% 100%', duration: 1 });
 // stroke only in the middle (gaps at ends)
-gsap.to("#path", { duration: 1, drawSVG: "20% 80%" });
+gsap.to('#path', { duration: 1, drawSVG: '20% 80%' });
 ```
 
 **Caveats:** Only affects stroke (not fill). Prefer single-segment `<path>` elements; multi-segment paths can render oddly in some browsers. Contents of `<use>` cannot be visually changed. **DrawSVGPlugin.getLength(element)** and **DrawSVGPlugin.getPosition(element)** return stroke length and current position.
@@ -279,13 +280,13 @@ Morphs one SVG shape into another by animating the `d` attribute (path data). St
 gsap.registerPlugin(MorphSVGPlugin);
 
 // convert primitives to path first if needed:
-MorphSVGPlugin.convertToPath("circle, rect, ellipse, line");
+MorphSVGPlugin.convertToPath('circle, rect, ellipse, line');
 
-gsap.to("#diamond", { duration: 1, morphSVG: "#lightning", ease: "power2.inOut" });
+gsap.to('#diamond', { duration: 1, morphSVG: '#lightning', ease: 'power2.inOut' });
 // object form:
-gsap.to("#diamond", {
+gsap.to('#diamond', {
   duration: 1,
-  morphSVG: { shape: "#lightning", type: "rotational", shapeIndex: 2 },
+  morphSVG: { shape: '#lightning', type: 'rotational', shapeIndex: 2 },
 });
 ```
 
@@ -318,9 +319,9 @@ Animates an element along an SVG path. Use when moving an object along a path (e
 ```javascript
 gsap.registerPlugin(MotionPathPlugin);
 
-gsap.to(".dot", {
+gsap.to('.dot', {
   duration: 2,
-  motionPath: { path: "#path", align: "#path", alignOrigin: [0.5, 0.5] },
+  motionPath: { path: '#path', align: '#path', alignOrigin: [0.5, 0.5] },
 });
 ```
 
@@ -341,7 +342,7 @@ Visual editor for MotionPath (alignment, offset). Use during development to tune
 ```javascript
 gsap.registerPlugin(MotionPathPlugin, MotionPathHelperPlugin);
 
-const helper = MotionPathHelper.create(".dot", "#path", { end: 0.5 });
+const helper = MotionPathHelper.create('.dot', '#path', { end: 0.5 });
 // adjust in UI, then use helper.path or helper.getProgress() in your animation
 ```
 
@@ -353,8 +354,8 @@ Custom easing curves (cubic-bezier or SVG path). Use when a built-in ease is not
 
 ```javascript
 gsap.registerPlugin(CustomEase);
-const ease = CustomEase.create("name", ".17,.67,.83,.67");
-gsap.to(".el", { x: 100, ease: ease, duration: 1 });
+const ease = CustomEase.create('name', '.17,.67,.83,.67');
+gsap.to('.el', { x: 100, ease: ease, duration: 1 });
 ```
 
 ### EasePack
@@ -378,7 +379,7 @@ Bounce-style easing with configurable strength.
 ```javascript
 gsap.registerPlugin(Physics2DPlugin);
 
-gsap.to(".ball", {
+gsap.to('.ball', {
   duration: 2,
   physics2D: {
     velocity: 250,
@@ -395,7 +396,7 @@ Applies physics to property values. Use for physics-driven property animation.
 ```javascript
 gsap.registerPlugin(PhysicsPropsPlugin);
 
-gsap.to(".obj", {
+gsap.to('.obj', {
   duration: 2,
   physicsProps: {
     x: { velocity: 100, end: 300 },

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

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before writing GSAP animation logic in React, you MUST inspect:
+
 1. `package.json` → Verify `@gsap/react` and `gsap` dependencies
 2. `useGSAP()` Hook setup (Section 27) → Pass `{ scope: containerRef }` so selectors target DOM nodes within component scope
 3. Cleanup & Context-Safe Callbacks (Section 89) → Use `contextSafe` for event handlers attached after component mount to prevent memory leaks
@@ -44,7 +45,7 @@ npm install @gsap/react
 When **@gsap/react** is available, use the **useGSAP()** hook instead of `useEffect()` for GSAP setup. It handles cleanup automatically and provides a scope and **contextSafe** for callbacks.
 
 ```javascript
-import { useGSAP } from "@gsap/react";
+import { useGSAP } from '@gsap/react';
 
 gsap.registerPlugin(useGSAP); // register before running useGSAP or any GSAP code
 
@@ -52,8 +53,8 @@ const containerRef = useRef(null);
 
 useGSAP(
   () => {
-    gsap.to(".box", { x: 100 });
-    gsap.from(".item", { opacity: 0, stagger: 0.1 });
+    gsap.to('.box', { x: 100 });
+    gsap.from('.item', { opacity: 0, stagger: 0.1 });
   },
   { scope: containerRef },
 );
@@ -91,8 +92,8 @@ It's okay to use **gsap.context()** inside a regular **useEffect()** when @gsap/
 ```javascript
 useEffect(() => {
   const ctx = gsap.context(() => {
-    gsap.to(".box", { x: 100 });
-    gsap.from(".item", { opacity: 0, stagger: 0.1 });
+    gsap.to('.box', { x: 100 });
+    gsap.from('.item', { opacity: 0, stagger: 0.1 });
   }, containerRef);
   return () => ctx.revert();
 }, []);
@@ -116,7 +117,7 @@ useGSAP(
     gsap.to(goodRef.current, { x: 100 });
 
     // ❌ DANGER! This animation is created in an event handler that executes AFTER useGSAP() executes. It's not added to the context so it won't get cleaned up (reverted). The event listener isn't removed in cleanup function below either, so it persists between component renders (bad).
-    badRef.current.addEventListener("click", () => {
+    badRef.current.addEventListener('click', () => {
       gsap.to(badRef.current, { y: 100 });
     });
 
@@ -125,12 +126,12 @@ useGSAP(
       gsap.to(goodRef.current, { rotation: 180 });
     });
 
-    goodRef.current.addEventListener("click", onClickGood);
+    goodRef.current.addEventListener('click', onClickGood);
 
     // 👍 we remove the event listener in the cleanup function below.
     return () => {
       // <-- cleanup
-      goodRef.current.removeEventListener("click", onClickGood);
+      goodRef.current.removeEventListener('click', onClickGood);
     };
   },
   { scope: container },