| name | test-ui |
| description | Multi-viewport UI testing with screenshots, visual regression detection, and accessibility audits |
| layer | hub |
| category | workflow |
| triggers | ["/test-ui","test the UI","check the interface","visual test","screenshot test","check responsive","accessibility audit"] |
| inputs | [{"target":"URL, page, or component to test"},{"viewports":"Viewport sizes to test (optional, defaults to mobile/tablet/desktop)"},{"checks":"Specific checks to run -- visual | accessibility | responsive | interaction | all (optional, defaults to all)"}] |
| outputs | [{"screenshots":"Screenshots at each viewport with annotations"},{"accessibilityReport":"WCAG compliance findings"},{"responsiveReport":"Layout issues across viewports"},{"interactionReport":"Results of interaction testing (hover, focus, click states)"},{"issueList":"Prioritized list of UI issues found"}] |
| linksTo | ["fix","code-review","scout"] |
| linkedFrom | ["cook","team","ship"] |
| preferredNextSkills | ["fix","code-review"] |
| fallbackSkills | ["scout","debug"] |
| riskLevel | low |
| memoryReadPolicy | selective |
| memoryWritePolicy | selective |
| sideEffects | ["Takes screenshots (creates image files)","Opens browser sessions via Playwright","Does NOT modify source code"] |
Test-UI Skill
Purpose
Systematically test user interfaces across viewports, accessibility standards, and interaction patterns. This skill uses visual testing (screenshots), automated accessibility auditing, and interaction verification to catch UI problems that unit tests miss.
UI bugs are user-facing bugs. They are the first thing users see and the last thing developers test. This skill closes that gap.
Workflow
Phase 1: Test Setup
-
Identify the test target:
- URL of a running application
- Specific page or route
- Component in a Storybook or dev server
-
Define viewport matrix (default set):
| Name | Width | Height | Device Class |
|---|
| Mobile S | 320 | 568 | iPhone SE |
| Mobile M | 375 | 667 | iPhone 8 |
| Mobile L | 414 | 896 | iPhone 11 |
| Tablet | 768 | 1024 | iPad |
| Desktop | 1280 | 800 | Laptop |
| Desktop L | 1920 | 1080 | Full HD |
-
Set up the browser using Playwright MCP:
- Navigate to the target URL
- Wait for page load completion
- Dismiss any modals/cookie banners that obscure content
Phase 2: Visual Testing
-
For each viewport in the matrix:
a. Resize the browser to the viewport dimensions
b. Wait for layout to settle (resize can trigger animations)
c. Take a full-page screenshot
d. Take a viewport-only screenshot (above the fold)
e. Record any visual anomalies observed:
- Text overflow / truncation
- Element overlap
- Broken layout (flex/grid issues)
- Missing images or icons
- Inconsistent spacing
- Z-index conflicts (elements stacking incorrectly)
-
Capture key states (if interactive elements exist):
- Default state
- Hover state (for interactive elements)
- Focus state (keyboard navigation)
