Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →alinaqi/ui-testing
Visual testing - catch invisible buttons, broken layouts, contrast
Passed 20 of 22 test cases with the skill, and 18 of 22 without it.
2 fixed18 passed either way2 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 2 test cases the skill fixed. Same model, same prompt, with and without the skill.
During a pre-flight UI audit of a dynamic card component, a developer configured hover styles that set text color equal to the card container's background color. What fundamental visibility rule does this violate?
| Checked | Without skill | With skill |
|---|---|---|
| The response states that text must never match its background color. | Missed | Passed |
The instructions your model reads when the skill loads.
Load with: ui-web.md or ui-mobile.md
Quick verification that generated UI meets accessibility standards. Run these checks after creating any new UI components.
## 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)
test cases passed, vs 18 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.