07-quality-and-verification

Name: 07-quality-and-verification
Author: heymegabyte

18stars4forks

How to install 07-quality-and-verification?

heymegabyte/claude-skills/07-quality-and-verification

$npx -y skills add heymegabyte/claude-skills --skill 07-quality-and-verification

Installs into the current project.

Summary

5-level verification pyramid: static→unit→Playwright E2E (homepage-first, 6bp)→AI visual→post-deploy. 8-check quality gate. Multi-agent testing (functional/security/a11y/performance). Playwright v1.59+ AI agents (Planner/Generator/Healer). WCAG 2.2 AA via axe-core v4.11. Percy+Ch

Files · 1

View on GitHub

SKILL.md

1	# 07 — Quality and Verification
2
3	Run the 5-level verification pyramid (static→unit→E2E→AI visual→post-deploy) with WCAG 2.2 AA and 8-gate quality enforcement on every change.
4
5	## 5-level pyramid (bottom to top)
6
7	1. Static — TS strict + ESLint + oxlint + Prettier + knip (dead code)
8	2. Unit — Vitest 3 (40% faster on 5k+ tests, Rust sharding, browser mode default)
9	3. Playwright E2E — homepage-first, 6 viewports × 3 browsers, hermetic, parallel
10	4. AI visual — vision rubric ≥9/10 per route, 6bp screenshots
11	5. Post-deploy — `wrangler tail` clean + console-error-free + axe-clean + Lighthouse green
12
13	## 8-check quality gate (every PR)
14
15	1. `npm run typecheck` clean (0 errors)
16	2. `npm run lint` clean (0 errors, 0 warnings)
17	3. `npm test` (Vitest) green
18	4. `npm run e2e:prod` green at 6 breakpoints
19	5. axe-core 0 violations per `_kernel/standards.md#wcag22`
20	6. Lighthouse Perf ≥90, A11y ≥95, BP ≥95, SEO ≥95 (authoritative: `EMDASH_LIGHTHOUSE_MIN_*` in `~/.claude` env)
21	7. AI vision QA ≥9/10 per route (authoritative: `EMDASH_AI_VISION_MIN`)
22	8. Console / CSP / network errors = 0
23
24	Any fail = blocker. Fix-forward per `rules/verification-loop.md`.
25
26	## Playwright Test Agents (v1.59+)
27
28	- `npx playwright init-agents --loop=claude` once per repo
29	- Planner — Markdown plan; Generator — test code; Healer — auto-fix broken selectors (run before manual rewrite)
30	- `browser.bind()` for MCP interop; `page.screencast` for video receipts on flaky specs
31
32	## Hermetic spec contract (per `rules/e2e-tdd-organization.md`)
33
34	1. Starts at homepage (`/`); navigates via clicks/keyboard
35	2. Seeds own data via `_fixtures/`; cleans own data after-each
36	3. Does not write to localStorage / IDB / cookies next spec reads
37	4. Does not depend on `Date.now()` / timezone / random
38	5. Does not open network to live third-party APIs (MSW / stub)
39
40	Violating any = build fail.
41
42	## Parallel execution
43
44	- `fullyParallel: true`
45	- `workers: process.env.CI ? '50%' : '75%'`
46	- Sharded via `--shard=$INDEX/$TOTAL`
47	- 6 viewports per `_kernel/standards.md#breakpoints`; 3 browsers: Chromium, Firefox, WebKit
48
49	## AI visual QA
50
51	- Random snapshot sampling 30% per step (seeded hash, reproducible)
52	- New-section AI vision: `e2e/__seen-routes__.json` gates first render of unknown routes
53	- Rubric: layout sane / contrast WCAG AA / brand / no slop / ≥9/10 (Claude Sonnet 4.6 or GPT Image 2 vision)
54	- Baselines in `e2e/__snapshots__/`; pixelmatch tolerance 0.1% / 0.5% area
55	- Per `rules/e2e-visual-inspection.md`
56
57	## Visual regression
58
59	- Percy AI Visual Review — 3× faster review, 40% OCR-based noise filter, full-page + flows
60	- Chromatic — component-level via Storybook
61	- pixelmatch — local deterministic CI (three-tier: local → PR → deploy)
62
63	## Multi-agent testing
64
65	Spawn parallel in single `Agent` call:
66
67	- functional-tester — happy path + edge cases
68	- security-reviewer — OWASP Top 10:2025 per `_kernel/standards.md#owasp2025`
69	- accessibility-auditor — axe 6bp + WCAG 2.2 manual review
70	- performance-profiler — Lighthouse CI + bundle audit + INP via LoAF
71	- visual-qa — AI vision rubric ≥9/10
72
73	Each: 100–300 word brief, ≤200 word summary back. Per `rules/agent-selection.md`.
74
75	## INP debugging
76
77	- `PerformanceObserver` type `long-animation-frame` (LoAF, Chrome 123+)
78	- For SPA per-route CWV: web-vitals v4+ with `softNavs:true`
79	- Target ≤100ms cinematic; ≤200ms = fail per `_kernel/standards.md#cwv`
80
81	## Console-error gate
82
83	After every deploy: browser console must show 0 CSP violations, 0 JS errors, 0 failed resources. Fixed by `rules/verification

People who liked this also viewed

6 picks

Type

07-quality-and-verification

18stars4forks

View on GitHub

How to install 07-quality-and-verification?

heymegabyte/claude-skills/07-quality-and-verification

$npx -y skills add heymegabyte/claude-skills --skill 07-quality-and-verification

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# 07 — Quality and Verification
2
3	Run the 5-level verification pyramid (static→unit→E2E→AI visual→post-deploy) with WCAG 2.2 AA and 8-gate quality enforcement on every change.
4
5	## 5-level pyramid (bottom to top)
6
7	1. Static — TS strict + ESLint + oxlint + Prettier + knip (dead code)
8	2. Unit — Vitest 3 (40% faster on 5k+ tests, Rust sharding, browser mode default)
9	3. Playwright E2E — homepage-first, 6 viewports × 3 browsers, hermetic, parallel
10	4. AI visual — vision rubric ≥9/10 per route, 6bp screenshots
11	5. Post-deploy — `wrangler tail` clean + console-error-free + axe-clean + Lighthouse green
12
13	## 8-check quality gate (every PR)
14
15	1. `npm run typecheck` clean (0 errors)
16	2. `npm run lint` clean (0 errors, 0 warnings)
17	3. `npm test` (Vitest) green
18	4. `npm run e2e:prod` green at 6 breakpoints
19	5. axe-core 0 violations per `_kernel/standards.md#wcag22`
20	6. Lighthouse Perf ≥90, A11y ≥95, BP ≥95, SEO ≥95 (authoritative: `EMDASH_LIGHTHOUSE_MIN_*` in `~/.claude` env)
21	7. AI vision QA ≥9/10 per route (authoritative: `EMDASH_AI_VISION_MIN`)
22	8. Console / CSP / network errors = 0
23
24	Any fail = blocker. Fix-forward per `rules/verification-loop.md`.
25
26	## Playwright Test Agents (v1.59+)
27
28	- `npx playwright init-agents --loop=claude` once per repo
29	- Planner — Markdown plan; Generator — test code; Healer — auto-fix broken selectors (run before manual rewrite)
30	- `browser.bind()` for MCP interop; `page.screencast` for video receipts on flaky specs
31
32	## Hermetic spec contract (per `rules/e2e-tdd-organization.md`)
33
34	1. Starts at homepage (`/`); navigates via clicks/keyboard
35	2. Seeds own data via `_fixtures/`; cleans own data after-each
36	3. Does not write to localStorage / IDB / cookies next spec reads
37	4. Does not depend on `Date.now()` / timezone / random
38	5. Does not open network to live third-party APIs (MSW / stub)
39
40	Violating any = build fail.
41
42	## Parallel execution
43
44	- `fullyParallel: true`
45	- `workers: process.env.CI ? '50%' : '75%'`
46	- Sharded via `--shard=$INDEX/$TOTAL`
47	- 6 viewports per `_kernel/standards.md#breakpoints`; 3 browsers: Chromium, Firefox, WebKit
48
49	## AI visual QA
50
51	- Random snapshot sampling 30% per step (seeded hash, reproducible)
52	- New-section AI vision: `e2e/__seen-routes__.json` gates first render of unknown routes
53	- Rubric: layout sane / contrast WCAG AA / brand / no slop / ≥9/10 (Claude Sonnet 4.6 or GPT Image 2 vision)
54	- Baselines in `e2e/__snapshots__/`; pixelmatch tolerance 0.1% / 0.5% area
55	- Per `rules/e2e-visual-inspection.md`
56
57	## Visual regression
58
59	- Percy AI Visual Review — 3× faster review, 40% OCR-based noise filter, full-page + flows
60	- Chromatic — component-level via Storybook
61	- pixelmatch — local deterministic CI (three-tier: local → PR → deploy)
62
63	## Multi-agent testing
64
65	Spawn parallel in single `Agent` call:
66
67	- functional-tester — happy path + edge cases
68	- security-reviewer — OWASP Top 10:2025 per `_kernel/standards.md#owasp2025`
69	- accessibility-auditor — axe 6bp + WCAG 2.2 manual review
70	- performance-profiler — Lighthouse CI + bundle audit + INP via LoAF
71	- visual-qa — AI vision rubric ≥9/10
72
73	Each: 100–300 word brief, ≤200 word summary back. Per `rules/agent-selection.md`.
74
75	## INP debugging
76
77	- `PerformanceObserver` type `long-animation-frame` (LoAF, Chrome 123+)
78	- For SPA per-route CWV: web-vitals v4+ with `softNavs:true`
79	- Target ≤100ms cinematic; ≤200ms = fail per `_kernel/standards.md#cwv`
80
81	## Console-error gate
82
83	After every deploy: browser console must show 0 CSP violations, 0 JS errors, 0 failed resources. Fixed by `rules/verification

People who liked this also viewed

6 picks

Type