skills.rest
dudqks0319-cpu
dudqks0319-cpuCOMMUNITY
Explore all skills by this author →
GitHub

ui-testing

Validates UI components against accessibility standards using contrast, visibility, and touch-target checklists.

Updated Jan 16, 2026
Search Tags:#accessibility#a11y#playwright#ui testing#tailwind#contrast ratio#visual verification
One-click install
npx skills add https://github.com/dudqks0319-cpu/antigravity-skills --skill ui-testing-dudqks0319-cpu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-testing
Source: https://github.com/dudqks0319-cpu/antigravity-skills/tree/main/ui-testing
Command: npx skills add https://github.com/dudqks0319-cpu/antigravity-skills --skill ui-testing-dudqks0319-cpu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Newly generated UI often ships with invisible buttons, low-contrast text, missing focus states, and touch targets too small for mobile users. This Skill provides a fast verification checklist and concrete fixes to catch these accessibility and usability defects before shipping. ## Core Features & Use Cases - Pre-Flight Checklist: Covers visibility, contrast ratios (4.5:1), 44px touch targets, hover/pressed/focus/disabled states, dark mode, and responsive behavior. - Contrast Guidance: Includes Tailwind-safe color combinations for light and dark modes plus DevTools and online checker workflows. - Common Fixes: Ready-to-use React/Tailwind code snippets for invisible buttons, low-contrast text, missing focus rings, small touch targets, and broken dark mode. - Use Case: After generating a new settings page, run the checklist to discover that secondary text uses text-gray-400 on white (2.6:1 contrast) and fix it by switching to text-gray-600 before committing. ## Quick Start Review the UI components I just created against the accessibility checklist and fix any contrast, visibility, or touch-target issues you find.

Frequently Asked Questions about ui-testing

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

FAQPage Schema
How do I check color contrast for web accessibility?▼

Check color contrast by inspecting the element in browser DevTools, clicking the color value in the Styles panel, and reading the contrast ratio display. Text must meet a 4.5:1 ratio for AA compliance; online tools like the WebAIM contrast checker also work.

How to fix invisible or ghost buttons in Tailwind?▼

Fix invisible buttons by adding a visible background or border, such as bg-gray-100 with text-gray-900, or border border-gray-300 with text-gray-700. Text-only buttons without any boundary fail visibility checks.

What Tailwind text colors pass contrast on white backgrounds?▼

On white backgrounds, text-gray-900 through text-gray-600 pass AA contrast, ranging from 16:1 down to 6:1. text-gray-500 barely passes at 4.6:1, while text-gray-400 fails at 2.6:1 and should not be used for body text.

Can I automate accessibility testing with Playwright?▼

Yes, automate accessibility testing in Playwright using AxeBuilder from @axe-core/playwright. Navigate to a page, run the analyze method, and assert that the violations array is empty. eslint-plugin-jsx-a11y adds static lint-time checks.

When is a manual UI checklist not enough?▼

A manual checklist is sufficient for solo projects or MVPs. Add comprehensive visual testing with Playwright screenshots or Storybook when building a component library, working with multiple UI developers, or enforcing a design system.

Related Skills

Explore More Software Engineering Skills→
hschnehschne
1

design-principles

Apply named aesthetic philosophies to frontend UI builds and critiques.

Community
Intermediate
jluckyivjluckyiv

audit-a11y

Runs automated WCAG 2.2 AA accessibility tests via Playwright and axe-core.

Community
Advanced
izzoaizzoa
22

ss-verify

Inspect rendered browser screenshots for visual defects in layout, typography, contrast, and spacing.

Community
Advanced
nekorush14nekorush14
4

storybook-development

Generate Storybook CSF3 stories with interaction and visual regression testing.

Community
Advanced