From snap-browser
Captures a focused screenshot of a specific UI component from a running browser and uses it for visual analysis and debugging. Works with Chrome, Firefox, Safari, Arc, Brave — no browser setup needed. Use this skill IMMEDIATELY whenever the user mentions a UI element that looks broken, misaligned, or needs visual inspection — even if they don't explicitly say "screenshot". Trigger on: "/snap-browser:snap", "the submit button is wrong", "fix the UI of [element]", "take a screenshot of [element]", "show me the [component]", "the [element] is broken/misplaced", "take screenshot if needed", or any request combining a UI element with a visual problem.
How this skill is triggered — by the user, by Claude, or both
Slash command
/snap-browser:snapThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill captures focused screenshots of specific browser UI components for visual analysis. It uses a **headless browser only** — it never captures the desktop screen. Two images are always produced when an element is found:
This skill captures focused screenshots of specific browser UI components for visual analysis. It uses a headless browser only — it never captures the desktop screen. Two images are always produced when an element is found:
path) — tight clip of the component, possibly expanded to its parent containercontextPath) — viewport screenshot with a red rectangle marking the elementThe plugin ships with a Node.js capture script. Dependencies must be installed once:
cd "${CLAUDE_PLUGIN_ROOT}/skills/snap" && npm install
${CLAUDE_PLUGIN_ROOT} is an environment variable injected by Claude Code that resolves to this plugin's install directory — you never need to hard-code a path.
From $ARGUMENTS extract:
Look at the codebase router files to find the exact route:
src/App.tsx, src/router.ts, src/routes/ — React Router / TanStack Routerapp/**/page.tsx — Next.js App Routerpages/**/*.tsx — Next.js Pages Routersrc/routes/** — SvelteKit / RemixBuild the full URL: http://localhost:<port><path>
Check which port is running:
curl -s http://localhost:3000/ > /dev/null && echo "3000" || curl -s http://localhost:5173/ > /dev/null && echo "5173"
If the URL can't be inferred, omit it — the script auto-detects from the open browser or dev server.
Always invoke the script via ${CLAUDE_PLUGIN_ROOT}:
# Specific element on a specific page (preferred):
node "${CLAUDE_PLUGIN_ROOT}/skills/snap/scripts/snap.js" "<element description>" "<page url>"
# Auto-detect URL from open browser or running dev server:
node "${CLAUDE_PLUGIN_ROOT}/skills/snap/scripts/snap.js" "<element description>"
# Full page with the element highlighted (use when the element may be below the fold):
node "${CLAUDE_PLUGIN_ROOT}/skills/snap/scripts/snap.js" --full-page "<element description>" "<page url>"
# Full page, no specific element (use when the user says "show me the whole page"):
node "${CLAUDE_PLUGIN_ROOT}/skills/snap/scripts/snap.js" --full-page "<page url>"
Parse the JSON output for path and contextPath.
Result modes:
| mode | meaning |
|---|---|
element | Found. path = tight crop, contextPath = viewport with red rectangle. expanded: true means the crop was widened to the parent container. Read both images. |
viewport | Not found by locator. path = visible viewport. Identify visually, or re-run with --full-page. |
fullpage | --full-page was passed. path = full scrollable page. If a description was also passed and the element was located, the full page includes a red rectangle around it (boundingBox, expanded, strategy are returned). |
Read both path and contextPath (when mode: "element"). Analyze:
Find the component file in the codebase and apply the fix. Optionally re-run the script to confirm the fix looks correct.
When the locator matches a small or inline node (e.g., an <h3>Skills</h3> heading), the script walks up the DOM to find the real component boundary:
<section>, <article>, <aside>, <form>, <dialog>region, group, tabpanel, articlecard, panel, skill, certificate, timeline, experience, portfolio…button, input, img, a) are never expanded/snap-browser:snap the submit button is in the wrong place
→ element: "submit button" → find route → node "${CLAUDE_PLUGIN_ROOT}/skills/snap/scripts/snap.js" "submit button" "http://localhost:3000/checkout"
→ tight button crop + red rectangle context → identify CSS issue → fix
/snap-browser:snap the certificate card under education looks broken
→ element: "certificate card", page: education route
→ check router → node "${CLAUDE_PLUGIN_ROOT}/skills/snap/scripts/snap.js" "certificate card" "http://localhost:3000/education/certificates"
→ crop expands from card title to full card → find broken style → fix
/snap-browser:snap show me the login form
→ node "${CLAUDE_PLUGIN_ROOT}/skills/snap/scripts/snap.js" "login form" "http://localhost:3000/login" → full form captured
/snap-browser:snap take a full screenshot of the dashboard
→ node "${CLAUDE_PLUGIN_ROOT}/skills/snap/scripts/snap.js" --full-page "http://localhost:3000/dashboard" → full scrollable page
"submit button in checkout form" instead of "submit button".Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
npx claudepluginhub sirayhancse/snap-browser --plugin snap-browser