From visual-app-skills
Run a React Native or Expo app on a connected Android device or emulator, capture real screenshots via adb, read the Metro + logcat logs, and verify the visible UI and runtime behavior match what a recent code change intended. Use whenever the user asks to "test the app", "run it on Android", "see the visual changes", "verify a UI fix", "check if my change works/renders", or otherwise wants empirical on-device confirmation that a React Native / Expo change rendered correctly — even when they don't say "screenshot" or "logs". Handles starting Metro and the native build, waiting for the bundle + first frame, navigating with adb input, capturing the screen, reading Metro/logcat output (ReactNative / ReactNativeJS, Hermes, red-box errors), and reporting a concrete verdict with evidence. Covers bare React Native and Expo (dev client + run:android). Optionally diffs against a Figma reference when one is provided. Android only (iOS needs a Mac).
How this skill is triggered — by the user, by Claude, or both
Slash command
/visual-app-skills:react-native-test-android-visuallyThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Interactive, on-device verification of a React Native or Expo Android app — the
Interactive, on-device verification of a React Native or Expo Android app — the
"did my last change actually render correctly" check. Starts Metro and the
native build, runs the app on a device or emulator, captures real screenshots
via adb, reads the logs, and gives a concrete verdict.
Covers bare React Native (npx react-native run-android) and Expo
(npx expo run:android / dev client). Android only — iOS needs a Mac and
xcrun simctl, which is out of scope here.
references/capture-loop.md — the universal procedure: preflight,
launch in the background, wait for the first real frame, screenshot, capture
logs, analyze the PNG against the change, report a verdict.ReactNative/ReactNativeJS, Hermes, red-box), Fast Refresh, and the dev
menu — read references/react-native.md.references/driving-the-ui.md.references/troubleshooting.md.references/figma-comparison.md
(requires the Figma MCP server; skip entirely if you don't use Figma).references/other-frameworks.md or use the matching skill.scripts/check-devices.sh, launch.sh, snap.sh, capture-logs.sh,
stop.sh wrap the common adb/run commands with device disambiguation.
capture-loop.md shows how they fit together. Note that Metro runs as part of
the launched command's process group, so stop.sh tears it down too.
Provides behavioral guidelines to reduce common LLM coding mistakes, focusing on simplicity, surgical changes, assumption surfacing, and verifiable success criteria.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub lukas-hinterleitner/visual-app-skills --plugin visual-app-skills