Claude Code UI Testing Skill for Dark Mode and Narrow Controls
Check an interface across viewport, theme, and interaction states. Find buttons or focus indicators that disappear on dark backgrounds and verify narrow-screen layout.
中文Install in Claude Code
Use Claude Code with the pinned skill and a browser preview. Bring the target viewport widths and themes.
- Get the complete `skills/ui-testing` directory from the pinned revision.
- Copy it into the target project's `.claude/skills/` and confirm `.claude/skills/ui-testing/SKILL.md`. Start Claude Code at the project root and describe a task matching the skill's purpose.
Example task
Inspect a fictional report export button at 320 pixels in dark mode. Check text, border, and keyboard focus visibility and note horizontal overflow.What to check
Record theme, width, and observations for each state. Add measured contrast or screenshots when they help reproduce a finding.
Original SKILL.md on GitHub · Updated
Frequently asked question
Can a desktop screenshot establish mobile behavior?
Also check narrow layout and touch interaction. Use the keyboard to verify that focus is distinguishable.