test-ui

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

1. Identify the test target:

   • URL of a running application
   • Specific page or route
   • Component in a Storybook or dev server

2. 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

3. 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

4. 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)

5. Capture key states (if interactive elements exist):

   • Default state
   • Hover state (for interactive elements)
   • Focus state (keyboard navigation)