skills.rest
AdigunQ
AdigunQCOMMUNITY
Explore all skills by this author →
𝕏@adigunq_adigunGitHub

ui-testing

Verify UI accessibility and visual states with ESLint and Playwright.

Updated Feb 8, 2026
Search Tags:#ui#accessibility#contrast#playwright#visual testing#ux
One-click install
npx skills add https://github.com/AdigunQ/ralph-smart --skill ui-testing-adigunq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-testing
Source: https://github.com/AdigunQ/ralph-smart/tree/main/knowledges/bootstrap_skills/ui-testing
Command: npx skills add https://github.com/AdigunQ/ralph-smart --skill ui-testing-adigunq

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires eslint-plugin-jsx-a11y, @axe-core/playwright, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps catch common UI issues related to visibility, contrast, touch target size, and visual states, ensuring a better user experience and accessibility.

Core Features & Use Cases

  • Accessibility Checks: Verifies contrast ratios, text visibility, and touch target sizes.
  • State Verification: Checks for visible hover, pressed, focus, disabled, and loading states.
  • Use Case: After developing a new button component, use this Skill to quickly run through the pre-flight checklist to ensure it meets accessibility standards and has appropriate visual states.

Quick Start

Run the ui-testing skill to verify the accessibility of the current UI.

Frequently Asked Questions about ui-testing

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

FAQPage Schema
How do I check UI accessibility and color contrast in my web components?▼

To check UI accessibility and color contrast, this Skill provides automated checks and manual checklists that verify element visibility, contrast ratios, and touch target sizes using Playwright and ESLint integrations.

How do I verify interactive states like hover and focus for UI elements?▼

You can verify interactive states by running visual testing checks that inspect hover, pressed, focus, disabled, and loading states, ensuring your UI components provide accurate visual feedback.

Can I use Playwright to automate visual testing for touch target sizes?▼

Yes, you can use Playwright integration to automate visual testing and verify touch target sizes, text visibility, and color contrast ratios for both web and mobile UI development.

Do I need eslint-plugin-jsx-a11y to run accessibility checks on my UI?▼

You do not strictly need it for manual checks, but integrating eslint-plugin-jsx-a11y and @axe-core/playwright enables enhanced automated accessibility verification directly within your development environment.

What is the best way to catch visibility and contrast issues before deploying a UI?▼

The best way to catch visibility and contrast issues is to run a pre-flight checklist that tests element states and accessibility standards, ensuring visual correctness before deployment.

Does visual testing for UI support mobile development or only web?▼

Visual testing for UI supports both web and mobile UI development by providing guidance and checklists for manual and automated verification of element visibility and interactive states.

Related Skills

Explore More Design & Creative Skills→
alinaqialinaqi
705

ui-testing

Check UI accessibility and visual integrity across web and mobile interfaces.

Community
Intermediate
summarybotngsummarybotng
2

QE Visual Accessibility

Test web applications for visual regressions, responsive design, and WCAG 2.2 accessibility.

Official
Advanced
omerakbenomerakben
1

testing-quality-gates

Automate Vitest, Playwright, linting, and TypeScript quality gates for Next.js projects.

Community
Intermediate
thinhtt264thinhtt264

android-accessibility

Audit Jetpack Compose UI for Android accessibility issues via prompt-driven checklists.

Community
Basic