Ui Testing

Gives Claude a preflight checklist for UI accessibility so it doesn't ship buttons with invisible borders or text that fails contrast ratios. Covers the basics: minimum touch targets, focus states, dark mode considerations, and Tailwind color combinations that actually pass WCAG. Includes quick fixes for common mistakes like gray-400 text on white backgrounds. Not a replacement for full visual regression testing, but solid for catching obvious accessibility issues in component work. The contrast ratio reference table alone saves you from checking DevTools every time.

skills.sh installs: 260
GitHub stars: 685
last updated: Jun 3, 2026

View on GitHub

Install

$ npx -y skills add alinaqi/claude-bootstrap --skill ui-testing --agent claude-code

Installs into .claude/skills of the current project.

Files

UI Verification Skill

Load with: ui-web.md or ui-mobile.md

Purpose

Quick verification that generated UI meets accessibility standards. Run these checks after creating any new UI components.

Pre-Flight Checklist

Before Shipping ANY UI:

## Visibility Check
- [ ] All buttons have visible background OR border
- [ ] No text is same color as its background
- [ ] All text meets 4.5:1 contrast ratio
- [ ] Ghost/text buttons have visible borders

## Touch/Click Targets
- [ ] All buttons are minimum 44px height
- [ ] Icon buttons are minimum 44x44px
- [ ] Adequate spacing between clickable elements

## States
- [ ] Hover states visible (web)
- [ ] Pressed states visible (mobile)
- [ ] Focus rings on keyboard navigation
- [ ] Disabled states visually distinct (opacity 0.5)
- [ ] Loading states show indicators

## Dark Mode (if applicable)
- [ ] Text readable on dark backgrounds
- [ ] Borders visible in dark mode
- [ ] No gray-400 text on dark backgrounds

## Responsive (web)
- [ ] No horizontal scroll on mobile (320px)
- [ ] Content readable at all breakpoints
- [ ] Touch targets adequate on mobile