@roopesh.yadava/qa-pack 1.0.3

package/claude/skills/SKILLS_CONTEXT.md

@@ -0,0 +1,194 @@
+# QA Skills — Context Map
+<!-- Generated by graphify from .claude/skills. Load this instead of individual SKILL.md files
+     when you only need pipeline structure. Load a specific SKILL.md only when executing that skill. -->
+
+## Global Token Rules — All Skills Must Follow
+
+These rules apply to every skill, every run. Violating them is the single biggest source of token waste.
+A 10-test run with `browser_snapshot()` per test = ~100k wasted tokens.
+
+### Browser tool rules
+
+| Operation | USE | NEVER USE | Token cost of violation |
+|-----------|-----|-----------|------------------------|
+| Screenshots | `npx playwright screenshot --full-page URL file.png` | `browser_screenshot()` | ~3k per image |
+| DOM reading | `browser_evaluate` with targeted CSS/JS | `browser_snapshot()` | ~10k per call |
+| Login selectors | ONE `browser_snapshot()` at login URL only | `browser_snapshot()` on any other page | one-time cost justified |
+| Session reuse | `--storage-state .playwright-session.json` for all CLI calls | Re-logging in each run | login round-trip wasted |
+
+### Context output rules
+
+| Content | Output to | Never output to |
+|---------|-----------|-----------------|
+| Full test reports | File (`outputs/`) | Chat |
+| Full bug descriptions | Jira via MCP | Chat |
+| Gherkin feature files | Write tool (disk) | Pasted in full to chat |
+| Step definitions | Write tool (disk) | Pasted in full to chat |
+| POM class | Write tool (disk) | Pasted in full to chat |
+| Token tracking output | Suppressed entirely | Chat |
+
+**Chat shows only:** phase announcements (1 line each), running test count, failure IDs, bug keys, final summary table.
+
+### Static file load rules
+
+| File | Load | Frequency |
+|------|------|-----------|
+| `BDD_TEMPLATES.md` | Once at Phase 1 start | Never reload in the same run |
+| `LOCATOR_PATTERNS.md` | Once at Phase 1 start | Never reload in Phase 2 or 3 |
+| `WCAG_CHECKS.md` | Once at skill start | Never reload |
+| `test-charter.md` | Once when charter starts | Never reload |
+| `context.md` | Once at qa-agent Step 0 | Never reload |
+
+After loading, reference rules by name only (e.g. "per Locator Priority Rule 1").
+**Never re-quote static content** in follow-up messages — it is already in context.
+
+### Prompt structure for cache efficiency
+
+Structure every skill invocation in this order so the stable prefix can be cached by Anthropic:
+```
+[1] STABLE (cache-eligible — never changes between runs on same product)
+    Product context (context.md) + skill instructions (SKILL.md) + static templates loaded at start
+
+[2] VARIABLE (changes every run — goes last)
+    Card ID + fetched card data + test results + current session data
+```
+
+The stable block qualifies for Anthropic prompt caching when it exceeds 1024 tokens.
+Cache TTL is 5 minutes. Keep the stable block identical across runs for the same product.
+
+---
+
+## Pipeline Overview
+
+```
+Jira Card ID (Atlassian MCP)
+         │
+         ▼
+  ┌──────────────┐
+  │   qa-agent   │  ← entry point for all paths
+  └──────┬───────┘
+         │
+    ┌────┴────┐
+    ▼         ▼
+[AUTO]      [MANUAL]
+    │            │
+    ▼            ▼ ─────────────────────────────┐
+automation  ui-test-figma (Figma MCP + Playwright CLI)
+    │            │
+    │        manual-testing (Playwright MCP)
+    │            │
+    │        bug-reporting (Atlassian MCP)
+    │            │
+    │        test-charter (REST API publish)
+    │            │
+    └────────────┘
+         │
+    Save Product Context
+    (product_context/{PRODUCT}/context.md)
+         │
+    End-to-End Testing complete
+```
+
+## Skills — One-Line Summary
+
+| Skill | Input | Output | MCP Needed |
+|-------|-------|--------|------------|
+| `qa-agent` | Jira card ID or menu choice | Dispatches to correct skill | Atlassian |
+| `automation` | Jira card ID | Gherkin + Step Defs + POM + dry-run | Atlassian, Playwright |
+| `manual-testing` | Jira card ID + app URL | Execution report + bugs + charter | Atlassian, Playwright |
+| `ui-test-figma` | Figma URL + app URL | UI mismatch report, Jira comment | Playwright (CLI+MCP), Figma (optional) |
+| `accessibility-testing` | Full page URL + Jira card (optional) | WCAG 2.1 A/AA report + Jira bugs | Playwright (CLI+MCP), Atlassian |
+| `bug-reporting` | Bug description | Bug filed on Jira card | Atlassian |
+| `test-charter` | Execution report MD file | Charter MD + published to API | Playwright (login) |
+
+## God Nodes (highest connectivity — touch these carefully)
+
+1. `automation` — 13 edges (Gherkin→StepDefs→POM chain, token tracking, Playwright MCP)
+2. `manual-testing` — 12 edges (orchestrates ui-test-figma, bug-reporting, test-charter)
+3. `qa-agent` — 7 edges (dispatches all paths, owns Full E2E Pipeline)
+4. `test-charter` — 6 edges (reads execution report, publishes to Decision Record API)
+5. `ui-test-figma` — 6 edges (Figma MCP preferred, Playwright CLI fallback)
+
+## Dispatch Map (qa-agent routes)
+
+```
+"automate CARD"      → automation
+"manual test"        → manual-testing  (calls ui-test-figma → bug-reporting → test-charter internally)
+"ui test"            → ui-test-figma   (standalone)
+"accessibility test" → accessibility-testing (standalone, URL + optional Jira card)
+"file bug"           → bug-reporting   (standalone)
+"charter"            → test-charter    (standalone)
+"full QA"            → automation THEN manual-testing → End-to-End complete
+```
+
+## Playwright Usage Guide (token budget)
+
+### Expensive (avoid unless needed)
+- `browser_snapshot()` — returns full DOM tree (10k+ tokens). Use only to read login form selectors.
+- `browser_screenshot()` without saving — returns base64 (3k+ tokens). Always save to file.
+
+### Cheap — prefer these
+- `npx playwright screenshot --browser chromium --full-page <url> <file.png>` — 0 response tokens, saves to disk
+- `browser_evaluate(targeted JS)` — targeted selector query, small response
+- `npx playwright screenshot --storage-state <auth.json> --full-page <url> <file.png>` — with session
+
+### Session save pattern (save once, reuse)
+```bash
+# After MCP login, save session to disk:
+browser_evaluate("() => JSON.stringify({ls: {...localStorage}, ss: {...sessionStorage}})")
+# Write result to .playwright-session.json
+# Later CLI screenshots use: --storage-state .playwright-session.json
+```
+
+## Token Tracking — canonical pattern (all skills follow this)
+
+**Rules:** Silent background task. Never mention in conversation. Replace `CARD_ID` with the actual card ID.
+Scripts live at `/home/user/projects/Smart-testing-with-AI-Agents/`.
+
+```bash
+PROJECT=/home/user/projects/Smart-testing-with-AI-Agents
+
+# Entry (before any work)
+SNAP=$(python3 $PROJECT/context_snapshot.py --phase start) && \
+python3 $PROJECT/track_tokens.py start --card CARD_ID $SNAP --model claude-sonnet-4-6
+
+# After each phase (repeat per checkpoint, replacing PHASE_NAME)
+SNAP=$(python3 $PROJECT/context_snapshot.py --phase PHASE_NAME) && \
+python3 $PROJECT/track_tokens.py phase --card CARD_ID --name PHASE_NAME $SNAP
+
+# Exit (after skill completes)
+SNAP=$(python3 $PROJECT/context_snapshot.py --phase end) && \
+python3 $PROJECT/track_tokens.py end --card CARD_ID $SNAP --model claude-sonnet-4-6 && \
+python3 $PROJECT/track_tokens.py report && \
+python3 $PROJECT/track_tokens.py session
+```
+
+**Phase names by skill:**
+- automation: `start` → `jira_fetch` → `gherkin_generation` → `step_definitions` → `pom_generation` → `end`
+- manual-testing: `start` → `jira_fetch` → `ui_testing` → `test_execution` → `end`
+- ui-test-figma: `start` → `login` → `comparison` → `end`
+- accessibility-testing: `start` → `login` → `a11y_checks` → `end`
+- test-charter: `start` → `end`
+
+**Tracking cache efficiency:**
+
+The `track_tokens.py report` output includes `cache_efficiency_pct` — what percentage of input tokens were served from Anthropic's prompt cache rather than re-processed.
+
+Also check `token_usage_log.json` for `cache_read_input_tokens` per phase to see exactly where cache hits occur.
+
+Target: `cache_efficiency_pct` ≥ 70 after the first run on a given product.
+First run will always be 0% (cold cache). Second and subsequent runs should cache the stable block (product context + skill instructions).
+
+## Artifact Locations
+
+| Artifact | Path |
+|----------|------|
+| Test execution report | `outputs/test-execution-[CARD]-[date].md` |
+| Test charter | `outputs/charters/[slug].md` |
+| Bug screenshots | `outputs/screenshots/T-[N]-[status].png` |
+| Accessibility report | `outputs/a11y-report-[slug]-[date].md` |
+| Accessibility baseline screenshot | `outputs/screenshots/a11y-baseline-[slug].png` |
+| Auth session | `.playwright-session.json` (gitignored) |
+| Token analytics | `~/.claude/token_analytics.png` |
+| Knowledge graph | `graphify-out/graph.html` (open in browser) |
+| Product QA context | `.claude/skills/qa-agent/product_context/[PRODUCT]/context.md` |

package/claude/skills/accessibility-testing/SKILL.md

@@ -0,0 +1,317 @@
+---
+name: accessibility-testing
+description: >
+  Tests a live web page against WCAG 2.1 Level A and AA criteria. Injects axe-core via
+  browser_evaluate for automated rule checks, then runs manual keyboard, focus, skip-link,
+  heading, and alt-text checks via Playwright MCP. Accepts a full page URL, logs in with
+  Playwright MCP (OTP always 999999), navigates to the target page, runs all checks, saves
+  a structured report to outputs/, and files violations as Jira bugs on the provided card.
+  Uses Playwright CLI for zero-token screenshots. Token tracking enabled.
+  Standalone or callable from qa-agent.
+  Trigger: "accessibility test", "a11y test", "run accessibility", "check WCAG",
+  "accessibility [URL]", "a11y [JIRA-KEY]", "test accessibility for [page]",
+  or "check accessibility".
+compatibility: >
+  Playwright MCP must be running. axe-core injected at runtime from CDN — no install needed.
+  OTP always 999999. Playwright CLI (npx playwright) must be available.
+user-invocable: true
+---
+
+# Accessibility Testing Skill — WCAG 2.1 Level A/AA
+
+## Token Budget Rules — enforce throughout this skill
+
+| Operation | USE | NEVER USE |
+|-----------|-----|-----------|
+| Page screenshots | `npx playwright screenshot --full-page URL file.png` | `browser_screenshot()` |
+| DOM reading | `browser_evaluate` with targeted JS only | `browser_snapshot()` |
+| Login form selectors | `browser_snapshot()` — **one time only** at login screen | Any other snapshot |
+| axe-core checks | `browser_evaluate` injection + run | External a11y CLI tools |
+
+## Token Tracking
+
+Silent background task — follow the **Token Tracking** pattern in `SKILLS_CONTEXT.md`.
+Checkpoints: `start` → `login` → `a11y_checks` → `end + report + session`.
+Use `CARD_ID` if Jira card provided, else `"a11y-test"`. Never show tracking output to user.
+
+---
+
+## Pipeline
+
+```
+Full Page URL (input)
+        ↓
+[Step 0] Collect Inputs — URL, credentials, Jira card
+        ↓
+[Step 1] Login via Playwright MCP (skip if session active)
+        ↓
+[Step 2] Navigate to Target Page + Baseline Screenshot
+        ↓
+[Step 3] axe-Core Automated Checks (WCAG 2.1 A + AA)
+        ↓
+[Step 4] Manual Checks — keyboard, focus, skip link, headings, alt text
+        ↓
+[Step 5] Generate + Save Report → outputs/a11y-report-[slug]-[date].html
+        ↓
+[Step 6] File Jira Bugs (critical/serious → individual bugs; moderate/minor → comment)
+```
+
+---
+
+## Step 0 — Collect Inputs
+
+Run token tracking `start` checkpoint.
+
+Ask questions **one at a time**. Wait for each answer before asking the next.
+
+**Question 1 — Page URL:**
+> "Please paste the **full URL of the page** you want to accessibility-test.
+> (e.g. `https://app.example.com/dashboard/settings`)"
+
+Store as `TARGET_URL`.
+Extract `BASE_URL` = scheme + host (e.g. `https://app.example.com`).
+Extract `URL_SLUG` = last 2 meaningful path segments, lowercase, hyphens, strip UUIDs.
+
+**Question 2 — Jira Card:**
+> "Do you have a **Jira card ID** to file bugs against? (e.g. `QA-123`)
+> Type `skip` to only generate the report."
+
+- If provided: store `JIRA_CARD_ID`, set `FILE_JIRA = true`
+- If skipped: set `FILE_JIRA = false`
+
+**Question 3 — Check if login is needed:**
+
+`browser_navigate(url: BASE_URL)` then `browser_wait_for(state: "networkidle")`.
+
+Check the current URL:
+- Redirected to `/login`, `/sign-in`, `/auth` → session not active, ask for credentials.
+- Dashboard / main nav visible → session already active, skip to Step 2.
+
+If login needed:
+> "What is the **email** for login?"
+> (after answer) "And the **password**?"
+
+Store: `EMAIL`, `PASSWORD`.
+
+Once all inputs collected:
+> "Got it — logging in and starting the accessibility checks..."
+
+---
+
+## Step 1 — Login to the Application
+
+**Skip entirely if Step 0 Q3 confirmed session already active.**
+
+1. `browser_wait_for(state: "networkidle")`
+2. `browser_snapshot()` — **one allowed snapshot** to read login form selectors
+3. `browser_fill` email field using selector found
+4. `browser_fill` password field using selector found
+5. `browser_click` login / sign-in button
+6. `browser_wait_for(state: "networkidle")`
+
+**If OTP screen appears** (6-digit input / PIN boxes):
+7. `browser_click` first OTP input box
+8. `browser_type(text: "999999")` — always this value, auto-advances through boxes
+9. `browser_click` Verify / Confirm button
+10. `browser_wait_for(state: "networkidle")`
+
+Confirm login success: main nav or dashboard visible → proceed.
+Still on login page → stop and report: `"Login failed — please verify credentials."`
+
+**Save authenticated session to disk:**
+```javascript
+browser_evaluate({
+  expression: `JSON.stringify({
+    localStorage:   Object.fromEntries(Object.entries(localStorage)),
+    sessionStorage: Object.fromEntries(Object.entries(sessionStorage)),
+    cookies:        document.cookie
+  })`
+})
+```
+Write result to `.playwright-session.json`.
+
+Run `login` token checkpoint.
+
+---
+
+## Step 2 — Navigate to Target Page + Baseline Screenshot
+
+1. `browser_navigate(url: TARGET_URL)`
+2. `browser_wait_for(state: "networkidle")`
+3. Take baseline screenshot via Playwright CLI (zero response tokens):
+
+```bash
+mkdir -p outputs/screenshots
+npx playwright screenshot \
+  --browser chromium \
+  --full-page \
+  --viewport-size "1920,1080" \
+  --wait-for-timeout 3000 \
+  "TARGET_URL" \
+  outputs/screenshots/a11y-baseline-URL_SLUG.png
+```
+
+Store as `BASELINE_SCREENSHOT = outputs/screenshots/a11y-baseline-[URL_SLUG].png`.
+
+---
+
+## Step 3 — axe-Core Automated Checks
+
+Load `.claude/skills/accessibility-testing/WCAG_CHECKS.md` now.
+
+### 3a — Inject axe-core
+
+Run the **axe-Core Injection Script** from `WCAG_CHECKS.md` via `browser_evaluate`.
+
+- Returns `"loaded"` or `"already loaded"` → proceed to 3b.
+- Returns rejection / CDN error → set `AXE_BLOCKED = true`, add note to report:
+  `"axe-core CDN blocked by CSP — automated checks skipped, manual checks only."`,
+  skip to Step 4.
+
+### 3b — Run axe-core
+
+Run the **axe-Core Run Script** from `WCAG_CHECKS.md` via `browser_evaluate`.
+Parse the returned JSON. Store as `AXE_RESULT`.
+
+Bucket violations by impact:
+- `CRITICAL_VIOLATIONS` — impact: `"critical"`
+- `SERIOUS_VIOLATIONS` — impact: `"serious"`
+- `MODERATE_VIOLATIONS` — impact: `"moderate"`
+- `MINOR_VIOLATIONS`   — impact: `"minor"`
+
+Show one-line tally in chat:
+> `"axe-core: [N] critical | [N] serious | [N] moderate | [N] minor violations found."`
+
+Run `a11y_checks` token checkpoint.
+
+---
+
+## Step 4 — Manual Checks
+
+Load `.claude/skills/accessibility-testing/WCAG_CHECKS.md`.
+
+Run each script via `browser_evaluate`. Store results for the report.
+
+### Check A — Keyboard Traversal (WCAG 2.1.1)
+Run **Check A — Keyboard Traversal Script**.
+Record: total focusable count, elements removed from tab order, first 10 elements.
+Flag if: focusableCount = 0, or interactive elements like buttons/inputs appear in `removedFromTab`
+that should be reachable.
+
+### Check B — Focus Visibility (WCAG 2.4.7)
+Run **Check B — Focus Visibility Script**.
+Flag if: `outlineNoneCount > 0` (outline suppressed on focused elements) or `totalFocusRules = 0`.
+Note if `hasFocusVisible = true` (modern `:focus-visible` present — good practice).
+
+### Check C — Skip Navigation Link (WCAG 2.4.1)
+Run **Check C — Skip Navigation Link Script**.
+Flag if: `hasSkipLink = false`.
+
+### Check D — Heading Hierarchy (WCAG 1.3.1)
+Run **Check D — Heading Hierarchy Script**.
+Report all issues from `issues[]` array.
+Flag if: `h1Count ≠ 1` or `levelSkips.length > 0`.
+
+### Check E — Image Alt Text (WCAG 1.1.1) — cross-check against axe
+Run **Check E — Image Alt Text Script**.
+Flag if: `missingAlt > 0`. Note `emptyAlt` (decorative images with empty alt = OK if intentional).
+Flag if: `svgMissingLabel > 0` (inline SVGs without accessible name).
+
+---
+
+## Step 5 — Generate + Save Report
+
+Load the **Report Template** from `WCAG_CHECKS.md`.
+
+Build the full report using:
+- `AXE_RESULT` — all violation buckets
+- Manual check results from Steps A–E
+- `BASELINE_SCREENSHOT` path
+- `WCAG Criterion Quick Reference` and `Severity Mapping` from `WCAG_CHECKS.md`
+
+Derive filename: `outputs/a11y-report-[URL_SLUG]-[YYYYMMDD].html`
+
+Save the file. Tell user (one line):
+> `"Report saved: outputs/a11y-report-[URL_SLUG]-[YYYYMMDD].html"`
+
+Run `end + report + session` token close-out.
+
+---
+
+## Step 6 — Jira Bug Filing
+
+**Skip entirely if `FILE_JIRA = false`.**
+
+> `"[Step 6] Filing accessibility bugs on [JIRA_CARD_ID]..."`
+
+Use `getJiraIssue` to confirm `JIRA_CARD_ID` exists. Extract `PROJECT_KEY`.
+
+### Critical + Serious → individual Jira Bugs
+
+For each violation in `CRITICAL_VIOLATIONS` and `SERIOUS_VIOLATIONS`:
+
+Create a Jira Bug using the **Jira Bug Template** from `WCAG_CHECKS.md`:
+- **Issue type:** Bug
+- **Summary:** `[A11Y-{IMPACT}] [WCAG {criterion}] — {rule description} on /{URL_SLUG}`
+- **Priority:** Critical → P1 Blocker | Serious → P2 High
+- **Labels:** `accessibility`, `wcag-2.1`, `a11y-{impact}`
+- **Link to:** `JIRA_CARD_ID` ("relates to")
+
+Parallelize bug creation where possible.
+
+### Moderate + Minor → single summary comment
+
+Use the **Jira Comment Template** from `WCAG_CHECKS.md`.
+Post via `addCommentToJiraIssue` on `JIRA_CARD_ID`.
+
+### Completion comment on JIRA_CARD_ID
+
+```
+♿ Accessibility Testing Complete — WCAG 2.1 AA
+
+Page: [TARGET_URL]
+Results: [N] critical | [N] serious | [N] moderate | [N] minor
+
+Bugs filed: [PROJ-xxx], [PROJ-yyy]
+Report: outputs/a11y-report-[URL_SLUG]-[YYYYMMDD].html
+```
+
+---
+
+## Final Chat Summary
+
+```
+Accessibility Testing Complete
+  Page          : [TARGET_URL]
+  WCAG Level    : 2.1 AA
+
+  Critical      : N violations
+  Serious       : N violations
+  Moderate      : N violations
+  Minor         : N violations
+
+  Keyboard      : OK / N interactive elements unreachable
+  Focus styles  : OK / outline:none found on N selectors
+  Skip link     : Present / Missing (WCAG 2.4.1)
+  Heading order : OK / [issues]
+  Image alt     : OK / N missing alt attributes
+
+  Jira bugs     : [keys] / skipped
+  Report        : outputs/a11y-report-[URL_SLUG]-[YYYYMMDD].html
+```
+
+---
+
+## Error Handling
+
+| Situation | Action |
+|-----------|--------|
+| Login fails | Stop — `"Login failed, please check credentials."` |
+| TARGET_URL not reachable after login | Stop — check URL and auth redirect |
+| axe-core CDN blocked (CSP) | Flag in report, continue with manual checks only |
+| `axe.run()` throws / times out | Retry scoped to `main` or `#content` only, note partial result |
+| `browser_evaluate` returns null | Log "script returned null" for that check, continue |
+| Jira card not found | Ask to verify key; offer to save report only |
+| Jira bug creation fails | Note failure, continue remaining bugs, report failures at end |
+| OTP screen appears unexpectedly | Type `"999999"`, proceed |
+| Page requires further navigation after login | Follow redirect, confirm TARGET_URL loads |