tribunal-kit 6.0.1 → 7.0.0

package/.agent/skills/testing-patterns/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before writing unit, integration, or component tests, you MUST inspect:
+
 1. AAA Pattern & Single Act Rule (Section 37) → Structure tests strictly as Arrange-Act-Assert; perform only 1 single action per test case
 2. Accessibility-First Query Hierarchy (Section 343) → Query React components by `getByRole` or `getByLabelText`; ban default `getByTestId` queries
 3. Dependency Injection Over Global Mocks (Section 268) → Prefer constructor dependency injection over global `vi.mock()` to prevent cross-test state leakage
@@ -52,10 +53,10 @@ Rules:
 
 ```typescript
 // Every test follows the same structure
-it("calculates total with tax", () => {
+it('calculates total with tax', () => {
   // Arrange — set up the scenario
   const cart = new Cart();
-  cart.addItem({ name: "Widget", price: 100 });
+  cart.addItem({ name: 'Widget', price: 100 });
   cart.setTaxRate(0.08);
 
   // Act — perform the action being tested
@@ -66,12 +67,12 @@ it("calculates total with tax", () => {
 });
 
 // ❌ BAD: Multiple acts in one test
-it("does too many things", () => {
-  cart.addItem({ name: "A", price: 10 });
+it('does too many things', () => {
+  cart.addItem({ name: 'A', price: 10 });
   expect(cart.total).toBe(10); // assert
-  cart.addItem({ name: "B", price: 20 });
+  cart.addItem({ name: 'B', price: 20 });
   expect(cart.total).toBe(30); // another assert after another act
-  cart.removeItem("A");
+  cart.removeItem('A');
   expect(cart.total).toBe(20); // yet another — split into 3 tests
 });
 ```
@@ -82,18 +83,18 @@ it("does too many things", () => {
 // Format: [unit] + [scenario] + [expected result]
 
 // ✅ GOOD: Descriptive, reads like a specification
-describe("calculateDiscount", () => {
-  it("returns 0% when cart total is under $50", () => {});
-  it("returns 10% when cart total is $50-$99", () => {});
-  it("returns 20% when cart total is $100+", () => {});
-  it("throws when cart is empty", () => {});
+describe('calculateDiscount', () => {
+  it('returns 0% when cart total is under $50', () => {});
+  it('returns 10% when cart total is $50-$99', () => {});
+  it('returns 20% when cart total is $100+', () => {});
+  it('throws when cart is empty', () => {});
 });
 
 // ❌ BAD: Vague, implementation-focused
-describe("calculateDiscount", () => {
-  it("works", () => {});
-  it("test1", () => {});
-  it("should return correct value", () => {});
+describe('calculateDiscount', () => {
+  it('works', () => {});
+  it('test1', () => {});
+  it('should return correct value', () => {});
 });
 ```
 
@@ -110,27 +111,27 @@ export function clamp(value: number, min: number, max: number): number {
 }
 
 // utils/math.test.ts
-import { describe, it, expect } from "vitest";
-import { clamp } from "./math";
+import { describe, it, expect } from 'vitest';
+import { clamp } from './math';
 
-describe("clamp", () => {
-  it("returns the value when within range", () => {
+describe('clamp', () => {
+  it('returns the value when within range', () => {
     expect(clamp(5, 0, 10)).toBe(5);
   });
 
-  it("clamps to min when value is below range", () => {
+  it('clamps to min when value is below range', () => {
     expect(clamp(-5, 0, 10)).toBe(0);
   });
 
-  it("clamps to max when value is above range", () => {
+  it('clamps to max when value is above range', () => {
     expect(clamp(15, 0, 10)).toBe(10);
   });
 
-  it("handles equal min and max", () => {
+  it('handles equal min and max', () => {
     expect(clamp(5, 3, 3)).toBe(3);
   });
 
-  it("handles floating point values", () => {
+  it('handles floating point values', () => {
     expect(clamp(0.5, 0, 1)).toBeCloseTo(0.5);
   });
 });
@@ -139,7 +140,7 @@ describe("clamp", () => {
 ### Async Testing
 
 ```typescript
-import { describe, it, expect, vi } from "vitest";
+import { describe, it, expect, vi } from 'vitest';
 
 // Async function under test
 async function fetchUser(id: string): Promise<User> {
@@ -148,23 +149,23 @@ async function fetchUser(id: string): Promise<User> {
   return response.json();
 }
 
-describe("fetchUser", () => {
-  it("returns user data on success", async () => {
-    const mockUser = { id: "1", name: "Alice" };
+describe('fetchUser', () => {
+  it('returns user data on success', async () => {
+    const mockUser = { id: '1', name: 'Alice' };
     global.fetch = vi.fn().mockResolvedValue({
       ok: true,
       json: () => Promise.resolve(mockUser),
     });
 
-    const user = await fetchUser("1");
+    const user = await fetchUser('1');
     expect(user).toEqual(mockUser);
-    expect(fetch).toHaveBeenCalledWith("/api/users/1");
+    expect(fetch).toHaveBeenCalledWith('/api/users/1');
   });
 
-  it("throws on HTTP error", async () => {
+  it('throws on HTTP error', async () => {
     global.fetch = vi.fn().mockResolvedValue({ ok: false, status: 404 });
 
-    await expect(fetchUser("999")).rejects.toThrow("HTTP 404");
+    await expect(fetchUser('999')).rejects.toThrow('HTTP 404');
   });
 });
 ```
@@ -172,7 +173,7 @@ describe("fetchUser", () => {
 ### Timer & Date Mocking
 
 ```typescript
-describe("debounce", () => {
+describe('debounce', () => {
   beforeEach(() => {
     vi.useFakeTimers();
   });
@@ -181,7 +182,7 @@ describe("debounce", () => {
     vi.useRealTimers();
   });
 
-  it("delays execution by specified ms", () => {
+  it('delays execution by specified ms', () => {
     const fn = vi.fn();
     const debounced = debounce(fn, 300);
 
@@ -195,7 +196,7 @@ describe("debounce", () => {
     expect(fn).toHaveBeenCalledOnce(); // now
   });
 
-  it("resets timer on subsequent calls", () => {
+  it('resets timer on subsequent calls', () => {
     const fn = vi.fn();
     const debounced = debounce(fn, 300);
 
@@ -212,8 +213,8 @@ describe("debounce", () => {
 
 // Date mocking
 it("formats today's date", () => {
-  vi.setSystemTime(new Date("2024-06-15T12:00:00Z"));
-  expect(getFormattedDate()).toBe("June 15, 2024");
+  vi.setSystemTime(new Date('2024-06-15T12:00:00Z'));
+  expect(getFormattedDate()).toBe('June 15, 2024');
   vi.useRealTimers();
 });
 ```
@@ -225,32 +226,32 @@ it("formats today's date", () => {
 ### Module Mocks
 
 ```typescript
-import { vi, describe, it, expect, beforeEach } from "vitest";
-import { sendEmail } from "./email-service";
-import { createUser } from "./user-service";
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { sendEmail } from './email-service';
+import { createUser } from './user-service';
 
 // Mock an entire module
-vi.mock("./email-service", () => ({
+vi.mock('./email-service', () => ({
   sendEmail: vi.fn().mockResolvedValue({ sent: true }),
 }));
 
-describe("createUser", () => {
+describe('createUser', () => {
   beforeEach(() => {
     vi.clearAllMocks(); // reset call counts between tests
   });
 
-  it("sends welcome email after creating user", async () => {
-    await createUser({ name: "Alice", email: "alice@test.com" });
+  it('sends welcome email after creating user', async () => {
+    await createUser({ name: 'Alice', email: 'alice@test.com' });
 
     expect(sendEmail).toHaveBeenCalledWith({
-      to: "alice@test.com",
-      subject: "Welcome!",
-      body: expect.stringContaining("Alice"),
+      to: 'alice@test.com',
+      subject: 'Welcome!',
+      body: expect.stringContaining('Alice'),
     });
   });
 
-  it("does not send email on validation failure", async () => {
-    await expect(createUser({ name: "", email: "" })).rejects.toThrow();
+  it('does not send email on validation failure', async () => {
+    await expect(createUser({ name: '', email: '' })).rejects.toThrow();
     expect(sendEmail).not.toHaveBeenCalled();
   });
 });
@@ -260,11 +261,11 @@ describe("createUser", () => {
 
 ```typescript
 // Spy on an existing method (don't replace it — observe it)
-const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
 
 await riskyOperation();
 
-expect(consoleSpy).toHaveBeenCalledWith(expect.stringContaining("failed"), expect.any(Error));
+expect(consoleSpy).toHaveBeenCalledWith(expect.stringContaining('failed'), expect.any(Error));
 
 consoleSpy.mockRestore(); // restore original
 ```
@@ -275,7 +276,7 @@ consoleSpy.mockRestore(); // restore original
 // ❌ BAD: Hard-coded dependency — untestable without module mocking
 class UserService {
   async getUser(id: string) {
-    return await fetch(`/api/users/${id}`).then((r) => r.json());
+    return await fetch(`/api/users/${id}`).then(r => r.json());
   }
 }
 
@@ -294,7 +295,7 @@ class UserService {
 
 // In test:
 const mockHttp: HttpClient = {
-  get: vi.fn().mockResolvedValue({ id: "1", name: "Alice" }),
+  get: vi.fn().mockResolvedValue({ id: '1', name: 'Alice' }),
 };
 const service = new UserService(mockHttp);
 
@@ -308,49 +309,49 @@ const service = new UserService(mockHttp);
 ## React Component Testing (Testing Library)
 
 ```tsx
-import { render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { describe, it, expect, vi } from "vitest";
-import { LoginForm } from "./LoginForm";
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { LoginForm } from './LoginForm';
 
-describe("LoginForm", () => {
-  it("renders email and password fields", () => {
+describe('LoginForm', () => {
+  it('renders email and password fields', () => {
     render(<LoginForm onSubmit={vi.fn()} />);
 
     expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
     expect(screen.getByLabelText(/password/i)).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: /sign in/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /sign in/i })).toBeInTheDocument();
   });
 
-  it("calls onSubmit with credentials", async () => {
+  it('calls onSubmit with credentials', async () => {
     const user = userEvent.setup();
     const onSubmit = vi.fn();
     render(<LoginForm onSubmit={onSubmit} />);
 
-    await user.type(screen.getByLabelText(/email/i), "alice@test.com");
-    await user.type(screen.getByLabelText(/password/i), "secret123");
-    await user.click(screen.getByRole("button", { name: /sign in/i }));
+    await user.type(screen.getByLabelText(/email/i), 'alice@test.com');
+    await user.type(screen.getByLabelText(/password/i), 'secret123');
+    await user.click(screen.getByRole('button', { name: /sign in/i }));
 
     expect(onSubmit).toHaveBeenCalledWith({
-      email: "alice@test.com",
-      password: "secret123",
+      email: 'alice@test.com',
+      password: 'secret123',
     });
   });
 
-  it("shows validation error for invalid email", async () => {
+  it('shows validation error for invalid email', async () => {
     const user = userEvent.setup();
     render(<LoginForm onSubmit={vi.fn()} />);
 
-    await user.type(screen.getByLabelText(/email/i), "not-an-email");
-    await user.click(screen.getByRole("button", { name: /sign in/i }));
+    await user.type(screen.getByLabelText(/email/i), 'not-an-email');
+    await user.click(screen.getByRole('button', { name: /sign in/i }));
 
     expect(screen.getByText(/invalid email/i)).toBeInTheDocument();
   });
 
-  it("disables submit button while loading", async () => {
+  it('disables submit button while loading', async () => {
     render(<LoginForm onSubmit={vi.fn()} isLoading={true} />);
 
-    expect(screen.getByRole("button", { name: /sign in/i })).toBeDisabled();
+    expect(screen.getByRole('button', { name: /sign in/i })).toBeDisabled();
   });
 });
 
@@ -368,50 +369,50 @@ describe("LoginForm", () => {
 ## E2E Testing (Playwright)
 
 ```typescript
-import { test, expect } from "@playwright/test";
+import { test, expect } from '@playwright/test';
 
-test.describe("Login Flow", () => {
-  test("successful login redirects to dashboard", async ({ page }) => {
-    await page.goto("/login");
+test.describe('Login Flow', () => {
+  test('successful login redirects to dashboard', async ({ page }) => {
+    await page.goto('/login');
 
-    await page.getByLabel("Email").fill("admin@test.com");
-    await page.getByLabel("Password").fill("password123");
-    await page.getByRole("button", { name: "Sign In" }).click();
+    await page.getByLabel('Email').fill('admin@test.com');
+    await page.getByLabel('Password').fill('password123');
+    await page.getByRole('button', { name: 'Sign In' }).click();
 
     // Wait for navigation
-    await expect(page).toHaveURL("/dashboard");
-    await expect(page.getByRole("heading", { name: "Dashboard" })).toBeVisible();
+    await expect(page).toHaveURL('/dashboard');
+    await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible();
   });
 
-  test("shows error for invalid credentials", async ({ page }) => {
-    await page.goto("/login");
+  test('shows error for invalid credentials', async ({ page }) => {
+    await page.goto('/login');
 
-    await page.getByLabel("Email").fill("wrong@test.com");
-    await page.getByLabel("Password").fill("wrongpassword");
-    await page.getByRole("button", { name: "Sign In" }).click();
+    await page.getByLabel('Email').fill('wrong@test.com');
+    await page.getByLabel('Password').fill('wrongpassword');
+    await page.getByRole('button', { name: 'Sign In' }).click();
 
-    await expect(page.getByText("Invalid credentials")).toBeVisible();
-    await expect(page).toHaveURL("/login"); // no redirect
+    await expect(page.getByText('Invalid credentials')).toBeVisible();
+    await expect(page).toHaveURL('/login'); // no redirect
   });
 
-  test("responsive: mobile menu toggles", async ({ page, isMobile }) => {
-    test.skip(!isMobile, "Mobile only");
+  test('responsive: mobile menu toggles', async ({ page, isMobile }) => {
+    test.skip(!isMobile, 'Mobile only');
 
-    await page.goto("/");
-    await page.getByRole("button", { name: "Menu" }).click();
-    await expect(page.getByRole("navigation")).toBeVisible();
+    await page.goto('/');
+    await page.getByRole('button', { name: 'Menu' }).click();
+    await expect(page.getByRole('navigation')).toBeVisible();
   });
 });
 
 // API testing with Playwright
-test("API: create user returns 201", async ({ request }) => {
-  const response = await request.post("/api/users", {
-    data: { name: "Alice", email: "alice@test.com" },
+test('API: create user returns 201', async ({ request }) => {
+  const response = await request.post('/api/users', {
+    data: { name: 'Alice', email: 'alice@test.com' },
   });
 
   expect(response.status()).toBe(201);
   const body = await response.json();
-  expect(body).toMatchObject({ name: "Alice", email: "alice@test.com" });
+  expect(body).toMatchObject({ name: 'Alice', email: 'alice@test.com' });
 });
 ```
 
@@ -419,26 +420,26 @@ test("API: create user returns 201", async ({ request }) => {
 
 ```typescript
 // playwright.config.ts
-import { defineConfig } from "@playwright/test";
+import { defineConfig } from '@playwright/test';
 
 export default defineConfig({
-  testDir: "./e2e",
+  testDir: './e2e',
   timeout: 30000,
   retries: process.env.CI ? 2 : 0, // retry in CI only
   use: {
-    baseURL: "http://localhost:3000",
-    trace: "on-first-retry", // save trace on failures
-    screenshot: "only-on-failure",
+    baseURL: 'http://localhost:3000',
+    trace: 'on-first-retry', // save trace on failures
+    screenshot: 'only-on-failure',
   },
   webServer: {
-    command: "npm run dev",
+    command: 'npm run dev',
     port: 3000,
     reuseExistingServer: !process.env.CI,
   },
   projects: [
-    { name: "chrome", use: { browserName: "chromium" } },
-    { name: "firefox", use: { browserName: "firefox" } },
-    { name: "mobile", use: { ...devices["iPhone 14"] } },
+    { name: 'chrome', use: { browserName: 'chromium' } },
+    { name: 'firefox', use: { browserName: 'firefox' } },
+    { name: 'mobile', use: { ...devices['iPhone 14'] } },
   ],
 });
 ```
@@ -449,26 +450,33 @@ export default defineConfig({
 
 ```typescript
 // Testing REST APIs with supertest (Express/Fastify)
-import request from "supertest";
-import { app } from "./app";
+import request from 'supertest';
+import { app } from './app';
 
-describe("POST /api/users", () => {
-  it("creates a user and returns 201", async () => {
-    const response = await request(app).post("/api/users").send({ name: "Alice", email: "alice@test.com" }).expect(201).expect("Content-Type", /json/);
+describe('POST /api/users', () => {
+  it('creates a user and returns 201', async () => {
+    const response = await request(app)
+      .post('/api/users')
+      .send({ name: 'Alice', email: 'alice@test.com' })
+      .expect(201)
+      .expect('Content-Type', /json/);
 
     expect(response.body).toMatchObject({
       id: expect.any(Number),
-      name: "Alice",
-      email: "alice@test.com",
+      name: 'Alice',
+      email: 'alice@test.com',
     });
   });
 
-  it("returns 400 for missing required fields", async () => {
-    await request(app).post("/api/users").send({ name: "" }).expect(400);
+  it('returns 400 for missing required fields', async () => {
+    await request(app).post('/api/users').send({ name: '' }).expect(400);
   });
 
-  it("returns 409 for duplicate email", async () => {
-    await request(app).post("/api/users").send({ name: "Alice", email: "existing@test.com" }).expect(409);
+  it('returns 409 for duplicate email', async () => {
+    await request(app)
+      .post('/api/users')
+      .send({ name: 'Alice', email: 'existing@test.com' })
+      .expect(409);
   });
 });
 ```

package/.agent/skills/thermo-nuclear-code-quality-review/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before performing ultra-strict maintainability code audits, you MUST inspect:
+
 1. File Size Hard Limit Rule (300 lines max) (Section 24) → Flag any file >300 lines for immediate module decomposition
 2. Cyclomatic Nesting Limit (3 levels max) (Section 27) → Flag nested conditionals >3 levels deep; require early guard clause returns
 3. Direct Dependency Coupling Ban (Section 53) → Flag domain logic directly importing vendor SDKs or DB models instead of interface adapters
@@ -33,9 +34,11 @@ Execute a ruthless, zero-tolerance code maintainability audit targeting abstract
 ## 5 Zero-Tolerance Audit Rules
 
 ### 1. File Size Hard Limit (Max 300 Lines)
+
 - Flag ANY single file exceeding 300 lines of code. Demand decomposition into modular helper components or sub-packages.
 
 ### 2. Cyclomatic Complexity & Nested Conditionals (Max 3 Levels)
+
 - Flag any function with nested conditionals deeper than 3 levels (`if -> if -> if -> for`). Require early guard clause returns.
 
 ```typescript
@@ -59,9 +62,11 @@ function processOrder(order: Order) {
 ```
 
 ### 3. Magic Values & String Literals
+
 - Hardcoded status strings (`"PENDING_APPROVAL_V2"`) or raw numbers (`86400000`) outside central `const` or `enum` declarations trigger immediate failure.
 
 ### 4. Direct Dependency Coupling
+
 - Modules importing concrete database models or vendor SDKs directly inside domain business logic instead of interface adapters are rejected.
 
 ---

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

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before beginning any cognitive reasoning loop, you MUST inspect:
+
 1. Cognitive Boundaries (Fabel Protocol) → Verify epistemic certainty levels L1 through L5
 2. Precision Budget → Scale tool calls to task complexity (Simple: 1 call, Medium: 3-5 calls, Deep: 5-10 calls)
 3. Stale Context rules → Re-read files after every edit to update internal context representation
@@ -29,11 +30,13 @@ Guidelines for structural reasoning and cognitive loop execution.
 ## Pre-Flight Checklist
 
 Before generating any output or proposing code modifications:
+
 - Verify that requirements are clear and unambiguous.
 - Ensure that the suggested approach minimizes technical debt.
 
 ## Verification-Before-Completion (VBC) Protocol
 
 Before completing a task, confirm:
+
 - Syntax, structure, and type safety constraints are met.
 - Relevant tests have been run and passed successfully.

package/.agent/skills/to-spring-or-not-to-spring/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before selecting animation model (Spring vs Cubic-Bezier), you MUST inspect:
+
 1. Spring vs Duration Decision Matrix (Section 22) → Use Spring physics ONLY for interruptible gestures, drag, toggles, and playful badges
 2. Modal & Dropdown Rule → Use deterministic cubic-bezier curves (`cubic-bezier(0.16, 1, 0.3, 1)`) for modals, dropdowns, and route transitions
 3. Anti-Conflict Rule (Section 46) → Never specify both `duration` AND spring `stiffness/damping` parameters together in Framer Motion
@@ -30,14 +31,14 @@ Decide when to use physics-driven spring models (Framer Motion / Reanimated) vs
 
 ## Spring vs Duration Decision Matrix
 
-| Motion Scenario | Use Spring Physics? | Recommended Parameters / Curve |
-| --- | --- | --- |
-| **Interruptible Gestures** (Drag, Swipe, Sheet pull) | ✅ **ALWAYS** | `type: "spring", stiffness: 300, damping: 30` (adapts to drag velocity) |
-| **Button Press Feedback** (`:active`) | ❌ **NO (Use Curve)** | `transition: transform 120ms cubic-bezier(0.2, 0, 0, 1)` |
-| **Modal / Dialog Entrance** | ❌ **NO (Use Curve)** | `transition: all 220ms cubic-bezier(0.16, 1, 0.3, 1)` |
-| **Badge Bouncing / Celebration** | ✅ **YES** | `type: "spring", stiffness: 400, damping: 15` (intentional overshoot bounce) |
-| **Page / Route Transitions** | ❌ **NO (Use Curve)** | `transition: opacity 200ms ease-out` |
-| **Toggle Switch Flip** | ✅ **YES** | `type: "spring", stiffness: 500, damping: 35` (crisp snap without wobble) |
+| Motion Scenario                                      | Use Spring Physics?   | Recommended Parameters / Curve                                               |
+| ---------------------------------------------------- | --------------------- | ---------------------------------------------------------------------------- |
+| **Interruptible Gestures** (Drag, Swipe, Sheet pull) | ✅ **ALWAYS**         | `type: "spring", stiffness: 300, damping: 30` (adapts to drag velocity)      |
+| **Button Press Feedback** (`:active`)                | ❌ **NO (Use Curve)** | `transition: transform 120ms cubic-bezier(0.2, 0, 0, 1)`                     |
+| **Modal / Dialog Entrance**                          | ❌ **NO (Use Curve)** | `transition: all 220ms cubic-bezier(0.16, 1, 0.3, 1)`                        |
+| **Badge Bouncing / Celebration**                     | ✅ **YES**            | `type: "spring", stiffness: 400, damping: 15` (intentional overshoot bounce) |
+| **Page / Route Transitions**                         | ❌ **NO (Use Curve)** | `transition: opacity 200ms ease-out`                                         |
+| **Toggle Switch Flip**                               | ✅ **YES**            | `type: "spring", stiffness: 500, damping: 35` (crisp snap without wobble)    |
 
 ---
 

package/.agent/skills/transitions-dev/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before implementing CSS transitions, you MUST inspect:
+
 1. Accordion Pattern (Section 35) → Use `grid-template-rows: 0fr -> 1fr` with `overflow: hidden` on inner wrapper instead of animating `height: auto`
 2. Modal Overlay Transitions (Section 52) → Scale modal content from `scale(0.96) translateY(8px)` with opacity
 3. Target transition properties → Enforce explicit property transitions (`transform`, `opacity`, `box-shadow`) and ban `transition: all`
@@ -31,9 +32,13 @@ Drop-in, hardware-accelerated CSS transition utility classes for modern web comp
 ## 4 Production Snippets
 
 ### 1. Card Lift & Shadow Scale
+
 ```css
 .tx-card {
-  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms ease, border-color 200ms ease;
+  transition:
+    transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
+    box-shadow 200ms ease,
+    border-color 200ms ease;
 }
 .tx-card:hover {
   transform: translateY(-3px);
@@ -42,14 +47,16 @@ Drop-in, hardware-accelerated CSS transition utility classes for modern web comp
 ```
 
 ### 2. Accordion Expand/Collapse (`grid-template-rows`)
+
 Animate element height smoothly without hardcoding fixed pixel heights:
+
 ```css
 .tx-accordion-content {
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows 250ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.tx-accordion-content[data-state="open"] {
+.tx-accordion-content[data-state='open'] {
   grid-template-rows: 1fr;
 }
 .tx-accordion-inner {
@@ -58,27 +65,33 @@ Animate element height smoothly without hardcoding fixed pixel heights:
 ```
 
 ### 3. Slide & Fade Modal Overlay
+
 ```css
 .tx-modal-overlay {
   transition: opacity 200ms ease;
 }
 .tx-modal-content {
-  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease;
+  transition:
+    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
+    opacity 220ms ease;
 }
-.tx-modal-content[data-state="closed"] {
+.tx-modal-content[data-state='closed'] {
   opacity: 0;
   transform: scale(0.96) translateY(8px);
 }
-.tx-modal-content[data-state="open"] {
+.tx-modal-content[data-state='open'] {
   opacity: 1;
   transform: scale(1) translateY(0);
 }
 ```
 
 ### 4. Sliding Tab Highlight (`layoutId` or CSS Variables)
+
 ```css
 .tx-tab-indicator {
-  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1), width 200ms ease;
+  transition:
+    transform 200ms cubic-bezier(0.2, 0, 0, 1),
+    width 200ms ease;
 }
 ```
 

package/.agent/skills/trend-researcher/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before recommending design trends or visual directions, you MUST inspect:
+
 1. Banned AI Cliché Rule (Section 40) → Ban purple/violet gradients, generic mesh backgrounds, and un-justified left-text/right-image hero layouts
 2. WCAG 2.2 AA Contrast Compliance (Section 61) → Calculate HSL palette contrast ($\ge 4.5:1$ text, $\ge 3:1$ large text) before finalizing tokens
 3. Verified Google Fonts Only (Section 175) → Ensure typography recommendations are active in Google Fonts or system defaults