tribunal-kit 6.0.0 → 7.0.0

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

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before creating or editing ScrollTrigger animations, you MUST inspect:
+
 1. Plugin Registration Requirement (Section 22) → Explicitly execute `gsap.registerPlugin(ScrollTrigger)` once at root; ban unregistered plugin usage
 2. Child Tween ScrollTrigger Ban (Section 288) → Attach `scrollTrigger` to top-level timeline/tweens ONLY; ban attaching `scrollTrigger` to child timeline steps
 3. Horizontal Ease-None Rule (Section 226) → Enforce `ease: "none"` on horizontal scrolling tweens; ban custom easing on containerAnimation tweens
@@ -45,14 +46,14 @@ gsap.registerPlugin(ScrollTrigger);
 Tie a tween or timeline to scroll position:
 
 ```javascript
-gsap.to(".box", {
+gsap.to('.box', {
   x: 500,
   duration: 1,
   scrollTrigger: {
-    trigger: ".box",
-    start: "top center", // when top of trigger hits center of viewport
-    end: "bottom center", // when the bottom of the trigger hits the center of the viewport
-    toggleActions: "play reverse play reverse", // onEnter play, onLeave reverse, onEnterBack play, onLeaveBack reverse
+    trigger: '.box',
+    start: 'top center', // when top of trigger hits center of viewport
+    end: 'bottom center', // when the bottom of the trigger hits the center of the viewport
+    toggleActions: 'play reverse play reverse', // onEnter play, onLeave reverse, onEnterBack play, onLeaveBack reverse
   },
 });
 ```
@@ -89,10 +90,10 @@ Main properties for the `scrollTrigger` config object (shorthand: `scrollTrigger
 
 ```javascript
 ScrollTrigger.create({
-  trigger: "#id",
-  start: "top top",
-  end: "bottom 50%+=100px",
-  onUpdate: (self) => console.log(self.progress.toFixed(3), self.direction),
+  trigger: '#id',
+  start: 'top top',
+  end: 'bottom 50%+=100px',
+  onUpdate: self => console.log(self.progress.toFixed(3), self.direction),
 });
 ```
 
@@ -114,26 +115,26 @@ ScrollTrigger.create({
 - **batchMax** (Number | Function) — Max elements per batch. When full, the callback fires and the next batch starts. Use a **function** that returns a number for responsive layouts; it runs on refresh (resize, tab focus, etc.).
 
 ```javascript
-ScrollTrigger.batch(".box", {
+ScrollTrigger.batch('.box', {
   onEnter: (elements, triggers) => {
     gsap.to(elements, { opacity: 1, y: 0, stagger: 0.15 });
   },
   onLeave: (elements, triggers) => {
     gsap.to(elements, { opacity: 0, y: 100 });
   },
-  start: "top 80%",
-  end: "bottom 20%",
+  start: 'top 80%',
+  end: 'bottom 20%',
 });
 ```
 
 With **batchMax** and **interval** for finer control:
 
 ```javascript
-ScrollTrigger.batch(".card", {
+ScrollTrigger.batch('.card', {
   interval: 0.1,
   batchMax: 4,
-  onEnter: (batch) => gsap.to(batch, { opacity: 1, y: 0, stagger: 0.1, overwrite: true }),
-  onLeaveBack: (batch) => gsap.set(batch, { opacity: 0, y: 50, overwrite: true }),
+  onEnter: batch => gsap.to(batch, { opacity: 1, y: 0, stagger: 0.1, overwrite: true }),
+  onLeaveBack: batch => gsap.set(batch, { opacity: 0, y: 50, overwrite: true }),
 });
 ```
 
@@ -176,12 +177,12 @@ See [ScrollTrigger.scrollerProxy()](https://gsap.com/docs/v3/Plugins/ScrollTrigg
 Scrub ties animation progress to scroll. Use for “scroll-driven” feel:
 
 ```javascript
-gsap.to(".box", {
+gsap.to('.box', {
   x: 500,
   scrollTrigger: {
-    trigger: ".box",
-    start: "top center",
-    end: "bottom center",
+    trigger: '.box',
+    start: 'top center',
+    end: 'bottom center',
     scrub: true, // or number (smoothness delay in seconds), so 0.5 means it'd take 0.5 seconds to "catch up" to the current scroll position.
   },
 });
@@ -227,14 +228,14 @@ Drive a timeline with scroll and optional scrub:
 ```javascript
 const tl = gsap.timeline({
   scrollTrigger: {
-    trigger: ".container",
-    start: "top top",
-    end: "+=2000",
+    trigger: '.container',
+    start: 'top top',
+    end: '+=2000',
     scrub: 1,
     pin: true,
   },
 });
-tl.to(".a", { x: 100 }).to(".b", { y: 50 }).to(".c", { opacity: 0 });
+tl.to('.a', { x: 100 }).to('.b', { y: 50 }).to('.c', { opacity: 0 });
 ```
 
 The timeline’s progress is tied to scroll through the trigger’s start/end range.
@@ -251,27 +252,27 @@ A common pattern: **pin** a section, then as the user scrolls **vertically**, co
 4. To trigger things based on the horizontal movement caused by that tween, set **containerAnimation** to that tween.
 
 ```javascript
-const scrollingEl = document.querySelector(".horizontal-el");
+const scrollingEl = document.querySelector('.horizontal-el');
 // Panel = pinned viewport-sized section. .horizontal-wrap = inner content that moves left.
 const scrollTween = gsap.to(scrollingEl, {
   xPercent: () => Max.max(0, window.innerWidth - scrollingEl.offsetWidth),
-  ease: "none", // ease: "none" is required
+  ease: 'none', // ease: "none" is required
   scrollTrigger: {
     trigger: scrollingEl,
     pin: scrollingEl.parentNode, // wrapper so that we're not animating the pinned element
-    start: "top top",
-    end: "+=1000",
+    start: 'top top',
+    end: '+=1000',
   },
 });
 
 // other tweens that trigger based on horizontal movement should reference the containerAnimation:
-gsap.to(".nested-el-1", {
+gsap.to('.nested-el-1', {
   y: 100,
   scrollTrigger: {
     containerAnimation: scrollTween, // IMPORTANT
-    trigger: ".nested-wrapper-1",
-    start: "left center", // based on horizontal movement
-    toggleActions: "play none none reset",
+    trigger: '.nested-wrapper-1',
+    start: 'left center', // based on horizontal movement
+    toggleActions: 'play none none reset',
   },
 });
 ```
@@ -284,9 +285,9 @@ gsap.to(".nested-el-1", {
 - When removing animated elements or changing pages (e.g. in SPAs), **kill** associated ScrollTrigger instances so they don’t run on stale elements:
 
 ```javascript
-ScrollTrigger.getAll().forEach((t) => t.kill());
+ScrollTrigger.getAll().forEach(t => t.kill());
 // or kill by the id assigned to the ScrollTrigger in its config object like {id: "my-id", ...}
-ScrollTrigger.getById("my-id")?.kill();
+ScrollTrigger.getById('my-id')?.kill();
 ```
 
 In React, use the `useGSAP()` hook (@gsap/react NPM package) to ensure proper cleanup automatically, or manually kill in a cleanup (e.g. in useEffect return) when the component unmounts.

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

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before creating GSAP timelines, you MUST inspect:
+
 1. Position Parameter Syntax (Section 27) → Pass position as the 3rd argument (`"<"`, `">"`, `"+=0.5"`) instead of using hardcoded delays
 2. Timeline Defaults (Section 45) → Pass `{ defaults: { duration, ease } }` into `gsap.timeline()` constructor to avoid repetitive child declarations
 3. ScrollTrigger Placement (Section 101) → Place `scrollTrigger` ONLY on the top-level timeline, never on child tweens inside a timeline
@@ -34,7 +35,9 @@ Apply when building multi-step animations, coordinating several tweens in sequen
 
 ```javascript
 const tl = gsap.timeline();
-tl.to(".a", { x: 100, duration: 1 }).to(".b", { y: 50, duration: 0.5 }).to(".c", { opacity: 0, duration: 0.3 });
+tl.to('.a', { x: 100, duration: 1 })
+  .to('.b', { y: 50, duration: 0.5 })
+  .to('.c', { opacity: 0, duration: 0.3 });
 ```
 
 By default, tweens are **appended** one after another. Use the **position parameter** to place tweens at specific times or relative to other tweens.
@@ -51,10 +54,10 @@ Third argument (or position property in vars) controls placement:
 Examples:
 
 ```javascript
-tl.to(".a", { x: 100 }, 0); // at 0
-tl.to(".b", { y: 50 }, "+=0.5"); // 0.5s after last end
-tl.to(".c", { opacity: 0 }, "<"); // same start as previous
-tl.to(".d", { scale: 2 }, "<0.2"); // 0.2s after previous start
+tl.to('.a', { x: 100 }, 0); // at 0
+tl.to('.b', { y: 50 }, '+=0.5'); // 0.5s after last end
+tl.to('.c', { opacity: 0 }, '<'); // same start as previous
+tl.to('.d', { scale: 2 }, '<0.2'); // 0.2s after previous start
 ```
 
 ## Timeline Defaults
@@ -62,8 +65,8 @@ tl.to(".d", { scale: 2 }, "<0.2"); // 0.2s after previous start
 Pass defaults into the timeline so all child tweens inherit:
 
 ```javascript
-const tl = gsap.timeline({ defaults: { duration: 0.5, ease: "power2.out" } });
-tl.to(".a", { x: 100 }).to(".b", { y: 50 }); // both use 0.5s and power2.out
+const tl = gsap.timeline({ defaults: { duration: 0.5, ease: 'power2.out' } });
+tl.to('.a', { x: 100 }).to('.b', { y: 50 }); // both use 0.5s and power2.out
 ```
 
 ## Timeline Options (constructor)
@@ -78,12 +81,12 @@ tl.to(".a", { x: 100 }).to(".b", { y: 50 }); // both use 0.5s and power2.out
 Add and use labels for readable, maintainable sequencing:
 
 ```javascript
-tl.addLabel("intro", 0);
-tl.to(".a", { x: 100 }, "intro");
-tl.addLabel("outro", "+=0.5");
-tl.to(".b", { opacity: 0 }, "outro");
-tl.play("outro"); // start from "outro"
-tl.tweenFromTo("intro", "outro"); // pauses the timeline and returns a new Tween that animates the timeline's playhead from intro to outro with no ease.
+tl.addLabel('intro', 0);
+tl.to('.a', { x: 100 }, 'intro');
+tl.addLabel('outro', '+=0.5');
+tl.to('.b', { opacity: 0 }, 'outro');
+tl.play('outro'); // start from "outro"
+tl.tweenFromTo('intro', 'outro'); // pauses the timeline and returns a new Tween that animates the timeline's playhead from intro to outro with no ease.
 ```
 
 ## Nesting Timelines
@@ -93,9 +96,9 @@ Timelines can contain other timelines.
 ```javascript
 const master = gsap.timeline();
 const child = gsap.timeline();
-child.to(".a", { x: 100 }).to(".b", { y: 50 });
+child.to('.a', { x: 100 }).to('.b', { y: 50 });
 master.add(child, 0);
-master.to(".c", { opacity: 0 }, "+=0.2");
+master.to('.c', { opacity: 0 }, '+=0.2');
 ```
 
 ## Controlling Playback

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

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before using `gsap.utils`, you MUST inspect:
+
 1. Pure Number vs Unit strings (Section 306) → `mapRange` and `normalize` work ONLY on numbers; use `getUnit` and `unitize` for string values with units
 2. Reusable Function Form (Section 22) → Omit the value argument (or pass `true` as 4th param for `random()`) to get a reusable function for high-frequency loops
 3. Component Scoping (Section 219) → Use `gsap.utils.selector(containerRef)` inside React components to restrict selector targets
@@ -90,7 +91,7 @@ Interpolates between two values at a given progress (0–1). Handles numbers, co
 
 ```javascript
 gsap.utils.interpolate(0, 100, 0.5); // 50
-gsap.utils.interpolate("#ff0000", "#0000ff", 0.5); // mid color
+gsap.utils.interpolate('#ff0000', '#0000ff', 0.5); // mid color
 gsap.utils.interpolate({ x: 0, y: 0 }, { x: 100, y: 50 }, 0.5); // { x: 50, y: 25 }
 
 let lerp = gsap.utils.interpolate(0, 100);
@@ -114,7 +115,7 @@ randomFn(); // random value in range, snapped to 10
 randomFn(); // another random value
 
 // array: pick one value at random
-gsap.utils.random(["red", "blue", "green"]); // "red", "blue", or "green"
+gsap.utils.random(['red', 'blue', 'green']); // "red", "blue", or "green"
 let randomFromArray = gsap.utils.random([0, 100, 200], true);
 randomFromArray(); // 0, 100, or 200
 ```
@@ -122,8 +123,8 @@ randomFromArray(); // 0, 100, or 200
 **String form in tween vars:** use `"random(-100, 100)"`, `"random(-100, 100, 5)"`, or `"random([0, 100, 200])"`; GSAP evaluates it per target.
 
 ```javascript
-gsap.to(".box", { x: "random(-100, 100, 5)", duration: 1 });
-gsap.to(".item", { backgroundColor: "random([red, blue, green])" });
+gsap.to('.box', { x: 'random(-100, 100, 5)', duration: 1 });
+gsap.to('.item', { backgroundColor: 'random([red, blue, green])' });
 ```
 
 ### snap(snapTo, value?)
@@ -142,7 +143,7 @@ snapFn(23); // 20
 Use in tweens for grid or step-based animation:
 
 ```javascript
-gsap.to(".x", { x: 200, snap: { x: 20 } });
+gsap.to('.x', { x: 200, snap: { x: 20 } });
 ```
 
 ### shuffle(array)
@@ -173,11 +174,11 @@ gsap.utils.shuffle([1, 2, 3, 4]); // e.g. [3, 1, 4, 2]
 
 ```javascript
 // Scale: middle elements 0.5, outer edges 3 (amount 2.5 distributed from center)
-gsap.to(".class", {
+gsap.to('.class', {
   scale: gsap.utils.distribute({
     base: 0.5,
     amount: 2.5,
-    from: "center",
+    from: 'center',
   }),
 });
 ```
@@ -188,10 +189,10 @@ gsap.to(".class", {
 const distributor = gsap.utils.distribute({
   base: 50,
   amount: 100,
-  from: "center",
-  ease: "power1.inOut",
+  from: 'center',
+  ease: 'power1.inOut',
 });
-const targets = gsap.utils.toArray(".box");
+const targets = gsap.utils.toArray('.box');
 const valueForIndex2 = distributor(2, targets[2], targets);
 ```
 
@@ -204,8 +205,8 @@ See [distribute()](https://gsap.com/docs/v3/GSAP/UtilityMethods/distribute/) for
 Returns the unit string of a value (e.g. `"px"`, `"%"`, `"deg"`). Use when normalizing or converting values.
 
 ```javascript
-gsap.utils.getUnit("100px"); // "px"
-gsap.utils.getUnit("50%"); // "%"
+gsap.utils.getUnit('100px'); // "px"
+gsap.utils.getUnit('50%'); // "%"
 gsap.utils.getUnit(42); // "" (unitless)
 ```
 
@@ -214,8 +215,8 @@ gsap.utils.getUnit(42); // "" (unitless)
 Appends a unit to a number, or returns the value as-is if it already has a unit. Use when building CSS values or tween end values.
 
 ```javascript
-gsap.utils.unitize(100, "px"); // "100px"
-gsap.utils.unitize("2rem", "px"); // "2rem" (unchanged)
+gsap.utils.unitize(100, 'px'); // "100px"
+gsap.utils.unitize('2rem', 'px'); // "2rem" (unchanged)
 ```
 
 ### splitColor(color, returnHSL?)
@@ -223,10 +224,10 @@ gsap.utils.unitize("2rem", "px"); // "2rem" (unchanged)
 Converts a color string into an array: **[red, green, blue]** (0–255), or **[red, green, blue, alpha]** (4 elements for RGBA when alpha is present or required). Pass **true** as the second argument (**returnHSL**) to get **[hue, saturation, lightness]** or **[hue, saturation, lightness, alpha]** (HSL/HSLA) instead. Works with `"rgb()"`, `"rgba()"`, `"hsl()"`, `"hsla()"`, hex, and named colors (e.g. `"red"`). Use when animating color components or building gradients. See [splitColor()](https://gsap.com/docs/v3/GSAP/UtilityMethods/splitColor/).
 
 ```javascript
-gsap.utils.splitColor("red"); // [255, 0, 0]
-gsap.utils.splitColor("#6fb936"); // [111, 185, 54]
-gsap.utils.splitColor("rgba(204, 153, 51, 0.5)"); // [204, 153, 51, 0.5] (4 elements)
-gsap.utils.splitColor("#6fb936", true); // [94, 55, 47] (HSL: hue, saturation, lightness)
+gsap.utils.splitColor('red'); // [255, 0, 0]
+gsap.utils.splitColor('#6fb936'); // [111, 185, 54]
+gsap.utils.splitColor('rgba(204, 153, 51, 0.5)'); // [204, 153, 51, 0.5] (4 elements)
+gsap.utils.splitColor('#6fb936', true); // [94, 55, 47] (HSL: hue, saturation, lightness)
 ```
 
 ## Arrays and Collections
@@ -237,8 +238,8 @@ Returns a scoped selector function that finds elements only within the given ele
 
 ```javascript
 const q = gsap.utils.selector(containerRef);
-q(".box"); // array of .box elements inside container
-gsap.to(q(".circle"), { x: 100 });
+q('.box'); // array of .box elements inside container
+gsap.to(q('.circle'), { x: 100 });
 ```
 
 ### toArray(value, scope?)
@@ -246,8 +247,8 @@ gsap.to(q(".circle"), { x: 100 });
 Converts a value to an array: selector string (scoped to element), NodeList, HTMLCollection, single element, or array. Use when passing mixed inputs to GSAP (e.g. targets) and a true array is needed.
 
 ```javascript
-gsap.utils.toArray(".item"); // array of elements
-gsap.utils.toArray(".item", container); // scoped to container
+gsap.utils.toArray('.item'); // array of elements
+gsap.utils.toArray('.item', container); // scoped to container
 gsap.utils.toArray(nodeList); // [ ... ] from NodeList
 ```
 
@@ -257,8 +258,8 @@ Composes functions: **pipe(f1, f2, f3)(value)** returns f3(f2(f1(value))). Use w
 
 ```javascript
 const fn = gsap.utils.pipe(
-  (v) => gsap.utils.normalize(0, 100, v),
-  (v) => gsap.utils.snap(0.1, v),
+  v => gsap.utils.normalize(0, 100, v),
+  v => gsap.utils.snap(0.1, v),
 );
 fn(50); // normalized then snapped
 ```

package/.agent/skills/harden/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before implementing UI component logic, you MUST inspect:
+
 1. Component state tree → Verify presence of explicit loading skeleton, error boundary fallback, and empty states
 2. CLS Prevention rules (Section 36) → Match skeleton placeholder dimensions exactly to incoming content elements
 3. String Expansion (i18n) rules (Section 40) → Avoid hardcoded pixel widths (`width: 120px`); use `min-width` and flexible auto-layout
@@ -31,26 +32,31 @@ Ensure UI components gracefully handle network failures, missing data, slow conn
 ## 5 Resilience Domains
 
 ### 1. Zero-Data Empty States
+
 - Never render empty blank slates or blank boxes.
 - Always render a dedicated empty state component featuring:
   - Contextual icon or subtle illustration
-  - Clear heading explaining the zero state (*"No active projects found"*)
-  - Secondary helper copy (*"Get started by creating your first project."*)
-  - Prominent primary action CTA button (*"Create Project"*)
+  - Clear heading explaining the zero state (_"No active projects found"_)
+  - Secondary helper copy (_"Get started by creating your first project."_)
+  - Prominent primary action CTA button (_"Create Project"_)
 
 ### 2. Error Boundary UI & Retry Hooks
+
 - Wrap high-risk component trees in React/framework Error Boundaries.
 - Display localized inline error callouts with explicit "Retry" action buttons rather than crashing the full page view.
 
 ### 3. Cumulative Layout Shift (CLS) Loading Skeletons
+
 - Match skeleton placeholder dimensions EXACTLY to incoming data elements.
 - Use animated pulse keyframes (`@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }`).
 
 ### 4. Extreme String Expansion (i18n)
+
 - German, French, and Spanish strings are 30% - 50% longer than English.
 - Avoid fixed button or container widths (`width: 120px`). Use `min-width` with flexible auto sizing and `flex-wrap: wrap` or text truncation.
 
 ### 5. Offline & Network Disconnection Handling
+
 - Detect `navigator.onLine` state and display subtle offline status banners.
 - Disable mutation buttons during offline mode with explicit tooltip explanation.
 

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

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before operating in Marathon long-running harness mode, you MUST inspect:
+
 1. Active session ledger (`task.md`, `session_manager.js`) → Verify active feature specs and task completion status
 2. Verification-Before-Completion (VBC) Protocol → Provide concrete proof (test run log, compiler pass) before calling `tk marathon mark pass`
 3. Error recovery state machine → Escalate unrecoverable errors after 3 retries via `tk marathon mark fail`

package/.agent/skills/i18n-localization/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before engineering multilingual or i18n features, you MUST inspect:
+
 1. Dictionary Interpolation (Section 15) → Use ICU parameter interpolation `t('greeting', { name })` instead of string concatenation
 2. Native `Intl` API Formatting (Section 71) → Use native `Intl.NumberFormat` and `Intl.DateTimeFormat` with active locale instead of third-party string parsers
 3. Logical CSS Properties for RTL (Section 94) → Use logical properties (`margin-inline-start`, `ms-4`) instead of physical `marginLeft`/`marginRight` for Arabic/Hebrew support
@@ -66,15 +67,15 @@ export function Header({ user, alertCount }) {
 }
 
 // ✅ GOOD: i18n Abstraction (using next-intl)
-import { useTranslations } from "next-intl";
+import { useTranslations } from 'next-intl';
 
 export function Header({ user, alertCount }) {
-  const t = useTranslations("Dashboard");
+  const t = useTranslations('Dashboard');
 
   return (
     <header>
-      <h1>{t("welcomeMessage", { name: user.name })}</h1>
-      <p>{t("unreadAlerts", { count: alertCount })}</p>
+      <h1>{t('welcomeMessage', { name: user.name })}</h1>
+      <p>{t('unreadAlerts', { count: alertCount })}</p>
     </header>
   );
 }
@@ -88,19 +89,19 @@ Do not install `moment.js` or write massive regex string parsers to format curre
 
 ```typescript
 // Data/Currency Formatting correctly tied to the active locale
-const locale = "de-DE";
+const locale = 'de-DE';
 
 // ✅ Currency
-const price = new Intl.NumberFormat(locale, { style: "currency", currency: "EUR" }).format(1200.5);
+const price = new Intl.NumberFormat(locale, { style: 'currency', currency: 'EUR' }).format(1200.5);
 // Output in Germany: "1.200,50 €"
 
 // ✅ Dates
-const date = new Intl.DateTimeFormat(locale, { dateStyle: "full" }).format(new Date());
+const date = new Intl.DateTimeFormat(locale, { dateStyle: 'full' }).format(new Date());
 // Output in Germany: "Freitag, 2. April 2026"
 
 // ✅ Relative Time
-const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
-rtf.format(-2, "day"); // Output: "vorgestern" (the day before yesterday)
+const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
+rtf.format(-2, 'day'); // Output: "vorgestern" (the day before yesterday)
 ```
 
 ---

package/.agent/skills/impeccable/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before designing or engineering frontend components, you MUST inspect:
+
 1. `DESIGN.md` / `package.json` → Verify OKLCH color palettes, font pairings, and responsive container query setups
 2. Core Pillars of Impeccable UI (Section 22) → Enforce `tabular-nums` on digits, `text-wrap: balance` on headings, and strict 8px grid math
 3. Motion & Micro-Interactions (Section 34) → Limit micro-interactions to $\le 160\text{ms}$ and check `prefers-reduced-motion` fallbacks
@@ -31,22 +32,26 @@ The gold standard framework for crafting bespoke, world-class web applications t
 ## Core Pillars of Impeccable UI
 
 ### 1. Typography & Typographic Rhythm
+
 - **Optical Sizing & Tracking**: Large display headings (32px+) require tight letter-spacing (`letter-spacing: -0.03em`). Small caption text (12px) requires positive tracking (`letter-spacing: +0.01em`).
 - **Tabular Numbers**: Any numeric data that updates, increments, or displays in columns MUST use `font-variant-numeric: tabular-nums` or `font-feature-settings: "tnum"` to prevent visual jitter.
 - **Text Wrapping & Balance**: Headings MUST use `text-wrap: balance` to prevent typographic orphans. Body paragraphs MUST use `text-wrap: pretty` (where supported) or max `65ch` width.
 
 ### 2. Color Systems & Gamut Precision
+
 - **OKLCH Color Space**: Prefer `oklch()` over `hsl()` or `hex` for smooth perceptual uniformity across hue and lightness shifts.
 - **Subtle Surface Steps**: Define surface colors with small perceptual lightness steps ($L \pm 2\%$) to create hierarchy without harsh dividers.
 - **Adaptive Contrast**: Text contrast MUST adapt automatically across light/dark themes with high legibility ratios ($\ge 7:1$ for primary, $\ge 4.5:1$ for secondary).
 
 ### 3. Motion & Micro-Interactions
+
 - **Intentional Motion**: Animations exist ONLY to convey spatial continuity, provide press feedback, or indicate state changes.
 - **Duration Constraints**: Micro-interactions $\le 160\text{ms}$; dropdowns/popovers $\le 220\text{ms}$; page transitions $\le 300\text{ms}$.
 - **Physically Grounded Entrances**: Elements scale in from `scale(0.96)` and opacity `0`, anchored to their trigger origin.
 - **DOM Entry (@starting-style)**: Use `@starting-style` with `transition-behavior: allow-discrete` for smooth `display: none` to `display: block` entrance animations without JS overhead.
 
 ### 4. Layout Mechanics & Spatial Math
+
 - **8px Grid System**: Every margin, padding, gap, and height MUST derive from an 8px grid (or 4px micro-grid).
 - **Asymmetrical Balance**: Avoid cookie-cutter centered layouts for SaaS apps. Use strong left-aligned structural axes with generous negative space.
 - **Container Queries**: Components adjust layout based on container size (`@container`), not viewport size (`@media`), making them context-agnostic.

package/.agent/skills/improve-codebase-architecture/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before refactoring or producing an architectural improvement roadmap, you MUST inspect:
+
 1. Circular Dependency Breaking Rule (Section 24) → Identify circular imports (`A -> B -> C -> A`) and resolve via event buses or explicit interfaces
 2. Monolithic Controller Line Threshold (500 lines) (Section 27) → Flag any controller/service >500 lines with mixed concerns for immediate decomposition
 3. Incremental Refactoring Rule (Section 46) → Ban shotgun surgery across >5 files simultaneously; enforce phased, test-backed interface extractions
@@ -33,22 +34,26 @@ Audit an existing codebase for structural rot, circular dependencies, monolithic
 ## 4 Audit Steps
 
 ### 1. Dependency Graph Inspection
+
 - Map import relationships across modules. Identify circular dependencies (`A -> B -> C -> A`) and break them by introducing event buses or interface abstractions.
 
 ### 2. Monolithic Controller Detection
+
 - Flag files exceeding 500 lines of code containing mixed concerns (database queries, HTTP response handling, email sending, data validation).
 
 ### 3. Interface Shrinking (Deepening Modules)
+
 - Audit public exports. Convert large multi-parameter interfaces into thin, single-responsibility contracts.
 
 ### 4. Prioritized Architectural Roadmap Output
+
 Output audit findings in a clear prioritized Markdown table:
 
-| Impact Level | Architectural Issue | Proposed Seam / Refactor |
-| --- | --- | --- |
-| 🔴 **High Impact** | Direct DB queries inside React Server Components | Extract Repository layer pattern |
-| 🟠 **Medium Impact** | Circular import between Auth and User modules | Introduce `EventBus` for user registration events |
-| 🟡 **Low Impact** | Hardcoded API base URLs across 12 files | Centralize in typed `ConfigService` |
+| Impact Level         | Architectural Issue                              | Proposed Seam / Refactor                          |
+| -------------------- | ------------------------------------------------ | ------------------------------------------------- |
+| 🔴 **High Impact**   | Direct DB queries inside React Server Components | Extract Repository layer pattern                  |
+| 🟠 **Medium Impact** | Circular import between Auth and User modules    | Introduce `EventBus` for user registration events |
+| 🟡 **Low Impact**    | Hardcoded API base URLs across 12 files          | Centralize in typed `ConfigService`               |
 
 ---
 

package/.agent/skills/improve-ui/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before auditing UI surfaces or writing remediation plans, you MUST inspect:
+
 1. Read-Only Constraint (Section 24) → Strictly NEVER modify product source code (`src/`, `components/`, `app/`) during an `improve-ui` audit session
 2. 3-Proof Requirement (Section 40) → Every reported defect MUST present Observation (code line/element), Basis (token/grid violation), and Consequence
 3. Plan Artifact Output (Section 25) → Write implementation plans to `design-plans/` or output structured markdown for execution
@@ -39,21 +40,27 @@ Audit a specific product surface against its governing design tokens and guideli
 ## 2. The 4-Phase Audit Protocol
 
 ### Phase 1: Surface Selection & Path Tracing
+
 1. Focus on one deployable application and one coherent surface family (e.g. `Dashboard / Overview`).
 2. Trace the path from route layout $\rightarrow$ page composition $\rightarrow$ shared UI primitives $\rightarrow$ tokens/CSS variables.
 
 ### Phase 2: Design Language Reconstruction
+
 1. Inspect `DESIGN.md`, `index.css`, Tailwind tokens, or custom properties.
 2. Record active background tokens, typography roles, spatial rules, and border/shadow contracts.
 
 ### Phase 3: Proof-Gated Defect Verification
+
 Before reporting a finding, require 3 explicit proofs:
+
 - **Observation**: Exact code line or rendered element showing the discrepancy.
 - **Basis**: Violation of documented design token or 8px grid baseline.
 - **Consequence**: Measurable degradation of visual hierarchy, readability, or interaction response.
 
 ### Phase 4: Implementation Plan Generation
+
 Write a self-contained plan specifying:
+
 - Files to modify
 - Exact CSS/JSX diffs
 - Verification steps (browser preview, contrast check, visual alignment)
@@ -62,11 +69,11 @@ Write a self-contained plan specifying:
 
 ## Anti-Slop Table
 
-| Audit Pattern | Evidence-Based Rule | Rationale |
-| --- | --- | --- |
-| Rewriting entire components | Targeted visual diff plan | Preserves business logic & state |
-| Guessing design tokens | Citing verified `var(--...)` declarations | Ensures token adherence |
-| Speculative visual preferences | Reporting only verified WCAG/token violations | Prevents arbitrary churn |
+| Audit Pattern                  | Evidence-Based Rule                           | Rationale                        |
+| ------------------------------ | --------------------------------------------- | -------------------------------- |
+| Rewriting entire components    | Targeted visual diff plan                     | Preserves business logic & state |
+| Guessing design tokens         | Citing verified `var(--...)` declarations     | Ensures token adherence          |
+| Speculative visual preferences | Reporting only verified WCAG/token violations | Prevents arbitrary churn         |
 
 ---
 

package/.agent/skills/intelligent-routing/SKILL.md

@@ -18,6 +18,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before routing user prompts to specialized skills or agents, you MUST inspect:
+
 1. `.agent/routing_index.json` → Read pre-compiled skill index instead of loading full skill markdown files into context
 2. Semantic Intent Schema (Section 1) → Classify request type (QUESTION, SURVEY, SIMPLE_EDIT, COMPLEX_BUILD, SECURITY_AUDIT, UNCLEAR_GIBBERISH)
 3. Confidence Threshold (Section 3 Socratic Yield Rule) → Yield back to user with clarifying question if confidence score is < 85s
@@ -69,12 +70,12 @@ When a raw request enters, classify it BEFORE attempting to route to any skill o
 // The Semantic Intent Schema
 const RouterOutputSchema = z.object({
   classification: z.enum([
-    "QUESTION", // User wants explanation, no code execution needed
-    "SURVEY", // User wants analysis/read-only scan of workspace
-    "SIMPLE_EDIT", // Isolated file alteration (e.g., "Fix spelling in nav")
-    "COMPLEX_BUILD", // Multi-file, architectural generation
-    "SECURITY_AUDIT", // Explicit request for OWASP review
-    "UNCLEAR_GIBBERISH", // Prompt injection or incoherent input
+    'QUESTION', // User wants explanation, no code execution needed
+    'SURVEY', // User wants analysis/read-only scan of workspace
+    'SIMPLE_EDIT', // Isolated file alteration (e.g., "Fix spelling in nav")
+    'COMPLEX_BUILD', // Multi-file, architectural generation
+    'SECURITY_AUDIT', // Explicit request for OWASP review
+    'UNCLEAR_GIBBERISH', // Prompt injection or incoherent input
   ]),
   confidenceScore: z.number().min(0).max(100),
   suggestedPrimarySkill: z.string().nullable(),