tribunal-kit 5.8.2 → 5.8.4

package/.agent/skills/pricing-page/SKILL.md

@@ -0,0 +1,68 @@
+---
+name: pricing-page
+description: SaaS pricing table architecture, billing cycle toggles (Monthly/Annual), feature comparison matrices, tier highlighting, and conversion optimization.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Pricing Architecture & SaaS Conversion
+  tier: pro
+  co-requires: [landing-page, frontend-design]
+  trigger-signals:
+    strong: [pricing-page, pricing table, billing toggle, tier comparison, popular tier highlight, SaaS pricing]
+    weak: [pricing UI, plan table]
+---
+
+# Pricing Page — SaaS Pricing Architecture & Comparison Grids
+
+Architect high-converting SaaS pricing tables with clear billing toggles, tier differentiation, and feature comparison matrices.
+
+---
+
+## 4 Pricing Table Rules
+
+### 1. The Billing Cycle Toggle (Monthly vs Annual)
+- Provide a clear segmented control or switch for **Monthly** / **Annual (Save 20%)**.
+- Display an explicit "Save 20%" badge next to the annual option.
+- Smoothly transition price numbers when toggling billing frequencies using `font-variant-numeric: tabular-nums`.
+
+### 2. Tier Visual Hierarchy (Max 3-4 Tiers)
+- **Hobby / Starter**: Quiet surface, border outline, ghost CTA button (*"Start free"*).
+- **Pro / Business (Featured Tier)**: Prominent accent border, subtle glow/gradient header, "Most Popular" pill badge, solid primary CTA button (*"Start 14-day trial"*).
+- **Enterprise**: Solid dark surface or neutral card, contact sales CTA (*"Talk to sales"*).
+
+### 3. Price Display Formatting
+- Big bold price numeral (`3.5rem` font size) + billing cadence label (`/month billed annually` in smaller muted text).
+- Always include `$0` or `Free` tier explicitly if available.
+
+### 4. Feature Checklist Consistency
+- Group bullet points with green checkmark icons (`✓`).
+- Explicitly list features included vs excluded (using muted dashed icons or opacity for missing features).
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Jittering Price Numeral Transitions**: Price numbers shifting layout width when toggling monthly/annual billing. Use `font-variant-numeric: tabular-nums`.
+2. **Identical Visual Treatment**: Making all 3 pricing tiers look identical, preventing users from spotting the recommended plan.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `frontend-reviewer` · `ui-ux-auditor`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Is the "Most Popular / Pro" tier visually distinct with primary CTA styling?
+✅ Is `tabular-nums` applied to price numerals to prevent toggle layout shifts?
+✅ Is the Annual discount savings badge clearly visible next to the billing toggle?
+```
+
+### 🛑 Verification-Before-Completion (VBC) Protocol
+
+**CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
+
+- ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
+- ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.

package/.agent/skills/progressive-blur/SKILL.md

@@ -0,0 +1,100 @@
+---
+name: progressive-blur
+description: Smooth progressive backdrop blurs, depth overlays, and modern glassmorphism using CSS mask-image and multi-layered backdrop filters without GPU performance drops.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Glassmorphism & Depth Engineering
+  tier: pro
+  co-requires: [frontend-design, 60fps-animation]
+  trigger-signals:
+    strong: [progressive-blur, backdrop blur, glassmorphism, depth overlay, progressive backdrop, frosted glass]
+    weak: [blur effect, blur background]
+---
+
+# Progressive Blur — Multi-Layered Glassmorphism & Depth
+
+Architect high-performance, progressive backdrop blurs and frosted glass interfaces that feel tactile and fluid.
+
+---
+
+## 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
+.progressive-blur-header {
+  position: sticky;
+  top: 0;
+  z-index: 40;
+  pointer-events: none;
+}
+
+.blur-layer-1 {
+  backdrop-filter: blur(2px);
+  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%);
+}
+
+.blur-layer-3 {
+  backdrop-filter: blur(16px);
+  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);
+  backdrop-filter: blur(16px) saturate(180%);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.08);
+}
+
+@media (prefers-color-scheme: dark) {
+  .glass-card {
+    background: rgba(18, 18, 20, 0.70);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+  }
+}
+```
+
+### 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!
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Animating `backdrop-filter` radius**: Animating `blur(0px)` to `blur(20px)` on every frame, which tanks GPU performance to under 20fps.
+2. **Missing vendor prefixes**: Forgetting `-webkit-backdrop-filter` for Safari compatibility.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `frontend-reviewer` · `performance-optimizer`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are `-webkit-backdrop-filter` vendor prefixes present?
+✅ Is `opacity` animated instead of directly interpolating `backdrop-filter` radius?
+✅ Is dark mode contrast preserved over frosted glass surfaces?
+```
+
+### 🛑 Verification-Before-Completion (VBC) Protocol
+
+**CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
+
+- ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
+- ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.

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

@@ -2,7 +2,7 @@
 name: project-idioms
 description: >
   Auto-evolved skill containing project-specific architectural idioms extracted
-  from the developer's own code decisions. Generated by skill_evolution.py.
+  from the developer's own code decisions. Generated by skill_evolution.js.
   Commit this file to share your Engineering Culture across the team.
   Every agent MUST respect these idioms above generic defaults.
 version: auto
@@ -33,7 +33,7 @@ routing:
 ## How Idioms Are Born
 
 1. Developer commits code that **differs** from what the AI proposed.
-2. `skill_evolution.py digest` extracts the architectural delta (semantic filter).
+2. `skill_evolution.js digest` extracts the architectural delta (semantic filter).
 3. A minimal LLM prompt (< 500 tokens) identifies the **WHY** behind the change.
 4. The idiom is recorded here with a stable pattern + reason pair.
 5. All future code generations must align with these idioms.
@@ -54,16 +54,16 @@ Run after committing or staging a meaningful architectural change:
 
 ```bash
 # Analyze staged changes (default)
-python .agent/scripts/skill_evolution.py digest
+node .agent/scripts/skill_evolution.js digest
 
 # Preview without writing
-python .agent/scripts/skill_evolution.py digest --dry-run
+node .agent/scripts/skill_evolution.js digest --dry-run
 
 # Analyze last commit instead of staged
-python .agent/scripts/skill_evolution.py digest --head
+node .agent/scripts/skill_evolution.js digest --head
 
 # Check current idiom count and token savings
-python .agent/scripts/skill_evolution.py status
+node .agent/scripts/skill_evolution.js status
 ```
 
 ---
@@ -87,7 +87,7 @@ python .agent/scripts/skill_evolution.py status
 Last digest: `never`
 Total cycles: `0`
 
-Run `python .agent/scripts/skill_evolution.py status` to see full statistics.
+Run `node .agent/scripts/skill_evolution.js status` to see full statistics.
 
 ---
 

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

@@ -0,0 +1,68 @@
+---
+name: quieter
+description: Tone down overly loud, noisy, visually aggressive, or distracting designs while maintaining high visual quality. Use when a UI feels cluttered, overwhelming, tacky, or visually hyperactive.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Visual Design & Restraint
+  tier: pro
+  co-requires: [distill, swiss-design, compact-landing]
+  trigger-signals:
+    strong: [quieter, tone down, too loud, visual noise, too aggressive, tacky, calm ui, simplify visual]
+    weak: [subdue, tone down colors, lessen contrast]
+---
+
+# Quieter — Visual Restraint & Calm Interface Design
+
+Reduce visual noise, eliminate unnecessary color competition, and restore calm focus to chaotic interfaces.
+
+---
+
+## 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.
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Making Text Unreadable**: Reducing color saturation so much that text fails WCAG AA contrast (below 4.5:1).
+2. **Stripping Functional Indicators**: Removing error/warning colors when reducing palette noise. Keep functional colors crisp.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `frontend-reviewer` · `ui-ux-auditor`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are saturated colors restricted to primary actions?
+✅ Did I retain minimum 4.5:1 text contrast for all body and label copy?
+✅ Has unnecessary layout animation or pulsing been eliminated?
+```
+
+### 🛑 Verification-Before-Completion (VBC) Protocol
+
+**CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
+
+- ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
+- ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.

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

@@ -0,0 +1,70 @@
+---
+name: react-doctor
+description: Scan React and Next.js applications for security, performance, re-render inefficiencies, memory leaks, and correctness issues.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: React Optimization & Code Health
+  tier: pro
+  co-requires: [react-specialist, nextjs-react-expert, performance-profiling]
+  trigger-signals:
+    strong: [react-doctor, React performance scan, fix React re-renders, React memory leak, Million.js audit]
+    weak: [React audit, fix React bugs]
+---
+
+# React Doctor — React Performance & Health Audit
+
+Diagnose and resolve unnecessary re-renders, state synchronization bugs, memory leaks, and hook dependency issues in React applications.
+
+---
+
+## 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);
+  window.addEventListener('resize', handleResize);
+  return () => window.removeEventListener('resize', handleResize);
+}, []);
+```
+
+### 4. Derived State Anti-Pattern
+- Never duplicate props into state (`const [name, setName] = useState(props.name)`). Calculate derived values during rendering directly.
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Over-using `useCallback` everywhere**: Wrapping trivial primitives or 1-line functions that aren't passed to memoized children.
+2. **Missing `useEffect` Dependencies**: Omitting referenced variables from effect dependency arrays without proper `useCallback` or ref wrapping.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `react-specialist` · `type-safety`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are event listeners and timers properly cleaned up in `useEffect` returns?
+✅ Are expensive calculations wrapped in `useMemo`?
+✅ Is state colocated to minimize re-render scope?
+```
+
+### 🛑 Verification-Before-Completion (VBC) Protocol
+
+**CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
+
+- ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
+- ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.

package/.agent/skills/redesign-skill/SKILL.md

@@ -0,0 +1,65 @@
+---
+name: redesign-skill
+description: Audit and upgrade existing interfaces to premium visual quality while preserving product functionality and business logic.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Interface Redesign & UI Upgrade
+  tier: pro
+  co-requires: [taste-skill, better-ui, baseline-ui]
+  trigger-signals:
+    strong: [redesign-skill, redesign existing project, UI upgrade, overhaul interface, modernize UI, upgrade visual quality]
+    weak: [redesign UI, revamp site]
+---
+
+# Redesign Skill — UI Upgrade Methodology
+
+Audit legacy or unstyled user interfaces and transform them into modern, production-grade products without breaking underlying business logic.
+
+---
+
+## 4 Redesign Upgrade Steps
+
+### Step 1: Logic & State Isolation
+Before touching CSS or HTML layout:
+- Extract all state hooks (`useState`), event handlers (`onClick`), and API props. **Zero business logic may be deleted or altered.**
+
+### Step 2: Spatial & Typographic Grid Overhaul
+- Replace arbitrary pixel margins with an 8px spatial system (`gap-4`, `p-6`).
+- Apply modular font scaling (`text-sm`, `text-base`, `text-2xl`, `text-4xl`) with `text-wrap: balance` on headings.
+
+### Step 3: Color & Surface Elevation Upgrade
+- Replace raw `#fff` / `#000` colors with an OKLCH surface hierarchy (`--bg-base`, `--bg-surface`, `--bg-elevated`).
+- Replace hard black borders with subtle 8% opacity surface borders and multi-layered ambient shadows.
+
+### Step 4: Micro-Interaction & Polish Pass
+- Add `:active` scale press feedback (`scale(0.97)`), smooth hover state transitions, and keyboard focus rings (`:focus-visible`).
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Breaking Functionality During Redesign**: Deleting event handlers, state hooks, or form field inputs while redesigning the layout.
+2. **Generic Template Replacement**: Replacing a unique custom feature with a stock generic card grid.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `frontend-reviewer` · `ui-ux-auditor`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are all original props, event handlers, and state variables 100% preserved?
+✅ Is the visual hierarchy upgraded using OKLCH surface levels and multi-layer shadows?
+✅ Have interactive controls received tactile `:active` press feedback?
+```
+
+### 🛑 Verification-Before-Completion (VBC) Protocol
+
+**CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
+
+- ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
+- ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.

package/.agent/skills/shape/SKILL.md

@@ -0,0 +1,73 @@
+---
+name: shape
+description: Plan feature UX before writing code via structured Socratic design interviews. Use when a user asks to plan a new screen, onboarding flow, feature UX, or user interaction before implementation.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Pre-Code UX Shaping
+  tier: pro
+  co-requires: [appflow-wireframe, brainstorming, plan-writing]
+  trigger-signals:
+    strong: [shape, UX shaping, feature design, pre-code planning, user flow interview, shape workflow]
+    weak: [plan UI, spec out feature]
+---
+
+# Shape — Pre-Code UX & Feature Shaping
+
+Uncover core requirements, define interaction boundaries, and lock down screen flows BEFORE writing frontend code.
+
+---
+
+## The 3-Step Shaping Workflow
+
+### Step 1: High-Ambiguity Socratic Interview
+Before designing components, ask 2 targeted questions about high-ambiguity choices:
+1. **Primary User Goal**: *What is the single most important action the user must accomplish on this screen?*
+2. **Context & Entry Point**: *Where does the user arrive from, and where do they expect to go after completing this step?*
+
+### Step 2: Screen Boundaries & State Inventory
+Define the component states before implementation:
+- **Default State**: Primary layout with standard populated data.
+- **Empty State**: Zero-data view with creation prompt.
+- **Loading State**: Skeleton placeholders.
+- **Error State**: Graceful fallback UI with retry action.
+- **Success State**: Instant feedback toast or confirmation view.
+
+### Step 3: Architecture Contract
+Summarize the screen contract in a concise visual outline before coding:
+```
+[Screen Title]
+  ├── Entry Point: (e.g. Dashboard -> "New Project" button)
+  ├── Primary Action: (e.g. Create Project Form)
+  ├── Secondary Actions: (e.g. Import from GitHub)
+  └── Exit Point: (e.g. Redirect to /project/[id])
+```
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Jumping straight to code**: Writing CSS/React components without clarifying user goals or entry/exit points.
+2. **Over-asking questions**: Asking more than 2-3 questions. Prioritize only blocking architectural ambiguities.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `ui-ux-auditor`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are the entry and exit points of the screen explicitly defined?
+✅ Are all 5 screen states (default, empty, loading, error, success) planned?
+✅ Has the user confirmed the core interaction boundary before code generation?
+```
+
+### 🛑 Verification-Before-Completion (VBC) Protocol
+
+**CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
+
+- ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
+- ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.

package/.agent/skills/soft-skill/SKILL.md

@@ -0,0 +1,72 @@
+---
+name: soft-skill
+description: High-end visual design guidance for premium typography, spacing, depth, and animation systems.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Luxury Visual Design & Soft Depth
+  tier: pro
+  co-requires: [taste-skill, progressive-blur, impeccable]
+  trigger-signals:
+    strong: [soft-skill, high end visual design, luxury depth, soft UI, elegant spacing system, soft shadow UI]
+    weak: [elegant UI, soft style]
+---
+
+# Soft Skill — High-End Luxury Visual Design & Depth
+
+Craft high-end, luxury interfaces featuring soft depth, gentle surface transitions, quiet typography, and tactile spatial rhythm.
+
+---
+
+## 4 Soft Design Rules
+
+### 1. Multi-Layer Soft Ambient Depth
+- Avoid harsh drop-shadows. Use low-opacity multi-layered ambient lighting shadows:
+```css
+.soft-depth-card {
+  background: var(--surface);
+  box-shadow:
+    0 2px 4px rgba(0, 0, 0, 0.02),
+    0 8px 16px rgba(0, 0, 0, 0.04),
+    0 24px 48px rgba(0, 0, 0, 0.06);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+}
+```
+
+### 2. Generous Negative Space Cadence
+- Increase component padding by 1.5x (e.g. `24px` -> `36px`, `32px` -> `48px`). Generous negative space is the ultimate indicator of luxury software.
+
+### 3. Subdued Monochrome Color Harmonies
+- Use quiet, low-chroma monochromatic palettes (`oklch(0.97 0.005 240)` background with `oklch(0.22 0.01 240)` primary text).
+
+### 4. Fluid, Low-Velocity Transitions
+- Transition speeds should be gentle ($\approx 250\text{ms}$) with strong ease-out curves (`cubic-bezier(0.16, 1, 0.3, 1)`).
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Muddy Dark Shadows**: Using heavy `rgba(0,0,0,0.5)` drop shadows on light surfaces.
+2. **Cramped Containers**: Packing text elements tightly inside small containers with minimal padding.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `frontend-reviewer` · `ui-ux-auditor`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Are drop shadows multi-layered with opacity under 6% per layer?
+✅ Is container padding generous ($\ge 24\text{px}$)?
+✅ Is color palette subdued and monochromatic?
+```
+
+### 🛑 Verification-Before-Completion (VBC) Protocol
+
+**CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
+
+- ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
+- ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.

package/.agent/skills/sounds-on-the-web/SKILL.md

@@ -0,0 +1,100 @@
+---
+name: sounds-on-the-web
+description: Web Audio API procedural sound synthesis for tactile micro-interaction feedback (clicks, pops, success chimes) with mute toggles and accessibility awareness.
+version: 1.0.0
+last-updated: 2026-07-22
+applies-to-model: gemini-3-6-flash, claude-3-7-sonnet
+routing:
+  domain: Audio Feedback & Tactile Sound Synthesis
+  tier: pro
+  co-requires: [delight, micro-interaction]
+  trigger-signals:
+    strong: [sounds-on-the-web, Web Audio API sound, UI sound feedback, procedural audio click, audio feedback toggle]
+    weak: [ui sound, audio click]
+---
+
+# Sounds on the Web — Web Audio API Sound Feedback
+
+Synthesize lightweight, zero-dependency tactile sound effects for web micro-interactions.
+
+---
+
+## Zero-Asset Web Audio API Click Synthesizer
+
+Never load external MP3 audio files for simple UI clicks. Synthesize clean sine/triangle pops procedurally in under 10 lines of code:
+
+```typescript
+// Lightweight procedural Web Audio pop synthesizer
+class SoundFeedback {
+  private ctx: AudioContext | null = null;
+  private isMuted: boolean = false;
+
+  private init() {
+    if (!this.ctx && typeof window !== 'undefined') {
+      const AudioCtx = window.AudioContext || (window as any).webkitAudioContext;
+      if (AudioCtx) this.ctx = new AudioCtx();
+    }
+  }
+
+  public playPop(frequency = 600, duration = 0.04) {
+    if (this.isMuted) return;
+    this.init();
+    if (!this.ctx) return;
+
+    if (this.ctx.state === 'suspended') {
+      this.ctx.resume();
+    }
+
+    const osc = this.ctx.createOscillator();
+    const gain = this.ctx.createGain();
+
+    osc.type = 'sine';
+    osc.frequency.setValueAtTime(frequency, this.ctx.currentTime);
+    // Frequency pitch drop for tactile "pop"
+    osc.frequency.exponentialRampToValueAtTime(120, this.ctx.currentTime + duration);
+
+    gain.gain.setValueAtTime(0.12, this.ctx.currentTime); // Low volume
+    gain.gain.exponentialRampToValueAtTime(0.001, this.ctx.currentTime + duration);
+
+    osc.connect(gain);
+    gain.connect(this.ctx.destination);
+
+    osc.start();
+    osc.stop(this.ctx.currentTime + duration);
+  }
+
+  public setMute(muted: boolean) {
+    this.isMuted = muted;
+  }
+}
+
+export const soundFX = new SoundFeedback();
+```
+
+---
+
+## 🤖 LLM-Specific Traps
+
+1. **Autoplay Audio Errors**: Triggering Web Audio API before user gesture interaction (violating browser autoplay policies).
+2. **Missing Mute Toggle**: Failing to provide a persistent sound toggle switch in application settings.
+
+---
+
+## 🏛️ Tribunal Integration (Anti-Hallucination)
+
+**Active reviewers: `frontend-reviewer`**
+
+### ✅ Pre-Flight Self-Audit
+
+```
+✅ Is AudioContext initialized strictly inside/after user gesture handlers?
+✅ Is volume gain kept subtle ($\le 0.15$ max volume)?
+✅ Is a persistent sound mute option provided?
+```
+
+### 🛑 Verification-Before-Completion (VBC) Protocol
+
+**CRITICAL:** You must follow a strict "evidence-based closeout" state machine.
+
+- ❌ **Forbidden:** Declaring a task complete because the output "looks correct."
+- ✅ **Required:** You are explicitly forbidden from finalizing any task without providing **concrete evidence** (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.