browser-clipdocs
Guides

Agents and the skill

browser-clip is an agent skill. Claude Code and Codex read its SKILL.md and write the scripts; you review the contact sheet and tune the clip in the studio.

Install the skill#

The repository is private for now: an install clones it with your git credentials (gh auth login, then gh auth setup-git).

Claude Code#

The repository is a plugin marketplace with one plugin, the skill:

claude plugin marketplace add dev-foundations/browser-clip
claude plugin install browser-clip@browser-clip

Claude Code 2.1.292 and later do both in one step: claude plugin install browser-clip --marketplace dev-foundations/browser-clip. In a session, the same commands start with /plugin. A new session loads the skill: Claude uses it when you ask for a demo clip, and /browser-clip:browser-clip calls it. Each commit is a new version, which claude plugin update browser-clip@browser-clip fetches.

Codex#

Codex's skill installer copies the folder into ~/.codex/skills/browser-clip:

$skill-installer install https://github.com/dev-foundations/browser-clip/tree/main/browser-clip

To update, delete that folder and install again.

From a checkout#

Link the skill folder into each agent's skills folder, so both use the checkout you keep up to date (create the skills folders first if they do not exist):

New-Item -ItemType Junction -Path "$HOME\.claude\skills\browser-clip" -Target "$PWD\browser-clip"   # Claude Code
New-Item -ItemType Junction -Path "$HOME\.codex\skills\browser-clip" -Target "$PWD\browser-clip"    # Codex
ln -s "$PWD/browser-clip" ~/.claude/skills/browser-clip   # Claude Code
ln -s "$PWD/browser-clip" ~/.codex/skills/browser-clip    # Codex

Install the skill one way per agent. With a link and the plugin both in place, Claude Code loads the linked copy and skips the plugin's.

A zip#

In a checkout, node tools/pack-skill.mjs writes dist/browser-clip-<version>.zip and checks it. Unzip it into a skills folder, or load it for one Claude Code session with claude --plugin-dir browser-clip-0.1.0.zip.

How an agent works with it#

SKILL.md walks the agent from a brief to a render:

  1. infer the page, the flow, the format and the length from the request;
  2. pick a safe target: a local dev server, a fixture, staging;
  3. start from the closest template (browser-clip examples, init --from);
  4. validate until clean;
  5. info to capture and read the timing, and targets --after <step> to name the next element instead of guessing it;
  6. sheet, and look at it: the wrong page, a step that did nothing, the framing;
  7. render, and report the path, the size, the duration and the format.

Agents get everything as text: validate --json diagnostics with a fix each, info --json with every marker, targets --json with the targets checked in the page, and a JSON Schema (references/schema.json) that editors use for completion.

Ask for a clip#

Ask for what the viewer should see, not for the YAML:

Make a 20-second clip of creating a project in our app at localhost:3000: open New project, type "Launch plan", save, and end on the success message. Mock the API so the list shows three demo projects.

Source: docs-src/pages/guides/agents.md · browser-clip 0.1.0