Claude Code debug-visual for React Native screenshot checks

Use an existing screenshot and component code to report layout, color, typography, and small-screen issues, then verify approved changes.

中文

Install in Claude Code

Use the full ERNE React Native or Expo project in Claude Code with its visual-debugger project agent. Existing screenshots can be inspected directly; auto-capture needs the companion device tools.

Review `.claude/skills/debug-visual/SKILL.md` and its requirements at the pinned GitHub commit.
Create `.claude/skills/debug-visual/` in your project and save the reviewed file as `.claude/skills/debug-visual/SKILL.md`.
Start Claude Code from that project's root, then select `/debug-visual` in the slash menu.

Example task

Screenshot issue-27 comes from the project's local simulator. A card clips “Workshop registration” at a 320 px width.

What to check

Report {category: 'Typography', widthPx: 320, titleClipped: true} and identify the card. After an approved fix, compare a new screenshot at the same width.

Original SKILL.md on GitHub · Updated 2026-11-14

Frequently asked question

Do I need a simulator to begin the review?

Provide an existing local screenshot and the component code to start. Auto-capture or an updated screenshot requires the suitable device tools and simulator.