skills.rest
alinaqi
alinaqiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-testing

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

705|56|Updated Dec 26, 2025
Search Tags:#ui#accessibility#layout#frontend#contrast#visual testing#ux
One-click install
npx skills add https://github.com/alinaqi/claude-bootstrap --skill ui-testing-alinaqi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-testing
Source: https://github.com/alinaqi/claude-bootstrap/tree/main/skills/ui-testing
Command: npx skills add https://github.com/alinaqi/claude-bootstrap --skill ui-testing-alinaqi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the common issue of invisible UI elements, broken layouts, and poor color contrast that can hinder user experience and accessibility.

Core Features & Use Cases

  • Visibility Checks: Verifies that all interactive elements like buttons are visually distinct.
  • Contrast Ratio: Ensures text meets accessibility standards for readability.
  • Touch Target Sizing: Checks that buttons and interactive areas are large enough for easy interaction, especially on mobile.
  • State Verification: Confirms that hover, pressed, focus, and disabled states are visually apparent.
  • Use Case: After implementing a new feature with several buttons and input fields, run this skill to quickly audit if all elements are visible, have sufficient contrast, and are easily clickable, preventing common UI bugs before they reach users.

Quick Start

Run the ui-testing skill to perform a pre-flight checklist on all newly created UI components.

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 ratios for UI accessibility?▼

To check color contrast ratios for UI accessibility, you can use this Skill to run automated checks and verify that text meets readability standards using browser devtools and online tools.

What is the best way to verify touch target sizes on mobile interfaces?▼

Verifying touch target sizes on mobile interfaces involves checking that buttons and interactive areas are large enough for easy interaction; this Skill performs those checks to prevent common mobile UI bugs.

How do I test interactive states like hover and focus for visual integrity?▼

Testing interactive states like hover, pressed, focus, and disabled for visual integrity requires verifying that each state is visually apparent, which this Skill confirms through manual and automated checklists.

Can I use Playwright tests to automate UI accessibility checks?▼

Yes, you can use Playwright tests to automate UI accessibility checks; this Skill supports verification through optional ESLint plugins and Playwright tests alongside manual browser devtools inspections.

How do I audit element visibility for newly created frontend components?▼

Auditing element visibility for newly created frontend components requires verifying that interactive elements like buttons are visually distinct, which this Skill performs as a pre-flight checklist.

Related Skills

Explore More Software Engineering Skills→
AdigunQAdigunQ

ui-testing

Verify UI accessibility and visual states with ESLint and Playwright.

Community
Intermediate
herdiansahherdiansah
23

e2e-testing-patterns

Implement Playwright and Cypress end-to-end tests with Page Object Model patterns.

Community
Intermediate
NweremizuNweremizu

audit

Audit user interfaces for accessibility, performance, and responsive defects.

Community
Intermediate
krutikJainkrutikJain
14

android-testing-ui

Automate Compose UI tests and Espresso checks for Android applications.

Community
Advanced