tribunal-kit 8.0.0 → 9.0.1

package/skills/framer-motion-expert/SKILL.md

@@ -0,0 +1,312 @@
+---
+name: framer-motion-expert
+description: Use when Framer Motion 12+ for React. Declarative animations, layout transitions, gestures, scroll-linked motion, AnimatePresence, useAnimate, LazyMotion. Use when building component animations, page transitions, shared layout animations, or gesture-driven UI.
+version: 5.0.0
+last-updated: 2026-09-13
+skills:
+  - motion-engineering
+  - 60fps-animation
+  - accessible-animation
+tools: Read, Grep, Glob, Bash, Edit, Write
+scripts-binding:
+  - .agent/scripts/lint_runner.js
+  - .agent/scripts/verify_all.js
+---
+
+# Framer Motion 12+ — Dense Reference
+
+## Mandatory Pre-Flight Context Inspection
+
+Before generating, refactoring, or reviewing code in the `framer-motion-expert` domain, inspect these 5 critical parameters:
+
+1. **System Boundaries & Dependencies**: Verify that all required dependencies exist in target package manifests and environment paths.
+2. **Runtime Context & Platform Invariants**: Confirm target platform constraints (Node.js, Browser, Mobile OS, Edge runtime) before applying APIs.
+3. **Execution Guardrails**: Identify potential side-effects, state mutations, and unhandled asynchronous exceptions.
+4. **Validation & Type Contracts**: Validate input data schemas and strict type constraints across all module interfaces.
+5. **Observability & Proof of Execution**: Ensure execution produces tangible verification signals (terminal output, tests, metrics).
+
+## Activation Boundaries
+
+- **Activate when:** Use when Framer Motion 12+ for React. Declarative animations, layout transitions, gestures, scroll-linked motion, AnimatePresence, useAnimate, LazyMotion. Use when building component animations, page transitions, shared layout animations, or gesture-driven UI.
+- **DO NOT activate when:** The task falls outside the `framer-motion-expert` domain or is managed by a different dedicated specialist.
+
+## 🔁 Multi-Pass Execution Protocol
+
+Execute all non-trivial tasks through this 7-pass cognitive loop:
+
+| Pass | Phase | Core Action |
+|:---|:---|:---|
+| **Pass 1** | **Understand** | Deconstruct the user's explicit objective, implicit requirements, and platform constraints. |
+| **Pass 2** | **Plan** | Decompose the task into smallest logical steps; map dependencies and required tool calls. |
+| **Pass 3** | **Execute** | Implement the solution with production-grade craft, zero placeholders, and strict typing. |
+| **Pass 4** | **Verify** | Run linters, unit tests, or compiler checks to validate structural correctness. |
+| **Pass 5** | **Attack** | Perform an adversarial review searching for edge-case failures, race conditions, and traps. |
+| **Pass 6** | **Improve** | Eliminate discovered friction, optimize performance, and harden error boundaries. |
+| **Pass 7** | **Quality Gate** | Enforce Verification-Before-Completion (VBC) with concrete terminal proof before finalizing. |
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+---
+
+
+## Hallucination Traps (Read First)
+
+- ❌ `<Motion>` (capital M) → ✅ `motion.div` (lowercase dot notation)
+- ❌ `motion()` wrapper function → ✅ `motion.div`, `motion.span`, etc.
+- ❌ `exitBeforeEnter` prop → ✅ `mode="wait"` on `<AnimatePresence>` (removed in FM7+)
+- ❌ `exit` works without `<AnimatePresence>` → ✅ REQUIRES AnimatePresence wrapper
+- ❌ `<AnimatePresence>` children without unique `key` → ✅ ALWAYS set `key`
+- ❌ `stiffness + damping` AND `duration + bounce` together → ✅ pick ONE pair
+- ❌ `m.div` without `<LazyMotion>` wrapper → ✅ REQUIRES LazyMotion parent
+- ❌ `layout` animations with `domAnimation` feature set → ✅ requires `domMax`
+- ❌ Force-animating `width`/`height`/`top`/`left` → ✅ use `x`,`y`,`scale`,`opacity` (GPU)
+- ❌ `viewport.once` defaults to true → ✅ defaults to **false** — add `once: true` for entrance anims
+
+---
+
+## Core Primitives
+
+### `motion.X` / Declarative Animation
+
+```tsx
+import { motion } from 'framer-motion';
+<motion.div
+  initial={{ opacity: 0, y: 20 }}
+  animate={{ opacity: 1, y: 0 }}
+  exit={{ opacity: 0, y: -20 }}
+  transition={{ duration: 0.3, ease: 'easeOut' }}
+/>;
+```
+
+### Variants (Stagger / Orchestration)
+
+```tsx
+const container = {
+  hidden: {},
+  visible: { transition: { staggerChildren: 0.08, delayChildren: 0.1 } },
+};
+const item = {
+  hidden: { opacity: 0, y: 20, filter: 'blur(4px)' },
+  visible: { opacity: 1, y: 0, filter: 'blur(0px)', transition: { duration: 0.4 } },
+};
+<motion.ul variants={container} initial="hidden" animate="visible">
+  {list.map(e => (
+    <motion.li key={e.id} variants={item}>
+      {e.name}
+    </motion.li>
+  ))}
+</motion.ul>;
+```
+
+### Transitions
+
+```tsx
+// Tween (default)
+transition={{ duration: 0.5, ease: "easeInOut", delay: 0.2, repeat: Infinity, repeatType: "reverse" }}
+// Spring (physics)
+transition={{ type: "spring", stiffness: 300, damping: 20 }} // OR use duration+bounce, not both
+transition={{ type: "spring", duration: 0.8, bounce: 0.25 }}
+// Per-property
+transition={{ x: { type: "spring", stiffness: 300 }, opacity: { duration: 0.2 } }}
+```
+
+---
+
+## Gestures
+
+```tsx
+// Hover/Tap/Focus
+<motion.button
+  whileHover={{ scale: 1.05 }}
+  whileTap={{ scale: 0.95 }}
+  whileFocus={{ boxShadow: "0 0 0 3px rgba(66,153,225,0.6)" }}
+  transition={{ type: "spring", stiffness: 400, damping: 15 }}
+/>
+// Drag
+<motion.div
+  drag="x"                                   // "x" | "y" | true
+  dragConstraints={{ left: -100, right: 100 }}
+  dragElastic={0.2}                          // 0=hard stop, 1=free
+  dragMomentum={true}
+  dragSnapToOrigin
+/>
+// Scroll-triggered
+<motion.div
+  initial={{ opacity: 0, y: 50 }}
+  whileInView={{ opacity: 1, y: 0 }}
+  viewport={{ once: true, amount: 0.3 }}    // ← once: true is almost always what you want
+/>
+```
+
+---
+
+## Layout Animations
+
+```tsx
+// layout prop — auto-animates position/size changes
+<motion.div layout transition={{ type: "spring", stiffness: 200 }}>
+  {/* layout="position" = only position, layout="size" = only size */}
+</motion.div>
+
+// layoutId — shared element transition (morph between renders)
+// List thumbnail → expanded modal:
+<motion.div key={item.id} layoutId={`card-${item.id}`} />   // in list
+<motion.div layoutId={`card-${selectedId}`} className="modal" /> // in modal
+// ❌ TRAP: Cross-tree layoutId requires <LayoutGroup> wrapper
+import { LayoutGroup } from "framer-motion";
+<LayoutGroup><Sidebar /><MainContent /></LayoutGroup>
+```
+
+### AnimatePresence
+
+```tsx
+<AnimatePresence mode="sync">
+  {' '}
+  {/* "sync"|"wait"|"popLayout" */}
+  {items.map(item => (
+    <motion.div
+      key={item.id}
+      /* ← REQUIRED */ initial={{ opacity: 0, height: 0 }}
+      animate={{ opacity: 1, height: 'auto' }}
+      exit={{ opacity: 0, height: 0 }}
+    />
+  ))}
+</AnimatePresence>
+// mode="wait" — waits for exit before entering
+// initial={false} on AnimatePresence — skip first-render animation
+```
+
+---
+
+## Scroll Animations
+
+```tsx
+import { useScroll, useTransform } from 'framer-motion';
+// Page scroll progress (0–1)
+const { scrollYProgress } = useScroll();
+const y = useTransform(scrollYProgress, [0, 1], [0, -200]);
+const opacity = useTransform(scrollYProgress, [0, 0.5], [1, 0]);
+<motion.div style={{ y, opacity }} />;
+
+// Element-scoped scroll
+const ref = useRef(null);
+const { scrollYProgress } = useScroll({ target: ref, offset: ['start end', 'end start'] });
+```
+
+---
+
+## Hooks
+
+### `useAnimate` — Imperative sequences
+
+```tsx
+import { useAnimate, stagger } from 'framer-motion';
+const [scope, animate] = useAnimate(); // ← returns [scope, animate] NOT [ref, controls]
+await animate('.item', { opacity: 1 }, { delay: stagger(0.1) });
+<div ref={scope}>...</div>;
+```
+
+### `useMotionValue` + `useTransform` — No re-renders
+
+```tsx
+const x = useMotionValue(0);
+const rotateY = useTransform(x, [-200, 200], [-45, 45]);
+// ✅ useMotionValue does NOT trigger React re-renders — key perf advantage over useState
+<motion.div style={{ x, rotateY }} drag="x" />;
+```
+
+### `useSpring` / `useVelocity`
+
+```tsx
+const springX = useSpring(x, { stiffness: 300, damping: 30 });
+const xVel = useVelocity(x);
+const skewX = useTransform(xVel, [-1000, 0, 1000], [-15, 0, 15]);
+```
+
+---
+
+## Performance & Bundle
+
+```tsx
+// LazyMotion — ~5KB vs ~30KB full bundle
+import { LazyMotion, domAnimation, m } from 'framer-motion';
+// domAnimation ≈ 5KB | domMax ≈ 20KB (needed for layout/drag)
+<LazyMotion features={domAnimation}>
+  <m.div animate={{ opacity: 1 }} />
+</LazyMotion>;
+```
+
+### Accessibility
+
+```tsx
+import { useReducedMotion } from 'framer-motion';
+const reduce = useReducedMotion();
+// opacity/color: always safe | position/scale/rotation: must be disabled when reduce=true
+<motion.div
+  animate={{ x: reduce ? 0 : 100, opacity: 1 }}
+  transition={{ duration: reduce ? 0 : 0.5 }}
+/>;
+```
+
+### Rules
+
+- ✅ Animate: `x`, `y`, `scale`, `rotation`, `opacity` (GPU composited)
+- ❌ Never animate: `width`, `height`, `top`, `left`, `padding`, `margin` (causes layout thrashing)
+- ✅ `useMotionValue` for animation-driven values — never `useState`
+- ❌ Nest `AnimatePresence` only when necessary — each adds reconciler overhead
+- `"use client"` required in Next.js — `motion.div` cannot run in Server Components
+
+---
+
+## 🚨 Edge-Case & Failure Mode Matrix
+
+| Scenario | Risk | Mitigation Strategy |
+|:---|:---|:---|
+| **Empty or Null Inputs** | Unhandled exception or unexpected rendering collapse | Enforce fallback guards, optional chaining, and explicit empty state handlers |
+| **Network Timeout / Latency** | Hanging operations or duplicate side-effects | Implement bounded abort controllers, exponential backoff, and idempotency keys |
+| **Concurrency / Race Conditions** | Stale state overwrite or inconsistent data mutations | Use atomic transactions, mutex locking, or cancel-on-resubmit controls |
+| **Invalid Schema / Malformed Payload** | Downstream runtime errors or security injection | Validate boundary payloads with Zod/Pydantic schemas prior to execution |
+| **Resource / Memory Saturation** | OOM errors, frame drops, or memory leaks | Clean up listeners, cancel active timers, and enforce pagination/virtualization |
+
+---
+
+## 🤖 LLM-Specific Traps Table
+
+| Anti-Pattern | What AI Commonly Does Wrong | What Is Actually Correct |
+|:---|:---|:---|
+| **The Instant Pop Trap** | Conditionally unmounting elements without animated interpolation | Use AnimatePresence or coordinate morphs with continuous geometry |
+| **Layout Thrashing** | Animating width, height, top, or left inside animation loops | Animate composite-only transform (translate3d, scale) and opacity |
+| **Sluggish Duration** | Setting micro-interaction transitions to 600ms+ causing interface lag | Cap interactive feedback at 160ms–240ms with snappy ease-out curves |
+
+---
+
+## 🏛️ Tribunal Verification & Guardrails
+
+**Active Reviewers:** `frontend-reviewer` · `motion-reviewer` · `ui-ux-auditor`
+**Slash Command:** `/review` or `/tribunal-full`
+
+### ✅ Pre-Flight Self-Audit Checklist
+
+```
+✅ Does animation maintain 60fps/120fps using transform and opacity?
+✅ Is optical mass conserved across state interpolations without volume collapse?
+✅ Is duration capped within micro-interaction budgets (160ms–280ms)?
+✅ Is prefers-reduced-motion respected with graceful instant fallbacks?
+✅ Did I prevent layout thrashing and continuous geometry mutations?
+```
+
+### 🛑 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 test suites, compiler success, or equivalent operational proof) that your output works as intended.

package/skills/frontend-design/SKILL.md

@@ -0,0 +1,178 @@
+---
+name: frontend-design
+description: Use when Design engineering principles for React/Next.js. Relative color syntax (OKLCH), spatial grid math, fluid container queries, and contrast validation.
+version: 5.0.0
+last-updated: 2026-09-13
+skills:
+  - baseline-ui
+  - better-colors
+  - better-ui
+tools: Read, Grep, Glob, Bash, Edit, Write
+scripts-binding:
+  - .agent/scripts/lint_runner.js
+  - .agent/scripts/verify_all.js
+---
+
+# Frontend Design — Technical Spacing & Color Science
+
+## Mandatory Pre-Flight Context Inspection
+
+Before generating, refactoring, or reviewing code in the `frontend-design` domain, inspect these 5 critical parameters:
+
+1. **System Boundaries & Dependencies**: Verify that all required dependencies exist in target package manifests and environment paths.
+2. **Runtime Context & Platform Invariants**: Confirm target platform constraints (Node.js, Browser, Mobile OS, Edge runtime) before applying APIs.
+3. **Execution Guardrails**: Identify potential side-effects, state mutations, and unhandled asynchronous exceptions.
+4. **Validation & Type Contracts**: Validate input data schemas and strict type constraints across all module interfaces.
+5. **Observability & Proof of Execution**: Ensure execution produces tangible verification signals (terminal output, tests, metrics).
+
+## Activation Boundaries
+
+- **Activate when:** Use when Design engineering principles for React/Next.js. Relative color syntax (OKLCH), spatial grid math, fluid container queries, and contrast validation.
+- **DO NOT activate when:** The task falls outside the `frontend-design` domain or is managed by a different dedicated specialist.
+
+## 🔁 Multi-Pass Execution Protocol
+
+Execute all non-trivial tasks through this 7-pass cognitive loop:
+
+| Pass | Phase | Core Action |
+|:---|:---|:---|
+| **Pass 1** | **Understand** | Deconstruct the user's explicit objective, implicit requirements, and platform constraints. |
+| **Pass 2** | **Plan** | Decompose the task into smallest logical steps; map dependencies and required tool calls. |
+| **Pass 3** | **Execute** | Implement the solution with production-grade craft, zero placeholders, and strict typing. |
+| **Pass 4** | **Verify** | Run linters, unit tests, or compiler checks to validate structural correctness. |
+| **Pass 5** | **Attack** | Perform an adversarial review searching for edge-case failures, race conditions, and traps. |
+| **Pass 6** | **Improve** | Eliminate discovered friction, optimize performance, and harden error boundaries. |
+| **Pass 7** | **Quality Gate** | Enforce Verification-Before-Completion (VBC) with concrete terminal proof before finalizing. |
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+---
+
+
+---
+
+## 1. Relative Color Syntax & OKLCH Theme Tokens
+
+Perceptually uniform color science ensures stable contrast. Use CSS **Relative Color Syntax** to derive state colors dynamically:
+
+```css
+:root {
+  /* base color values */
+  --color-primary: oklch(62% 0.21 250); /* Brand electric blue */
+
+  /* Deriving hover states dynamically: reduce lightness, preserve chroma and hue */
+  --color-primary-hover: oklch(from var(--color-primary) calc(l - 0.08) c h);
+  --color-primary-active: oklch(from var(--color-primary) calc(l - 0.12) c h);
+
+  /* Backgrounds */
+  --bg-surface: oklch(100% 0 0);
+  --text-main: oklch(20% 0.02 250);
+}
+
+[data-theme='dark'] {
+  --bg-surface: oklch(14% 0.008 250);
+  --text-main: oklch(93% 0.003 250);
+}
+```
+
+---
+
+## 2. Spatial Grid Math & Radius Tokens
+
+Enforce an 8px spatial grid calculated mathematically to ensure alignment precision:
+
+```css
+:root {
+  --base-grid: 8px;
+
+  --space-xs: calc(var(--base-grid) * 0.5); /* 4px  - icon gaps */
+  --space-sm: calc(var(--base-grid) * 1); /* 8px  - tag paddings */
+  --space-md: calc(var(--base-grid) * 2); /* 16px - inputs */
+  --space-lg: calc(var(--base-grid) * 3); /* 24px - card padding */
+  --space-xl: calc(var(--base-grid) * 4); /* 32px - section gaps */
+}
+```
+
+### Nested Radius Formula
+
+Ensure component inner borders track correctly:
+`outer_radius = inner_radius + padding_inner`
+If container padding is `16px` and inner content radius is `8px`, then container outer radius must be exactly `24px` (`8px + 16px`).
+
+---
+
+## 3. Responsive Layouts & Container Queries
+
+Avoid viewport-level media queries for self-contained components. Use container queries to make components portable:
+
+```css
+.component-wrapper {
+  container-type: inline-size;
+  container-name: component;
+}
+
+@container component (min-width: 450px) {
+  .inner-layout {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--space-md);
+  }
+}
+```
+
+---
+
+## 4. APCA Contrast Guidelines
+
+Ensure that typography meets the APCA Lc guidelines:
+
+- Lc > 75 for body text elements.
+- Lc > 60 for large titles and headings.
+- Lc > 45 for secondary input labels and border guides.
+
+---
+
+## 🚨 Edge-Case & Failure Mode Matrix
+
+| Scenario | Risk | Mitigation Strategy |
+|:---|:---|:---|
+| **Empty or Null Inputs** | Unhandled exception or unexpected rendering collapse | Enforce fallback guards, optional chaining, and explicit empty state handlers |
+| **Network Timeout / Latency** | Hanging operations or duplicate side-effects | Implement bounded abort controllers, exponential backoff, and idempotency keys |
+| **Concurrency / Race Conditions** | Stale state overwrite or inconsistent data mutations | Use atomic transactions, mutex locking, or cancel-on-resubmit controls |
+| **Invalid Schema / Malformed Payload** | Downstream runtime errors or security injection | Validate boundary payloads with Zod/Pydantic schemas prior to execution |
+| **Resource / Memory Saturation** | OOM errors, frame drops, or memory leaks | Clean up listeners, cancel active timers, and enforce pagination/virtualization |
+
+---
+
+## 🤖 LLM-Specific Traps Table
+
+| Anti-Pattern | What AI Commonly Does Wrong | What Is Actually Correct |
+|:---|:---|:---|
+| **Uncontrolled Re-render Loop** | Mutating state inside render bodies or omitting hook dependencies | Wrap effects with explicit deps and isolate reactive derivations in useMemo |
+| **Accessibility Neglect** | Interactive <div> without role="button", tabIndex, or onKeyDown | Use semantic <button> or provide ARIA role, keyboard handlers, and focus ring |
+| **Layout Shift Flash** | Images/dynamic content without aspect-ratio or explicit dimensions | Enforce aspect-ratio or skeleton placeholders to guarantee zero CLS |
+
+---
+
+## 🏛️ Tribunal Verification & Guardrails
+
+**Active Reviewers:** `frontend-reviewer` · `type-safety` · `ui-ux-auditor` · `complexity-reviewer`
+**Slash Command:** `/review` or `/tribunal-full`
+
+### ✅ Pre-Flight Self-Audit Checklist
+
+```
+✅ Are all component props strictly typed with zero implicit "any"?
+✅ Are responsive breakpoints, fluid typography, and optical balance verified?
+✅ Is accessibility (ARIA labels, keyboard focus, contrast) validated?
+✅ Are re-renders minimized and state lifecycles cleanly separated?
+✅ Did I verify all imported UI components and icon sets actually exist?
+```
+
+### 🛑 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 test suites, compiler success, or equivalent operational proof) that your output works as intended.

package/skills/frontend-design/scripts/accessibility_checker.py

@@ -0,0 +1,183 @@
+#!/usr/bin/env python3
+"""
+Accessibility Checker - WCAG compliance audit
+Checks HTML files for accessibility issues.
+
+Usage:
+    python accessibility_checker.py <project_path>
+
+Checks:
+    - Form labels
+    - ARIA attributes
+    - Color contrast hints
+    - Keyboard navigation
+    - Semantic HTML
+"""
+
+import sys
+import json
+import re
+from pathlib import Path
+from datetime import datetime
+
+# Fix Windows console encoding
+try:
+    sys.stdout.reconfigure(encoding='utf-8', errors='replace')
+except:
+    pass
+
+
+def find_html_files(project_path: Path) -> list:
+    """Find all HTML/JSX/TSX files."""
+    patterns = ['**/*.html', '**/*.jsx', '**/*.tsx']
+    skip_dirs = {'node_modules', '.next', 'dist', 'build', '.git'}
+    
+    files = []
+    for pattern in patterns:
+        for f in project_path.glob(pattern):
+            if not any(skip in f.parts for skip in skip_dirs):
+                files.append(f)
+    
+    return files[:50]
+
+
+def check_accessibility(file_path: Path) -> list:
+    """Check a single file for accessibility issues."""
+    issues = []
+    
+    try:
+        content = file_path.read_text(encoding='utf-8', errors='ignore')
+        
+        # Check for form inputs without labels
+        inputs = re.findall(r'<input[^>]*>', content, re.IGNORECASE)
+        for inp in inputs:
+            if 'type="hidden"' not in inp.lower():
+                if 'aria-label' not in inp.lower() and 'id=' not in inp.lower():
+                    issues.append("Input without label or aria-label")
+                    break
+        
+        # Check for buttons without accessible text
+        buttons = re.findall(r'<button[^>]*>[^<]*</button>', content, re.IGNORECASE)
+        for btn in buttons:
+            # Check if button has text content or aria-label
+            if 'aria-label' not in btn.lower():
+                text = re.sub(r'<[^>]+>', '', btn)
+                if not text.strip():
+                    issues.append("Button without accessible text")
+                    break
+        
+        # Check for missing lang attribute
+        if '<html' in content.lower() and 'lang=' not in content.lower():
+            issues.append("Missing lang attribute on <html>")
+        
+        # Check for missing skip link
+        if '<main' in content.lower() or '<body' in content.lower():
+            if 'skip' not in content.lower() and '#main' not in content.lower():
+                issues.append("Consider adding skip-to-main-content link")
+        
+        # Check for click handlers without keyboard support
+        onclick_count = content.lower().count('onclick=')
+        onkeydown_count = content.lower().count('onkeydown=') + content.lower().count('onkeyup=')
+        if onclick_count > 0 and onkeydown_count == 0:
+            issues.append("onClick without keyboard handler (onKeyDown)")
+        
+        # Check for tabIndex misuse
+        if 'tabindex=' in content.lower():
+            if 'tabindex="-1"' not in content.lower() and 'tabindex="0"' not in content.lower():
+                positive_tabindex = re.findall(r'tabindex="([1-9]\d*)"', content, re.IGNORECASE)
+                if positive_tabindex:
+                    issues.append("Avoid positive tabIndex values")
+        
+        # Check for autoplay media
+        if 'autoplay' in content.lower():
+            if 'muted' not in content.lower():
+                issues.append("Autoplay media should be muted")
+        
+        # Check for role usage
+        if 'role="button"' in content.lower():
+            # Divs with role button should have tabindex
+            div_buttons = re.findall(r'<div[^>]*role="button"[^>]*>', content, re.IGNORECASE)
+            for div in div_buttons:
+                if 'tabindex' not in div.lower():
+                    issues.append("role='button' without tabindex")
+                    break
+        
+    except Exception as e:
+        issues.append(f"Error reading file: {str(e)[:50]}")
+    
+    return issues
+
+
+def main():
+    project_path = Path(sys.argv[1] if len(sys.argv) > 1 else ".").resolve()
+    
+    print(f"\n{'='*60}")
+    print(f"[ACCESSIBILITY CHECKER] WCAG Compliance Audit")
+    print(f"{'='*60}")
+    print(f"Project: {project_path}")
+    print(f"Time: {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}")
+    print("-"*60)
+    
+    # Find HTML files
+    files = find_html_files(project_path)
+    print(f"Found {len(files)} HTML/JSX/TSX files")
+    
+    if not files:
+        output = {
+            "script": "accessibility_checker",
+            "project": str(project_path),
+            "files_checked": 0,
+            "issues_found": 0,
+            "passed": True,
+            "message": "No HTML files found"
+        }
+        print(json.dumps(output, indent=2))
+        sys.exit(0)
+    
+    # Check each file
+    all_issues = []
+    
+    for f in files:
+        issues = check_accessibility(f)
+        if issues:
+            all_issues.append({
+                "file": str(f.name),
+                "issues": issues
+            })
+    
+    # Summary
+    print("\n" + "="*60)
+    print("ACCESSIBILITY ISSUES")
+    print("="*60)
+    
+    if all_issues:
+        for item in all_issues[:10]:
+            print(f"\n{item['file']}:")
+            for issue in item["issues"]:
+                print(f"  - {issue}")
+        
+        if len(all_issues) > 10:
+            print(f"\n... and {len(all_issues) - 10} more files with issues")
+    else:
+        print("No accessibility issues found!")
+    
+    total_issues = sum(len(item["issues"]) for item in all_issues)
+    # Accessibility issues are important but not blocking
+    passed = total_issues < 5  # Allow minor issues
+    
+    output = {
+        "script": "accessibility_checker",
+        "project": str(project_path),
+        "files_checked": len(files),
+        "files_with_issues": len(all_issues),
+        "issues_found": total_issues,
+        "passed": passed
+    }
+    
+    print("\n" + json.dumps(output, indent=2))
+    
+    sys.exit(0 if passed else 1)
+
+
+if __name__ == "__main__":
+    main()