skills.rest
hatch3r
hatch3rOFFICIAL
Explore all skills by this author →
GitHub

hatch3r-ui-ux-verify

Validate UI/UX with axe-core, Playwright, and accessibility-tree snapshots.

26|4|Updated Feb 27, 2026
Search Tags:#accessibility#keyboard navigation#WCAG#web vitals#visual regression#a11y testing#UI release readiness
One-click install
npx skills add https://github.com/hatch3r/hatch3r --skill hatch3r-ui-ux-verify
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hatch3r-ui-ux-verify
Source: https://github.com/hatch3r/hatch3r/tree/main/skills/hatch3r-ui-ux-verify
Command: npx skills add https://github.com/hatch3r/hatch3r --skill hatch3r-ui-ux-verify

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents shipping “done in name only” UI by enforcing accessibility, keyboard operability, visual regression stability, state completeness, and performance budgets before release.

Core Features & Use Cases

  • Automated accessibility gate: Runs axe-core checks (serious/critical violations must be zero) including focus visibility, target size, and drag alternatives for interactive routes.
  • Deterministic interaction verification: Performs scripted keyboard navigation with assertions for focus visibility, viewport presence, and absence of keyboard traps.
  • Accessibility and UX regression detection: Captures accessibility-tree snapshots (h1/landmarks/named inputs/alt coverage) and enforces four-state coverage (loading, empty, error, partial) with committed snapshots.
  • Visual regression and microcopy quality: Compares screenshots against locked baselines with strict diff thresholds and lint-checks user-facing microcopy for clarity and corrective verbs.
  • Performance and AI-UX checks when applicable: Enforces Core Web Vitals p75 targets and validates streaming/UI patterns, tool-call visibility, approvals for side effects, and abort controls.
  • Manual screen-reader release gate: Requires one human pass (VoiceOver or NVDA) on the key user flow per release with recorded findings in release notes.

Quick Start

Run hatch3r-ui-ux-verify during PR review to block merges until all nine UX verification gates pass, including the per-release manual screen-reader pass.

Frequently Asked Questions about hatch3r-ui-ux-verify

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I verify UI accessibility and keyboard navigation before a release?▼

UI accessibility and keyboard navigation verification requires running axe-core checks for serious violations and scripting Playwright interactions to assert focus visibility and prevent keyboard traps before release.

What is the best way to automate visual regression and state coverage testing for components?▼

Automating visual regression and state coverage involves capturing accessibility-tree snapshots and enforcing four-state coverage (loading, empty, error, partial) with locked screenshot baselines and strict diff thresholds.

How do I enforce Core Web Vitals and performance budgets for interactive route changes?▼

Enforcing Core Web Vitals and performance budgets requires measuring p75 targets against interactive route changes and validating async data states to block UI releases that miss performance thresholds.

Can I use Playwright and axe-core to validate LLM-driven UI patterns and async states?▼

Yes, Playwright and axe-core validate LLM-driven UI patterns by checking streaming UI visibility, tool-call approvals for side effects, and abort controls alongside standard async state accessibility assertions.

Why does UI release readiness require a manual screen-reader pass on top of automated checks?▼

UI release readiness requires a manual screen-reader pass because automated axe-core checks cannot fully validate the human experience, necessitating a VoiceOver or NVDA run on key flows with findings recorded in release notes.

How do I lint microcopy quality and check for missing alt text in a component library?▼

Linting microcopy quality and checking alt text involves executing accessibility-tree snapshot conventions to enforce alt coverage and lint-checking user-facing strings for clarity and corrective verbs.

Related Skills

Explore More Design & Creative Skills→
MathiasPaulenkoMathiasPaulenko

WaveXis Accessibility

Automate accessibility audits and WCAG 2.2 compliance checks with axe-core.

Community
Advanced
TimHL5TimHL5

land-and-deploy

Merge PRs, wait for CI, validate canary deployments, and promote to production.

Community
Advanced
alexandervashurinalexandervashurin

benchmark

Measure navigation timing metrics and flag performance regressions against historical baselines.

Community
Advanced
petrkindlmannpetrkindlmann
64

accessibility-testing

Automate accessibility testing with axe-core and Playwright for WCAG conformance.

Community
Advanced