Ui Testing

What it does

This skill, "Ui Testing," helps AI agents quickly verify that generated UI components meet accessibility standards. It provides a checklist and guidance for ensuring visual elements are clear, usable, and compliant with common web accessibility guidelines. The tool focuses on aspects like button visibility, color contrast, touch target size, state indicators (hover, pressed, focus, disabled, loading), and responsiveness across different screen sizes.

When to use it

• After creating new UI components to ensure they meet basic accessibility requirements.
• Before releasing any UI changes to catch potential issues early in the development process.
• When debugging visual inconsistencies or usability problems with existing UI elements.
• To verify dark mode compatibility, ensuring readability and visibility of key elements.
• During responsive design checks to confirm content remains readable at various breakpoints.

Key capabilities

• Visibility Check: Ensures buttons have visible backgrounds or borders, and text has sufficient contrast against its background.
• Touch/Click Targets: Verifies adequate size (minimum 44px height for buttons, 44x44px for icons) and spacing between clickable elements.
• States Verification: Checks for visibility of hover, pressed, focus, disabled, and loading states.
• Dark Mode Compliance: Validates text readability, border visibility, and avoidance of problematic color combinations in dark mode.
• Responsive Design Check: Ensures no horizontal scrolling on mobile devices (320px width) and content remains readable across different screen sizes.

Example prompts

• "Run a UI accessibility check on this component."
• "Verify the contrast ratio for this button's text color."
• "Check if this element has a visible focus ring."
• "Is this touch target large enough?"

Tips & gotchas

• This skill requires loading either ui-web.md or ui-mobile.md to function correctly.
• The tool relies on visual inspection and may require manual review of results alongside automated checks using browser developer tools or online contrast checkers.
• Pay close attention to Tailwind CSS color combinations, as some shades (like gray-400 and gray-500) can easily lead to accessibility issues.