ui-testing_skill

Overview

This skill performs quick visual and accessibility verification for web and mobile UIs to catch invisible buttons, broken layouts, and low-contrast text. It provides a short pre-flight checklist, concrete code fixes, and guidance for automated checks to prevent regressions. Use it as a fast gate before shipping new components or pages.

How this skill works

The skill inspects common visual issues: button visibility, contrast ratios, touch/click target sizes, focus and interaction states, dark-mode mismatches, and basic responsive problems. It guides manual DevTools checks, lists proven Tailwind-safe color pairs, and offers small code snippets to fix common problems. Optionally, it recommends integrating automated tools like eslint-plugin-jsx-a11y and Playwright + axe for continuous verification.

When to use it

• Before shipping any new UI component or page
• When merging pull requests that change layout or styles
• During design-to-code handoffs to validate implementation
• Before releases that include dark mode or responsive updates
• When onboarding new frontend contributors to enforce basic accessibility

Best practices

• Run the pre-flight checklist on every UI change: visibility, states, touch targets, contrast.
• Prefer visible backgrounds or borders for buttons; avoid relying on text-only affordances.
• Enforce minimum touch targets (44px) and visible focus rings for keyboard users.
• Check contrast in DevTools and with a contrast checker; aim for 4.5:1 for body text.
• Add dark-mode variants for colors and test at target breakpoints (320px mobile).
• Automate where practical: ESLint accessibility rules and Playwright + axe in CI.

Example use cases

• Quick QA on a generated component library to catch invisible buttons before publishing.
• Sprint review: run the checklist on redesigned pages to catch regressions early.
• MVP projects: lightweight manual checks to keep accessible defaults without heavy tooling.
• Multi-developer teams: add automated Playwright + axe tests to PR pipelines.
• Design system work: run full visual testing (screenshots, Storybook) when components are shared widely.