tribunal-kit 6.0.0 → 7.0.0

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

@@ -20,11 +20,12 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before engineering component polish or micro-interactions, you MUST inspect:
+
 1. Outer vs Inner Radius Formula (Section 32) → Enforce $\text{Radius}_{\text{outer}} = \text{Radius}_{\text{inner}} + \text{Padding}_{\text{inner}}$
 2. Transition Rules (Section 25) → Strictly prohibit `transition: all`; specify explicit property transitions
 3. Multi-Layer Shadows (Section 42) → Use ambient + direct lighting stacks and dark mode surface elevation highlights
 
-Distilled design engineering principles for transforming functional UIs into polished, state-of-the-art software interfaces, based on Jakub Krehel's *Details that make interfaces feel better*.
+Distilled design engineering principles for transforming functional UIs into polished, state-of-the-art software interfaces, based on Jakub Krehel's _Details that make interfaces feel better_.
 
 ---
 
@@ -40,7 +41,7 @@ Distilled design engineering principles for transforming functional UIs into pol
 
 - **Nested Border Radius Formula**: Outer border radius MUST equal inner border radius plus inner padding.
   $$\text{Radius}_{\text{outer}} = \text{Radius}_{\text{inner}} + \text{Padding}_{\text{inner}}$$
-  *Example*: If container padding is `16px` and inner avatar radius is `8px`, outer container radius MUST be `24px`.
+  _Example_: If container padding is `16px` and inner avatar radius is `8px`, outer container radius MUST be `24px`.
 - **Concentric Curves**: Avoid mismatched corner radii where an inner card has `rounded-2xl` inside an outer `rounded-md` container.
 - **Optical Center Adjustment**: Text inside pill buttons or badges often looks vertically low if mathematically centered. Shift text upwards by `1px` or adjust `line-height` so optics match mathematics.
 
@@ -72,20 +73,26 @@ Distilled design engineering principles for transforming functional UIs into pol
 .stagger-item {
   animation: entrance 250ms cubic-bezier(0.16, 1, 0.3, 1) both;
 }
-.stagger-item:nth-child(1) { animation-delay: 0ms; }
-.stagger-item:nth-child(2) { animation-delay: 40ms; }
-.stagger-item:nth-child(3) { animation-delay: 80ms; }
+.stagger-item:nth-child(1) {
+  animation-delay: 0ms;
+}
+.stagger-item:nth-child(2) {
+  animation-delay: 40ms;
+}
+.stagger-item:nth-child(3) {
+  animation-delay: 80ms;
+}
 ```
 
 ---
 
 ## Anti-Slop Table
 
-| Slop Pattern | Better UI Standard | Rationale |
-| --- | --- | --- |
-| `transition: all 0.3s` | Specific CSS property transitions | Eliminates layout thrashing & unintended color transitions |
-| Flat click targets without press feedback | `scale(0.97)` on `:active` | Provides tactile physical response |
-| Arbitrary inner vs outer radii | $\text{Radius}_{\text{outer}} = \text{Radius}_{\text{inner}} + \text{Padding}$ | Maintains geometric optical harmony |
+| Slop Pattern                              | Better UI Standard                                                             | Rationale                                                  |
+| ----------------------------------------- | ------------------------------------------------------------------------------ | ---------------------------------------------------------- |
+| `transition: all 0.3s`                    | Specific CSS property transitions                                              | Eliminates layout thrashing & unintended color transitions |
+| Flat click targets without press feedback | `scale(0.97)` on `:active`                                                     | Provides tactile physical response                         |
+| Arbitrary inner vs outer radii            | $\text{Radius}_{\text{outer}} = \text{Radius}_{\text{inner}} + \text{Padding}$ | Maintains geometric optical harmony                        |
 
 ---
 

package/.agent/skills/bolder/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before applying bold visual transformations, you MUST inspect:
+
 1. `DESIGN.md` / `package.json` → Check existing brand color variables and design tokens
 2. Typographic Contrast Scaling rules (Section 24) → Enforce extreme scale jumps (`1.5rem` to `4.5rem`) for display headings
 3. Single Electric Accent System (Section 28) → Use one high-chroma accent color sparingly for primary CTAs and badges
@@ -31,21 +32,26 @@ Transform generic, boring template UIs into high-impact, distinctive interfaces
 ## 5 Tactics for Bold UI Transformation
 
 ### 1. Typographic Contrast Scaling
+
 - **Extreme Scale Jump**: Increase heading size contrast. Jump from `1.5rem` to `3.5rem` or `4.5rem` display type for key value propositions.
 - **Font Weight Hierarchy**: Pair ultra-heavy display headings (`font-weight: 800` / `900`) with clean, lightweight body type (`font-weight: 400`).
 
 ### 2. High-Contrast Accent System
+
 - **Single Electric Accent**: Introduce one bold, unexpected accent color (e.g. electric lime `oklch(0.85 0.25 130)`, safety orange `oklch(0.68 0.22 40)`, or deep cobalt `oklch(0.45 0.28 260)`).
 - **Asymmetric Color Application**: Use the accent color sparingly on primary CTA buttons, hero badges, or interactive active indicators—never on body text.
 
 ### 3. Oversized Spatial Framing & Borders
+
 - **Crisp Structural Outlines**: Replace faint gray borders with thick 2px solid structural borders (`border: 2px solid var(--foreground)`).
 - **Hard Drop Shadows**: Use sharp, solid offset shadows (`box-shadow: 4px 4px 0px var(--foreground)`) for brutalist or neo-brutalist energy.
 
 ### 4. Hero Section Asymmetry
+
 - **Break Symmetrical Grids**: Shift text alignment left, place a huge badge or key visual off-axis, or overlap card containers across background sections.
 
 ### 5. Tactile Micro-Interactions
+
 - **Snappy Press Springs**: Give buttons a satisfying 3D press effect on active (`transform: translate(2px, 2px); box-shadow: 2px 2px 0px var(--foreground)`).
 
 ---

package/.agent/skills/brainstorming/SKILL.md

@@ -16,6 +16,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before initiating ideation sessions or generating architectural options, you MUST inspect:
+
 1. `package.json` / `ARCHITECTURE.md` → Check existing technology stack, libraries, and architectural boundaries
 2. The Socratic Protocol (Section 1) → Provide 3 distinct options (Conservative, Balanced, Ambitious) with tabular trade-offs
 3. Final Brainstorming Assertions schema (Section 4) → Distill options into actionable requirement items before planning
@@ -254,10 +255,11 @@ INPUT: User request + Context (greenfield/feature/refactor/debug)
 - [Affects: cost / complexity / timeline / scale]
 
 **Options:**
-|Option|Pros|Cons|Best For|
-|--------|------|------|----------|
-|A|[Advantage]|[Disadvantage]|[Use case]|
-|B|[Advantage]|[Disadvantage]|[Use case]|
+
+| Option | Pros        | Cons           | Best For   |
+| ------ | ----------- | -------------- | ---------- |
+| A      | [Advantage] | [Disadvantage] | [Use case] |
+| B      | [Advantage] | [Disadvantage] | [Use case] |
 
 **If Not Specified:** [Default choice + rationale]
 

package/.agent/skills/browser-native-ai/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before writing browser-native AI or client-side inference code, you MUST inspect:
+
 1. Main Thread Isolation (Section 44) → Run ONNX Runtime / Wasm inference inside a dedicated Web Worker (`worker.js`) to prevent blocking UI
 2. Quantization Rules (Section 42) → Target 4-bit quantized (`q4`) small language models (0.5B to 1.5B parameters) to prevent mobile device crashes
 3. Download Progress Callback (Section 50) → Provide a `progress_callback` to display model weight download percentages to the user
@@ -37,19 +38,19 @@ You are an expert at running AI models directly on the client's device, inside t
 Use `@huggingface/transformers` (Transformers.js) or `onnxruntime-web` for execution.
 
 ```typescript
-import { pipeline, env } from "@huggingface/transformers";
+import { pipeline, env } from '@huggingface/transformers';
 
 // Use WebGPU backend for acceleration
 env.backends.onnx.wasm.numThreads = 1;
 env.allowLocalModels = false;
 
 // Instantiate an SLM or Embedding model
-const extractor = await pipeline("feature-extraction", "Xenova/all-MiniLM-L6-v2", {
-  device: "webgpu", // Fallback to 'wasm' if needed
+const extractor = await pipeline('feature-extraction', 'Xenova/all-MiniLM-L6-v2', {
+  device: 'webgpu', // Fallback to 'wasm' if needed
 });
 
 // Run inference entirely offline
-const output = await extractor("Hello world", { pooling: "mean", normalize: true });
+const output = await extractor('Hello world', { pooling: 'mean', normalize: true });
 console.log(output.data); // Float32Array embedding
 ```
 

package/.agent/skills/build-primitive/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before building headless UI primitives, you MUST inspect:
+
 1. WAI-ARIA Design Patterns (Section 24) → Attach exact roles (`dialog`, `combobox`, `tablist`), `aria-expanded`, and ID associations (`aria-labelledby`, `aria-describedby`)
 2. Focus Traps & Restoration (Section 29) → Trap focus inside modals on open; return focus to trigger on close; dismiss on `Escape`
 3. Data Attributes (Section 41) → Expose clean `data-state="open|closed"` and `data-disabled` attributes for unstyled CSS consumer integration
@@ -31,15 +32,18 @@ Build rock-solid, framework-agnostic or React headless UI primitives with comple
 ## 4 Rules for UI Primitives
 
 ### 1. Complete ARIA Pattern Compliance
+
 - **Dialog / Modal**: `role="dialog"`, `aria-modal="true"`, `aria-labelledby="{titleId}"`, `aria-describedby="{descId}"`.
 - **Combobox / Autocomplete**: `role="combobox"`, `aria-expanded="{isOpen}"`, `aria-autocomplete="list"`, `aria-controls="{listboxId}"`.
 - **Tabs**: Tablist `role="tablist"`, Tab `role="tab"`, `aria-selected="{isActive}"`, `aria-controls="{panelId}"`, TabPanel `role="tabpanel"`.
 
 ### 2. Focus Management & Focus Traps
+
 - **Modal Focus Lock**: When a dialog opens, trap focus within the modal container. On close, return focus to the element that triggered it.
 - **Escape Key Dismiss**: Pressing `Escape` MUST close popovers, modals, and dropdown menus instantly.
 
 ### 3. Keyboard Navigation Sequences
+
 - **Listbox / Menu Navigation**:
   - `ArrowDown`: Move active descendant down.
   - `ArrowUp`: Move active descendant up.
@@ -48,6 +52,7 @@ Build rock-solid, framework-agnostic or React headless UI primitives with comple
   - `Enter` / `Space`: Select highlighted item.
 
 ### 4. Zero Unnecessary Styling
+
 - Primitives MUST output clean data attributes (`data-state="open|closed"`, `data-disabled`, `data-highlighted`) so consumers can style them effortlessly with CSS or Tailwind variants.
 
 ---

package/.agent/skills/building-native-ui/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before building React Native / Expo UI components, you MUST inspect:
+
 1. Safe Area Setup → Use `SafeAreaProvider` + `useSafeAreaInsets()` for granular notch/inset handling instead of raw `SafeAreaView`
 2. Virtualized List Rendering (Section 130) → Use `FlashList` (Shopify) or `FlatList` with `estimatedItemSize` instead of `ScrollView` for large lists
 3. Native Thread Animations (Section 99) → Use `react-native-reanimated` with `useSharedValue` to keep animations off the JS bridge thread

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

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before designing CI/CD workflows or deployment scripts, you MUST inspect:
+
 1. Concurrency Mutex Requirement (Section 18) → Configure top-level `concurrency:` blocks in GitHub Actions workflows to prevent parallel deploy collisions
 2. OIDC Authentication Protocol (Section 20) → Use OIDC (`id-token: write` permission) for AWS/cloud credentials; ban static access keys in secrets
 3. Production Promotion Gates (Section 21) → Enforce environment promotion gates (`staging` → `production` with manual reviewers) before deploying
@@ -169,7 +170,7 @@ jobs:
         with:
           image-ref: ${{ steps.login-ecr.outputs.registry }}/${{ env.ECR_REPOSITORY }}:${{ github.sha }}
           severity: CRITICAL
-          exit-code: "1" # fail on critical vulnerabilities
+          exit-code: '1' # fail on critical vulnerabilities
 
   # ──── STAGE 3: DEPLOY STAGING ────
   deploy-staging:

package/.agent/skills/clarify/SKILL.md

@@ -20,8 +20,9 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before optimizing UI text or error messages, you MUST inspect:
+
 1. Target UI labels & modals → Check for vague "Submit" or "OK" buttons and passive corporate jargon
-2. Active Verb Rules (Section 24) → Ensure action buttons start with specific verbs describing outcomes (e.g. *Save changes*, *Download export*)
+2. Active Verb Rules (Section 24) → Ensure action buttons start with specific verbs describing outcomes (e.g. _Save changes_, _Download export_)
 3. Actionable Error Messages (Section 30) → Pair error descriptions with explicit resolution steps
 
 Optimize user interface text, button labels, error messaging, and helper copy for maximum clarity and minimum cognitive friction.
@@ -31,29 +32,33 @@ Optimize user interface text, button labels, error messaging, and helper copy fo
 ## 4 UX Copy Rules
 
 ### 1. Active & Action-Oriented Verbs
+
 - Action buttons MUST begin with strong, specific verbs describing the result.
-  - ❌ *Submit* → ✅ *Save changes*
-  - ❌ *Click here* → ✅ *Download export*
-  - ❌ *OK* → ✅ *Delete project*
+  - ❌ _Submit_ → ✅ _Save changes_
+  - ❌ _Click here_ → ✅ _Download export_
+  - ❌ _OK_ → ✅ _Delete project_
 
 ### 2. Actionable & Helpful Error Messages
+
 - Error messages MUST explain what happened AND how to resolve it.
-  - ❌ *Invalid input.*
-  - ✅ *Invalid email format. Enter an email like user@example.com.*
-  - ❌ *Error 403.*
-  - ✅ *You don't have permission to edit this document. Request access from the owner.*
+  - ❌ _Invalid input._
+  - ✅ _Invalid email format. Enter an email like user@example.com._
+  - ❌ _Error 403._
+  - ✅ _You don't have permission to edit this document. Request access from the owner._
 
 ### 3. Eliminate Passive Jargon
+
 - Remove internal technical jargon and passive phrasing.
-  - ❌ *Your request has been processed successfully by the system queue.*
-  - ✅ *Settings updated.*
+  - ❌ _Your request has been processed successfully by the system queue._
+  - ✅ _Settings updated._
 
 ### 4. Direct Confirmation Dialogs
+
 - Modal headers must state the explicit consequence. Modal action buttons must match the title verb.
-  - Title: *Delete workspace?*
-  - Body: *All projects, keys, and member permissions in this workspace will be permanently removed.*
-  - Primary Button: *Delete workspace* (Destructive red)
-  - Secondary Button: *Cancel*
+  - Title: _Delete workspace?_
+  - Body: _All projects, keys, and member permissions in this workspace will be permanently removed._
+  - Primary Button: _Delete workspace_ (Destructive red)
+  - Secondary Button: _Cancel_
 
 ---
 

package/.agent/skills/clean-code/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before refactoring code or evaluating clean code standards, you MUST inspect:
+
 1. Intent-Revealing Naming (Section 25) → Name variables/functions to reveal explicit intent; ban cryptic abbreviations (`d`, `proc`, `u`)
 2. Single-Purpose Functions (Section 95) → Ensure functions perform 1 single task; extract sub-operations if function exceeds ~30 lines
 3. Guard Clause Early Returns (Section 344) → Flatten nested logic (>3 levels) using guard clauses and fail-fast early returns
@@ -112,8 +113,8 @@ if (retries > MAX_RETRY_ATTEMPTS) { ... }
 // ❌ BAD: Does 5 things in one function
 async function processOrder(order: Order) {
   // validate
-  if (!order.items.length) throw new Error("Empty");
-  if (order.total < 0) throw new Error("Negative");
+  if (!order.items.length) throw new Error('Empty');
+  if (order.total < 0) throw new Error('Negative');
   // calculate
   const subtotal = order.items.reduce((sum, i) => sum + i.price * i.qty, 0);
   const tax = subtotal * 0.08;
@@ -121,9 +122,9 @@ async function processOrder(order: Order) {
   // save
   await db.orders.insert({ ...order, total });
   // notify
-  await emailService.send(order.userId, "Order placed");
+  await emailService.send(order.userId, 'Order placed');
   // log
-  logger.info("Order processed", { orderId: order.id });
+  logger.info('Order processed', { orderId: order.id });
 }
 
 // ✅ GOOD: Each function does one thing
@@ -136,8 +137,8 @@ async function processOrder(order: Order): Promise<ProcessedOrder> {
 }
 
 function validateOrder(order: Order): void {
-  if (!order.items.length) throw new ValidationError("Order cannot be empty");
-  if (order.total < 0) throw new ValidationError("Total cannot be negative");
+  if (!order.items.length) throw new ValidationError('Order cannot be empty');
+  if (order.total < 0) throw new ValidationError('Total cannot be negative');
 }
 
 function calculateTotals(items: OrderItem[]): OrderTotals {
@@ -203,9 +204,9 @@ class AvatarService { upload() { ... } }
 ```typescript
 // ❌ BAD: Adding a new type requires modifying existing code
 function calculateDiscount(type: string, amount: number): number {
-  if (type === "student") return amount * 0.2;
-  if (type === "veteran") return amount * 0.15;
-  if (type === "senior") return amount * 0.1; // must modify for every new type
+  if (type === 'student') return amount * 0.2;
+  if (type === 'veteran') return amount * 0.15;
+  if (type === 'senior') return amount * 0.1; // must modify for every new type
   return 0;
 }
 
@@ -275,7 +276,7 @@ try {
 try {
   await processPayment(order);
 } catch (e) {
-  console.log("Something went wrong");
+  console.log('Something went wrong');
 }
 
 // ✅ GOOD: Handle specific errors, propagate unexpected
@@ -283,12 +284,12 @@ try {
   await processPayment(order);
 } catch (error) {
   if (error instanceof InsufficientFundsError) {
-    return { success: false, message: "Insufficient funds" };
+    return { success: false, message: 'Insufficient funds' };
   }
   if (error instanceof PaymentGatewayError) {
-    logger.warn("Payment gateway unavailable, queuing for retry", { orderId: order.id });
+    logger.warn('Payment gateway unavailable, queuing for retry', { orderId: order.id });
     await retryQueue.add(order);
-    return { success: false, message: "Payment processing delayed" };
+    return { success: false, message: 'Payment processing delayed' };
   }
   throw error; // unexpected error — let it propagate
 }
@@ -346,7 +347,7 @@ Long parameter list       → Parameter object
 function processUser(user: User) {
   if (user) {
     if (user.isActive) {
-      if (user.hasPermission("edit")) {
+      if (user.hasPermission('edit')) {
         // actual logic buried 3 levels deep
         doStuff();
       }
@@ -358,7 +359,7 @@ function processUser(user: User) {
 function processUser(user: User) {
   if (!user) return;
   if (!user.isActive) return;
-  if (!user.hasPermission("edit")) return;
+  if (!user.hasPermission('edit')) return;
 
   doStuff(); // happy path at top level
 }

package/.agent/skills/cloud-architect/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before architecting AWS cloud infrastructure or writing Terraform HCL, you MUST inspect:
+
 1. Dynamic Account ID & Region Resolution (Section 20) → Use `data.aws_caller_identity.current.account_id` and `var.region`; ban hardcoded account IDs or ARNs
 2. Private Subnet Application Placement (Section 23) → Place application compute (ECS, Lambda) strictly in private subnets; only ALB and NAT Gateway live in public subnets
 3. Secrets Manager Secret Injection (Section 21) → Reference secret ARNs from AWS Secrets Manager in ECS task definitions; ban plaintext environment variables for passwords/tokens

package/.agent/skills/cobejs/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before building WebGL 3D globe components with Cobe, you MUST inspect:
+
 1. `package.json` → Verify `cobe` dependency exists
 2. WebGL Context Cleanup (Section 59) → Ensure `globe.destroy()` is called in the `useEffect` unmount cleanup to prevent memory leaks
 3. Canvas Sizing (Section 65) → Match `devicePixelRatio` to high-DPI screens and set `aspectRatio: 1` to prevent visual stretching
@@ -31,8 +32,8 @@ Integrate ultra-fast, 5KB WebGL interactive globes for landing page hero section
 ## Cobe Canvas Setup Recipe (React)
 
 ```tsx
-import React, { useEffect, useRef } from "react";
-import createGlobe from "cobe";
+import React, { useEffect, useRef } from 'react';
+import createGlobe from 'cobe';
 
 export function InteractiveGlobe() {
   const canvasRef = useRef<HTMLCanvasElement>(null);
@@ -56,10 +57,10 @@ export function InteractiveGlobe() {
       glowColor: [0.1, 0.1, 0.2],
       markers: [
         { location: [37.7595, -122.4367], size: 0.05 }, // San Francisco
-        { location: [51.5074, -0.1278], size: 0.05 },   // London
-        { location: [35.6762, 139.6503], size: 0.05 },  // Tokyo
+        { location: [51.5074, -0.1278], size: 0.05 }, // London
+        { location: [35.6762, 139.6503], size: 0.05 }, // Tokyo
       ],
-      onRender: (state) => {
+      onRender: state => {
         state.phi = phi;
         phi += 0.005; // Smooth rotation
       },
@@ -69,10 +70,7 @@ export function InteractiveGlobe() {
   }, []);
 
   return (
-    <canvas
-      ref={canvasRef}
-      style={{ width: 600, height: 600, maxWidth: "100%", aspectRatio: 1 }}
-    />
+    <canvas ref={canvasRef} style={{ width: 600, height: 600, maxWidth: '100%', aspectRatio: 1 }} />
   );
 }
 ```

package/.agent/skills/code-review-checklist/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before performing code reviews or writing PR comments, you MUST inspect:
+
 1. Label Convention Standardization (Section 27) → Categorize all feedback into `BLOCKER:`, `CONCERN:`, `SUGGESTION:`, or `NOTE:`
 2. Context Window Discipline (Section 120) → Quote concise 1-3 line snippets with line numbers; ban pasting massive blocks of unchanged code
 3. Anti-Nitpicking Rule (Section 130) → Delegate syntax/formatting formatting checks to linters (`eslint`/Prettier); focus reviews on logic and security

package/.agent/skills/codebase-design/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before designing module boundaries or internal libraries, you MUST inspect:
+
 1. Deep Module Ratio Rule (Section 25) → Create deep modules (small simple interface hiding heavy internal complexity); ban shallow 1-line wrapper functions
 2. Strict Information Hiding (Section 46) → Keep internal data structures and vendor clients strictly private (`#privateField`); ban leaking internal ORM/DB types in public APIs
 3. Policy vs Mechanism Separation (Section 53) → Separate generic execution mechanisms (SQL queries, HTTP fetches) from domain business policies (retry rules, validation)
@@ -33,6 +34,7 @@ Architect software with **deep modules**: modules that hide immense internal com
 ## 4 Principles of Deep Module Design
 
 ### 1. High Depth Ratio (Simple Interface / Heavy Implementation)
+
 - **Deep Module**: Small surface area interface hiding extensive internal machinery. (e.g. `fs.readFile()` is 1 simple function hiding thousands of lines of OS file descriptor buffer logic).
 - **Shallow Module**: Large interface surface area relative to its implementation (e.g. a 5-line wrapper function with a 6-argument configuration object). Avoid shallow modules!
 
@@ -55,15 +57,18 @@ class DeepUserStorage {
 ```
 
 ### 2. Information Hiding & Encapsulation
+
 - Keep internal data structures, caching mechanisms, and third-party vendor clients strictly private (`private` / `#privateField`).
 - Expose intent-driven methods (`user.rename("Alice")`) rather than raw property setters (`user.name = "Alice"`).
 
 ### 3. Clean Seams for Testability
+
 - Define interfaces at subsystem boundaries so dependencies can be replaced with mock doubles or fake implementations in tests without modifying production code.
 
 ### 4. Separate Policy from Mechanism
-- **Mechanism**: *How* something executes (e.g. HTTP fetching, SQL query building, JSON parsing).
-- **Policy**: *What* business decision is made (e.g. retry 3 times if status is 503). Keep policy pure and mechanism generic.
+
+- **Mechanism**: _How_ something executes (e.g. HTTP fetching, SQL query building, JSON parsing).
+- **Policy**: _What_ business decision is made (e.g. retry 3 times if status is 503). Keep policy pure and mechanism generic.
 
 ---
 

package/.agent/skills/colorize/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before designing color systems or applying color palettes, you MUST inspect:
+
 1. OKLCH Color Space (Section 24) → Use `oklch(L C H)` custom properties for uniform perceptual lightness across light/dark themes
 2. 60-30-10 Budget Rule (Section 39) → 60% Dominant Neutral (surfaces), 30% Structural Secondary (text/borders), 10% Intentional Accent (actions)
 3. Status Token Uniformity (Section 45) → Keep status color lightness consistent ($L \approx 0.60$–$0.72$) across Success, Warning, Destructive, and Info scales
@@ -31,27 +32,31 @@ Architect uniform, perceptually balanced color scales using the modern OKLCH col
 ## 4 Color System Principles
 
 ### 1. Why OKLCH Over HSL/Hex
+
 - Traditional HSL suffers from perceptual lightness jumps (e.g. pure yellow `#FFFF00` at Lightness 50% looks blindingly bright compared to pure blue `#0000FF` at Lightness 50%).
 - OKLCH enforces constant perceptual lightness ($L$), predictable chroma ($C$), and hue angles ($H$).
 
 ```css
 :root {
   /* Primary Brand Scale in OKLCH: L C H */
-  --primary-50:  oklch(0.97 0.02 250);
+  --primary-50: oklch(0.97 0.02 250);
   --primary-100: oklch(0.92 0.04 250);
-  --primary-500: oklch(0.60 0.18 250); /* Main Brand Color */
+  --primary-500: oklch(0.6 0.18 250); /* Main Brand Color */
   --primary-700: oklch(0.42 0.16 250);
-  --primary-900: oklch(0.24 0.10 250);
+  --primary-900: oklch(0.24 0.1 250);
 }
 ```
 
 ### 2. The 60-30-10 Color Budget Rule
+
 - **60% Dominant Neutral**: Backgrounds, page canvas, card surfaces (`oklch(0.98 0.005 240)`).
 - **30% Structural Secondary**: Typography, borders, icons, navigation chrome (`oklch(0.20 0.01 240)`).
 - **10% Intentional Accent**: Primary actions, key badges, status confirmations (`oklch(0.60 0.18 250)`).
 
 ### 3. Functional Status Color Tokens
+
 Never use random red/green/yellow hex codes. Maintain matching chroma and lightness across status semantic scales:
+
 - **Success**: `oklch(0.62 0.17 145)` (Emerald)
 - **Warning**: `oklch(0.72 0.16 75)` (Amber)
 - **Destructive**: `oklch(0.58 0.22 25)` (Coral Red)

package/.agent/skills/compact-landing/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before engineering compact landing pages, you MUST inspect:
+
 1. Viewport Fit (Section 24) → Fit hero, preview, and primary CTA inside a single 1080p desktop viewport without initial scrolling
 2. Section Limit (Section 35) → Limit total page structure to max 4 tight sections (Hero, Social Proof, 3-Benefit Grid, Footer Card)
 3. Typography Restraint (Section 30) → Cap display font sizes at `clamp(1.75rem, 4vw, 2.75rem)` and apply `text-wrap: balance`
@@ -31,16 +32,19 @@ Build tight, ultra-focused, high-converting landing pages that deliver value qui
 ## 4 Compact Landing Rules
 
 ### 1. The Single Viewport Value Pitch
+
 - Above-the-fold content must answer 3 questions instantly within 1 single screen viewport:
-  1. *What is it?* (Clear, un-hypey headline + subhead)
-  2. *What does it look like?* (Crisp UI screenshot or interactive preview component)
-  3. *How do I get it?* (Unambiguous primary CTA input/button)
+  1. _What is it?_ (Clear, un-hypey headline + subhead)
+  2. _What does it look like?_ (Crisp UI screenshot or interactive preview component)
+  3. _How do I get it?_ (Unambiguous primary CTA input/button)
 
 ### 2. Quiet Typographic Hierarchy
+
 - Use subdued monochrome typography (`oklch(0.95 0.005 240)` background with `oklch(0.20 0.01 240)` body copy).
 - Keep display font sizes restrained (`clamp(1.75rem, 4vw, 2.75rem)`) rather than giant 5rem text blocks.
 
 ### 3. Tight Spatial Grid
+
 - Limit total page section count to max 4 sections:
   1. Hero + Primary CTA + Product Preview
   2. Social Proof / Logo Bar
@@ -48,6 +52,7 @@ Build tight, ultra-focused, high-converting landing pages that deliver value qui
   4. Conversion Footer Card
 
 ### 4. Zero Unnecessary Visual Noise
+
 - Omit decorative background shapes, floating 3D spheres, and rainbow gradients. Let contrast and typography drive visual quality.
 
 ---

package/.agent/skills/company-logos/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before designing logo grids or trust rows, you MUST inspect:
+
 1. Optical Weight Normalization rules (Section 24) → Enforce bounding box limits (`max-height: 28px`, `max-width: 120px`) with `object-fit: contain`
 2. Monochromatic Harmonization rules (Section 29) → Render all logos in monochromatic SVG fill (`fill="currentColor"`) matching `--text-muted`
 3. Hover States → Transition opacity to 100% smoothly over `200ms` on hover
@@ -31,15 +32,19 @@ Architect balanced, optically aligned logo rows and trust grids that communicate
 ## 4 Logo Layout Rules
 
 ### 1. Optical Weight Normalization
+
 Logos vary wildly in aspect ratio (e.g. square logos vs wide wordmarks).
+
 - **Rule**: Set a maximum bounding box (`max-height: 28px`, `max-width: 120px`) and use `object-fit: contain` with `filter: grayscale(100%) opacity(0.7)`.
 - On hover, transition `opacity(1)` and remove grayscale smoothly over `200ms`.
 
 ### 2. Monochromatic Harmonization
+
 - Never display multi-colored corporate logos together—they create visual chaos.
 - Render all logos in monochromatic SVG fill (`fill="currentColor"`) matching `--text-muted` or `--foreground-muted`.
 
 ### 3. Responsive Flex Grid
+
 ```css
 .logo-trust-row {
   display: flex;
@@ -51,6 +56,7 @@ Logos vary wildly in aspect ratio (e.g. square logos vs wide wordmarks).
 ```
 
 ### 4. Seamless Ticker Marquee (Optional)
+
 - For 8+ logos, use a hardware-accelerated CSS marquee animation with duplicate items for seamless continuous looping and `animation-play-state: paused` on hover.
 
 ---