novahiz 0.1.0

package/bundled-skills/SKILL.md

@@ -0,0 +1,313 @@
+---
+name: android-reverse-engineering
+description: Decompile Android APK, XAPK, JAR, and AAR files using jadx or Fernflower/Vineflower. Reverse engineer Android apps, extract HTTP API endpoints (Retrofit, OkHttp, Volley), and trace call flows from UI to network layer. Use when the user wants to decompile, analyze, or reverse engineer Android packages, find API endpoints, or follow call flows. 中文触发词：反编译APK、安卓逆向、提取API、分析安卓应用、反编译安卓、逆向工程、追踪调用链、提取接口
+trigger: decompile APK|decompile XAPK|reverse engineer Android|extract API|analyze Android|jadx|fernflower|vineflower|follow call flow|decompile JAR|decompile AAR|Android reverse engineering|find API endpoints|反编译APK|安卓逆向|提取API|分析安卓应用
+---
+
+# Android Reverse Engineering
+
+Decompile Android APK, XAPK, JAR, and AAR files using jadx and Fernflower/Vineflower, trace call flows through application code and libraries, and produce structured documentation of extracted APIs. Two decompiler engines are supported — jadx for broad Android coverage and Fernflower for higher-quality output on complex Java code — and can be used together for comparison.
+
+## Prerequisites
+
+This skill requires **Java JDK 17+** and **jadx** to be installed. **Fernflower/Vineflower** and **dex2jar** are optional but recommended for better decompilation quality. Run the dependency checker to verify:
+
+```bash
+bash ${CLAUDE_PLUGIN_ROOT}/skills/android-reverse-engineering/scripts/check-deps.sh
+```
+
+On Windows (PowerShell):
+```powershell
+& "${CLAUDE_PLUGIN_ROOT}/skills/android-reverse-engineering/scripts/check-deps.ps1"
+```
+
+If anything is missing, follow the installation instructions in `${CLAUDE_PLUGIN_ROOT}/skills/android-reverse-engineering/references/setup-guide.md`.
+
+## Workflow
+
+### Phase 0: Fingerprint the App (recommended before anything else)
+
+Before installing tools or decompiling, run a fast triage to determine what
+kind of app you are looking at. **Decompiling Java is mostly useless for
+Flutter, React Native, Cordova/Capacitor, and Xamarin apps** — the real code
+lives elsewhere. The fingerprint script tells you which.
+
+```bash
+bash ${CLAUDE_PLUGIN_ROOT}/skills/android-reverse-engineering/scripts/fingerprint.sh <file.apk|file.xapk>
+```
+
+It prints, in one screen:
+
+- **Mobile framework** (Flutter / React Native / Cordova / Xamarin / Native Kotlin / etc.) with the file marker that triggered the verdict.
+- **HTTP stack** (Retrofit, OkHttp, Ktor, Apollo, Volley) detected via DEX string scan — works even when class names are obfuscated.
+- **DI / serialization** signals (Hilt, Dagger, Koin, kotlinx.serialization, Moshi, Gson, Jackson).
+- **Obfuscation level** estimate based on root-level short-named packages.
+- **Notable third-party SDKs** (AppsFlyer, Datadog, Sentry, Firebase, payment SDKs, support/chat SDKs, etc.).
+- **Consolidated native libraries** across the base APK and all splits — XAPK split bundles often place `.so` files in `config.<abi>.apk`, not in `base.apk`.
+- **Recommended next step**, which differs by framework (e.g. for Flutter the script suggests `blutter` / `strings libapp.so` rather than jadx).
+
+If the fingerprint says the app is Flutter / RN / Cordova / Xamarin, **stop**
+and switch to the framework-appropriate tooling. Phases 1–5 below assume a
+native (Java/Kotlin) Android app.
+
+### Phase 1: Verify and Install Dependencies
+
+Before decompiling, confirm that the required tools are available — and install any that are missing.
+
+**Action**: Run the dependency check script.
+
+```bash
+bash ${CLAUDE_PLUGIN_ROOT}/skills/android-reverse-engineering/scripts/check-deps.sh
+```
+
+On Windows (PowerShell):
+```powershell
+& "${CLAUDE_PLUGIN_ROOT}/skills/android-reverse-engineering/scripts/check-deps.ps1"
+```
+
+The output contains machine-readable lines:
+- `INSTALL_REQUIRED:<dep>` — must be installed before proceeding
+- `INSTALL_OPTIONAL:<dep>` — recommended but not blocking
+
+**If required dependencies are missing** (exit code 1), install them automatically:
+
+```bash
+bash ${CLAUDE_PLUGIN_ROOT}/skills/android-reverse-engineering/scripts/install-dep.sh <dep>
+```
+
+On Windows (PowerShell):
+```powershell
+& "${CLAUDE_PLUGIN_ROOT}/skills/android-reverse-engineering/scripts/install-dep.ps1" <dep>
+```
+
+The install script detects the OS and package manager, then:
+- Installs without sudo when possible (downloads to `~/.local/share/`, symlinks in `~/.local/bin/`)
+- Uses sudo and the system package manager when necessary (apt, dnf, pacman)
+- If sudo is needed but unavailable or the user declines, it prints the exact manual command and exits with code 2 — show these instructions to the user
+
+**Windows notes**: The PowerShell install script uses `winget`, `scoop`, or `choco` (in that order). If none are available, it downloads directly to `%USERPROFILE%\.local\share\` and adds the directory to the user's PATH. After running `install-dep.ps1`, the PATH is persisted but the current terminal session may not see it. The `check-deps.ps1` and `decompile.ps1` scripts automatically refresh PATH from the user environment, so re-running them will find newly installed tools without restarting the terminal.
+
+**For optional dependencies**, ask the user if they want to install them. Vineflower and dex2jar are recommended for best results.
+
+After installation, re-run `check-deps.sh` to confirm everything is in place. Do not proceed to Phase 2 until all required dependencies are OK.
+
+### Phase 2: Decompile
+
+Use the decompile wrapper script to process the target file. The script supports three engines: `jadx`, `fernflower`, and `both`.
+
+**Action**: Choose the engine and run the decompile script. The script handles APK, XAPK, JAR, and AAR files.
+
+```bash
+bash ${CLAUDE_PLUGIN_ROOT}/skills/android-reverse-engineering/scripts/decompile.sh [OPTIONS] <file>
+```
+
+On Windows (PowerShell):
+```powershell
+& "${CLAUDE_PLUGIN_ROOT}/skills/android-reverse-engineering/scripts/decompile.ps1" [OPTIONS] <file>
+```
+
+For **XAPK** files (ZIP bundles containing multiple APKs, used by APKPure and similar stores): the script automatically extracts the archive, identifies all APK files inside (base + split APKs), and decompiles each one into a separate subdirectory. The XAPK manifest is copied to the output for reference.
+
+**Split/bundled APK detection**: Some APKs are actually bundle wrappers — the outer APK contains `base.apk` plus `split_config.*.apk` files inside its resources directory. When this happens, jadx will decompile the thin wrapper and produce very few Java files. The decompile scripts automatically detect this (≤10 Java files + inner APKs present) and re-decompile `base.apk` into an `<output>/base/` subdirectory. Config-only splits (ABI, language, density) are skipped. The main decompiled source will be in `<output>/base/sources/`.
+
+Options:
+- `-o <dir>` — Custom output directory (default: `<filename>-decompiled`)
+- `--deobf` — Enable deobfuscation (recommended for obfuscated apps)
+- `--no-res` — Skip resources, decompile code only (faster)
+- `--engine ENGINE` — `jadx` (default), `fernflower`, or `both`
+
+**Engine selection strategy**:
+
+| Situation | Engine |
+|---|---|
+| First pass on any APK | `jadx` (fastest, handles resources) |
+| JAR/AAR library analysis | `fernflower` (better Java output) |
+| jadx output has warnings/broken code | `both` (compare and pick best per class) |
+| Complex lambdas, generics, streams | `fernflower` |
+| Quick overview of a large APK | `jadx --no-res` |
+
+When using `--engine both`, the outputs go into `<output>/jadx/` and `<output>/fernflower/` respectively, with a comparison summary at the end showing file counts and jadx warning counts. Review classes with jadx warnings in the Fernflower output for better code.
+
+For APK files with Fernflower, the script automatically uses dex2jar as an intermediate step. dex2jar must be installed for this to work.
+
+See `${CLAUDE_PLUGIN_ROOT}/skills/android-reverse-engineering/references/jadx-usage.md` and `${CLAUDE_PLUGIN_ROOT}/skills/android-reverse-engineering/references/fernflower-usage.md` for the full CLI references.
+
+### Phase 3: Analyze Structure
+
+Navigate the decompiled output to understand the app's architecture.
+
+**Actions**:
+
+1. **Read AndroidManifest.xml** from `<output>/resources/AndroidManifest.xml`:
+   - Identify the main launcher Activity
+   - List all Activities, Services, BroadcastReceivers, ContentProviders
+   - Note permissions (especially `INTERNET`, `ACCESS_NETWORK_STATE`)
+   - Find the application class (`android:name` on `<application>`)
+
+2. **Survey the package structure** under `<output>/sources/`:
+   - Identify the main app package and sub-packages
+   - Distinguish app code from third-party libraries
+   - Look for packages named `api`, `network`, `data`, `repository`, `service`, `retrofit`, `http` — these are where API calls live
+
+3. **Read every `BuildConfig.java`** — these are almost never obfuscated and frequently leak the highest-signal constants in the entire APK (base URLs, flavor names, build type, third-party API keys, feature flags):
+   ```bash
+   find <output>/sources -name BuildConfig.java -exec grep -H '=' {} \;
+   ```
+   Each Gradle module emits its own `BuildConfig`, so expect 1–N hits. Read all of them.
+
+4. **Identify the architecture pattern**:
+   - MVP: look for `Presenter` classes
+   - MVVM: look for `ViewModel` classes and `LiveData`/`StateFlow`
+   - Clean Architecture: look for `domain`, `data`, `presentation` packages
+   - This informs where to look for network calls in the next phases
+
+### Phase 3.5: Recover Kotlin Class Names (only for obfuscated Kotlin apps)
+
+If Phase 0 reported moderate / high obfuscation **and** the app is Kotlin
+(Compose / kotlin_module markers detected), run the metadata recovery
+script before tracing call flows. R8 obfuscates JVM symbols but cannot
+strip Kotlin metadata strings, so original FQNs leak through
+`@DebugMetadata` and `@Metadata.d2`.
+
+```bash
+bash ${CLAUDE_PLUGIN_ROOT}/skills/android-reverse-engineering/scripts/recover-kotlin-names.sh \
+    <output>/sources <output>/mapping
+```
+
+Then use the lookup helper instead of plain grep — every hit comes
+annotated with the owning class's real name:
+
+```bash
+bash ${CLAUDE_PLUGIN_ROOT}/skills/android-reverse-engineering/scripts/lookup-name.sh \
+    <output>/mapping --grep '"/api/' <output>/sources
+```
+
+Typical recovery on a real-world Kotlin app: ~100% of `*Repository` /
+`*ViewModel` / `*UseCase` / `*Impl` classes, ~80% of DTOs.
+
+See `${CLAUDE_PLUGIN_ROOT}/skills/android-reverse-engineering/references/kotlin-name-recovery.md`
+for the full technique and limitations.
+
+### Phase 4: Trace Call Flows
+
+Follow execution paths from user-facing entry points down to network calls.
+
+**Actions**:
+
+1. **Start from entry points**: Read the main Activity or Application class identified in Phase 3.
+
+2. **Follow the initialization chain**: Application.onCreate() often sets up the HTTP client, base URL, and DI framework. Read this first.
+
+3. **Trace user actions**: From an Activity, follow:
+   - `onCreate()` → view setup → click listeners
+   - Click handler → ViewModel/Presenter method
+   - ViewModel → Repository → API service interface
+   - API service → actual HTTP call
+
+4. **Map DI bindings** (if Dagger/Hilt is used): Find `@Module` classes to understand which implementations are provided for which interfaces.
+
+5. **Handle obfuscated code**: When class names are mangled, use string literals and library API calls as anchors. Retrofit annotations and URL strings are never obfuscated.
+
+See `${CLAUDE_PLUGIN_ROOT}/skills/android-reverse-engineering/references/call-flow-analysis.md` for detailed techniques and grep commands.
+
+### Phase 5: Extract and Document APIs
+
+Find all API endpoints and produce structured documentation.
+
+**Action**: Run the API search script for a broad sweep.
+
+```bash
+bash ${CLAUDE_PLUGIN_ROOT}/skills/android-reverse-engineering/scripts/find-api-calls.sh <output>/sources/
+```
+
+On Windows (PowerShell):
+```powershell
+& "${CLAUDE_PLUGIN_ROOT}/skills/android-reverse-engineering/scripts/find-api-calls.ps1" <output>/sources/
+```
+
+Targeted searches:
+```bash
+# Only Retrofit
+bash ${CLAUDE_PLUGIN_ROOT}/skills/android-reverse-engineering/scripts/find-api-calls.sh <output>/sources/ --retrofit
+
+# Only hardcoded URLs
+bash ${CLAUDE_PLUGIN_ROOT}/skills/android-reverse-engineering/scripts/find-api-calls.sh <output>/sources/ --urls
+
+# Only auth patterns
+bash ${CLAUDE_PLUGIN_ROOT}/skills/android-reverse-engineering/scripts/find-api-calls.sh <output>/sources/ --auth
+```
+
+On Windows (PowerShell):
+```powershell
+# Only Retrofit
+& "${CLAUDE_PLUGIN_ROOT}/skills/android-reverse-engineering/scripts/find-api-calls.ps1" <output>/sources/ -Retrofit
+
+# Only hardcoded URLs
+& "${CLAUDE_PLUGIN_ROOT}/skills/android-reverse-engineering/scripts/find-api-calls.ps1" <output>/sources/ -Urls
+
+# Only auth patterns
+& "${CLAUDE_PLUGIN_ROOT}/skills/android-reverse-engineering/scripts/find-api-calls.ps1" <output>/sources/ -Auth
+```
+
+Document the endpoints in **two tiers** — going deep on every endpoint is
+prohibitively expensive on apps with 100+ paths, and most of them do not
+warrant it. Always produce Tier 1; expand Tier 2 only for the endpoints
+that matter.
+
+#### Tier 1 — flat inventory (always)
+
+A single table covering every discovered endpoint. Aim for one line each;
+if you cannot determine a column, write `?`.
+
+| Host | Method | Path | Auth | Source file |
+|------|--------|------|------|-------------|
+| `api.example.com` | GET | `/v1/users/profile` | Bearer | `com/example/api/UserApi.java` |
+| `api.example.com` | POST | `/v1/auth/login` | none | `com/example/api/AuthApi.java` |
+
+This table answers "what does the backend look like" in one screen and
+takes ~5 minutes to produce from the `--paths` output even on a large app.
+
+#### Tier 2 — per-endpoint detail (only for high-value endpoints)
+
+Reserve the detailed format for the few endpoints that actually need it:
+
+- the entire authentication flow (login, refresh, logout, OTP/SMS, anonymous, registration)
+- payment / checkout / order-creation endpoints
+- anything the user explicitly asked about
+- anything that looked unusual during the scan (custom signing, undocumented headers, etc.)
+
+```markdown
+### `METHOD /path`
+
+- **Source**: `com.example.api.ApiService` (ApiService.java:42)
+- **Base URL**: `https://api.example.com/v1`
+- **Path params**: `id` (String)
+- **Query params**: `page` (int), `limit` (int)
+- **Headers**: `Authorization: Bearer <token>`
+- **Request body**: `{ "email": "string", "password": "string" }`
+- **Response**: `ApiResponse<User>`
+- **Called from**: `LoginActivity → LoginViewModel → UserRepository → ApiService`
+```
+
+As a default, do not produce Tier 2 entries for more than ~10 endpoints
+unless the user explicitly asks for more — Tier 1 plus a Tier 2 deep dive
+on auth + 1-2 key flows is what most consumers of this work actually want.
+
+See `${CLAUDE_PLUGIN_ROOT}/skills/android-reverse-engineering/references/api-extraction-patterns.md` for library-specific search patterns and the full documentation template.
+
+## Output
+
+At the end of the workflow, deliver:
+
+1. **Decompiled source** in the output directory
+2. **Architecture summary** — app structure, main packages, pattern used
+3. **API documentation** — all discovered endpoints in the format above
+4. **Call flow map** — key paths from UI to network (especially authentication and main features)
+
+## References
+
+- `${CLAUDE_PLUGIN_ROOT}/skills/android-reverse-engineering/references/setup-guide.md` — Installing Java, jadx, Fernflower/Vineflower, dex2jar, and optional tools
+- `${CLAUDE_PLUGIN_ROOT}/skills/android-reverse-engineering/references/jadx-usage.md` — jadx CLI options and workflows
+- `${CLAUDE_PLUGIN_ROOT}/skills/android-reverse-engineering/references/fernflower-usage.md` — Fernflower/Vineflower CLI options, when to use, APK workflow
+- `${CLAUDE_PLUGIN_ROOT}/skills/android-reverse-engineering/references/api-extraction-patterns.md` — Library-specific search patterns and documentation template
+- `${CLAUDE_PLUGIN_ROOT}/skills/android-reverse-engineering/references/call-flow-analysis.md` — Techniques for tracing call flows in decompiled code

package/bundled-skills/a11y-audit/SKILL.md

@@ -0,0 +1,211 @@
+---
+name: "a11y-audit"
+description: "Accessibility audit skill for scanning, fixing, and verifying WCAG 2.2 Level A and AA compliance across React, Next.js, Vue, Angular, Svelte, and plain HTML codebases. Use when auditing accessibility, fixing a11y violations, checking color contrast, generating compliance reports, or integrating accessibility checks into CI/CD pipelines."
+---
+
+# Accessibility Audit
+
+WCAG 2.2 Accessibility Audit and Remediation Skill
+
+## Description
+
+The a11y-audit skill provides a complete accessibility audit pipeline for modern web applications. It implements a three-phase workflow -- Scan, Fix, Verify -- that identifies WCAG 2.2 Level A and AA violations, generates exact fix code per framework, and produces stakeholder-ready compliance reports.
+
+For every violation it finds, it provides the precise before/after code fix tailored to your framework (React, Next.js, Vue, Angular, Svelte, or plain HTML).
+
+**What this skill does:**
+
+1. **Scans** your codebase for every WCAG 2.2 Level A and AA violation, categorized by severity (Critical, Major, Minor)
+2. **Fixes** each violation with framework-specific before/after code patterns
+3. **Verifies** that fixes resolve the original violations and introduces no regressions
+4. **Reports** findings in a structured format suitable for developers, PMs, and compliance stakeholders
+5. **Integrates** into CI/CD pipelines to prevent accessibility regressions
+
+## Features
+
+| Feature | Description |
+|---------|-------------|
+| **Full WCAG 2.2 Scan** | Checks all Level A and AA success criteria across your codebase |
+| **Framework Detection** | Auto-detects React, Next.js, Vue, Angular, Svelte, or plain HTML |
+| **Severity Classification** | Categorizes each violation as Critical, Major, or Minor |
+| **Fix Code Generation** | Produces before/after code diffs for every issue |
+| **Color Contrast Checker** | Validates foreground/background pairs against AA and AAA ratios |
+| **Compliance Reporting** | Generates stakeholder reports with pass/fail summaries |
+| **CI/CD Integration** | GitHub Actions, GitLab CI, Azure DevOps pipeline configs |
+| **Keyboard Navigation Audit** | Detects missing focus management and tab order issues |
+| **ARIA Validation** | Checks for incorrect, redundant, or missing ARIA attributes |
+
+### Severity Definitions
+
+| Severity | Definition | Example | SLA |
+|----------|-----------|---------|-----|
+| **Critical** | Blocks access for entire user groups | Missing alt text, no keyboard access to navigation | Fix before release |
+| **Major** | Significant barrier that degrades experience | Insufficient color contrast, missing form labels | Fix within current sprint |
+| **Minor** | Usability issue that causes friction | Redundant ARIA roles, suboptimal heading hierarchy | Fix within next 2 sprints |
+
+## Usage
+
+### Quick Start
+
+```bash
+# Scan entire project
+python scripts/a11y_scanner.py /path/to/project
+
+# Scan with JSON output for tooling
+python scripts/a11y_scanner.py /path/to/project --json
+
+# Check color contrast for specific values
+python scripts/contrast_checker.py --fg "#777777" --bg "#ffffff"
+
+# Check contrast across a CSS/Tailwind file
+python scripts/contrast_checker.py --file /path/to/styles.css
+```
+
+### Slash Command
+
+```
+/a11y-audit                    # Audit current project
+/a11y-audit --scope src/       # Audit specific directory
+/a11y-audit --fix              # Audit and auto-apply fixes
+/a11y-audit --report           # Generate stakeholder report
+/a11y-audit --ci               # Output CI-compatible results
+```
+
+### Three-Phase Workflow
+
+**Phase 1: Scan** -- Walk the source tree, detect framework, apply rule set.
+
+```bash
+python scripts/a11y_scanner.py /path/to/project --format table
+```
+
+**Phase 2: Fix** -- Apply framework-specific fixes for each violation.
+
+> See [references/framework-a11y-patterns.md](references/framework-a11y-patterns.md) for the complete fix patterns catalog.
+
+**Phase 3: Verify** -- Re-run the scanner to confirm fixes and check for regressions.
+
+```bash
+python scripts/a11y_scanner.py /path/to/project --baseline audit-baseline.json
+```
+
+## Example: React Component Audit
+
+```tsx
+// BEFORE: src/components/ProductCard.tsx
+function ProductCard({ product }) {
+  return (
+    <div onClick={() => navigate(`/product/${product.id}`)}>
+      <img src={product.image} />
+      <div style={{ color: '#aaa', fontSize: '12px' }}>{product.name}</div>
+      <span style={{ color: '#999' }}>${product.price}</span>
+    </div>
+  );
+}
+```
+
+| # | WCAG | Severity | Issue |
+|---|------|----------|-------|
+| 1 | 1.1.1 | Critical | `<img>` missing `alt` attribute |
+| 2 | 2.1.1 | Critical | `<div onClick>` not keyboard accessible |
+| 3 | 1.4.3 | Major | Color `#aaa` on white fails contrast (2.32:1, needs 4.5:1) |
+| 4 | 1.4.3 | Major | Color `#999` on white fails contrast (2.85:1, needs 4.5:1) |
+| 5 | 4.1.2 | Major | Interactive element missing role and accessible name |
+
+```tsx
+// AFTER: src/components/ProductCard.tsx
+function ProductCard({ product }) {
+  return (
+    <a href={`/product/${product.id}`} className="product-card"
+       aria-label={`View ${product.name} - $${product.price}`}>
+      <img src={product.image} alt={product.imageAlt || product.name} />
+      <div style={{ color: '#595959', fontSize: '12px' }}>{product.name}</div>
+      <span style={{ color: '#767676' }}>${product.price}</span>
+    </a>
+  );
+}
+```
+
+> See [references/examples-by-framework.md](references/examples-by-framework.md) for Vue, Angular, Next.js, and Svelte examples.
+
+## Tools Reference
+
+### a11y_scanner.py
+
+```
+Usage: python scripts/a11y_scanner.py <path> [options]
+
+Options:
+  --json                  Output results as JSON
+  --format {table,csv}    Output format (default: table)
+  --severity {critical,major,minor}  Filter by minimum severity
+  --framework {react,vue,angular,svelte,html,auto}  Force framework (default: auto)
+  --baseline FILE         Compare against previous scan results
+  --report                Generate stakeholder report
+  --output FILE           Write results to file
+  --quiet                 Suppress output, exit code only
+  --ci                    CI mode: non-zero exit on critical issues
+```
+
+### contrast_checker.py
+
+```
+Usage: python scripts/contrast_checker.py [options]
+
+Options:
+  --fg COLOR              Foreground color (hex)
+  --bg COLOR              Background color (hex)
+  --file FILE             Scan CSS file for color pairs
+  --tailwind DIR          Scan directory for Tailwind color classes
+  --json                  Output results as JSON
+  --suggest               Suggest accessible alternatives for failures
+  --level {aa,aaa}        Target conformance level (default: aa)
+```
+
+## Common Pitfalls
+
+| Pitfall | Correct Approach |
+|---------|------------------|
+| `role="button"` on a `<div>` | Use native `<button>` -- includes keyboard handling for free |
+| `tabindex="0"` on everything | Only interactive elements need focus; use native elements |
+| `aria-label` on non-interactive elements | Use `aria-labelledby` pointing to visible text |
+| `display: none` for screen reader hiding | Use `.sr-only` class instead |
+| Color alone to convey meaning | Add icons, text labels, or patterns alongside color |
+| Placeholder as only label | Always provide a visible `<label>` |
+| `outline: none` without replacement | Always provide a visible focus indicator via `focus-visible` |
+| Empty `alt=""` on informational images | Informational images need descriptive alt text |
+| Skipping heading levels (h1 -> h3) | Heading levels must be sequential |
+| `onClick` without `onKeyDown` | Add keyboard support or prefer native elements |
+| Ignoring `prefers-reduced-motion` | Wrap animations in `@media (prefers-reduced-motion: no-preference)` |
+
+## Related Skills
+
+| Skill | Relationship |
+|-------|-------------|
+| **senior-frontend** | Frontend patterns used in a11y fixes |
+| **code-reviewer** | Include a11y checks in code review workflows |
+| **senior-qa** | Integration of a11y testing into QA processes |
+| **playwright-pro** | Automated browser testing with accessibility assertions |
+| **epic-design** | WCAG 2.1 AA compliant animations and scroll storytelling |
+| **tdd-guide** | Test-driven development patterns for a11y test cases |
+
+## Reference Documentation
+
+| Reference | Description |
+|-----------|-------------|
+| [wcag-quick-ref.md](references/wcag-quick-ref.md) | WCAG 2.2 Level A & AA criteria quick reference |
+| [wcag-22-new-criteria.md](references/wcag-22-new-criteria.md) | New WCAG 2.2 success criteria (Focus Appearance, Target Size, etc.) |
+| [aria-patterns.md](references/aria-patterns.md) | ARIA patterns, keyboard interaction, and live regions |
+| [framework-a11y-patterns.md](references/framework-a11y-patterns.md) | Framework-specific fix patterns (React, Vue, Angular, Svelte, HTML) |
+| [color-contrast-guide.md](references/color-contrast-guide.md) | Color contrast checker details, Tailwind palette mapping, sr-only class |
+| [ci-cd-integration.md](references/ci-cd-integration.md) | GitHub Actions, GitLab CI, Azure DevOps, pre-commit hook configs |
+| [audit-report-template.md](references/audit-report-template.md) | Stakeholder-ready audit report template |
+| [testing-checklist.md](references/testing-checklist.md) | Manual testing checklist (keyboard, screen reader, visual, forms) |
+| [examples-by-framework.md](references/examples-by-framework.md) | Full audit examples for Vue, Angular, Next.js, and Svelte |
+
+## Resources
+
+- [WCAG 2.2 Specification](https://www.w3.org/TR/WCAG22/)
+- [WAI-ARIA Authoring Practices 1.2](https://www.w3.org/WAI/ARIA/apg/)
+- [Deque axe-core Rules](https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md)
+- [eslint-plugin-jsx-a11y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y)

package/bundled-skills/a11y-audit/assets/sample-component.tsx

@@ -0,0 +1,51 @@
+// Sample React component with intentional a11y issues for testing
+import React from 'react';
+
+export function UserCard({ user, onEdit, onDelete }) {
+  return (
+    <div className="card" onClick={() => onEdit(user.id)}>
+      <img src={user.avatar} />
+      <div className="name">{user.name}</div>
+      <div className="email">{user.email}</div>
+      <div className="actions">
+        <div onClick={() => onDelete(user.id)} style={{ color: '#aaa', cursor: 'pointer' }}>
+          Delete
+        </div>
+        <a href="#">Edit</a>
+      </div>
+      <input placeholder="Add note" />
+    </div>
+  );
+}
+
+export function SearchBar() {
+  return (
+    <div>
+      <input type="text" placeholder="Search..." />
+      <div onClick={() => alert('searching')} tabIndex={5}>
+        🔍
+      </div>
+    </div>
+  );
+}
+
+export function DataTable({ rows }) {
+  return (
+    <table>
+      <tr>
+        <td><b>Name</b></td>
+        <td><b>Email</b></td>
+        <td><b>Status</b></td>
+      </tr>
+      {rows.map((row) => (
+        <tr key={row.id}>
+          <td>{row.name}</td>
+          <td>{row.email}</td>
+          <td style={{ color: row.active ? 'green' : 'red' }}>
+            {row.active ? '●' : '●'}
+          </td>
+        </tr>
+      ))}
+    </table>
+  );
+}

package/bundled-skills/a11y-audit/expected_outputs/sample-contrast-output.txt

@@ -0,0 +1,39 @@
+Contrast Check: #777777 on #ffffff
+
+  Foreground: #777777 (r=119, g=119, b=119)
+  Background: #ffffff (r=255, g=255, b=255)
+  Contrast Ratio: 4.48:1
+
+  Normal text (4.5:1 required):
+    AA:  FAIL (4.48 < 4.5)
+    AAA: FAIL (4.48 < 7.0)
+
+  Large text (3.0:1 required):
+    AA:  PASS (4.48 >= 3.0)
+    AAA: FAIL (4.48 < 4.5)
+
+  UI components (3.0:1 required):
+    AA:  PASS (4.48 >= 3.0)
+
+  Verdict: FAIL — does not meet AA for normal text
+
+---
+
+Contrast Check: #1a1a2e on #ffffff
+
+  Foreground: #1a1a2e (r=26, g=26, b=46)
+  Background: #ffffff (r=255, g=255, b=255)
+  Contrast Ratio: 17.06:1
+
+  Normal text (4.5:1 required):
+    AA:  PASS
+    AAA: PASS
+
+  Large text (3.0:1 required):
+    AA:  PASS
+    AAA: PASS
+
+  UI components (3.0:1 required):
+    AA:  PASS
+
+  Verdict: PASS — meets AAA for all categories

package/bundled-skills/a11y-audit/expected_outputs/sample-scan-output.json

@@ -0,0 +1,34 @@
+{
+  "summary": {
+    "files_scanned": 1,
+    "files_with_issues": 1,
+    "total_issues": 9,
+    "critical": 3,
+    "serious": 4,
+    "moderate": 2,
+    "minor": 0,
+    "verdict": "FAIL"
+  },
+  "findings": [
+    {
+      "severity": "critical",
+      "category": "IMG-ALT",
+      "file": "sample-component.tsx",
+      "line": 7,
+      "code": "<img src={user.avatar} />",
+      "wcag": "1.1.1",
+      "message": "Image missing alt attribute",
+      "fix": "Add alt text: alt=\"description of image\""
+    },
+    {
+      "severity": "critical",
+      "category": "KB-CLICK",
+      "file": "sample-component.tsx",
+      "line": 5,
+      "code": "<div className=\"card\" onClick={() => onEdit(user.id)}>",
+      "wcag": "2.1.1",
+      "message": "Click handler on non-interactive element without keyboard support",
+      "fix": "Use <button> or add role=\"button\", tabIndex={0}, onKeyDown"
+    }
+  ]
+}