snap-browser

snap-browser

A Claude Plugin that captures focused screenshots of specific UI components from a running browser — with a red rectangle marking the exact element — and uses them for visual analysis and debugging.

/snap-browser:snap the submit button is in the wrong place
/snap-browser:snap the certificate card under education looks broken
/snap-browser:snap show me the skills section

---

How it works

1. You describe a UI element in plain English
2. Claude finds your running dev server (or reads the URL from your open browser)
3. A headless browser navigates to the page invisibly
4. The element is located using ARIA roles, labels, and text — then smart container expansion walks up the DOM to find the full component (not just a text label inside it)
5. Two screenshots are produced:
   • Tight crop — just the component, for close-up analysis
   • Context shot — the full viewport with a red rectangle showing where it sits
6. Claude analyzes what it sees and fixes the issue

---

Requirements

• Node.js 18+ — check with node --version
• Chrome, Chromium, Brave, or Edge installed on your machine (used for headless rendering — no download required)
• Claude Code CLI — install guide

---

Installation

This plugin is distributed as a Claude Code marketplace. You install it using the official /plugin command — never by editing config files by hand.

Claude Code supports three install scopes:

Scope	Where it writes	When to use
user (default)	~/.claude/settings.json	You, on your machine, across every project
project	<project>/.claude/settings.json	Shared with your team via git commit
local	<project>/.claude/settings.local.json	Just for you in one project, gitignored

Step 1 — Add the GitHub repo as a marketplace (one-time, per machine)

Claude Code can treat any public GitHub repo that contains a .claude-plugin/marketplace.json as a plugin marketplace. This repo does — so you can point Claude Code straight at GitHub, no cloning required.

Inside Claude Code, use any of these three forms:

# A. GitHub owner/repo shorthand (recommended)
/plugin marketplace add sirayhancse/snap-browser

# B. Full HTTPS URL to the repo
/plugin marketplace add https://github.com/sirayhancse/snap-browser

# C. Full git URL (works for private repos you have SSH access to)
/plugin marketplace add [email protected]:sirayhancse/snap-browser.git

CLI equivalent (any of the above also works as a flag to claude plugin marketplace add):

claude plugin marketplace add sirayhancse/snap-browser
# or
claude plugin marketplace add https://github.com/sirayhancse/snap-browser

Claude Code fetches and caches the repo locally, reads .claude-plugin/marketplace.json, and registers snap-browser as an available marketplace. It does not enable the plugin yet — that happens in Step 2.

Pinning a version. To lock to a specific release or commit, append @<ref>: /plugin marketplace add sirayhancse/[email protected] (works with tags, branches, or full commit SHAs)

Updating later. Run /plugin marketplace update snap-browser to pull the latest version.

Step 2 — Install the plugin

Option A: User-level (recommended) — available in every project

/plugin install snap-browser@snap-browser

Or CLI:

claude plugin install snap-browser@snap-browser

Option B: Project-level — shared with your team

From inside the project root:

/plugin install snap-browser@snap-browser --scope project

Or CLI:

claude plugin install snap-browser@snap-browser --scope project

This writes to .claude/settings.json in your repo. Commit that file so teammates get the plugin when they pull.

Option C: Local-only — just you, one project

/plugin install snap-browser@snap-browser --scope local

Writes to .claude/settings.local.json (already gitignored by Claude Code).

Syntax note: snap-browser@snap-browser is <plugin-name>@<marketplace-name>. Both happen to be snap-browser because this repo hosts a single-plugin marketplace of the same name.

Step 3 — Install the script's dependencies

The plugin ships a small Node.js capture script. Run this once after install:

# Claude Code will tell you the exact plugin path when you run /plugin list,
# or you can ask Claude to run this for you:
cd "$(claude plugin path snap-browser)/skills/snap" && npm install

Or simply invoke the skill once — Claude will prompt you to run npm install when the script first fails.

Step 4 — Verify

In Claude Code:

/plugin list

You should see snap-browser listed as enabled. Try it:

/snap-browser:snap show me the header

Browsing / interactive install