skills.rest
VKirill
VKirillCOMMUNITY
Explore all skills by this author →
GitHub

ui-craft

Verify frontend UI changes against usability, accessibility, and WCAG 2.2 criteria.

15|2|Updated May 23, 2026
Search Tags:#keyboard navigation#wcag 2.2#ui verification#visual hierarchy#accessibility audit#screenshot diff#lighthouse a11y
One-click install
npx skills add https://github.com/VKirill/antigravity-for-claude-code --skill ui-craft-vkirill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-craft
Source: https://github.com/VKirill/antigravity-for-claude-code/tree/main/skills/ui-craft
Command: npx skills add https://github.com/VKirill/antigravity-for-claude-code --skill ui-craft-vkirill

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents frontend changes from shipping with unclear UX, broken visual hierarchy, weak accessibility, or failing contrast/keyboard requirements by turning UI review into a reproducible checklist.

Core Features & Use Cases

  • Usability heuristics (Krug): applies the squint test and “don’t make me think” principles to detect ambiguous labels, confusing flows, and hierarchy that fails at first glance.
  • Visual design verification (Wathan/Schoger): checks whether spacing, size, weight, color, and whitespace create a clear hierarchy without overloading all axes at once.
  • Heuristic evaluation (Nielsen 10): runs a structured pass over system status, consistency, error prevention, recognition vs. recall, flexibility, aesthetics, and help/documentation.
  • Accessibility auditing (WCAG 2.2): validates contrast thresholds, keyboard navigation, focus indicators, semantic HTML, alt text, ARIA usage, touch targets, and reduced-motion behavior.
  • Use Case: confirm that a React/Vue/Astro/Nuxt component update preserves accessibility and visual clarity by emulating mobile+desktop, running Lighthouse, checking console/network errors, and comparing screenshots.

Quick Start

Use the ui-craft skill to verify a frontend diff by emulating a mobile and a desktop viewport, running Lighthouse a11y, and checking keyboard navigation, focus visibility, and WCAG contrast for all interactive elements.

Frequently Asked Questions about ui-craft

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

FAQPage Schema
How do I run a WCAG 2.2 accessibility audit on a frontend component diff?▼

Run a WCAG 2.2 accessibility audit by emulating mobile and desktop viewports, testing keyboard navigation, verifying focus visibility, checking contrast thresholds, and running Lighthouse a11y checks with AA gating to validate semantic HTML and ARIA usage.

What is the best way to verify visual hierarchy and usability in UI changes?▼

Verifying visual hierarchy and usability involves applying Krug's squint test, Wathan/Schoger design principles, and Nielsen 10 heuristics to evaluate spacing, weight, color, and system status clarity across component diffs.

How does Lighthouse a11y gating work for frontend UI verification?▼

Lighthouse a11y gating blocks UI changes when accessibility scores drops below 95, enforcing WCAG 2.2 AA thresholds for contrast, keyboard navigation, focus indicators, and touch targets before deployment.

Can I use screenshot diff and Lighthouse checks for React and Vue components?▼

Screenshot diff and Lighthouse checks apply to React, Vue, Astro, and Nuxt component updates by emulating responsive viewports, inspecting console and network errors, and validating WCAG compliance and visual clarity.

Why does my UI verification fail on keyboard navigation and focus indicators?▼

UI verification fails on keyboard navigation when focus indicators are missing, touch targets fall below WCAG 2.2 size requirements, or semantic HTML and ARIA attributes lack proper implementation across interactive elements.

When do I need to perform a screenshot diff and hierarchy sanity check?▼

Perform a screenshot diff and hierarchy sanity check when frontend changes alter visual layout, requiring validation that spacing, weight, and whitespace maintain clear hierarchy without overloading visual axes across mobile and desktop viewports.

Related Skills

Explore More Design & Creative Skills→
KhoiwallKhoiwall

playwright

Automate browser-based testing and automation tasks for web applications.

Community
Intermediate
btabaskabtabaska
1

Accessibility Check

Detect WCAG 2.1 AA accessibility defects in Next.js/React components.

Community
Intermediate
eric-sabeeric-sabe
1

webapp-testing

Automate local web app testing with Playwright browser automation.

Community
Intermediate
dinoudondinoudon

accessibility-audit

Audit web applications for WCAG 2.2 compliance across seven accessibility categories.

Community
Advanced