tribunal-kit 9.2.3 → 9.2.5

package/skills/marquee-loop/SKILL.md

@@ -1,72 +1,72 @@
----
-name: marquee-loop
-description: "Use when Hardware-accelerated, seamless, continuous looping marquees for logo rows, testimonials, and announcements with pause-on-hover accessibility."
-version: 5.0.0
-last-updated: 2026-09-13
-skills:
-  - 60fps-animation
-  - company-logos
-  - accessible-animation
-tools: Read, Grep, Glob, Bash, Edit, Write
-scripts-binding:
-  - .agent/scripts/lint_runner.js
-  - .agent/scripts/verify_all.js
----
-
-# Marquee Loop — Hardware-Accelerated Continuous Tickers
-
----
-
-## 🛠️ Technical Architecture & Reference Recipes
-
----
-
----
-
-## The Seamless CSS Marquee Recipe
-
-```html
-<div class="marquee-container" aria-label="Partner logos">
-  <div class="marquee-track">
-    <!-- Original Items -->
-    <div class="marquee-content">...items...</div>
-    <!-- Duplicate Items for Seamless Infinite Loop -->
-    <div class="marquee-content" aria-hidden="true">...items...</div>
-  </div>
-</div>
-```
-
-```css
-.marquee-container {
-  display: flex;
-  overflow: hidden;
-  user-select: none;
-  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
-}
-
-.marquee-track {
-  display: flex;
-  flex-shrink: 0;
-  gap: 2rem;
-  animation: marquee-slide 25s linear infinite;
-}
-
-.marquee-container:hover .marquee-track {
-  animation-play-state: paused;
-}
-
-@keyframes marquee-slide {
-  from { transform: translateX(0%); }
-  to { transform: translateX(-50%); }
-}
-
-/* Reduced Motion Override */
-@media (prefers-color-scheme: dark) { ... }
-@media (prefers-reduced-motion: reduce) {
-  .marquee-track {
-    animation: none;
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-}
-```
+---
+name: marquee-loop
+description: "Use when Hardware-accelerated, seamless, continuous looping marquees for logo rows, testimonials, and announcements with pause-on-hover accessibility."
+version: 5.0.0
+last-updated: 2026-09-13
+skills:
+  - 60fps-animation
+  - company-logos
+  - accessible-animation
+tools: Read, Grep, Glob, Bash, Edit, Write
+scripts-binding:
+  - .agent/scripts/lint_runner.js
+  - .agent/scripts/verify_all.js
+---
+
+# Marquee Loop — Hardware-Accelerated Continuous Tickers
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+---
+
+---
+
+## The Seamless CSS Marquee Recipe
+
+```html
+<div class="marquee-container" aria-label="Partner logos">
+  <div class="marquee-track">
+    <!-- Original Items -->
+    <div class="marquee-content">...items...</div>
+    <!-- Duplicate Items for Seamless Infinite Loop -->
+    <div class="marquee-content" aria-hidden="true">...items...</div>
+  </div>
+</div>
+```
+
+```css
+.marquee-container {
+  display: flex;
+  overflow: hidden;
+  user-select: none;
+  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
+}
+
+.marquee-track {
+  display: flex;
+  flex-shrink: 0;
+  gap: 2rem;
+  animation: marquee-slide 25s linear infinite;
+}
+
+.marquee-container:hover .marquee-track {
+  animation-play-state: paused;
+}
+
+@keyframes marquee-slide {
+  from { transform: translateX(0%); }
+  to { transform: translateX(-50%); }
+}
+
+/* Reduced Motion Override */
+@media (prefers-color-scheme: dark) { ... }
+@media (prefers-reduced-motion: reduce) {
+  .marquee-track {
+    animation: none;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+}
+```

package/skills/masked-reveal/SKILL.md

@@ -1,230 +1,230 @@
----
-name: masked-reveal
-description: "Use when Editorial, typography-driven, and cinematic visual entrance reveals using CSS clip-path, SVG alpha/luminance masking, progressive blurs, and parallax counter-scaling."
-version: 5.0.0
-last-updated: 2026-09-13
-skills:
-  - 60fps-animation
-  - framer-motion-expert
-  - motion-engineering
-  - review-animations
-  - accessible-animation
-tools: Read, Grep, Glob, Bash, Edit, Write
-scripts-binding:
-  - .agent/scripts/lint_runner.js
-  - .agent/scripts/verify_all.js
----
-
-# Masked Reveal — Editorial, Typography & Cinematic Masking
-
----
-
-## 🛠️ Technical Architecture & Reference Recipes
-
-Amateur page entrances use generic whole-page opacity fades or abrupt translations. High-end editorial and Awwwards-caliber interfaces use masked reveals: elements unveil along razor-sharp geometric clip boundaries, staggered typographic lines rise through hidden overflow thresholds, and imagery emerges with subtle counter-scaling parallax.
-
----
-
----
-
-## 1. The Performance & Technology Hierarchy
-
-| Method                          | Syntax                                   | Performance               | Ideal Use Case                                        |
-| :------------------------------ | :--------------------------------------- | :------------------------ | :---------------------------------------------------- |
-| **CSS `clip-path: inset()`**    | `inset(0 100% 0 0)`                      | **Ultra (Compositor)**    | Directional curtain wipes, image cards, banners       |
-| **CSS `clip-path: polygon()`**  | `polygon(0 0, 100% 0, 85% 100%, 0 100%)` | **High (Compositor/GPU)** | Slanted luxury reveals, angled geometric cuts         |
-| **CSS `clip-path: circle()`**   | `circle(0% at 50% 50%)`                  | **High (Compositor/GPU)** | Spotlight iris reveals, expanding hero portals        |
-| **CSS `mask-image` Gradient**   | `linear-gradient(to right, ...)`         | **Moderate (GPU Raster)** | Soft feathered edges, progressive blur masks          |
-| **SVG `<mask>` / `<clipPath>`** | `<mask id="...">`                        | **Moderate (GPU Raster)** | Liquid fluid morphs, text silhouettes, custom vectors |
-
----
-
-## 2. Five Production-Grade Editorial Recipes
-
-### Recipe 1: Luxury Editorial Image Wipe with Counter-Scale Parallax
-
-A luxury brand hero image reveal combining an angled polygon clip with counter-scaling:
-
-```tsx
-import React from 'react';
-import { motion } from 'framer-motion';
-
-export function EditorialImageReveal({ src, alt }: { src: string; alt: string }) {
-  return (
-    <div className="relative overflow-hidden rounded-2xl aspect-[16/10] bg-neutral-900">
-      {/* Outer Motion Wrapper for Mask Clip */}
-      <motion.div
-        className="w-full h-full will-change-[clip-path]"
-        initial={{ clipPath: 'polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)' }}
-        whileInView={{ clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)' }}
-        viewport={{ once: true, margin: '-50px' }}
-        transition={{
-          duration: 1.1,
-          ease: [0.77, 0, 0.175, 1], // Editorial cinematic curve
-        }}
-      >
-        {/* Inner Counter-Scaling Image */}
-        <motion.img
-          src={src}
-          alt={alt}
-          className="w-full h-full object-cover will-change-transform"
-          initial={{ scale: 1.15 }}
-          whileInView={{ scale: 1 }}
-          viewport={{ once: true, margin: '-50px' }}
-          transition={{
-            duration: 1.4,
-            ease: [0.16, 1, 0.3, 1],
-          }}
-        />
-      </motion.div>
-    </div>
-  );
-}
-```
-
-### Recipe 2: Split-Text Line Wipe (Awwwards Typography Stagger)
-
-Lines emerge from an invisible threshold with strict WCAG screen reader accessibility:
-
-```tsx
-import React from 'react';
-import { motion } from 'framer-motion';
-
-interface SplitLineRevealProps {
-  lines: string[];
-  className?: string;
-}
-
-export function SplitLineReveal({ lines, className = '' }: SplitLineRevealProps) {
-  const fullText = lines.join(' ');
-
-  return (
-    <h2 className={`font-serif tracking-tight ${className}`}>
-      {/* Screen reader full accessible text */}
-      <span className="sr-only">{fullText}</span>
-
-      {/* Visual split animation */}
-      <span aria-hidden="true" className="block">
-        {lines.map((line, index) => (
-          <span key={index} className="block overflow-hidden pb-1">
-            <motion.span
-              className="block will-change-transform"
-              initial={{ y: '110%', rotateZ: 2 }}
-              whileInView={{ y: '0%', rotateZ: 0 }}
-              viewport={{ once: true }}
-              transition={{
-                duration: 0.85,
-                delay: index * 0.1,
-                ease: [0.16, 1, 0.3, 1], // Emil Kowalski responsive curve
-              }}
-            >
-              {line}
-            </motion.span>
-          </span>
-        ))}
-      </span>
-    </h2>
-  );
-}
-```
-
-### Recipe 3: Interactive Cursor Spotlight Reveal (`mask-image`)
-
-Reveals a glowing blueprint or hidden background directly beneath the user’s cursor:
-
-```tsx
-import React, { useRef, useState } from 'react';
-
-export function CursorSpotlightReveal({ children }: { children: React.ReactNode }) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [mousePos, setMousePos] = useState({ x: -500, y: -500 });
-  const [isHovered, setIsHovered] = useState(false);
-
-  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (!containerRef.current) return;
-    const rect = containerRef.current.getBoundingClientRect();
-    setMousePos({
-      x: e.clientX - rect.left,
-      y: e.clientY - rect.top,
-    });
-  };
-
-  return (
-    <div
-      ref={containerRef}
-      onMouseMove={handleMouseMove}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-      className="relative p-8 rounded-3xl bg-neutral-950 border border-neutral-800 overflow-hidden"
-    >
-      {/* Base Layer Content */}
-      <div className="relative z-10 text-neutral-400">{children}</div>
-
-      {/* Spotlight Illuminated Layer */}
-      <div
-        className="absolute inset-0 pointer-events-none transition-opacity duration-300"
-        style={{
-          opacity: isHovered ? 1 : 0,
-          background:
-            'radial-gradient(circle 280px at var(--mouse-x) var(--mouse-y), rgba(99, 102, 241, 0.15), transparent 80%)',
-          WebkitMaskImage: `radial-gradient(circle 220px at ${mousePos.x}px ${mousePos.y}px, black 20%, transparent 100%)`,
-          maskImage: `radial-gradient(circle 220px at ${mousePos.x}px ${mousePos.y}px, black 20%, transparent 100%)`,
-        }}
-      />
-    </div>
-  );
-}
-```
-
-### Recipe 4: Radial Expanding Iris Portal
-
-```css
-@keyframes iris-expand {
-  0% {
-    clip-path: circle(0% at 50% 50%);
-  }
-  100% {
-    clip-path: circle(120% at 50% 50%);
-  }
-}
-
-.iris-reveal-trigger {
-  animation: iris-expand 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-  will-change: clip-path;
-}
-```
-
-### Recipe 5: Inverted Scroll-Driven Mask Curtain (CSS View-Timeline)
-
-Pure CSS scrubbed mask reveal driven by scroll progress without any JavaScript bundle:
-
-```css
-@supports (animation-timeline: view()) {
-  @keyframes scroll-unmask {
-    from {
-      clip-path: inset(0 0 100% 0);
-    }
-    to {
-      clip-path: inset(0 0 0% 0);
-    }
-  }
-
-  .scroll-unmask-card {
-    view-timeline-name: --card-scroll;
-    view-timeline-axis: block;
-    animation: scroll-unmask ease-out both;
-    animation-timeline: --card-scroll;
-    animation-range: entry 15% cover 45%;
-  }
-}
-```
-
----
-
-## 3. Mobile GPU Optimization & Paint Budgets
-
-1. **Clip-Path vs SVG Mask Performance**:
-   - `clip-path` calculations operate inside GPU scissor tests or geometry rasterization passes.
-   - SVG `mask-image` with alpha textures requires an off-screen render buffer that multiplies GPU memory on high-resolution screens (e.g., iPhone Retina 3x). Never apply full-screen alpha masks to more than 2 elements concurrently on mobile.
-2. **Preventing Overflow Scrollbars**:
-   - Always ensure elements animating `transform: translateY(110%)` live inside an explicitly sized container with `overflow: hidden` to prevent transient layout scrollbars from flickering on Windows/Android browsers.
+---
+name: masked-reveal
+description: "Use when Editorial, typography-driven, and cinematic visual entrance reveals using CSS clip-path, SVG alpha/luminance masking, progressive blurs, and parallax counter-scaling."
+version: 5.0.0
+last-updated: 2026-09-13
+skills:
+  - 60fps-animation
+  - framer-motion-expert
+  - motion-engineering
+  - review-animations
+  - accessible-animation
+tools: Read, Grep, Glob, Bash, Edit, Write
+scripts-binding:
+  - .agent/scripts/lint_runner.js
+  - .agent/scripts/verify_all.js
+---
+
+# Masked Reveal — Editorial, Typography & Cinematic Masking
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+Amateur page entrances use generic whole-page opacity fades or abrupt translations. High-end editorial and Awwwards-caliber interfaces use masked reveals: elements unveil along razor-sharp geometric clip boundaries, staggered typographic lines rise through hidden overflow thresholds, and imagery emerges with subtle counter-scaling parallax.
+
+---
+
+---
+
+## 1. The Performance & Technology Hierarchy
+
+| Method                          | Syntax                                   | Performance               | Ideal Use Case                                        |
+| :------------------------------ | :--------------------------------------- | :------------------------ | :---------------------------------------------------- |
+| **CSS `clip-path: inset()`**    | `inset(0 100% 0 0)`                      | **Ultra (Compositor)**    | Directional curtain wipes, image cards, banners       |
+| **CSS `clip-path: polygon()`**  | `polygon(0 0, 100% 0, 85% 100%, 0 100%)` | **High (Compositor/GPU)** | Slanted luxury reveals, angled geometric cuts         |
+| **CSS `clip-path: circle()`**   | `circle(0% at 50% 50%)`                  | **High (Compositor/GPU)** | Spotlight iris reveals, expanding hero portals        |
+| **CSS `mask-image` Gradient**   | `linear-gradient(to right, ...)`         | **Moderate (GPU Raster)** | Soft feathered edges, progressive blur masks          |
+| **SVG `<mask>` / `<clipPath>`** | `<mask id="...">`                        | **Moderate (GPU Raster)** | Liquid fluid morphs, text silhouettes, custom vectors |
+
+---
+
+## 2. Five Production-Grade Editorial Recipes
+
+### Recipe 1: Luxury Editorial Image Wipe with Counter-Scale Parallax
+
+A luxury brand hero image reveal combining an angled polygon clip with counter-scaling:
+
+```tsx
+import React from 'react';
+import { motion } from 'framer-motion';
+
+export function EditorialImageReveal({ src, alt }: { src: string; alt: string }) {
+  return (
+    <div className="relative overflow-hidden rounded-2xl aspect-[16/10] bg-neutral-900">
+      {/* Outer Motion Wrapper for Mask Clip */}
+      <motion.div
+        className="w-full h-full will-change-[clip-path]"
+        initial={{ clipPath: 'polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)' }}
+        whileInView={{ clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)' }}
+        viewport={{ once: true, margin: '-50px' }}
+        transition={{
+          duration: 1.1,
+          ease: [0.77, 0, 0.175, 1], // Editorial cinematic curve
+        }}
+      >
+        {/* Inner Counter-Scaling Image */}
+        <motion.img
+          src={src}
+          alt={alt}
+          className="w-full h-full object-cover will-change-transform"
+          initial={{ scale: 1.15 }}
+          whileInView={{ scale: 1 }}
+          viewport={{ once: true, margin: '-50px' }}
+          transition={{
+            duration: 1.4,
+            ease: [0.16, 1, 0.3, 1],
+          }}
+        />
+      </motion.div>
+    </div>
+  );
+}
+```
+
+### Recipe 2: Split-Text Line Wipe (Awwwards Typography Stagger)
+
+Lines emerge from an invisible threshold with strict WCAG screen reader accessibility:
+
+```tsx
+import React from 'react';
+import { motion } from 'framer-motion';
+
+interface SplitLineRevealProps {
+  lines: string[];
+  className?: string;
+}
+
+export function SplitLineReveal({ lines, className = '' }: SplitLineRevealProps) {
+  const fullText = lines.join(' ');
+
+  return (
+    <h2 className={`font-serif tracking-tight ${className}`}>
+      {/* Screen reader full accessible text */}
+      <span className="sr-only">{fullText}</span>
+
+      {/* Visual split animation */}
+      <span aria-hidden="true" className="block">
+        {lines.map((line, index) => (
+          <span key={index} className="block overflow-hidden pb-1">
+            <motion.span
+              className="block will-change-transform"
+              initial={{ y: '110%', rotateZ: 2 }}
+              whileInView={{ y: '0%', rotateZ: 0 }}
+              viewport={{ once: true }}
+              transition={{
+                duration: 0.85,
+                delay: index * 0.1,
+                ease: [0.16, 1, 0.3, 1], // Emil Kowalski responsive curve
+              }}
+            >
+              {line}
+            </motion.span>
+          </span>
+        ))}
+      </span>
+    </h2>
+  );
+}
+```
+
+### Recipe 3: Interactive Cursor Spotlight Reveal (`mask-image`)
+
+Reveals a glowing blueprint or hidden background directly beneath the user’s cursor:
+
+```tsx
+import React, { useRef, useState } from 'react';
+
+export function CursorSpotlightReveal({ children }: { children: React.ReactNode }) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [mousePos, setMousePos] = useState({ x: -500, y: -500 });
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    setMousePos({
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top,
+    });
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      onMouseMove={handleMouseMove}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      className="relative p-8 rounded-3xl bg-neutral-950 border border-neutral-800 overflow-hidden"
+    >
+      {/* Base Layer Content */}
+      <div className="relative z-10 text-neutral-400">{children}</div>
+
+      {/* Spotlight Illuminated Layer */}
+      <div
+        className="absolute inset-0 pointer-events-none transition-opacity duration-300"
+        style={{
+          opacity: isHovered ? 1 : 0,
+          background:
+            'radial-gradient(circle 280px at var(--mouse-x) var(--mouse-y), rgba(99, 102, 241, 0.15), transparent 80%)',
+          WebkitMaskImage: `radial-gradient(circle 220px at ${mousePos.x}px ${mousePos.y}px, black 20%, transparent 100%)`,
+          maskImage: `radial-gradient(circle 220px at ${mousePos.x}px ${mousePos.y}px, black 20%, transparent 100%)`,
+        }}
+      />
+    </div>
+  );
+}
+```
+
+### Recipe 4: Radial Expanding Iris Portal
+
+```css
+@keyframes iris-expand {
+  0% {
+    clip-path: circle(0% at 50% 50%);
+  }
+  100% {
+    clip-path: circle(120% at 50% 50%);
+  }
+}
+
+.iris-reveal-trigger {
+  animation: iris-expand 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  will-change: clip-path;
+}
+```
+
+### Recipe 5: Inverted Scroll-Driven Mask Curtain (CSS View-Timeline)
+
+Pure CSS scrubbed mask reveal driven by scroll progress without any JavaScript bundle:
+
+```css
+@supports (animation-timeline: view()) {
+  @keyframes scroll-unmask {
+    from {
+      clip-path: inset(0 0 100% 0);
+    }
+    to {
+      clip-path: inset(0 0 0% 0);
+    }
+  }
+
+  .scroll-unmask-card {
+    view-timeline-name: --card-scroll;
+    view-timeline-axis: block;
+    animation: scroll-unmask ease-out both;
+    animation-timeline: --card-scroll;
+    animation-range: entry 15% cover 45%;
+  }
+}
+```
+
+---
+
+## 3. Mobile GPU Optimization & Paint Budgets
+
+1. **Clip-Path vs SVG Mask Performance**:
+   - `clip-path` calculations operate inside GPU scissor tests or geometry rasterization passes.
+   - SVG `mask-image` with alpha textures requires an off-screen render buffer that multiplies GPU memory on high-resolution screens (e.g., iPhone Retina 3x). Never apply full-screen alpha masks to more than 2 elements concurrently on mobile.
+2. **Preventing Overflow Scrollbars**:
+   - Always ensure elements animating `transform: translateY(110%)` live inside an explicitly sized container with `overflow: hidden` to prevent transient layout scrollbars from flickering on Windows/Android browsers.