From hatch3r
Runs a 9-gate UI/UX verification checklist before declaring a feature done: axe-core a11y scan, keyboard trace, accessibility-tree snapshot, four-state coverage, visual-regression baseline, and one human screen-reader pass per release.
How this skill is triggered — by the user, by Claude, or both
Slash command
/hatch3r:hatch3r-ui-ux-verifyThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill defines what "done" means for any feature shipping UI. Run before declaring a feature complete. The 9 gates below mix automated checks (machine-checkable on every PR) with one manual gate (one human screen-reader pass per release). Skipping any gate = the feature is not done. Browser tests and screenshots from `hatch3r-qa-validation` alone do not satisfy this bar.
This skill defines what "done" means for any feature shipping UI. Run before declaring a feature complete. The 9 gates below mix automated checks (machine-checkable on every PR) with one manual gate (one human screen-reader pass per release). Skipping any gate = the feature is not done. Browser tests and screenshots from hatch3r-qa-validation alone do not satisfy this bar.
Before any work, scan the invocation for unresolved questions in scope, intent, acceptance criteria, target environment, or irreversibility. If any are found, ask the user via the platform-native question tool per agents/shared/user-question-protocol.md. Do not proceed under silent assumption. Default path, not an exception. Triggers for THIS skill: routes in scope (single vs all interactive), WCAG target (2.1 AA vs 2.2 AA), visual-regression baseline policy (regenerate vs keep), AI-UX gate applicability, and whether Gate 9 (manual SR pass) is required this run.
Fan-out scales with task size; token cost never justifies serializing independent work (rules/hatch3r-fan-out-discipline.md P8 B2; agents/shared/efficiency-patterns.md). Emit sub_agents_spawned: { count, rationale } in your output.
This skill is the verification HARNESS — it declares HOW each UI/UX gate is checked. The DISPATCHERS that decide WHEN to run it are the CQ specialist agents:
agents/hatch3r-ui.md — invokes this skill as the axe-core + keyboard-trace + four-state + visual-regression + Core Web Vitals gate (CQ1). The agent contributes trigger conditions and Phase-4 dispatch; this skill contributes the 9-gate procedure.agents/hatch3r-ux.md — invokes this skill when keyboard-trace, microcopy-lint, or human-screen-reader-pass gates flag a UX-pillar delta (CQ2).No duplication: the agent decides WHEN, this skill defines HOW. The agent bodies cite this skill in their Phase-4 output contract; this subsection is the symmetric upstream citation per rules/hatch3r-agent-orchestration.md (Phase-4 dispatch).
npx playwright test --grep @a11y with @axe-core/playwright integration on every interactive route.import AxeBuilder from '@axe-core/playwright'; call new AxeBuilder({ page }).analyze() inside each route test and assert results.violations.length === 0 after filtering for impact in ['serious', 'critical'].page.locator('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])'); iterate Tab presses up to count + 5 and record the activeElement chain. Diff against the enumeration; any unreached element fails the gate.page.accessibility.snapshot().<h1>.banner, main, nav, contentinfo present.alt attribute or role="presentation".Promise.allSettled with a forced rejection) in rules/hatch3r-ux-states-and-flows.md -> Partial-state fixture recipe.src/__tests__/states/<feature>.<state>.spec.ts.rg -l 'useQuery|useSWR|\bfetch\(|axios' — and list the surfaces that read remote data. Each listed surface must have all four state files under the convention path above. The reviewer flags any surface missing a state file as a Gate-4 failure. Projects that want this enforced pre-test author their own discovery check wired into CI; hatch3r ships the pattern, not the script (the framework does not own the project's data-fetch taxonomy).playwright.toHaveScreenshot() for component-library projects; Chromatic or Percy for Storybook-heavy projects.maxDiffPixels: 0 for layout-critical screens (header, nav, primary CTA); maxDiffPixelRatio: 0.001 for content-heavy screens. Tighter thresholds catch silent regressions; looser thresholds tolerate font-rendering noise on content text.autocomplete attribute on every input matching email, password, name, or address. axe-core covers part of this; add a custom rule for the rest.web-vitals library in a synthetic environment.web-vitals posting to an analytics endpoint, compare p75 field values to synthetic budgets weekly. A 25% gap between synthetic and field is a finding — re-tune the synthetic environment.Applies only when the feature ships LLM-driven UI. These 7 checks mirror the Verification Gate in rules/hatch3r-ai-ux-patterns.md one-for-one — running Gate 8 means executing all 7, not just the streaming/tool-call subset:
useChat, useCompletion, streamUI, or the framework equivalent.pending, in-progress, complete, failed).write, send, or post tool calls.AbortController — cancellation produces a transcript marker, not a silent terminate.Cross-reference: rules/hatch3r-ai-ux-patterns.md — the "Verification Gate" section is the canonical 7-item list this gate executes; the "Cancel / Abort / Undo", "Citations and Grounding", and "Failure Modes and Degradation" sections define the expected behavior each check asserts.
All 9 gates pass = the feature is "done". Anything less = not done.
The orchestrator running this skill emits a single-line verdict per gate (GATE_N: PASS|FAIL <evidence-path>) and aggregates them. One FAIL on a required gate blocks the merge regardless of QA validation status.
hatch3r-implementer finishes feature code and before hatch3r-qa-validation runs.src/components/, src/pages/, src/routes/, or any file matched by the design-system glob.rules/hatch3r-accessibility-standards.mdrules/hatch3r-ux-states-and-flows.mdrules/hatch3r-ai-ux-patterns.mdrules/hatch3r-design-system-detection.mdrules/hatch3r-performance-budgets.mdplaywright.dev/docs/accessibility-testinggithub.com/dequelabs/axe-coreweb.dev/articles/vitalssdk.vercel.ai/docs/ai-sdk-uiwww.w3.org/TR/WCAG22/npx claudepluginhub hatch3r/hatch3r --plugin hatch3rRuns Playwright-driven visual checks, axe-core a11y audits, screenshot regression diffs, and E2E test scaffolds for UI-affecting changes.
Automates visual testing and UI interaction verification using browser automation (Playwright/Puppeteer) after deploying features to staging/preview.
Validates UI visuals for regression testing, design system compliance, and accessibility using tools like Chromatic, Percy, Applitools, Playwright, and Cypress.