tribunal-kit 6.0.0 → 7.0.0

package/.agent/skills/product-aware-heuristics/SKILL.md

@@ -21,6 +21,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before selecting layout templates or component heuristics, you MUST inspect:
+
 1. `DESIGN.md` / `package.json` → Identify product domain (SaaS, DevTool, AI Chat, Landing Page, Fintech)
 2. Tabular Data & Monospace Rules → Enforce `font-variant-numeric: tabular-nums` for financial data and `JetBrains Mono` for developer tools
 3. Touch & Pointer Bounds → Ensure interactive buttons and checkboxes meet 44x44px touch target guidelines
@@ -30,15 +31,17 @@ An interface must match its domain context. A developer tool should not look lik
 ---
 
 ## 1. SaaS & Enterprise Applications
-*   **Goal:** Operational efficiency, scannability, multi-record management, and action density.
-*   **Visual Tone:** Swiss Precision or Soft Minimal. Clear borders, muted tinted grays, and highly legible typography.
-*   **Heuristics:**
-    *   **Data Density:** Prefer structured tables and compact list views. Spacing should be tight but consistent (`8px` to `16px` grid).
-    *   **Keyboard Workflows:** All common actions must have keyboard shortcuts. Tab focus paths must be linear and predictable.
-    *   **Filters & Actions:** Provide global filters, batch action bars (appearing only when records are selected), and quick search boundaries.
-    *   **Responsive:** Grid layouts reflow to linear scroll cards on smaller screens; large tabular displays must support horizontal scrolling with sticky primary columns.
+
+- **Goal:** Operational efficiency, scannability, multi-record management, and action density.
+- **Visual Tone:** Swiss Precision or Soft Minimal. Clear borders, muted tinted grays, and highly legible typography.
+- **Heuristics:**
+  - **Data Density:** Prefer structured tables and compact list views. Spacing should be tight but consistent (`8px` to `16px` grid).
+  - **Keyboard Workflows:** All common actions must have keyboard shortcuts. Tab focus paths must be linear and predictable.
+  - **Filters & Actions:** Provide global filters, batch action bars (appearing only when records are selected), and quick search boundaries.
+  - **Responsive:** Grid layouts reflow to linear scroll cards on smaller screens; large tabular displays must support horizontal scrolling with sticky primary columns.
 
 ### SaaS Code Template (Dense Dynamic Table with Sidebar Detail Panel)
+
 ```tsx
 import React, { useState } from 'react';
 import { Filter, MoreHorizontal, FileText, Check, ChevronRight, X } from 'lucide-react';
@@ -46,9 +49,9 @@ import { Filter, MoreHorizontal, FileText, Check, ChevronRight, X } from 'lucide
 export function SaaSDataTable({ records }) {
   const [selectedIds, setSelectedIds] = useState<string[]>([]);
   const [activeDetailId, setActiveDetailId] = useState<string | null>(null);
-  
+
   const activeRecord = records.find(r => r.id === activeDetailId);
-  
+
   return (
     <div className="w-full flex gap-4 bg-[var(--bg-base)] p-4 rounded-[var(--radius-lg)]">
       {/* Table Main Area */}
@@ -62,23 +65,25 @@ export function SaaSDataTable({ records }) {
           </div>
           {selectedIds.length > 0 && (
             <div className="flex items-center gap-2 animate-fade-in">
-              <span className="text-xs text-[var(--text-secondary)]">{selectedIds.length} selected</span>
+              <span className="text-xs text-[var(--text-secondary)]">
+                {selectedIds.length} selected
+              </span>
               <button className="px-3 py-1.5 bg-[var(--color-error)] text-white text-xs font-semibold rounded-[var(--radius-sm)] hover:opacity-90 transition-all">
                 Delete Selected
               </button>
             </div>
           )}
         </div>
-        
+
         {/* Table container */}
         <div className="overflow-x-auto">
           <table className="w-full border-collapse text-left text-xs">
             <thead>
               <tr className="border-b border-[var(--border-subtle)] bg-[var(--bg-base)] text-[var(--text-muted)] uppercase tracking-wider font-semibold">
                 <th className="p-3 w-8">
-                  <input 
-                    type="checkbox" 
-                    onChange={(e) => setSelectedIds(e.target.checked ? records.map(r => r.id) : [])}
+                  <input
+                    type="checkbox"
+                    onChange={e => setSelectedIds(e.target.checked ? records.map(r => r.id) : [])}
                     checked={selectedIds.length === records.length}
                     className="rounded border-[var(--border-subtle)]"
                   />
@@ -90,17 +95,23 @@ export function SaaSDataTable({ records }) {
               </tr>
             </thead>
             <tbody className="divide-y divide-[var(--border-subtle)]">
-              {records.map((record) => (
-                <tr 
-                  key={record.id} 
+              {records.map(record => (
+                <tr
+                  key={record.id}
                   onClick={() => setActiveDetailId(record.id)}
                   className={`hover:bg-[var(--bg-base)]/50 transition-colors group cursor-pointer ${activeDetailId === record.id ? 'bg-[var(--bg-base)]' : ''}`}
                 >
-                  <td className="p-3" onClick={(e) => e.stopPropagation()}>
-                    <input 
+                  <td className="p-3" onClick={e => e.stopPropagation()}>
+                    <input
                       type="checkbox"
                       checked={selectedIds.includes(record.id)}
-                      onChange={(e) => setSelectedIds(prev => e.target.checked ? [...prev, record.id] : prev.filter(id => id !== record.id))}
+                      onChange={e =>
+                        setSelectedIds(prev =>
+                          e.target.checked
+                            ? [...prev, record.id]
+                            : prev.filter(id => id !== record.id),
+                        )
+                      }
                       className="rounded border-[var(--border-subtle)]"
                     />
                   </td>
@@ -111,7 +122,7 @@ export function SaaSDataTable({ records }) {
                     </span>
                   </td>
                   <td className="p-3 font-mono text-[var(--text-secondary)]">{record.usage} GB</td>
-                  <td className="p-3 text-right" onClick={(e) => e.stopPropagation()}>
+                  <td className="p-3 text-right" onClick={e => e.stopPropagation()}>
                     <button className="p-1 rounded hover:bg-[var(--bg-surface-raised)] text-[var(--text-muted)] group-hover:text-[var(--text-primary)] transition-all">
                       <MoreHorizontal size={14} />
                     </button>
@@ -122,25 +133,34 @@ export function SaaSDataTable({ records }) {
           </table>
         </div>
       </div>
-      
+
       {/* Detail Slideout Panel */}
       {activeRecord && (
         <div className="w-[300px] border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-4 rounded-[var(--radius-md)] shadow-[var(--shadow-lg)] flex flex-col justify-between animate-slide-in">
           <div>
             <div className="flex justify-between items-center mb-4">
-              <h3 className="text-xs font-bold uppercase tracking-wider text-[var(--text-primary)]">Record details</h3>
-              <button onClick={() => setActiveDetailId(null)} className="p-1 text-[var(--text-secondary)] hover:bg-[var(--bg-base)] rounded">
+              <h3 className="text-xs font-bold uppercase tracking-wider text-[var(--text-primary)]">
+                Record details
+              </h3>
+              <button
+                onClick={() => setActiveDetailId(null)}
+                className="p-1 text-[var(--text-secondary)] hover:bg-[var(--bg-base)] rounded"
+              >
                 <X size={14} />
               </button>
             </div>
             <div className="space-y-3">
               <div>
                 <span className="text-[10px] text-[var(--text-muted)] block">Name</span>
-                <span className="text-xs font-semibold text-[var(--text-primary)]">{activeRecord.name}</span>
+                <span className="text-xs font-semibold text-[var(--text-primary)]">
+                  {activeRecord.name}
+                </span>
               </div>
               <div>
                 <span className="text-[10px] text-[var(--text-muted)] block">Usage Metrics</span>
-                <span className="text-xs font-mono text-[var(--text-secondary)]">{activeRecord.usage} Gigabytes</span>
+                <span className="text-xs font-mono text-[var(--text-secondary)]">
+                  {activeRecord.usage} Gigabytes
+                </span>
               </div>
             </div>
           </div>
@@ -157,15 +177,17 @@ export function SaaSDataTable({ records }) {
 ---
 
 ## 2. Developer Tools
-*   **Goal:** Technical clarity, command-driven inputs, diagnostics readability, and low cognitive overhead.
-*   **Visual Tone:** Swiss Precision or Neon Cyberpunk. Dark backgrounds, high contrast, monospace font blocks, and flat borders.
-*   **Heuristics:**
-    *   **Monospace Integration:** Log listings, code snippets, status outputs, and parameters must be wrapped in `<code/>` or `<pre/>` containers using `JetBrains Mono` or equivalent.
-    *   **Interactive Consoles:** Integrate quick-copy buttons for snippets. Terminal emulator areas should have responsive layouts that prevent truncation of long lines.
-    *   **Status Indicators:** Use explicit semantic color markers (e.g., solid red circle for critical error, pulsing green for active daemon) accompanied by text labels, never color alone.
-    *   **Density:** Extreme. Maximize visible data on-screen; minimize decorative card wrapping and whitespace.
+
+- **Goal:** Technical clarity, command-driven inputs, diagnostics readability, and low cognitive overhead.
+- **Visual Tone:** Swiss Precision or Neon Cyberpunk. Dark backgrounds, high contrast, monospace font blocks, and flat borders.
+- **Heuristics:**
+  - **Monospace Integration:** Log listings, code snippets, status outputs, and parameters must be wrapped in `<code/>` or `<pre/>` containers using `JetBrains Mono` or equivalent.
+  - **Interactive Consoles:** Integrate quick-copy buttons for snippets. Terminal emulator areas should have responsive layouts that prevent truncation of long lines.
+  - **Status Indicators:** Use explicit semantic color markers (e.g., solid red circle for critical error, pulsing green for active daemon) accompanied by text labels, never color alone.
+  - **Density:** Extreme. Maximize visible data on-screen; minimize decorative card wrapping and whitespace.
 
 ### Developer Tool Code Template (Terminal log stream)
+
 ```tsx
 import React, { useState } from 'react';
 import { Copy, Terminal, Check } from 'lucide-react';
@@ -173,13 +195,13 @@ import { Copy, Terminal, Check } from 'lucide-react';
 export function DevConsole({ logs }) {
   const [copied, setCopied] = useState(false);
   const command = 'npm run dev --port 8080';
-  
+
   const handleCopy = () => {
     navigator.clipboard.writeText(command);
     setCopied(true);
     setTimeout(() => setCopied(false), 2000);
   };
-  
+
   return (
     <div className="w-full bg-[var(--bg-base)] dark:bg-black border border-[var(--border-default)] rounded-[var(--radius-sm)] overflow-hidden font-mono shadow-[var(--shadow-sm)]">
       {/* Console Header */}
@@ -187,7 +209,7 @@ export function DevConsole({ logs }) {
         <div className="flex items-center gap-2 text-xs text-[var(--text-secondary)]">
           <Terminal size={14} /> console.log
         </div>
-        <button 
+        <button
           onClick={handleCopy}
           className="flex items-center gap-1 px-2 py-1 text-[10px] bg-[var(--bg-surface-raised)] border border-[var(--border-subtle)] rounded text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-all"
         >
@@ -195,14 +217,22 @@ export function DevConsole({ logs }) {
           {copied ? 'Copied' : 'Copy'}
         </button>
       </div>
-      
+
       {/* Console Body */}
       <div className="p-3 text-xs text-slate-300 space-y-1.5 overflow-y-auto max-h-[300px] leading-relaxed">
         <div className="text-[var(--text-muted)]">$ {command}</div>
         {logs.map((log, index) => (
           <div key={index} className="flex gap-2 items-start">
             <span className="text-[var(--text-muted)] select-none">[{log.time}]</span>
-            <span className={log.type === 'error' ? 'text-rose-400' : log.type === 'warn' ? 'text-amber-400' : 'text-emerald-400'}>
+            <span
+              className={
+                log.type === 'error'
+                  ? 'text-rose-400'
+                  : log.type === 'warn'
+                    ? 'text-amber-400'
+                    : 'text-emerald-400'
+              }
+            >
               {log.type.toUpperCase()}:
             </span>
             <span className="text-slate-100">{log.message}</span>
@@ -217,15 +247,17 @@ export function DevConsole({ logs }) {
 ---
 
 ## 3. Consumer Marketing & Landing Pages
-*   **Goal:** Emotional appeal, high conversion flows, brand differentiation, and typographic pacing.
-*   **Visual Tone:** Editorial, Dark Luxury, Swiss Precision, or Organic Natural.
-*   **Heuristics:**
-    *   **Layout Asymmetry:** Avoid 50/50 hero templates. Use overlapping layers, full-bleed media breakouts, and dramatic grid breaks.
-    *   **Typography Hierarchy:** Large, expressive display headings paired with highly legible body columns constrained to `60-70ch` to prevent eye strain.
-    *   **Controlled Motion:** Use scroll-driven reveals (e.g., clip-path reveals, stagger entry) to guide reading flow. Avoid constant looping animations.
-    *   **Visual Proof Grid:** Grid rows for logos and customer reviews must balance visual weight and scale.
+
+- **Goal:** Emotional appeal, high conversion flows, brand differentiation, and typographic pacing.
+- **Visual Tone:** Editorial, Dark Luxury, Swiss Precision, or Organic Natural.
+- **Heuristics:**
+  - **Layout Asymmetry:** Avoid 50/50 hero templates. Use overlapping layers, full-bleed media breakouts, and dramatic grid breaks.
+  - **Typography Hierarchy:** Large, expressive display headings paired with highly legible body columns constrained to `60-70ch` to prevent eye strain.
+  - **Controlled Motion:** Use scroll-driven reveals (e.g., clip-path reveals, stagger entry) to guide reading flow. Avoid constant looping animations.
+  - **Visual Proof Grid:** Grid rows for logos and customer reviews must balance visual weight and scale.
 
 ### Landing Page Code Template (Asymmetric Hero Section)
+
 ```tsx
 import React from 'react';
 import { ArrowRight } from 'lucide-react';
@@ -240,10 +272,15 @@ export function AsymmetricHero() {
             Flagship Release
           </span>
           <h1 className="text-4xl md:text-6xl font-extrabold tracking-tight leading-[1.05] text-[var(--text-primary)] text-wrap-balance">
-            Create interfaces that feel <span className="underline decoration-wavy decoration-[var(--color-primary)]">human</span> again.
+            Create interfaces that feel{' '}
+            <span className="underline decoration-wavy decoration-[var(--color-primary)]">
+              human
+            </span>{' '}
+            again.
           </h1>
           <p className="text-base text-[var(--text-secondary)] max-w-[55ch] leading-relaxed text-wrap-pretty">
-            We extract clean, reusable design principles from elite developer interfaces and encode them into deterministic token specifications.
+            We extract clean, reusable design principles from elite developer interfaces and encode
+            them into deterministic token specifications.
           </p>
           <div className="flex flex-wrap gap-4 pt-4">
             <button className="flex items-center gap-2 px-6 py-3 bg-[var(--color-primary)] text-white hover:bg-[var(--color-primary-hover)] active:scale-95 transition-all rounded-[var(--radius-soft)] text-sm font-semibold shadow-[var(--shadow-md)]">
@@ -254,14 +291,16 @@ export function AsymmetricHero() {
             </button>
           </div>
         </div>
-        
+
         {/* Right Side: Visual Accent Panel (Spans 5 columns, asymmetric displacement) */}
         <div className="lg:col-span-5 relative mt-8 lg:mt-0">
           <div className="absolute inset-0 bg-gradient-to-tr from-[var(--color-primary)]/20 to-transparent blur-3xl -z-10" />
           <div className="bg-[var(--bg-surface)] border border-[var(--border-subtle)] p-6 rounded-[var(--radius-lg)] shadow-[var(--shadow-lg)] transform hover:-translate-y-1 hover:rotate-1 transition-all duration-300">
-            <h3 className="text-base font-bold text-[var(--text-primary)] mb-2">Picasso v3 Token Output</h3>
+            <h3 className="text-base font-bold text-[var(--text-primary)] mb-2">
+              Picasso v3 Token Output
+            </h3>
             <pre className="text-[10px] font-mono text-[var(--text-secondary)] bg-[var(--bg-base)] p-3 rounded border border-[var(--border-subtle)] overflow-x-auto">
-{`{
+              {`{
   "theme": "dark-luxury",
   "primary": "oklch(65% 0.22 250)",
   "geometry": {
@@ -281,15 +320,17 @@ export function AsymmetricHero() {
 ---
 
 ## 4. AI Interfaces
-*   **Goal:** Interactive stream clarity, model transparency, history containment, and prompting accessibility.
-*   **Visual Tone:** Neo-Glassmorphism, Dark Luxury, or Soft Minimal.
-*   **Heuristics:**
-    *   **Streaming Content States:** Show skeleton overlays or pulsing typing indicator bubbles during LLM processing. Stream response blocks chunk-by-chunk without layout shifts.
-    *   **System Boundaries:** Visually differentiate user inputs, assistant responses, and system alerts (using background tinting or subtle border lines).
-    *   **Actionable Prompts:** Provide quick-start suggestion chips at the bottom of empty chat views.
-    *   **Scroll Locking:** Automatically anchor chat containers to the bottom as long messages render, but release lock if the user manually scrolls up to read history.
+
+- **Goal:** Interactive stream clarity, model transparency, history containment, and prompting accessibility.
+- **Visual Tone:** Neo-Glassmorphism, Dark Luxury, or Soft Minimal.
+- **Heuristics:**
+  - **Streaming Content States:** Show skeleton overlays or pulsing typing indicator bubbles during LLM processing. Stream response blocks chunk-by-chunk without layout shifts.
+  - **System Boundaries:** Visually differentiate user inputs, assistant responses, and system alerts (using background tinting or subtle border lines).
+  - **Actionable Prompts:** Provide quick-start suggestion chips at the bottom of empty chat views.
+  - **Scroll Locking:** Automatically anchor chat containers to the bottom as long messages render, but release lock if the user manually scrolls up to read history.
 
 ### AI Chat Code Template (Input Prompt Area)
+
 ```tsx
 import React, { useState } from 'react';
 import { Send, Sparkles } from 'lucide-react';
@@ -297,13 +338,13 @@ import { Send, Sparkles } from 'lucide-react';
 export function AIChatInput({ onSubmit }) {
   const [input, setInput] = useState('');
   const suggestions = ['Generate SaaS Layout', 'Optimize CSS Grids', 'APCA Contrast Check'];
-  
+
   return (
     <div className="w-full max-w-2xl mx-auto space-y-3 p-4 bg-[var(--bg-surface)] border border-[var(--border-subtle)] rounded-[var(--radius-md)] shadow-[var(--shadow-md)]">
       {/* Suggestions Chips Row */}
       <div className="flex flex-wrap gap-2">
         {suggestions.map((sug, i) => (
-          <button 
+          <button
             key={i}
             onClick={() => setInput(sug)}
             className="flex items-center gap-1.5 px-3 py-1.5 bg-[var(--bg-base)] hover:bg-[var(--bg-surface-raised)] border border-[var(--border-subtle)] rounded-full text-xs text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-all font-medium"
@@ -312,20 +353,26 @@ export function AIChatInput({ onSubmit }) {
           </button>
         ))}
       </div>
-      
+
       {/* Input Text Form */}
-      <form 
-        onSubmit={(e) => { e.preventDefault(); if (input.trim()) { onSubmit(input); setInput(''); } }}
+      <form
+        onSubmit={e => {
+          e.preventDefault();
+          if (input.trim()) {
+            onSubmit(input);
+            setInput('');
+          }
+        }}
         className="flex gap-2 items-center border border-[var(--border-default)] rounded-[var(--radius-sm)] px-3 py-2 bg-[var(--bg-base)] focus-within:ring-1 focus-within:ring-[var(--color-primary)] transition-all"
       >
-        <input 
-          type="text" 
+        <input
+          type="text"
           value={input}
-          onChange={(e) => setInput(e.target.value)}
-          placeholder="Ask Antigravity UI to design..." 
+          onChange={e => setInput(e.target.value)}
+          placeholder="Ask Antigravity UI to design..."
           className="flex-1 bg-transparent border-0 outline-none text-xs text-[var(--text-primary)] placeholder-[var(--text-muted)]"
         />
-        <button 
+        <button
           type="submit"
           disabled={!input.trim()}
           className="p-2 bg-[var(--color-primary)] text-white hover:bg-[var(--color-primary-hover)] disabled:bg-[var(--text-muted)] disabled:opacity-50 disabled:cursor-not-allowed rounded-[var(--radius-sm)] transition-all"
@@ -341,18 +388,21 @@ export function AIChatInput({ onSubmit }) {
 ---
 
 ## 5. Fintech & Dashboards
-*   **Goal:** Financial precision, trust, quick status retrieval, and clean charts.
-*   **Visual Tone:** Soft Minimal or Dark Luxury. Green/red semantic indicators should be soft sage and terracotta to avoid harsh, alarmist styling.
-*   **Heuristics:**
-    *   **Tabular Data Precision:** Use tabular numbers (`font-variant-numeric: tabular-nums`) to align digits perfectly in records.
-    *   **Interactive Visualizations:** Chart axes must have visible grids and clear legend labels. Hover tooltips must follow mouse movements and show precise numerical values.
+
+- **Goal:** Financial precision, trust, quick status retrieval, and clean charts.
+- **Visual Tone:** Soft Minimal or Dark Luxury. Green/red semantic indicators should be soft sage and terracotta to avoid harsh, alarmist styling.
+- **Heuristics:**
+  - **Tabular Data Precision:** Use tabular numbers (`font-variant-numeric: tabular-nums`) to align digits perfectly in records.
+  - **Interactive Visualizations:** Chart axes must have visible grids and clear legend labels. Hover tooltips must follow mouse movements and show precise numerical values.
 
 ---
 
 ## Pre-Flight Checklist
+
 - [ ] Have I verified the visual guidelines match the target Product Category?
 - [ ] Have I checked for tabular numbers alignment in Fintech interfaces?
 - [ ] Have I checked for monospace format in Developer Tools?
 
 ## 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/progressive-blur/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before engineering glassmorphism or backdrop blurs, you MUST inspect:
+
 1. Vendor prefixes → Enforce `-webkit-backdrop-filter` alongside `backdrop-filter` for Safari support
 2. GPU Protection Rule (Section 70) → Strictly prohibit animating `backdrop-filter: blur()` radius; animate `opacity` of static blurred pseudo-elements instead
 3. Masked Blur Gradient layers (Section 25) → Blend multi-step blur layers with linear gradient masks to avoid harsh edge cutoffs
@@ -31,6 +32,7 @@ Architect high-performance, progressive backdrop blurs and frosted glass interfa
 ## 3 Progressive Blur Techniques
 
 ### 1. Multi-Step Masked Progressive Blur
+
 To prevent harsh edge cutoffs in blurred headers or footers, blend 4 progressive blur layers using linear gradient masks:
 
 ```css
@@ -43,21 +45,22 @@ To prevent harsh edge cutoffs in blurred headers or footers, blend 4 progressive
 
 .blur-layer-1 {
   backdrop-filter: blur(2px);
-  mask: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 25%);
+  mask: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 25%);
 }
 
 .blur-layer-2 {
   backdrop-filter: blur(8px);
-  mask: linear-gradient(to bottom, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 65%);
+  mask: linear-gradient(to bottom, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0) 65%);
 }
 
 .blur-layer-3 {
   backdrop-filter: blur(16px);
-  mask: linear-gradient(to bottom, rgba(0,0,0,1) 65%, rgba(0,0,0,1) 100%);
+  mask: linear-gradient(to bottom, rgba(0, 0, 0, 1) 65%, rgba(0, 0, 0, 1) 100%);
 }
 ```
 
 ### 2. Glass Card Depth Recipe
+
 ```css
 .glass-card {
   background: rgba(255, 255, 255, 0.65);
@@ -69,7 +72,7 @@ To prevent harsh edge cutoffs in blurred headers or footers, blend 4 progressive
 
 @media (prefers-color-scheme: dark) {
   .glass-card {
-    background: rgba(18, 18, 20, 0.70);
+    background: rgba(18, 18, 20, 0.7);
     border: 1px solid rgba(255, 255, 255, 0.08);
     box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
   }
@@ -77,7 +80,9 @@ To prevent harsh edge cutoffs in blurred headers or footers, blend 4 progressive
 ```
 
 ### 3. GPU Hardware Acceleration Protection
+
 Backdrop blurs can cause frame drops if animated directly.
+
 - **Rule**: Never animate `backdrop-filter: blur()` properties during scroll or transitions. Animate `opacity` of a static blurred pseudo-element instead!
 
 ---

package/.agent/skills/project-idioms/SKILL.md

@@ -24,6 +24,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before generating code or suggesting architectural patterns, you MUST inspect:
+
 1. Recorded Idioms table (Section 43) → Check active project-specific architectural overrides
 2. `skill_evolution.js` status → Verify if staged commits contain un-digested architectural deltas
 3. Override protocol (Section 71) → Never contradict a project idiom silently; flag deviations explicitlyrst)

package/.agent/skills/property-based-testing/SKILL.md

@@ -0,0 +1,58 @@
+---
+name: property-based-testing
+description: Generative input invariant testing using fast-check (TS/JS) and hypothesis (Python) to uncover hidden edge cases and boundary failures.
+tools: Read, Grep, Glob, Edit, Write
+version: 3.0.0
+last-updated: 2026-08-05
+script: .agent/scripts/test_runner.js
+scripts-binding:
+  - .agent/scripts/test_runner.js
+  - .agent/scripts/inner_loop_validator.js
+skills:
+  - testing-patterns
+  - tdd-workflow
+  - clean-code
+---
+
+# Property-Based Testing — Invariant Verification
+
+## Mandatory Pre-Flight Context Inspection
+
+Before writing property tests:
+
+1. Invariant Identification → Define mathematical properties that must hold true for ALL inputs (e.g. `reverse(reverse(list)) == list`)
+2. Arbitrary Generator Scoping → Constrain generator bounds to domain validity (e.g. non-empty strings, positive integers)
+3. Shrinking & Reproducibility → Store seed values for failing test runs to reproduce minimal failing inputs
+
+## Fast-Check Arbitrary Generator & Vitest Invariant Test
+
+```typescript
+import fc from 'fast-check';
+import { test, expect } from 'vitest';
+
+function parseAmount(currencyStr: string): number | null {
+  const cleaned = currencyStr.replace(/[^0-9.]/g, '');
+  const num = parseFloat(cleaned);
+  return isNaN(num) ? null : num;
+}
+
+test('currency parser invariant: non-negative parsed numbers', () => {
+  fc.assert(
+    fc.property(fc.tuple(fc.string(), fc.double({ min: 0, max: 1000000 })), ([prefix, val]) => {
+      const input = `${prefix}$${val.toFixed(2)}`;
+      const parsed = parseAmount(input);
+
+      if (parsed !== null) {
+        expect(parsed).toBeGreaterThanOrEqual(0);
+        expect(Number.isFinite(parsed)).toBe(true);
+      }
+    }),
+    { numRuns: 500 }, // Execute 500 generative iterations
+  );
+});
+```
+
+## 🛑 Verification-Before-Completion (VBC) Protocol
+
+- Run minimum 100 iterations per property test run.
+- Confirm shrinking mechanism isolates minimal failing counter-example on assertion failure.

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

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before architecting Python projects or selecting frameworks, you MUST inspect:
+
 1. Typed Data Models over Dicts (Section 15) → Use Pydantic models or `@dataclass` for structured data; ban un-typed `dict` passing
 2. Specific Exception Handling (Section 16) → Catch explicit exceptions (`ValueError`, `AppError`); ban bare `except:` or generic `except Exception:` swallowing
 3. Pathlib Modern API (Section 17) → Use `pathlib.Path` for cross-platform filesystem operations; ban legacy `os.path`

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

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before writing Python code or FastAPI endpoints, you MUST inspect:
+
 1. Pydantic v2 Migration Syntax (Section 17) → Use `model_dump()`, `model_dump_json()`, `model_validate()`, and `@field_validator`; ban v1 `.dict()` and `@validator`
 2. Modern Native Generics (Section 16) → Use native `list[str]`, `dict[k,v]`, and `X | None` (Python 3.10+); ban legacy `typing.List` / `typing.Optional`
 3. Non-Blocking Async Clients (Section 21) → Use `httpx.AsyncClient()` in async code; ban blocking `requests` library inside asyncio event loops

package/.agent/skills/quieter/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before subduing visual design elements, you MUST inspect:
+
 1. `DESIGN.md` / `package.json` → Check background surface variables and contrast standards
 2. Palette Subjugation rules (Section 24) → Limit high-saturation colors to single primary actions
 3. Motion Restraint rules (Section 35) → Eliminate looping pulsing badges and restrict motion to user-initiated actions
@@ -31,21 +32,26 @@ Reduce visual noise, eliminate unnecessary color competition, and restore calm f
 ## 5 Restraint Tactics
 
 ### 1. Palette Subjugation
+
 - **Reduce Primary Colors**: Limit saturated colors to a single primary action. Turn secondary accent colors into subtle monochrome tones (`oklch(0.92 0.01 240)`).
 - **Mute Background Surfaces**: Replace multi-colored cards or high-saturation gradient backgrounds with quiet, neutral monochrome surfaces.
 
 ### 2. De-emphasize Borders & Outlines
+
 - **Subtle Surface Elevation**: Replace harsh 100% black/white borders with subtle surface background differences ($L \pm 3\%$) or ultra-light 5% opacity borders.
 
 ### 3. Subdue Typography Scaling
+
 - **Reduce Font Weight Spikes**: Replace heavy 900 bold display headings with refined semibold (`600`) or medium (`500`) typography.
 - **Normalize Font Sizes**: Reduce font size jumps between section headers and subheaders to create smooth visual harmony.
 
 ### 4. Calm Motion & Animations
+
 - **Eliminate Continuous Animations**: Remove spinning gradient borders, pulsing badges, and bouncing icons. Restrict motion exclusively to user-initiated actions.
 - **Shorten Transitions**: Keep hover state transitions subtle and fast ($\le 150\text{ms}$).
 
 ### 5. Expand Negative Space
+
 - **Increase Padding**: Give content room to breathe by increasing section paddings by 25%-50%, reducing cognitive overload.
 
 ---

package/.agent/skills/react-doctor/SKILL.md

@@ -20,6 +20,7 @@ scripts-binding:
 ## Mandatory Pre-Flight Context Inspection
 
 Before auditing React components for performance or health issues, you MUST inspect:
+
 1. Re-render triggers (Section 24) → Identify inline object/array props and inline callback handlers breaking memoization
 2. `useEffect` Cleanup (Section 31) → Ensure all event listeners, intervals, and subscriptions return explicit cleanup functions
 3. Derived State Anti-Pattern (Section 41) → Ban props duplicated into state (`useState(props.val)`); derive values directly during render
@@ -31,14 +32,18 @@ Diagnose and resolve unnecessary re-renders, state synchronization bugs, memory
 ## 4 React Health Checks
 
 ### 1. Unnecessary Re-render Prevention
+
 - **Inline Object/Array Props**: Passing inline objects `<Child config={{ color: 'blue' }} />` creates new references every render. Wrap with `useMemo` or declare outside component scope.
 - **Inline Callback Props**: Passing inline functions `<Child onClick={() => doSomething()} />` breaks `React.memo`. Wrap callbacks with `useCallback`.
 
 ### 2. State Colocation
+
 - Don't lift state higher than necessary. Keep state local to the component consuming it to isolate re-render subtrees.
 
 ### 3. Cleanup in `useEffect`
+
 - Every event listener, interval, or subscription created in `useEffect` MUST return a cleanup function to prevent memory leaks:
+
 ```tsx
 useEffect(() => {
   const handleResize = () => setWidth(window.innerWidth);
@@ -48,6 +53,7 @@ useEffect(() => {
 ```
 
 ### 4. Derived State Anti-Pattern
+
 - Never duplicate props into state (`const [name, setName] = useState(props.name)`). Calculate derived values during rendering directly.
 
 ---