tribunal-kit 6.0.1 → 7.0.0

package/.agent/skills/app-builder/templates/nuxt-app/TEMPLATE.md

@@ -99,12 +99,12 @@ project-name/
    Add to `nuxt.config.ts`:
 
    ```ts
-   import tailwindcss from "@tailwindcss/vite";
+   import tailwindcss from '@tailwindcss/vite';
    export default defineNuxtConfig({
      vite: {
        plugins: [tailwindcss()],
      },
-     css: ["~/assets/css/main.css"],
+     css: ['~/assets/css/main.css'],
    });
    ```
 
@@ -112,7 +112,7 @@ project-name/
    In `app/assets/css/main.css`:
 
    ```css
-   @import "tailwindcss";
+   @import 'tailwindcss';
    @theme {
      --color-primary: oklch(0.6 0.15 150);
    }

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

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before engineering Apple-style UIs or gesture-driven components, you MUST inspect:
+
 1. Interruptible Physics-Based Springs (Section 22) → Use physics springs (`stiffness: 300, damping: 24, mass: 0.8`) instead of fixed-duration CSS cubic-beziers
 2. Translucent Backdrop Blur (Section 44) → Limit `backdrop-filter: blur(20px) saturate(180%)` strictly to sticky headers or modals to avoid GPU scroll jank
 3. Optical Letter-Spacing (Section 72) → Apply inverse tracking (`-0.025em` for titles, `+0.015em` for small captions) based on SF Pro font scaling
@@ -41,10 +42,10 @@ Apple interfaces do NOT use fixed-duration cubic-beziers for interactive element
 ```javascript
 // Framer Motion / Motion React Spring Config
 const appleSpring = {
-  type: "spring",
+  type: 'spring',
   stiffness: 300,
   damping: 24,
-  mass: 0.8
+  mass: 0.8,
 };
 ```
 
@@ -87,11 +88,11 @@ Apple depth relies on subtle, multi-layered backdrop blur and border highlights:
 
 ## Anti-Slop Table
 
-| Anti-Pattern | Apple Design Solution | Rationale |
-| --- | --- | --- |
-| Rigid linear/ease transitions | Physics-based spring curves (`stiffness: 300, damping: 24`) | Simulates real-world physical momentum |
-| Opaque static dropdowns | Translucent backdrop blur panel (`blur(20px) saturate(180%)`) | Preserves spatial context beneath UI |
-| Sudden state jumps | Interruptible velocity-preserving spring animations | Prevents visual jarring during rapid user input |
+| Anti-Pattern                  | Apple Design Solution                                         | Rationale                                       |
+| ----------------------------- | ------------------------------------------------------------- | ----------------------------------------------- |
+| Rigid linear/ease transitions | Physics-based spring curves (`stiffness: 300, damping: 24`)   | Simulates real-world physical momentum          |
+| Opaque static dropdowns       | Translucent backdrop blur panel (`blur(20px) saturate(180%)`) | Preserves spatial context beneath UI            |
+| Sudden state jumps            | Interruptible velocity-preserving spring animations           | Prevents visual jarring during rapid user input |
 
 ---
 

package/.agent/skills/architecture/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before selecting architectural patterns or designing systems, you MUST inspect:
+
 1. Pragmatic Monolith Default (Section 31) → Start with a modular monolith for teams <5 or scale <100K RPM; ban premature microservices
 2. Clean Architecture Dependency Direction (Section 50) → Ensure dependency arrows point strictly inward to Domain; Domain must have zero external infrastructure dependencies
 3. ADR Requirement for Non-Trivial Decisons (Section 135) → Document every major architectural decision with an ADR in `docs/architecture/`
@@ -72,7 +73,7 @@ interface UserRepository {
 }
 class User {
   promote(): void {
-    if (this._role === UserRole.ADMIN) throw new DomainError("Already admin");
+    if (this._role === UserRole.ADMIN) throw new DomainError('Already admin');
     this._role = UserRole.ADMIN;
   }
 }
@@ -81,7 +82,7 @@ class User {
 class PromoteUserUseCase {
   async execute(userId: string): Promise<void> {
     const user = await this.userRepo.findById(userId);
-    if (!user) throw new NotFoundError("User", userId);
+    if (!user) throw new NotFoundError('User', userId);
     user.promote();
     await this.userRepo.save(user);
     await this.eventBus.publish(new UserPromotedEvent(userId));

package/.agent/skills/audit-and-fix/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before performing accessibility audits or fixes, you MUST inspect:
+
 1. Automated Violation Detection (Section 24) → Audit markup for missing `alt`, un-labeled inputs/buttons, and `onClick` on non-interactive elements
 2. Prioritization Matrix (Section 31) → Fix Level A blockers (forms, focus traps, keyboard access) before addressing contrast or landmark regions
 3. Anti-Redundant ARIA rule (Section 60) → Do NOT add `role="button"` to native `<button>` tags; apply `aria-hidden="true"` to decorative inner SVGs
@@ -31,7 +32,9 @@ Systematically audit HTML/JSX markup against WCAG 2.2 AA standards, prioritize a
 ## 4-Step Remediation Pipeline
 
 ### 1. Automated Violation Detection
+
 Scan component code for:
+
 - Missing `alt` tags on `<img>` elements.
 - Form controls (`<input>`, `<select>`) missing associated `<label>` or `aria-label`.
 - Buttons with icon-only content missing `aria-label`.
@@ -39,11 +42,11 @@ Scan component code for:
 
 ### 2. Prioritization Matrix
 
-| Severity Level | Violation Type | Remediation Action |
-| --- | --- | --- |
-| 🔴 **Blocker (Level A)** | Inaccessible form inputs, un-trapped focus in modal, zero keyboard access | Add explicit `<label>`, focus trap, and keyboard handlers immediately. |
-| 🟠 **Critical (Level AA)** | Low text contrast ratio ($< 4.5:1$), missing ARIA states on custom dropdowns | Adjust text colors to OKLCH contrast targets; add `aria-expanded`. |
-| 🟡 **Moderate (Level AA)** | Missing landmark regions (`<main>`, `<nav>`, `<header>`), heading hierarchy gaps | Wrap layout blocks in semantic HTML5 tags. |
+| Severity Level             | Violation Type                                                                   | Remediation Action                                                     |
+| -------------------------- | -------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
+| 🔴 **Blocker (Level A)**   | Inaccessible form inputs, un-trapped focus in modal, zero keyboard access        | Add explicit `<label>`, focus trap, and keyboard handlers immediately. |
+| 🟠 **Critical (Level AA)** | Low text contrast ratio ($< 4.5:1$), missing ARIA states on custom dropdowns     | Adjust text colors to OKLCH contrast targets; add `aria-expanded`.     |
+| 🟡 **Moderate (Level AA)** | Missing landmark regions (`<main>`, `<nav>`, `<header>`), heading hierarchy gaps | Wrap layout blocks in semantic HTML5 tags.                             |
 
 ### 3. Concrete Code Fix Examples
 

package/.agent/skills/authentication-best-practices/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before implementing authentication or session flows, you MUST inspect:
+
 1. Modern Password Hashing (Section 28) → Use Argon2id or bcrypt; ban legacy fast algorithms (`md5`, `sha256`) for credential hashing
 2. Token Storage Separation (Section 83) → Keep short-lived access tokens in JS memory and long-lived refresh tokens in `HttpOnly`, `SameSite=Lax/Strict` cookies
 3. OAuth PKCE Flow Requirement (Section 109) → Enforce Authorization Code Flow with PKCE for all single-page and mobile apps; ban deprecated Implicit Flow
@@ -32,10 +33,10 @@ Before implementing authentication or session flows, you MUST inspect:
 
 ```typescript
 // ❌ BAD: md5, sha1, sha256 (too fast, vulnerable to brute force/rainbow tables)
-const hash = crypto.createHash("sha256").update(password).digest("hex");
+const hash = crypto.createHash('sha256').update(password).digest('hex');
 
 // ✅ GOOD: Argon2 (memory-hard, ASIC resistant) or bcrypt
-import * as argon2 from "argon2";
+import * as argon2 from 'argon2';
 
 async function hashPassword(password: string): Promise<string> {
   // Argon2 hashes include the salt inherently in the resulting string
@@ -86,11 +87,11 @@ async function verifyPassword(hash: string, password: string): Promise<boolean>
 // Scenario: API authentication
 // 1. Access Token (Short-lived: 15 mins)
 const accessToken = jwt.sign({ userId: user.id }, JWT_SECRET, {
-  expiresIn: "15m",
-  algorithm: "HS256", // ALWAYS explicitly specify
+  expiresIn: '15m',
+  algorithm: 'HS256', // ALWAYS explicitly specify
 });
 // 2. Refresh Token (Long-lived: 7 days, opaque string in DB)
-const refreshToken = crypto.randomBytes(40).toString("hex");
+const refreshToken = crypto.randomBytes(40).toString('hex');
 await db.refreshTokens.create({ token: refreshToken, userId: user.id, expires: addDays(7) });
 
 // Client flow:
@@ -142,7 +143,7 @@ Flow (Authorization Code + PKCE):
 
 ```typescript
 // ✅ Check permissions, not roles directly (more flexible)
-if (!user.permissions.includes("delete:user")) {
+if (!user.permissions.includes('delete:user')) {
   throw new ForbiddenError();
 }
 ```
@@ -154,9 +155,9 @@ if (!user.permissions.includes("delete:user")) {
 ```typescript
 // Example Policy
 function canEditPost(user: User, post: Post): boolean {
-  if (user.role === "admin") return true;
+  if (user.role === 'admin') return true;
   if (post.authorId === user.id) return true;
-  if (post.status === "draft" && user.department === "content") return true;
+  if (post.status === 'draft' && user.department === 'content') return true;
   return false;
 }
 ```

package/.agent/skills/backend-security-expert/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before auditing or writing backend server code, you MUST inspect:
+
 1. Server Action Endpoints (Section 26) → Treat Next.js Server Actions as public API routes: authenticate session and parse input with Zod at entry
 2. JWT Algorithm Verification (Section 17) → Enforce explicit algorithms (`alg: "HS256"`) when verifying JWT tokens to prevent "None" algorithm exploits
 3. IDOR & RBAC Validation (Section 34) → Verify resource ownership (`WHERE userId = session.userId`) and user roles before executing mutations

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

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before cleaning up UI styles, you MUST inspect:
+
 1. `DESIGN.md` / `package.json` → Check Tailwind CSS configuration and accessibility primitives (`Base UI`, `Radix`)
 2. The 5-Step Deslop Protocol (Section 33) → Fix spacing violations, establish 3-tier typographic hierarchy, and eliminate harsh borders
 3. Anti-Slop Table (Section 43) → Replace hardcoded arbitrary paddings and low-contrast text with tokenized CSS variables
@@ -51,13 +52,13 @@ Enforces an opinionated UI baseline to clean up sloppy code and prevent AI-gener
 
 ## Anti-Slop Table
 
-| Slop Pattern | Baseline Fix | Rationale |
-| --- | --- | --- |
-| `color: #888` on dark background | `color: var(--text-muted)` (min 4.5:1 ratio) | Improves readability and WCAG compliance |
-| `padding: 15px 23px` | `padding: 16px 24px` | Aligns to 8px structural grid |
-| `border: 1px solid black` | `border: 1px solid rgba(0,0,0,0.1)` | Removes harsh, distracting lines |
-| Mixed font sizes (13px, 14px, 15px) | Standardized scale (12px, 14px, 16px) | Establishes clear visual hierarchy |
-| Plain text buttons without states | Rounded button with hover/active press feedback | Indicates clickability and tactile response |
+| Slop Pattern                        | Baseline Fix                                    | Rationale                                   |
+| ----------------------------------- | ----------------------------------------------- | ------------------------------------------- |
+| `color: #888` on dark background    | `color: var(--text-muted)` (min 4.5:1 ratio)    | Improves readability and WCAG compliance    |
+| `padding: 15px 23px`                | `padding: 16px 24px`                            | Aligns to 8px structural grid               |
+| `border: 1px solid black`           | `border: 1px solid rgba(0,0,0,0.1)`             | Removes harsh, distracting lines            |
+| Mixed font sizes (13px, 14px, 15px) | Standardized scale (12px, 14px, 16px)           | Establishes clear visual hierarchy          |
+| Plain text buttons without states   | Rounded button with hover/active press feedback | Indicates clickability and tactile response |
 
 ---
 

package/.agent/skills/bash-linux/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before writing Bash scripts or terminal automation pipelines, you MUST inspect:
+
 1. Strict Mode Flags (`set -euo pipefail`) (Section 39) → Always set `set -euo pipefail` and `IFS=$'\n\t'` at top of every script to fail fast on errors or unset vars
 2. Variable Quoting Safeguards (Section 122) → Double-quote all path and string variables (`"$FILE"`, `"${FILES[@]}"`) to prevent whitespace expansion bugs
 3. Modern CLI Efficiency Rules (Section 102) → Prefer `rg` over `grep`, `fd` over `find`, `jq` over regex JSON parsing for performance and safety

package/.agent/skills/behavioral-modes/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before selecting an operational mode, you MUST inspect:
+
 1. User prompt intent & keywords (Section 148 Mode Selection Rules) → Classify request type (TEACH, DEBUG, REVIEW, PLAN, BUILD, DISCOVER, SHIP, ORCHESTRATE)
 2. Mode Leakage Mitigation rules (Section 160) → Prevent writing unapproved code during DISCOVER or REVIEW modes
 3. Output format contracts → Ensure findings use labeled severity tags (CRITICAL / WARNING / SUGGESTION)

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

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before defining color palettes or CSS theme variables, you MUST inspect:
+
 1. `DESIGN.md` / `index.css` → Check existing CSS custom properties and color variables
 2. OKLCH Syntax & Relative Color Rules (Section 30) → Use `oklch(L C H)` format with subtle chroma (`C: 0.01-0.02`) for neutrals
 3. WCAG 2.2 AA Contrast Thresholds (Section 82) → Ensure `L ≤ 45%` for text on light background and `L ≥ 70%` on dark background
@@ -63,7 +64,7 @@ $$\text{Format: } \text{oklch}(L \quad C \quad H [\quad / \quad A])$$
   /* Neutrals: Subtly Tinted (Chroma ~ 0.015) */
   --bg-surface: oklch(0.99 0.005 260);
   --bg-surface-raised: oklch(0.96 0.01 260);
-  --text-main: oklch(0.20 0.02 260);
+  --text-main: oklch(0.2 0.02 260);
   --text-muted: oklch(0.45 0.02 260);
   --border-subtle: oklch(0.88 0.015 260);
 }
@@ -72,7 +73,7 @@ $$\text{Format: } \text{oklch}(L \quad C \quad H [\quad / \quad A])$$
 :root {
   color-scheme: light dark;
   --surface-adaptive: light-dark(oklch(0.99 0.005 260), oklch(0.14 0.015 260));
-  --text-adaptive: light-dark(oklch(0.20 0.02 260), oklch(0.96 0.01 260));
+  --text-adaptive: light-dark(oklch(0.2 0.02 260), oklch(0.96 0.01 260));
 }
 
 @media (prefers-color-scheme: dark) {
@@ -91,12 +92,15 @@ $$\text{Format: } \text{oklch}(L \quad C \quad H [\quad / \quad A])$$
 ## 3. WCAG 2.2 AA Contrast Standards
 
 Always verify contrast using WCAG AA minimum thresholds:
+
 - **Normal Text (< 18pt / < 24px)**: Minimum **4.5:1** contrast ratio.
 - **Large Text (≥ 18pt / ≥ 24px bold)**: Minimum **3.0:1** contrast ratio.
 - **UI Components & Icons**: Minimum **3.0:1** contrast ratio against adjacent surface.
 
 ### Rule of Thumb in OKLCH:
+
 To achieve 4.5:1 text contrast against a surface:
+
 - Against Light Surface (`L ≈ 98%`): Text lightness `L` MUST be **`≤ 45%`**.
 - Against Dark Surface (`L ≈ 14%`): Text lightness `L` MUST be **`≥ 70%`**.
 
@@ -111,11 +115,11 @@ To achieve 4.5:1 text contrast against a surface:
 
 ## Anti-Slop Table
 
-| Anti-Pattern | OKLCH Solution | Rationale |
-| --- | --- | --- |
-| Single gray for all backgrounds | Neutral tinted with brand hue (`C: 0.01-0.02`) | Creates cohesive, harmonious UI surfaces |
-| Over-saturated dark mode accents | Scale chroma down (`C: 0.22` → `C: 0.15`) in dark mode | Eliminates glowing text vibration & visual strain |
-| Harsh pure black borders (`#000`) | Alpha-tinted borders (`rgba(255,255,255,0.08)`) | Smooths elevation layers |
+| Anti-Pattern                      | OKLCH Solution                                         | Rationale                                         |
+| --------------------------------- | ------------------------------------------------------ | ------------------------------------------------- |
+| Single gray for all backgrounds   | Neutral tinted with brand hue (`C: 0.01-0.02`)         | Creates cohesive, harmonious UI surfaces          |
+| Over-saturated dark mode accents  | Scale chroma down (`C: 0.22` → `C: 0.15`) in dark mode | Eliminates glowing text vibration & visual strain |
+| Harsh pure black borders (`#000`) | Alpha-tinted borders (`rgba(255,255,255,0.08)`)        | Smooths elevation layers                          |
 
 ---
 

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

@@ -9,7 +9,17 @@ routing:
   tier: pro
   co-requires: [typeset, better-ui]
   trigger-signals:
-    strong: [better-typography, typography, type scale, font pairing, tabular numbers, text-wrap balance, line-length, optical sizing]
+    strong:
+      [
+        better-typography,
+        typography,
+        type scale,
+        font pairing,
+        tabular numbers,
+        text-wrap balance,
+        line-length,
+        optical sizing,
+      ]
     weak: [fonts, text style, line height]
 ---
 
@@ -25,14 +35,14 @@ Scale font sizes using a consistent multiplier ($1.25$ Major Third or $1.20$ Min
 
 ```css
 :root {
-  --font-size-xs: 0.75rem;    /* 12px - Labels, Badges */
-  --font-size-sm: 0.875rem;   /* 14px - Meta, Caption */
-  --font-size-base: 1rem;     /* 16px - Body Text */
-  --font-size-lg: 1.125rem;   /* 18px - Lead Body */
-  --font-size-xl: 1.375rem;   /* 22px - Subheadings */
-  --font-size-2xl: 1.75rem;   /* 28px - H3 */
-  --font-size-3xl: 2.25rem;   /* 36px - H2 */
-  --font-size-4xl: 3rem;      /* 48px - H1 Hero */
+  --font-size-xs: 0.75rem; /* 12px - Labels, Badges */
+  --font-size-sm: 0.875rem; /* 14px - Meta, Caption */
+  --font-size-base: 1rem; /* 16px - Body Text */
+  --font-size-lg: 1.125rem; /* 18px - Lead Body */
+  --font-size-xl: 1.375rem; /* 22px - Subheadings */
+  --font-size-2xl: 1.75rem; /* 28px - H3 */
+  --font-size-3xl: 2.25rem; /* 36px - H2 */
+  --font-size-4xl: 3rem; /* 48px - H1 Hero */
 
   /* Line Heights proportional to font size */
   --line-height-heading: 1.15;
@@ -50,7 +60,10 @@ Scale font sizes using a consistent multiplier ($1.25$ Major Third or $1.20$ Min
 - **Paragraph Wrapping**: Use `text-wrap: pretty` for long body paragraphs to prevent awkward line breaks.
 
 ```css
-h1, h2, h3, h4 {
+h1,
+h2,
+h3,
+h4 {
   text-wrap: balance;
   letter-spacing: -0.025em;
   line-height: var(--line-height-heading);
@@ -69,6 +82,7 @@ p {
 
 - **Tabular Numbers for Data & Timers**: Use `font-variant-numeric: tabular-nums` (or `tnum`) for data tables, counters, prices, and timestamps so numbers align vertically without jumping when values update.
 - **Font Smoothing**: Enable crisp font smoothing on macOS/iOS:
+
 ```css
 body {
   -webkit-font-smoothing: antialiased;
@@ -80,12 +94,12 @@ body {
 
 ## Anti-Slop Table
 
-| Anti-Pattern | Typography Solution | Rationale |
-| --- | --- | --- |
-| Full-width body text (`width: 100%`) | `max-width: 65ch` | Prevents eye fatigue across wide desktop screens |
-| Single-word widows on headings | `text-wrap: balance` | Creates balanced visual hierarchy |
-| Jittering numbers in data tables | `font-variant-numeric: tabular-nums` | Keeps columns strictly aligned |
-| Default browser line-height (`1.2` on body) | `line-height: 1.5` | Improves reading comfort |
+| Anti-Pattern                                | Typography Solution                  | Rationale                                        |
+| ------------------------------------------- | ------------------------------------ | ------------------------------------------------ |
+| Full-width body text (`width: 100%`)        | `max-width: 65ch`                    | Prevents eye fatigue across wide desktop screens |
+| Single-word widows on headings              | `text-wrap: balance`                 | Creates balanced visual hierarchy                |
+| Jittering numbers in data tables            | `font-variant-numeric: tabular-nums` | Keeps columns strictly aligned                   |
+| Default browser line-height (`1.2` on body) | `line-height: 1.5`                   | Improves reading comfort                         |
 
 ---
 

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: