Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/lancewillett/ai-plugins/visual-screenshotsnpx skills add lancewillett/ai-plugins --skill visual-screenshotsgit clone --depth 1 https://github.com/lancewillett/ai-pluginsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/lancewillett/ai-plugins/visual-screenshots)<a href="https://agentmods.dev/skills/lancewillett/ai-plugins/visual-screenshots"><img src="https://agentmods.dev/badge/skills/lancewillett/ai-plugins/visual-screenshots.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00021 | $0.04697 |
| Opus 5 | $0.00010 | $0.02348 |
| Sonnet 5 | $0.00004 | $0.00939 |
| Haiku 4.5 | $0.00002 | $0.00470 |
Grade A, and why
visual-screenshots scanned grade A with 1 finding against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Makes network callslowCapability
Not a fault in itself. Listed so you know the mod talks to something, and to what.
Each placeholder is replaced in place, so asset URLs keep the order the files were passed in. If several screenshots share the same pixel dimensions, verify the mapping before composing: navigating to an asset URL in the How it starts
The opening of the file, as written. The whole thing — 376 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Visual screenshots
Capture before/after screenshots for PRs that change UI — CSS, components, layouts, templates, themes.
When to use
- Changes to CSS, SCSS, or styled-components
- React/PHP component changes with visual output
- Theme or template modifications
- Layout or responsive design changes
- When a PR template asks for screenshots (Gutenberg, WooCommerce, Calypso)
Workflow
Step 1: Identify targets
Determine what to screenshot based on the changes:
- Read the repo's CLAUDE.md for its
## Visual developmentsection — it lists the dev server command, key URLs, auth details, and screenshot targets. - Analyze the diff to identify which URLs/views are affected.
- Pick viewport sizes — default to 1280x800 (desktop). Add 390x844 (mobile) if responsive styles changed.
- Set screenshot quality — capture at 2x/device-scale quality by default so UI text remains readable in PRs.
Step 2: Capture "before" screenshots
Before making code changes (or on the base branch):
- Ensure the dev server is running (check the repo's CLAUDE.md for the command).
- Navigate to each target URL.
- Resize the viewport if needed.
- Wait for the page to fully load — use
browser_wait_forif there's dynamic content. - Take a screenshot at 2x/device-scale quality:
browser_take_screenshot → screenshots/before-{slug}.png
Use PNG format (type: "png") when the screenshot contains UI text, code, tables, dense controls, or visual evidence where readability matters. JPEG is only acceptable for photo-heavy pages where compression artifacts will not hide the change.
Name screenshots with descriptive slugs: before-front-page.png, before-editor-sidebar.png, before-mobile-nav.png.
Step 3: Make changes
Apply the code changes. Wait for hot reload or rebuild to complete.
If the dev server needs a restart, do that and wait for it to be ready.
Step 4: Capture "after" screenshots
Same URLs and viewport sizes as the "before" shots:
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 4d ago First seen · 376 lines · 21 tokens per session scan A 2a8aa7f949fc
visual-screenshots is a skill published in the GitHub repository lancewillett/ai-plugins (2 stars, last pushed 18d ago), licensed MIT. It adds 21 tokens to every session and 4,697 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 1 finding (makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
use-agent-browser-for-airi
Test AIRI display-model imports with agent-browser across stage-tamagotchi Electron, stage-web, and stage-pocket mobile web layouts. Use when uploading and verifying contributor-supplied Live2D ZIP, VRM, or MMD ZIP/PMX/PMD files through AIRI's model selector, including onboarding bypass, format-specific import…
opencli-sitemap-author
Use when creating or maintaining OpenCLI site sitemaps: agent-facing navigation, page-state, action, workflow, API-reference, pitfall, and fallback knowledge for a website. Use after browser exploration discovers durable site context, when a sitemap is stale, or when promoting local site knowledge into the repo.
interactive-login
How to complete browser/interactive logins (aws / gh / glab / gcloud). The platform backgrounds the login poller so it survives the human's browser round-trip — and when that does NOT work.
pinchtab-mcp
Use this skill when a task requires browser automation through PinchTab's MCP server connected to a remote browser instance. Covers navigation, element interaction, data extraction, form filling, multi-step flows, and session management via MCP tools.
web-browser
Automate and interact with web pages through Chrome or Chromium using the Chrome DevTools Protocol (CDP): navigate, click, fill forms, inspect content, take screenshots, and debug console or network activity. Use when an agent needs a real browser. Prefer headless Chrome unless visible browser interaction is required.
traceway-setup
Analyze and instrument repositories for Traceway observability. Use when the user wants to plan, add, migrate, or verify Traceway or OpenTelemetry monitoring for backend, browser, full-stack, mobile or iOS, or AI-agent software, including project topology and user-approved setup-plan creation. Backends use OTLP/HTTP…