tribunal-kit 9.2.4 → 9.2.6

package/skills/web-accessibility-auditor/SKILL.md

@@ -1,8 +1,8 @@
 ---
 name: web-accessibility-auditor
-description: "Use when Web Accessibility (a11y) mastery. WCAG 2.2 AA standards, semantic HTML, ARIA attributes, keyboard navigation, focus management, screen reader compatibility, color contrast, and dynamic content announcements. Use when building UI components or auditing frontend code for accessibility compliance."
-version: 5.0.0
-last-updated: 2026-09-13
+description: "Use when auditing, pen-testing, hardening, and verifying code against web accessibility auditor vulnerabilities, injection vectors, and auth flaws."
+version: 6.0.0
+last-updated: 2026-09-29
 skills:
   - fixing-accessibility
   - audit-and-fix
@@ -15,165 +15,223 @@ scripts-binding:
 
 # Web Accessibility (a11y) — Inclusive UI Mastery
 
----
-
-## 🛠️ Technical Architecture & Reference Recipes
-
----
-
-## Hallucination Traps (Read First)
-
-- ❌ Adding `role='button'` to a `<div>` instead of using `<button>` -> ✅ Native HTML elements have built-in keyboard and screen reader support
-- ❌ Using `aria-label` on elements that already have visible text -> ✅ Redundant ARIA overrides visible text for screen readers; use only when needed
-- ❌ Color as the only indicator of state -> ✅ Always pair color with icon, text, or pattern for colorblind users (1 in 12 males)
-- ❌ Assuming accessibility is a checklist to run at the end -> ✅ Build accessible from the start; retrofitting is 10x more expensive
-
----
-
----
-
-## 1. Semantic HTML over `<div>` Soup
-
-The first rule of ARIA: **Use native HTML elements whenever possible.**
-
-```html
-<!-- ❌ BAD: Meaningless markup, screen readers see nothing, no keyboard focus -->
-<div class="submit-button" onclick="submit()">Submit</div>
-
-<!-- ✅ GOOD: Native semantic element (inherits focus, Enter/Space key behavior) -->
-<button type="submit" class="button">Submit</button>
-
-<!-- ❌ BAD: Div as a link -->
-<div onclick="goToPath('/about')">About Us</div>
-
-<!-- ✅ GOOD: Native anchor -->
-<a href="/about">About Us</a>
-```
-
-### Layout Semantics
+## Mandatory Pre-Flight Context Inspection
+Before reading, generating, or refactoring code in the `web-accessibility-auditor` 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).
 
-Replace `<div class="x">` with meaning:
 
-- `<header>` / `<footer>`
-- `<nav>` (Main navigations)
-- `<main>` (The primary content)
-- `<article>` (Self-contained content blocks)
-- `<aside>` (Sidebars, callouts)
+## Activation Boundaries
+- **Activate when:** Use when auditing, pen-testing, hardening, and verifying code against web accessibility auditor vulnerabilities, injection vectors, and auth flaws.
+- **DO NOT activate when:** The task falls outside the `web-accessibility-auditor` domain or is managed by a different dedicated specialist agent.
 
----
-
-## 2. Keyboard Navigation & Focus Management
 
-Every interactive element MUST be keyboard accessible.
+## 🔁 Multi-Pass Execution Protocol
 
-```css
-/* ❌ BAD: Removing focus outlines ruins keyboard navigation */
-*:focus {
-  outline: none;
-}
+| Pass | Phase | Core Action | Adaptive Depth |
+|:---|:---|:---|:---|
+| **Pass 1** | **Understand** | Deconstruct the user's explicit objective, implicit requirements, and platform constraints. | Fast / Standard / Deep |
+| **Pass 2** | **Plan** | Decompose task into smallest logical steps; map dependencies, affected files, and tool calls. | Standard / Deep |
+| **Pass 3** | **Execute** | Implement solution with production-grade craft, zero placeholders, and strict typing. | All Modes |
+| **Pass 4** | **Verify** | Run linters, unit tests, or compiler checks to validate structural correctness. | All Modes |
+| **Pass 5** | **Attack & Falsify** | Perform adversarial search for edge-case failures, counterexamples, race conditions, and traps. | Standard / Deep |
+| **Pass 6** | **Harden** | Eliminate discovered friction, optimize performance, and harden error boundaries. | Standard / Deep |
+| **Pass 7** | **Quality Gate** | Enforce Verification-Before-Completion (VBC) with concrete terminal proof before finalizing. | All Modes |
 
-/* ✅ GOOD: Using :focus-visible for keyboard users only */
-*:focus {
-  outline: none;
-} /* Hide for click */
-*:focus-visible {
-  outline: 2px solid var(--accent-color);
-  outline-offset: 2px;
-}
-```
 
-### Managing Focus in Modals (Dialogs)
-
-When a modal opens:
-
-1. Focus must move into the modal (first focusable element).
-2. Focus must be trapped inside the modal (Tabbing loops inside it).
-3. Background must be hidden from screen readers (`aria-hidden="true"`).
-4. `Escape` key must close it.
-5. When closed, focus returns to the button that opened it.
-
-```html
-<!-- ✅ BEST: Use the native <dialog> element. It handles focus trapping automatically! -->
-<dialog id="myModal">
-  <h2>Settings</h2>
-  <button formmethod="dialog">Close</button>
-</dialog>
-<script>
-  document.getElementById('myModal').showModal();
-</script>
-```
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
 
+## Hallucination Traps (Read First)
+
+- ❌ Adding `role='button'` to a `<div>` instead of using `<button>` -> ✅ Native HTML elements have built-in keyboard and screen reader support
+- ❌ Using `aria-label` on elements that already have visible text -> ✅ Redundant ARIA overrides visible text for screen readers; use only when needed
+- ❌ Color as the only indicator of state -> ✅ Always pair color with icon, text, or pattern for colorblind users (1 in 12 males)
+- ❌ Assuming accessibility is a checklist to run at the end -> ✅ Build accessible from the start; retrofitting is 10x more expensive
+
 ---
-
-## 3. ARIA Roles & Attributes
-
-When you build complex custom widgets (like tabs or accordions), you must apply ARIA attributes to tell screen readers what it is and what state it's in.
-
-```html
-<!-- Example: Custom Accordion/Disclosure -->
-<!-- ❌ BAD: Screen reader sees plain text, doesn't know it's expandable -->
-<div class="accordion">
-  <div class="header">Advanced Settings</div>
-  <div class="content" style="display: none;">...</div>
-</div>
-
-<!-- ✅ GOOD: ARIA provides context -->
-<div class="accordion">
-  <button aria-expanded="false" aria-controls="panel-id" id="header-id">Advanced Settings</button>
-  <div id="panel-id" role="region" aria-labelledby="header-id" hidden>...</div>
-</div>
+## 1. Semantic HTML over `<div>` Soup
+
+The first rule of ARIA: **Use native HTML elements whenever possible.**
+
+```html
+<!-- ❌ BAD: Meaningless markup, screen readers see nothing, no keyboard focus -->
+<div class="submit-button" onclick="submit()">Submit</div>
+
+<!-- ✅ GOOD: Native semantic element (inherits focus, Enter/Space key behavior) -->
+<button type="submit" class="button">Submit</button>
+
+<!-- ❌ BAD: Div as a link -->
+<div onclick="goToPath('/about')">About Us</div>
+
+<!-- ✅ GOOD: Native anchor -->
+<a href="/about">About Us</a>
+```
+
+### Layout Semantics
+
+Replace `<div class="x">` with meaning:
+
+- `<header>` / `<footer>`
+- `<nav>` (Main navigations)
+- `<main>` (The primary content)
+- `<article>` (Self-contained content blocks)
+- `<aside>` (Sidebars, callouts)
+
+---
+
+## 2. Keyboard Navigation & Focus Management
+
+Every interactive element MUST be keyboard accessible.
+
+```css
+/* ❌ BAD: Removing focus outlines ruins keyboard navigation */
+*:focus {
+  outline: none;
+}
+
+/* ✅ GOOD: Using :focus-visible for keyboard users only */
+*:focus {
+  outline: none;
+} /* Hide for click */
+*:focus-visible {
+  outline: 2px solid var(--accent-color);
+  outline-offset: 2px;
+}
+```
+
+### Managing Focus in Modals (Dialogs)
+
+When a modal opens:
+
+1. Focus must move into the modal (first focusable element).
+2. Focus must be trapped inside the modal (Tabbing loops inside it).
+3. Background must be hidden from screen readers (`aria-hidden="true"`).
+4. `Escape` key must close it.
+5. When closed, focus returns to the button that opened it.
+
+```html
+<!-- ✅ BEST: Use the native <dialog> element. It handles focus trapping automatically! -->
+<dialog id="myModal">
+  <h2>Settings</h2>
+  <button formmethod="dialog">Close</button>
+</dialog>
+<script>
+  document.getElementById('myModal').showModal();
+</script>
+```
+
+---
+
+## 3. ARIA Roles & Attributes
+
+When you build complex custom widgets (like tabs or accordions), you must apply ARIA attributes to tell screen readers what it is and what state it's in.
+
+```html
+<!-- Example: Custom Accordion/Disclosure -->
+<!-- ❌ BAD: Screen reader sees plain text, doesn't know it's expandable -->
+<div class="accordion">
+  <div class="header">Advanced Settings</div>
+  <div class="content" style="display: none;">...</div>
+</div>
+
+<!-- ✅ GOOD: ARIA provides context -->
+<div class="accordion">
+  <button aria-expanded="false" aria-controls="panel-id" id="header-id">Advanced Settings</button>
+  <div id="panel-id" role="region" aria-labelledby="header-id" hidden>...</div>
+</div>
+```
+
+**Crucial ARIA states:**
+
+- `aria-expanded="true/false"`: For accordions, dropdowns, menus.
+- `aria-hidden="true"`: Removes decorative icons/containers from the screen reader tree.
+- `aria-pressed="true/false"`: For toggle buttons.
+- `aria-invalid="true"`: For invalid form fields.
+
+---
+
+## 4. Forms & Labels
+
+**Every input must have an associated label.** `placeholder` is NOT a label (it disappears when typing, causing cognitive loss).
+
+```html
+<!-- ❌ BAD -->
+<input type="text" placeholder="Email Address">
+
+<!-- ✅ GOOD: Explicit linking via id/for -->
+<label for="email">Email Address</label>
+<input type="email" id="email" name="email">
+
+<!-- ✅ GOOD: Implicit wrapping -->
+<label>
+  Email Address
+  <input type="email" name="email">
+</label>
+
+<!-- Accessible Error Messages -->
+<label for="username">Username</label>
+<input
+  type="text"
+  id="username"
+  aria-invalid="true"
+  aria-describedby="username-error"
+
+<span id="username-error" role="alert" class="error-msg">Username is already taken</span>
+```
+
+---
+
+## 5. Live Regions (Dynamic Updates)
+
+When content changes dynamically without a page reload (e.g., Toast notifications, AI responding, search results updating), the screen reader needs to be notified.
+
+```html
+<!-- 
+  role="alert": Interrupts the user immediately (e.g., error).
+  role="status" (or aria-live="polite"): Waits until the user pauses, then announces.
+-->
+<div aria-live="polite" class="sr-only">
+  <!-- JavaScript injects: "3 items found" here, screen reader reads it aloud -->
+</div>
 ```
 
-**Crucial ARIA states:**
+## 🚨 Edge-Case & Failure Mode Matrix
 
-- `aria-expanded="true/false"`: For accordions, dropdowns, menus.
-- `aria-hidden="true"`: Removes decorative icons/containers from the screen reader tree.
-- `aria-pressed="true/false"`: For toggle buttons.
-- `aria-invalid="true"`: For invalid form fields.
+| Scenario | Risk | Production Mitigation |
+|:---|:---|:---|
+| **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 |
 
----
 
-## 4. Forms & Labels
+## 🏛️ Tribunal Verification & Guardrails
 
-**Every input must have an associated label.** `placeholder` is NOT a label (it disappears when typing, causing cognitive loss).
+**Active Reviewers:** `security-auditor` · `penetration-tester` · `backend-security-expert`
+**Slash Command:** `/review` or `/tribunal-full`
 
-```html
-<!-- ❌ BAD -->
-<input type="text" placeholder="Email Address">
+### 🔬 Evidence Standard (Tri-State Verification)
+Every finding, audit statement, or completion claim must classify its factual certainty:
+- **`[OBSERVED]`**: Directly confirmed in the codebase or verified via executed terminal command.
+- **`[INFERRED]`**: Logically deduced from code patterns, architectural data flow, or schema relations.
+- **`[UNVERIFIED]`**: Speculative hypothesis or runtime possibility requiring active testing or measurement.
 
-<!-- ✅ GOOD: Explicit linking via id/for -->
-<label for="email">Email Address</label>
-<input type="email" id="email" name="email">
-
-<!-- ✅ GOOD: Implicit wrapping -->
-<label>
-  Email Address
-  <input type="email" name="email">
-</label>
-
-<!-- Accessible Error Messages -->
-<label for="username">Username</label>
-<input
-  type="text"
-  id="username"
-  aria-invalid="true"
-  aria-describedby="username-error"
-
-<span id="username-error" role="alert" class="error-msg">Username is already taken</span>
+### ✅ Pre-Flight Self-Audit Checklist
 ```
-
----
-
-## 5. Live Regions (Dynamic Updates)
-
-When content changes dynamically without a page reload (e.g., Toast notifications, AI responding, search results updating), the screen reader needs to be notified.
-
-```html
-<!-- 
-  role="alert": Interrupts the user immediately (e.g., error).
-  role="status" (or aria-live="polite"): Waits until the user pauses, then announces.
--->
-<div aria-live="polite" class="sr-only">
-  <!-- JavaScript injects: "3 items found" here, screen reader reads it aloud -->
-</div>
+✅ Are user inputs sanitized and treated as untrusted data at system boundaries?
+✅ Are secrets loaded strictly via environment variables with zero hardcoding?
+✅ Is least-privilege enforcement active on APIs, tokens, and storage buckets?
+✅ Are prompt-injection delimiters and sanitizers wrapped around LLM inputs?
+✅ Did I verify encryption in transit and at rest for sensitive data?
 ```
+
+### 🛑 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/web-design-guidelines/SKILL.md

@@ -1,8 +1,8 @@
 ---
 name: web-design-guidelines
-description: "Use when Enforces next-generation web interface guidelines, covering APCA contrast thresholds, Core Web Vitals, and sustainable battery-efficient UI rendering."
-version: 5.0.0
-last-updated: 2026-09-13
+description: "Use when auditing, pen-testing, hardening, and verifying code against web design guidelines vulnerabilities, injection vectors, and auth flaws."
+version: 6.0.0
+last-updated: 2026-09-29
 skills:
   - baseline-ui
   - better-colors
@@ -15,35 +15,105 @@ scripts-binding:
 
 # Web Design Guidelines — Core Web Vitals & Sustainable UI
 
----
+## Mandatory Pre-Flight Context Inspection
+Before reading, generating, or refactoring code in the `web-design-guidelines` 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 auditing, pen-testing, hardening, and verifying code against web design guidelines vulnerabilities, injection vectors, and auth flaws.
+- **DO NOT activate when:** The task falls outside the `web-design-guidelines` domain or is managed by a different dedicated specialist agent.
+
+
+## 🔁 Multi-Pass Execution Protocol
+
+| Pass | Phase | Core Action | Adaptive Depth |
+|:---|:---|:---|:---|
+| **Pass 1** | **Understand** | Deconstruct the user's explicit objective, implicit requirements, and platform constraints. | Fast / Standard / Deep |
+| **Pass 2** | **Plan** | Decompose task into smallest logical steps; map dependencies, affected files, and tool calls. | Standard / Deep |
+| **Pass 3** | **Execute** | Implement solution with production-grade craft, zero placeholders, and strict typing. | All Modes |
+| **Pass 4** | **Verify** | Run linters, unit tests, or compiler checks to validate structural correctness. | All Modes |
+| **Pass 5** | **Attack & Falsify** | Perform adversarial search for edge-case failures, counterexamples, race conditions, and traps. | Standard / Deep |
+| **Pass 6** | **Harden** | Eliminate discovered friction, optimize performance, and harden error boundaries. | Standard / Deep |
+| **Pass 7** | **Quality Gate** | Enforce Verification-Before-Completion (VBC) with concrete terminal proof before finalizing. | All Modes |
+
 
+---
+
 ## 🛠️ Technical Architecture & Reference Recipes
 
----
+---
+
+## 1. APCA Contrast Guidelines (WCAG 3.0 Base)
+
+APCA calculates lightness contrast mathematically based on font size and background luminance.
+
+- **Body Text:** Lc > 75 is required for body text readability.
+- **Headings:** Lc > 60 is required for headings.
+- **Controls/Borders:** Lc > 45 is required for visual divider borders and focus rings.
+
+---
+
+## 2. Core Web Vitals (CWV)
+
+- **Largest Contentful Paint (LCP < 1.5s):** Hero banners and images must use the `fetchpriority="high"` tag. Avoid blocking layout paints with heavy JS scripts.
+- **Interaction to Next Paint (INP < 100ms):** Enforce main-thread speed. Wrap heavy operations in `startTransition` or React's deferred values.
+- **Cumulative Layout Shift (CLS = 0.00):** Image nodes must declare explicit width/height dimensions or aspect-ratios. Pre-allocate spaces for dynamic elements.
+
+---
+
+## 3. Sustainable & Battery-Efficient UI
+
+- **Compositor Properties:** Transitions and animations must only animate `transform` and `opacity`. Animating properties like `margin`, `width`, `height`, or `top` triggers layout reflows and wastes CPU cycles.
+- **OLED Blacks:** For dark luxury themes, base backgrounds must use OLED-friendly blacks (`oklch(0.08 0.005 250)` or `#000000`) to physically turn off pixels on compatible screens.
+- **Font Subsetting:** Self-host typography files and use variable fonts to minimize network payloads.
+- **Image Formats:** Serve images exclusively in AVIF or WebP formats.
 
----
+## 🚨 Edge-Case & Failure Mode Matrix
 
-## 1. APCA Contrast Guidelines (WCAG 3.0 Base)
+| Scenario | Risk | Production Mitigation |
+|:---|:---|:---|
+| **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 |
 
-APCA calculates lightness contrast mathematically based on font size and background luminance.
 
-- **Body Text:** Lc > 75 is required for body text readability.
-- **Headings:** Lc > 60 is required for headings.
-- **Controls/Borders:** Lc > 45 is required for visual divider borders and focus rings.
+## 🤖 LLM-Specific Traps Table
 
----
+| Anti-Pattern | What AI Commonly Does Wrong | What Is Actually Correct |
+|:---|:---|:---|
+| **Hardcoded Secret Pattern** | Committing API keys, tokens, or private salts into source code | Load credentials strictly via runtime environment variables and secret stores |
+| **Prompt Injection Surface** | Directly concatenating untrusted user input into LLM system prompts | Wrap user content in isolated delimiters and strip injection control sequences |
+| **Missing Authorization Check** | Relying only on authentication token presence without checking tenant/object RBAC | Verify user permissions against the specific target record ID before mutation |
 
-## 2. Core Web Vitals (CWV)
 
-- **Largest Contentful Paint (LCP < 1.5s):** Hero banners and images must use the `fetchpriority="high"` tag. Avoid blocking layout paints with heavy JS scripts.
-- **Interaction to Next Paint (INP < 100ms):** Enforce main-thread speed. Wrap heavy operations in `startTransition` or React's deferred values.
-- **Cumulative Layout Shift (CLS = 0.00):** Image nodes must declare explicit width/height dimensions or aspect-ratios. Pre-allocate spaces for dynamic elements.
+## 🏛️ Tribunal Verification & Guardrails
 
----
+**Active Reviewers:** `security-auditor` · `penetration-tester` · `backend-security-expert`
+**Slash Command:** `/review` or `/tribunal-full`
 
-## 3. Sustainable & Battery-Efficient UI
+### 🔬 Evidence Standard (Tri-State Verification)
+Every finding, audit statement, or completion claim must classify its factual certainty:
+- **`[OBSERVED]`**: Directly confirmed in the codebase or verified via executed terminal command.
+- **`[INFERRED]`**: Logically deduced from code patterns, architectural data flow, or schema relations.
+- **`[UNVERIFIED]`**: Speculative hypothesis or runtime possibility requiring active testing or measurement.
 
-- **Compositor Properties:** Transitions and animations must only animate `transform` and `opacity`. Animating properties like `margin`, `width`, `height`, or `top` triggers layout reflows and wastes CPU cycles.
-- **OLED Blacks:** For dark luxury themes, base backgrounds must use OLED-friendly blacks (`oklch(0.08 0.005 250)` or `#000000`) to physically turn off pixels on compatible screens.
-- **Font Subsetting:** Self-host typography files and use variable fonts to minimize network payloads.
-- **Image Formats:** Serve images exclusively in AVIF or WebP formats.
+### ✅ Pre-Flight Self-Audit Checklist
+```
+✅ Are user inputs sanitized and treated as untrusted data at system boundaries?
+✅ Are secrets loaded strictly via environment variables with zero hardcoding?
+✅ Is least-privilege enforcement active on APIs, tokens, and storage buckets?
+✅ Are prompt-injection delimiters and sanitizers wrapped around LLM inputs?
+✅ Did I verify encryption in transit and at rest for sensitive data?
+```
+
+### 🛑 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/web-quality-audit/SKILL.md

@@ -1,8 +1,8 @@
 ---
 name: web-quality-audit
-description: "Use when Web quality auditing skill for Lighthouse-style analysis across Performance, Accessibility, Best Practices, and SEO signals."
-version: 5.0.0
-last-updated: 2026-09-13
+description: "Use when auditing, pen-testing, hardening, and verifying code against web quality audit vulnerabilities, injection vectors, and auth flaws."
+version: 6.0.0
+last-updated: 2026-09-29
 skills:
   - web-design-guidelines
   - fixing-accessibility
@@ -15,33 +15,103 @@ scripts-binding:
 
 # Web Quality Audit — Lighthouse & Core Web Vitals
 
----
+## Mandatory Pre-Flight Context Inspection
+Before reading, generating, or refactoring code in the `web-quality-audit` 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 auditing, pen-testing, hardening, and verifying code against web quality audit vulnerabilities, injection vectors, and auth flaws.
+- **DO NOT activate when:** The task falls outside the `web-quality-audit` domain or is managed by a different dedicated specialist agent.
+
+
+## 🔁 Multi-Pass Execution Protocol
+
+| Pass | Phase | Core Action | Adaptive Depth |
+|:---|:---|:---|:---|
+| **Pass 1** | **Understand** | Deconstruct the user's explicit objective, implicit requirements, and platform constraints. | Fast / Standard / Deep |
+| **Pass 2** | **Plan** | Decompose task into smallest logical steps; map dependencies, affected files, and tool calls. | Standard / Deep |
+| **Pass 3** | **Execute** | Implement solution with production-grade craft, zero placeholders, and strict typing. | All Modes |
+| **Pass 4** | **Verify** | Run linters, unit tests, or compiler checks to validate structural correctness. | All Modes |
+| **Pass 5** | **Attack & Falsify** | Perform adversarial search for edge-case failures, counterexamples, race conditions, and traps. | Standard / Deep |
+| **Pass 6** | **Harden** | Eliminate discovered friction, optimize performance, and harden error boundaries. | Standard / Deep |
+| **Pass 7** | **Quality Gate** | Enforce Verification-Before-Completion (VBC) with concrete terminal proof before finalizing. | All Modes |
 
+
+---
+
 ## 🛠️ Technical Architecture & Reference Recipes
 
----
+---
+
+## 4 Quality Pillars
+
+### 1. Core Web Vitals (Performance)
+
+- **Largest Contentful Paint (LCP)**: Target $\le 2.5\text{s}$. Preload hero images using `<link rel="preload" as="image">` and fetchpriority="high".
+- **Interaction to Next Paint (INP)**: Target $\le 200\text{ms}$. Break long JS tasks into smaller chunks using `setTimeout` or `requestIdleCallback`.
+- **Cumulative Layout Shift (CLS)**: Target $\le 0.1$. Set explicit `width` and `height` attributes on images and videos; reserve space for dynamic ads/banners.
+
+### 2. Accessibility (a11y)
+
+- Target 100/100 score. Verify all interactive controls have accessible names, proper contrast ($\ge 4.5:1$), and complete keyboard accessibility.
+
+### 3. Web Best Practices
+
+- Serve images in modern formats (`.webp` or `.avif`).
+- Enforce HTTPS security headers (`Content-Security-Policy`, `X-Frame-Options`, `Strict-Transport-Security`).
+- Eliminate console errors and unhandled promise rejections.
+
+### 4. Search Engine Optimization (SEO)
+
+- Valid HTML5 document structure (`<!DOCTYPE html>`, `<html>` with `lang`, single `<h1>`).
+- Robots.txt, sitemap.xml, canonical URLs, and structured JSON-LD data.
 
----
+## 🚨 Edge-Case & Failure Mode Matrix
 
-## 4 Quality Pillars
+| Scenario | Risk | Production Mitigation |
+|:---|:---|:---|
+| **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 |
 
-### 1. Core Web Vitals (Performance)
 
-- **Largest Contentful Paint (LCP)**: Target $\le 2.5\text{s}$. Preload hero images using `<link rel="preload" as="image">` and fetchpriority="high".
-- **Interaction to Next Paint (INP)**: Target $\le 200\text{ms}$. Break long JS tasks into smaller chunks using `setTimeout` or `requestIdleCallback`.
-- **Cumulative Layout Shift (CLS)**: Target $\le 0.1$. Set explicit `width` and `height` attributes on images and videos; reserve space for dynamic ads/banners.
+## 🤖 LLM-Specific Traps Table
 
-### 2. Accessibility (a11y)
+| Anti-Pattern | What AI Commonly Does Wrong | What Is Actually Correct |
+|:---|:---|:---|
+| **Hardcoded Secret Pattern** | Committing API keys, tokens, or private salts into source code | Load credentials strictly via runtime environment variables and secret stores |
+| **Prompt Injection Surface** | Directly concatenating untrusted user input into LLM system prompts | Wrap user content in isolated delimiters and strip injection control sequences |
+| **Missing Authorization Check** | Relying only on authentication token presence without checking tenant/object RBAC | Verify user permissions against the specific target record ID before mutation |
 
-- Target 100/100 score. Verify all interactive controls have accessible names, proper contrast ($\ge 4.5:1$), and complete keyboard accessibility.
 
-### 3. Web Best Practices
+## 🏛️ Tribunal Verification & Guardrails
 
-- Serve images in modern formats (`.webp` or `.avif`).
-- Enforce HTTPS security headers (`Content-Security-Policy`, `X-Frame-Options`, `Strict-Transport-Security`).
-- Eliminate console errors and unhandled promise rejections.
+**Active Reviewers:** `security-auditor` · `penetration-tester` · `backend-security-expert`
+**Slash Command:** `/review` or `/tribunal-full`
 
-### 4. Search Engine Optimization (SEO)
+### 🔬 Evidence Standard (Tri-State Verification)
+Every finding, audit statement, or completion claim must classify its factual certainty:
+- **`[OBSERVED]`**: Directly confirmed in the codebase or verified via executed terminal command.
+- **`[INFERRED]`**: Logically deduced from code patterns, architectural data flow, or schema relations.
+- **`[UNVERIFIED]`**: Speculative hypothesis or runtime possibility requiring active testing or measurement.
 
-- Valid HTML5 document structure (`<!DOCTYPE html>`, `<html>` with `lang`, single `<h1>`).
-- Robots.txt, sitemap.xml, canonical URLs, and structured JSON-LD data.
+### ✅ Pre-Flight Self-Audit Checklist
+```
+✅ Are user inputs sanitized and treated as untrusted data at system boundaries?
+✅ Are secrets loaded strictly via environment variables with zero hardcoding?
+✅ Is least-privilege enforcement active on APIs, tokens, and storage buckets?
+✅ Are prompt-injection delimiters and sanitizers wrapped around LLM inputs?
+✅ Did I verify encryption in transit and at rest for sensitive data?
+```
+
+### 🛑 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.