tribunal-kit 6.0.1 → 7.0.0

package/.agent/skills/typescript-advanced/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before writing complex TypeScript types or library abstractions, you MUST inspect:
+
 1. Zero `as any` Cast Rule (Section 15) → Fix the underlying type signature or use `as unknown as T` with explicit reasoning comment; ban `as any`
 2. Discriminated Unions for State Machine Modeling (Section 62) → Model multi-state objects with tagged discriminated unions for compile-time exhaustive checks
 3. The `satisfies` Operator vs Type Assertion (Section 193) → Use `satisfies` to validate types without widening object literals
@@ -41,7 +42,7 @@ Before writing complex TypeScript types or library abstractions, you MUST inspec
 ```typescript
 // ✅ Constrained generics — T must have an id
 function findById<T extends { id: string }>(items: T[], id: string): T | undefined {
-  return items.find((item) => item.id === id);
+  return items.find(item => item.id === id);
 }
 
 // ✅ Multiple constraints
@@ -54,9 +55,9 @@ function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
   return obj[key];
 }
 
-const user = { name: "Alice", age: 30 };
-const name = getProperty(user, "name"); // type: string
-const age = getProperty(user, "age"); // type: number
+const user = { name: 'Alice', age: 30 };
+const name = getProperty(user, 'name'); // type: string
+const age = getProperty(user, 'age'); // type: number
 // getProperty(user, "email");           // ❌ Compile error — "email" not in keyof
 
 // ✅ Default generic parameters
@@ -64,7 +65,7 @@ function createState<T = string>(initial: T): { value: T; set: (v: T) => void }
   let value = initial;
   return {
     value,
-    set: (v) => {
+    set: v => {
       value = v;
     },
   };
@@ -119,7 +120,7 @@ function renderUser(state: RequestState<User>) {
 // ✅ Type-level if/else
 type IsString<T> = T extends string ? true : false;
 
-type A = IsString<"hello">; // true
+type A = IsString<'hello'>; // true
 type B = IsString<42>; // false
 
 // ✅ Extract return type of async functions
@@ -184,21 +185,25 @@ type OnlyStrings = StringKeys<{ name: string; age: number; email: string }>;
 
 ```typescript
 // ✅ Type-safe string patterns
-type HTTPMethod = "GET" | "POST" | "PUT" | "DELETE";
+type HTTPMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';
 type APIRoute = `/api/${string}`;
 type EventName = `on${Capitalize<string>}`;
 
 // ✅ Practical: CSS unit types
-type CSSUnit = "px" | "rem" | "em" | "vh" | "vw" | "%";
+type CSSUnit = 'px' | 'rem' | 'em' | 'vh' | 'vw' | '%';
 type CSSValue = `${number}${CSSUnit}`;
 
-const width: CSSValue = "100px"; // ✅
+const width: CSSValue = '100px'; // ✅
 // const bad: CSSValue = "100";     // ❌ Compile error
 
 // ✅ Route parameter extraction
-type ExtractParams<T extends string> = T extends `${string}:${infer Param}/${infer Rest}` ? Param | ExtractParams<Rest> : T extends `${string}:${infer Param}` ? Param : never;
+type ExtractParams<T extends string> = T extends `${string}:${infer Param}/${infer Rest}`
+  ? Param | ExtractParams<Rest>
+  : T extends `${string}:${infer Param}`
+    ? Param
+    : never;
 
-type UserRouteParams = ExtractParams<"/users/:userId/posts/:postId">;
+type UserRouteParams = ExtractParams<'/users/:userId/posts/:postId'>;
 // → "userId" | "postId"
 ```
 
@@ -213,16 +218,16 @@ type ColorMap = Record<string, [number, number, number] | string>;
 // With `as` — loses specificity
 const colorsAs = {
   red: [255, 0, 0],
-  green: "#00ff00",
+  green: '#00ff00',
 } as ColorMap;
-colorsAs.red.map((x) => x); // ❌ Error: string | number[] has no .map
+colorsAs.red.map(x => x); // ❌ Error: string | number[] has no .map
 
 // With `satisfies` — keeps literal types
 const colors = {
   red: [255, 0, 0],
-  green: "#00ff00",
+  green: '#00ff00',
 } satisfies ColorMap;
-colors.red.map((x) => x); // ✅ TypeScript knows it's a tuple
+colors.red.map(x => x); // ✅ TypeScript knows it's a tuple
 colors.green.toUpperCase(); // ✅ TypeScript knows it's a string
 ```
 
@@ -292,11 +297,11 @@ Awaited<T>; // Unwrap Promise<T> recursively
 
 ```typescript
 // ❌ BAD: Non-null assertion
-const element = document.getElementById("app")!;
+const element = document.getElementById('app')!;
 
 // ✅ GOOD: Narrowing
-const element = document.getElementById("app");
-if (!element) throw new Error("Missing #app element");
+const element = document.getElementById('app');
+if (!element) throw new Error('Missing #app element');
 // element is now guaranteed non-null
 ```
 

package/.agent/skills/typeset/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before refining typography scales or text styles, you MUST inspect:
+
 1. `DESIGN.md` / `index.css` → Verify typography scale variables, font families, and OpenType settings
 2. Optical Tracking & Line-Height Cadence (Section 24) → Enforce `1.1` line-height for display headings, `1.5` for body text, and `-0.03em` tracking
 3. Modern Text Wrapping (Section 36) → Apply `text-wrap: balance` to headings and limit paragraph line width to `65ch`
@@ -31,7 +32,9 @@ Architect disciplined, optically balanced typography systems across web componen
 ## 4 Typography Rules
 
 ### 1. Typographic Scale & Line-Height Cadence
+
 Use a modular scale (e.g. Major Third 1.25 or Perfect Fourth 1.333):
+
 - **Display 1**: `3.5rem` / Line-height `1.1` / Tracking `-0.03em`
 - **H1**: `2.25rem` / Line-height `1.15` / Tracking `-0.025em`
 - **H2**: `1.75rem` / Line-height `1.2` / Tracking `-0.02em`
@@ -39,20 +42,26 @@ Use a modular scale (e.g. Major Third 1.25 or Perfect Fourth 1.333):
 - **Caption**: `0.75rem` / Line-height `1.4` / Tracking `+0.01em`
 
 ### 2. Optical Tracking Formula
+
 Larger font sizes require tighter negative letter-spacing; smaller caption sizes require positive letter-spacing:
 $$\text{Tracking}(\text{px}) \propto -\log(\text{FontSize})$$
 
 ### 3. Modern Text Wrapping
+
 - Headings: `text-wrap: balance` (prevents visual orphans).
 - Body Paragraphs: `text-wrap: pretty` (prevents trailing single-word last lines).
 - Max Width: Limit body paragraphs to `65ch` for comfortable reading lines.
 
 ### 4. Tabular & OpenType Features
+
 - Enable tabular figures for numbers in statistics, prices, and tables:
+
 ```css
 .numeric-data {
   font-variant-numeric: tabular-nums lining-nums;
-  font-feature-settings: "tnum" 1, "lnum" 1;
+  font-feature-settings:
+    'tnum' 1,
+    'lnum' 1;
 }
 ```
 

package/.agent/skills/ui-reasoning-engine/SKILL.md

@@ -21,6 +21,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before generating UI component code, you MUST inspect:
+
 1. `DESIGN.md` / `package.json` → Identify visual style direction, color token specifications, and UI dependencies
 2. The 16-Step Reasoning Pipeline (Section 1) → Execute intent classification, accessibility constraints, and platform layout rules
 3. Target viewport & input mode → Check desktop vs mobile touch bounds (minimum 44x44px for coarse pointers)
@@ -36,84 +37,100 @@ User Intent ↓ Product Classification ↓ User Classification ↓ Primary User
 ```
 
 ### 1. User Intent
-*   **Input:** User prompt description.
-*   **Analysis:** Analyze what the user is *actually* trying to accomplish.
-*   **Result:** Is this an analytical task (comparing figures), an operational task (inputting records), a navigational task (getting to another screen), or an emotional/brand task (purchasing, onboarding)?
+
+- **Input:** User prompt description.
+- **Analysis:** Analyze what the user is _actually_ trying to accomplish.
+- **Result:** Is this an analytical task (comparing figures), an operational task (inputting records), a navigational task (getting to another screen), or an emotional/brand task (purchasing, onboarding)?
 
 ### 2. Product Classification
-*   **Input:** Chosen intent.
-*   **Analysis:** Categorize the product to choose the correct heuristic pack (see `product-aware-heuristics` skill).
-*   **Result:** SaaS, Developer Tool, Analytics Dashboard, Luxury/Marketing, AI Interface, Healthcare, Fintech, E-commerce, or Experimental.
+
+- **Input:** Chosen intent.
+- **Analysis:** Categorize the product to choose the correct heuristic pack (see `product-aware-heuristics` skill).
+- **Result:** SaaS, Developer Tool, Analytics Dashboard, Luxury/Marketing, AI Interface, Healthcare, Fintech, E-commerce, or Experimental.
 
 ### 3. User Classification
-*   **Input:** Product category.
-*   **Analysis:** Identify the target audience's demographics and expertise.
-*   **Result:** Is the user an expert operator (requires high density, shortcuts, speed), a casual consumer (requires clarity, onboarding, simplicity), or someone with temporary/permanent accessibility challenges?
+
+- **Input:** Product category.
+- **Analysis:** Identify the target audience's demographics and expertise.
+- **Result:** Is the user an expert operator (requires high density, shortcuts, speed), a casual consumer (requires clarity, onboarding, simplicity), or someone with temporary/permanent accessibility challenges?
 
 ### 4. Primary User Goals
-*   **Input:** User classification.
-*   **Analysis:** List the 3 most frequent tasks the user will perform on this screen.
-*   **Result:** How do we make the primary task take the least physical and cognitive effort (Fitts's Law)?
+
+- **Input:** User classification.
+- **Analysis:** List the 3 most frequent tasks the user will perform on this screen.
+- **Result:** How do we make the primary task take the least physical and cognitive effort (Fitts's Law)?
 
 ### 5. Task Frequency & Pace
-*   **Input:** Primary user goals.
-*   **Analysis:** Determine whether this is a high-frequency daily tool (e.g., terminal, text editor) or a low-frequency workflow (e.g., onboarding, checkout).
-*   **Result:** High frequency demands extreme speed, efficiency, and keyboard workflows. Low frequency demands validation, guardrails, and instructional microcopy.
+
+- **Input:** Primary user goals.
+- **Analysis:** Determine whether this is a high-frequency daily tool (e.g., terminal, text editor) or a low-frequency workflow (e.g., onboarding, checkout).
+- **Result:** High frequency demands extreme speed, efficiency, and keyboard workflows. Low frequency demands validation, guardrails, and instructional microcopy.
 
 ### 6. Information Architecture (IA)
-*   **Input:** Spacing guidelines.
-*   **Analysis:** Map the relationships between data fields and screen areas.
-*   **Result:** Group related data items together using Gestalt principles of proximity and common region. Do not separate related data with arbitrary containers.
+
+- **Input:** Spacing guidelines.
+- **Analysis:** Map the relationships between data fields and screen areas.
+- **Result:** Group related data items together using Gestalt principles of proximity and common region. Do not separate related data with arbitrary containers.
 
 ### 7. Interaction Model
-*   **Input:** IA relationships.
-*   **Analysis:** Define how users navigate, filter, and modify data.
-*   **Result:** Are we using modal dialogs, slide-out drawers, inline disclosures, tabs, or split-screen panels? Choose based on cognitive load and screen size.
+
+- **Input:** IA relationships.
+- **Analysis:** Define how users navigate, filter, and modify data.
+- **Result:** Are we using modal dialogs, slide-out drawers, inline disclosures, tabs, or split-screen panels? Choose based on cognitive load and screen size.
 
 ### 8. Content Hierarchy
-*   **Input:** Interaction model.
-*   **Analysis:** Rank items by visual weight.
-*   **Result:** The eye must see the most important element first (Primary Action / Primary Figure), followed by secondary details, then supporting metadata.
+
+- **Input:** Interaction model.
+- **Analysis:** Rank items by visual weight.
+- **Result:** The eye must see the most important element first (Primary Action / Primary Figure), followed by secondary details, then supporting metadata.
 
 ### 9. Platform Constraints
-*   **Input:** Content hierarchy.
-*   **Analysis:** Identify the target environment.
-*   **Result:** Desktop (mouse precision, wide viewport), Mobile (coarse pointer, bottom action zone), or Cross-Platform.
+
+- **Input:** Content hierarchy.
+- **Analysis:** Identify the target environment.
+- **Result:** Desktop (mouse precision, wide viewport), Mobile (coarse pointer, bottom action zone), or Cross-Platform.
 
 ### 10. Visual Direction & Mood
-*   **Input:** Platform constraints.
-*   **Analysis:** Select a distinctive theme that matches the product purpose (from `DESIGN.md`).
-*   **Result:** Swiss Precision, Brutalist, Dark Luxury, Editorial, Neo-Glassmorphism, Soft Minimal, Retro Analog, or Neon Cyberpunk.
+
+- **Input:** Platform constraints.
+- **Analysis:** Select a distinctive theme that matches the product purpose (from `DESIGN.md`).
+- **Result:** Swiss Precision, Brutalist, Dark Luxury, Editorial, Neo-Glassmorphism, Soft Minimal, Retro Analog, or Neon Cyberpunk.
 
 ### 11. Design System Selection
-*   **Input:** Visual Direction.
-*   **Analysis:** Match colors, radius, and shadows to the Visual Direction.
-*   **Result:** Never use raw hex colors. Use OKLCH semantic variables (`--bg-surface`, `--color-primary`, `--border-subtle`).
+
+- **Input:** Visual Direction.
+- **Analysis:** Match colors, radius, and shadows to the Visual Direction.
+- **Result:** Never use raw hex colors. Use OKLCH semantic variables (`--bg-surface`, `--color-primary`, `--border-subtle`).
 
 ### 12. Component Architecture
-*   **Input:** Design system.
-*   **Analysis:** Decompose the UI into primitives (headless buttons, fields), components (cards, forms), and patterns (dashboards, headers).
-*   **Result:** Prevent duplication. Reuse existing UI tokens and patterns.
+
+- **Input:** Design system.
+- **Analysis:** Decompose the UI into primitives (headless buttons, fields), components (cards, forms), and patterns (dashboards, headers).
+- **Result:** Prevent duplication. Reuse existing UI tokens and patterns.
 
 ### 13. Responsive Strategy
-*   **Input:** Component list.
-*   **Analysis:** Plan reflow, resizing, and pointer changes.
-*   **Result:** Avoid scaling down desktop interfaces. Reorganize layouts using container queries (`@container`) and CSS clamp functions.
+
+- **Input:** Component list.
+- **Analysis:** Plan reflow, resizing, and pointer changes.
+- **Result:** Avoid scaling down desktop interfaces. Reorganize layouts using container queries (`@container`) and CSS clamp functions.
 
 ### 14. Accessibility (A11y) Strategy
-*   **Input:** Responsive plan.
-*   **Analysis:** Verify contrast, keyboard paths, and ARIA labels.
-*   **Result:** Verify target sizes are at least 24px (standard AA) and preferably 44px (touch). Contrast must meet APCA Lc ratios.
+
+- **Input:** Responsive plan.
+- **Analysis:** Verify contrast, keyboard paths, and ARIA labels.
+- **Result:** Verify target sizes are at least 24px (standard AA) and preferably 44px (touch). Contrast must meet APCA Lc ratios.
 
 ### 15. Motion Strategy
-*   **Input:** Accessibility strategy.
-*   **Analysis:** Define transitions and state changes.
-*   **Result:** Ensure all animations serve a purpose (feedback, orientation, or progression) and respect `prefers-reduced-motion`.
+
+- **Input:** Accessibility strategy.
+- **Analysis:** Define transitions and state changes.
+- **Result:** Ensure all animations serve a purpose (feedback, orientation, or progression) and respect `prefers-reduced-motion`.
 
 ### 16. Implementation
-*   **Input:** All prior steps trace.
-*   **Analysis:** Generate the actual semantic markup, CSS custom properties, and logic.
-*   **Result:** Output code block.
+
+- **Input:** All prior steps trace.
+- **Analysis:** Generate the actual semantic markup, CSS custom properties, and logic.
+- **Result:** Output code block.
 
 ---
 
@@ -146,9 +163,11 @@ When building any UI, the Maker Agent must document this reasoning loop before r
 ---
 
 ## Pre-Flight Checklist
+
 - [ ] Have I executed the 16-step UI Reasoning Loop?
 - [ ] Have I identified the target Product Category and Visual Direction?
 - [ ] Have I verified touch targets are 24px minimum (and 44px+ for coarse pointers)?
 
 ## 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/ui-skill-packs/SKILL.md

@@ -22,6 +22,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before generating UI code, you MUST inspect:
+
 1. `package.json` / `tailwind.config.ts` / `index.css` → Check UI stack (Tailwind v4, Vanilla CSS, OKLCH, Framer Motion)
 2. `DESIGN.md` / color token definitions → Verify palette rules and dark mode contrast variables
 3. Active UI component target → Assign Pack 1 (Core UI), Pack 2 (System Micro-Interactions), or Pack 3 (Immersive Landing)
@@ -31,16 +32,19 @@ Before generating UI code, you MUST inspect:
 When generating UI code, the agent MUST load the appropriate UI Skill Pack based on the complexity level of the requested interface:
 
 ### Pack 1: Core UI Craft (Standard Components & Forms)
+
 - **Skills Included:** `taste-skill`, `better-ui`, `better-colors`, `typeset`, `build-primitive`
 - **Use For:** Buttons, cards, form controls, modals, tables, simple dashboards.
 - **Enforces:** OKLCH colors, 8pt spacing grid, fluid typography, explicit interactive states.
 
 ### Pack 2: System & Micro-Interactions (Dynamic Web Apps)
+
 - **Skills Included:** `impeccable`, `micro-interaction`, `framer-motion-expert`, `transitions-dev`, `delight`
 - **Use For:** Interactive web apps, complex dashboards, multi-step flows, animated components.
 - **Enforces:** Micro-animations, spring easings, tactile click/hover feedback, clean state transitions.
 
 ### Pack 3: High-End Immersive & Landing (Full Page / Showcase)
+
 - **Skills Included:** `gpt-taste`, `swiss-design`, `compact-landing`, `masked-reveal`, `marquee-loop`, `progressive-blur`
 - **Use For:** Landing pages, hero sections, marketing sites, showcase portfolios.
 - **Enforces:** Typographic hierarchy, asymmetric visual rhythm, noise grain overlays, luminous borders.
@@ -61,6 +65,7 @@ Binding skills: taste-skill, better-colors, micro-interaction, impeccable...
 ## Pre-Flight Checklist
 
 Before generating UI component code:
+
 1. Verify target framework (React, Next.js, Vue, Svelte) and styling system (CSS Modules, Tailwind, OKLCH CSS).
 2. Select appropriate UI Skill Pack (Pack 1, Pack 2, or Pack 3).
 3. Ensure color variables use OKLCH color space for accessible contrast ratios.
@@ -71,7 +76,7 @@ Before generating UI component code:
 ## VBC Protocol
 
 Visual Balance & Contrast Protocol:
+
 1. **Contrast Ratio**: Enforce WCAG 2.2 AA (4.5:1 text, 3:1 graphical elements).
 2. **Typography Cadence**: Enforce strict fluid font sizing and line-height cadence.
 3. **Motion Hygiene**: Respect `prefers-reduced-motion` media queries on all animations.
-

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

@@ -22,6 +22,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before routing UI requests, you MUST inspect:
+
 1. `package.json` / `DESIGN.md` → Identify tech stack (React, Next.js, Vue, Tailwind, CSS) and visual design language
 2. Intent Routing Matrix (Section 2) → Select maximum 2-3 precise skills matching the user's primary UI goal
 3. Skill pack bindings (`ui-skill-packs`) → Use consolidated packs for multi-component frontend builds
@@ -34,44 +35,44 @@ The master decision engine for routing user UI requests to the precise set of de
 
 When a user asks for UI assistance, identify their core **intent** and dispatch the appropriate skills:
 
-| Intent / Goal | Primary Skill | Secondary / Supporting Skills |
-| --- | --- | --- |
-| **Fast cleanup of ugly/cluttered UI** | `baseline-ui` | `better-ui`, `polish` |
-| **Production-grade design engineering & micro-details** | `better-ui` | `impeccable`, `frontend-design` |
-| **Extract design language & create DESIGN.md** | `create-design-md` | `extract-design-system`, `frontend-design` |
-| **Audit & fix HTML / ARIA accessibility (WCAG)** | `fixing-accessibility` | `audit-and-fix`, `web-accessibility-auditor` |
-| **Fix animation jank & 60/120fps performance** | `fixing-motion-performance` | `60fps-animation`, `gsap-performance` |
-| **Evidence-based UI audit & implementation planning** | `improve-ui` | `better-ui`, `baseline-ui` |
-| **OKLCH color system, contrast & P3 gamut** | `better-colors` | `colorize`, `better-ui` |
-| **Web typography, font scales, tabular numbers** | `better-typography` | `typeset`, `better-ui` |
-| **Apple-grade fluid springs, translucency & depth** | `apple-design` | `emil-design-eng`, `soft-skill` |
-| **Make a bland UI stand out / add punch** | `bolder` | `delight`, `colorize` |
-| **Tone down noisy or loud designs** | `quieter` | `distill`, `swiss-design` |
-| **Simplify complex / cluttered interface** | `distill` | `clarify`, `quieter` |
-| **Add subtle micro-interactions & delight** | `delight` | `whimsy-injector`, `micro-interaction` |
-| **Final pre-ship quality & alignment pass** | `polish` | `harden`, `fixing-accessibility` |
-| **Make UI resilient (errors, empty states, i18n)** | `harden` | `web-accessibility-auditor` |
-| **UX evaluation & scoring** | `critique` | `ui-ux-researcher` |
-| **Improve microcopy & messaging clarity** | `clarify` | `shape` |
-| **Pre-code feature UX planning** | `shape` | `brainstorming`, `appflow-wireframe` |
-| **Build unstyled accessible UI primitives** | `build-primitive` | `fixing-accessibility` |
-| **Responsive & container-query adaptation** | `adapt` | `mobile-design` |
-| **Depth, progressive blur, glassmorphism** | `progressive-blur` | `beautiful-shadows` |
-| **60fps animation performance audit** | `60fps-animation` | `fixing-motion-performance` |
-| **Tiered reduced-motion (a11y)** | `accessible-animation` | `fixing-accessibility` |
-| **Page & route transitions (View Transitions)** | `page-transition-animation` | `framer-motion-expert` |
-| **Scroll-driven motion & storytelling** | `animation-on-scroll` | `gsap-scrolltrigger` |
-| **Cohesive animation token system** | `animation-systems` | `motion-engineering` |
-| **Lottie & dotLottie vector animations** | `lottie-animation` | `text-to-lottie` |
-| **SVG path morphing & stroke draw-on** | `svg-animation` | `morphing-icons` |
-| **Hardware-accelerated marquees** | `marquee-loop` | `60fps-animation` |
-| **Spring physics vs easing decision** | `to-spring-or-not-to-spring` | `apple-design` |
-| **Tactile Web Audio API sound feedback** | `sounds-on-the-web` | `delight` |
-| **Technical SEO, metadata & OpenGraph** | `fixing-metadata` | `web-quality-audit` |
-| **Lighthouse quality audit** | `web-quality-audit` | `performance-profiling` |
-| **Landing page hierarchy & conversion** | `landing-page` | `compact-landing` |
-| **Pricing tables & comparison matrices** | `pricing-page` | `frontend-design` |
-| **Social proof, logo grids, trust rows** | `company-logos` | `baseline-ui` |
+| Intent / Goal                                           | Primary Skill                | Secondary / Supporting Skills                |
+| ------------------------------------------------------- | ---------------------------- | -------------------------------------------- |
+| **Fast cleanup of ugly/cluttered UI**                   | `baseline-ui`                | `better-ui`, `polish`                        |
+| **Production-grade design engineering & micro-details** | `better-ui`                  | `impeccable`, `frontend-design`              |
+| **Extract design language & create DESIGN.md**          | `create-design-md`           | `extract-design-system`, `frontend-design`   |
+| **Audit & fix HTML / ARIA accessibility (WCAG)**        | `fixing-accessibility`       | `audit-and-fix`, `web-accessibility-auditor` |
+| **Fix animation jank & 60/120fps performance**          | `fixing-motion-performance`  | `60fps-animation`, `gsap-performance`        |
+| **Evidence-based UI audit & implementation planning**   | `improve-ui`                 | `better-ui`, `baseline-ui`                   |
+| **OKLCH color system, contrast & P3 gamut**             | `better-colors`              | `colorize`, `better-ui`                      |
+| **Web typography, font scales, tabular numbers**        | `better-typography`          | `typeset`, `better-ui`                       |
+| **Apple-grade fluid springs, translucency & depth**     | `apple-design`               | `emil-design-eng`, `soft-skill`              |
+| **Make a bland UI stand out / add punch**               | `bolder`                     | `delight`, `colorize`                        |
+| **Tone down noisy or loud designs**                     | `quieter`                    | `distill`, `swiss-design`                    |
+| **Simplify complex / cluttered interface**              | `distill`                    | `clarify`, `quieter`                         |
+| **Add subtle micro-interactions & delight**             | `delight`                    | `whimsy-injector`, `micro-interaction`       |
+| **Final pre-ship quality & alignment pass**             | `polish`                     | `harden`, `fixing-accessibility`             |
+| **Make UI resilient (errors, empty states, i18n)**      | `harden`                     | `web-accessibility-auditor`                  |
+| **UX evaluation & scoring**                             | `critique`                   | `ui-ux-researcher`                           |
+| **Improve microcopy & messaging clarity**               | `clarify`                    | `shape`                                      |
+| **Pre-code feature UX planning**                        | `shape`                      | `brainstorming`, `appflow-wireframe`         |
+| **Build unstyled accessible UI primitives**             | `build-primitive`            | `fixing-accessibility`                       |
+| **Responsive & container-query adaptation**             | `adapt`                      | `mobile-design`                              |
+| **Depth, progressive blur, glassmorphism**              | `progressive-blur`           | `beautiful-shadows`                          |
+| **60fps animation performance audit**                   | `60fps-animation`            | `fixing-motion-performance`                  |
+| **Tiered reduced-motion (a11y)**                        | `accessible-animation`       | `fixing-accessibility`                       |
+| **Page & route transitions (View Transitions)**         | `page-transition-animation`  | `framer-motion-expert`                       |
+| **Scroll-driven motion & storytelling**                 | `animation-on-scroll`        | `gsap-scrolltrigger`                         |
+| **Cohesive animation token system**                     | `animation-systems`          | `motion-engineering`                         |
+| **Lottie & dotLottie vector animations**                | `lottie-animation`           | `text-to-lottie`                             |
+| **SVG path morphing & stroke draw-on**                  | `svg-animation`              | `morphing-icons`                             |
+| **Hardware-accelerated marquees**                       | `marquee-loop`               | `60fps-animation`                            |
+| **Spring physics vs easing decision**                   | `to-spring-or-not-to-spring` | `apple-design`                               |
+| **Tactile Web Audio API sound feedback**                | `sounds-on-the-web`          | `delight`                                    |
+| **Technical SEO, metadata & OpenGraph**                 | `fixing-metadata`            | `web-quality-audit`                          |
+| **Lighthouse quality audit**                            | `web-quality-audit`          | `performance-profiling`                      |
+| **Landing page hierarchy & conversion**                 | `landing-page`               | `compact-landing`                            |
+| **Pricing tables & comparison matrices**                | `pricing-page`               | `frontend-design`                            |
+| **Social proof, logo grids, trust rows**                | `company-logos`              | `baseline-ui`                                |
 
 ---
 

package/.agent/skills/ui-ux-pro-max/SKILL.md

@@ -21,41 +21,44 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before generating UI designs or front-end components, you MUST inspect:
+
 1. Rejection Guardrails (Section 17) → Ban primary purple gradients (`from-purple-600`), Inter/Roboto defaults, left-text/right-image hero layouts, and mesh gradients
 2. OKLCH Display-P3 Color Science (Section 29) → Use OKLCH variables with chroma `0.20`–`0.28` for accents and stepped neutral contrast (`0.04` Lightness increments)
 3. Fluid Typographic Scaling (Section 51) → Apply `clamp()` sizes, tight negative tracking (`-0.04em`), and `text-wrap: balance` on headings
 
-This skill transforms AI-generated interfaces from generic "AI templates" into portfolio-grade, human-crafted interfaces by running intent analysis *before* layout and styling.
+This skill transforms AI-generated interfaces from generic "AI templates" into portfolio-grade, human-crafted interfaces by running intent analysis _before_ layout and styling.
 
 ---
 
 ## 🚨 Design Governance Guardrails (REJECTION Rules)
 
-*   ❌ **Primary Purple Accents:** Banned. Use electric blue, signal orange, coral, warm slate, or natural sage.
-*   ❌ **Inter/Roboto Defaults:** Banned. Display titles must use characterful display fonts; body text uses readable body options.
-*   ❌ **Left Text/Right Image Hero:** Banned. Use full-bleed, asymmetric overlap, or typographical layouts.
-*   ❌ **Radial Mesh Backgrounds:** Banned. Use ambient grain overlay, solid high-contrast depth, or radial tinting.
-*   ❌ **Bento Box Grid Overuse:** Banned. Break the grid intentionally for visual interest.
-*   ❌ **Flat Glassmorphic Panels:** Banned. Translucency should only be used as a rare overlay, not for main containers.
-*   ❌ **No States Feedback:** Banned. Every control must have styled states (Hover, Focus-visible, Active, Disabled).
+- ❌ **Primary Purple Accents:** Banned. Use electric blue, signal orange, coral, warm slate, or natural sage.
+- ❌ **Inter/Roboto Defaults:** Banned. Display titles must use characterful display fonts; body text uses readable body options.
+- ❌ **Left Text/Right Image Hero:** Banned. Use full-bleed, asymmetric overlap, or typographical layouts.
+- ❌ **Radial Mesh Backgrounds:** Banned. Use ambient grain overlay, solid high-contrast depth, or radial tinting.
+- ❌ **Bento Box Grid Overuse:** Banned. Break the grid intentionally for visual interest.
+- ❌ **Flat Glassmorphic Panels:** Banned. Translucency should only be used as a rare overlay, not for main containers.
+- ❌ **No States Feedback:** Banned. Every control must have styled states (Hover, Focus-visible, Active, Disabled).
 
 ---
 
 ## 1. Color Gamuts & Display-P3 Color Science
 
 Use dynamic OKLCH variables to access the wider Display-P3 color spectrum for stunning vibrancy. Perceptually uniform lightness ensures stable contrast:
+
 ```css
 :root {
   /* oklch(Lightness Chroma Hue / Alpha) */
-  --color-primary: oklch(65% 0.22 250);       /* Brand electric blue */
+  --color-primary: oklch(65% 0.22 250); /* Brand electric blue */
   --color-primary-hover: oklch(58% 0.22 250); /* Darker active state */
-  --bg-base: oklch(0.08 0.005 250);           /* OLED base background */
-  --bg-surface: oklch(0.12 0.008 250);        /* Stepped card surface */
+  --bg-base: oklch(0.08 0.005 250); /* OLED base background */
+  --bg-surface: oklch(0.12 0.008 250); /* Stepped card surface */
   --border-subtle: oklch(22% 0.01 250 / 0.4); /* Hairline separator */
 }
 ```
 
 ### Color Gamut Guidelines
+
 - **Display-P3 Saturated Accents:** When targeting high-end modern screens, use chroma values between `0.20` and `0.28`.
 - **Stepped Neutral Contrast:** Stepped neutral surfaces must increase by `0.04` Lightness increments (e.g., base `0.08` → surface `0.12` → raised `0.16` → overlay `0.20`) to create physical depth without color tint deviations.
 
@@ -65,31 +68,33 @@ Use dynamic OKLCH variables to access the wider Display-P3 color spectrum for st
 
 Headings must use `clamp()` for fluid sizing and tight negative letter spacing (tracking) to prevent loose display layouts:
 
-| Token | Clamp Value | Weight | Line Height | Tracking |
-| :--- | :--- | :--- | :--- | :--- |
-| `--text-hero` | `clamp(2.5rem, 6vw, 4.5rem)` | 800 | 0.95 | `-0.04em` (Tight) |
-| `--text-h1` | `clamp(2.0rem, 4vw, 3.0rem)` | 700 | 1.05 | `-0.03em` |
-| `--text-h2` | `clamp(1.5rem, 3vw, 2.0rem)` | 600 | 1.15 | `-0.02em` |
-| `--text-body` | `1rem` | 400 | 1.60 | `0` (Normal) |
-| `--text-sm` | `0.875rem` | 400 | 1.50 | `+0.005em` (Loose) |
+| Token         | Clamp Value                  | Weight | Line Height | Tracking           |
+| :------------ | :--------------------------- | :----- | :---------- | :----------------- |
+| `--text-hero` | `clamp(2.5rem, 6vw, 4.5rem)` | 800    | 0.95        | `-0.04em` (Tight)  |
+| `--text-h1`   | `clamp(2.0rem, 4vw, 3.0rem)` | 700    | 1.05        | `-0.03em`          |
+| `--text-h2`   | `clamp(1.5rem, 3vw, 2.0rem)` | 600    | 1.15        | `-0.02em`          |
+| `--text-body` | `1rem`                       | 400    | 1.60        | `0` (Normal)       |
+| `--text-sm`   | `0.875rem`                   | 400    | 1.50        | `+0.005em` (Loose) |
 
-*   **BALANCED Headings:** Always declare `text-wrap: balance` on all dynamic title elements to prevent visual orphans.
-*   **Reading Measures:** Paragraph widths must be clamped to `65ch` max width (`max-width: 65ch`) to reduce cognitive scan overhead.
+- **BALANCED Headings:** Always declare `text-wrap: balance` on all dynamic title elements to prevent visual orphans.
+- **Reading Measures:** Paragraph widths must be clamped to `65ch` max width (`max-width: 65ch`) to reduce cognitive scan overhead.
 
 ---
 
 ## 3. Depth Shadows & Layering Math
 
 Flat shadows look cheap. Premium interfaces use physics-based multi-layered shadows to simulate light occlusion:
+
 ```css
 /* Stepped ambient + key shadow coefficients */
 .elevation-md {
-  box-shadow: 
-    0 1px 2px oklch(0% 0 0 / 0.05),     /* Ambient shadow */
-    0 4px 12px oklch(0% 0 0 / 0.08),    /* Key shadow */
-    0 0 1px oklch(100% 0 0 / 0.12);     /* Hairline luminous stroke */
+  box-shadow:
+    0 1px 2px oklch(0% 0 0 / 0.05),
+    /* Ambient shadow */ 0 4px 12px oklch(0% 0 0 / 0.08),
+    /* Key shadow */ 0 0 1px oklch(100% 0 0 / 0.12); /* Hairline luminous stroke */
 }
 ```
+
 - In dark themes, shadows should drop in opacity and be accompanied by luminous hairlines (`border: 1px solid oklch(100% 0 0 / 0.08)`) instead of thick black shadows.
 
 ---
@@ -97,15 +102,18 @@ Flat shadows look cheap. Premium interfaces use physics-based multi-layered shad
 ## 4. Interaction States & Transitions
 
 All buttons and active controls must define styled properties for:
-*   `hover`, `focus-visible`, `active`/`pressed`, and `disabled` states.
-*   Use spring easing curves: `cubic-bezier(0.34, 1.56, 0.64, 1)`.
+
+- `hover`, `focus-visible`, `active`/`pressed`, and `disabled` states.
+- Use spring easing curves: `cubic-bezier(0.34, 1.56, 0.64, 1)`.
 
 ---
 
 ## Pre-Flight Checklist
+
 - [ ] Have I reviewed the user's specific constraints and requests?
 - [ ] Have I checked the environment for relevant existing implementations?
 - [ ] Have I verified the design passes the Anti-AI-Slop Checklist?
 
 ## 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/ui-ux-researcher/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before conducting UX audits or evaluating cognitive load heuristics, you MUST inspect:
+
 1. P0 Safety & Accessibility Gates (Section 49) → Audit contrast ($\ge 4.5:1$), touch target sizes ($\ge 44\times 44\text{px}$), keyboard focus rings, and screen reader labels
 2. Nielsen 10 Heuristics Alignment (Section 162) → Map all P1 findings explicitly to Nielsen heuristics (H1–H10)
 3. Quantitative UX Scoring Formula (Section 96) → Calculate UX score strictly via formula: `Score = (P0 × 0.5) + (P1 × 0.3) + (P2 × 0.2)`