Getting it into your agent
It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.
git clone --depth 1 https://github.com/lancewillett/ai-pluginsnpx agentmods add skills/lancewillett/ai-plugins/visual-screenshotsWrote 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/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<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="Reviewed on agentmods" width="80" 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.1 | $0.00021 | $0.04754 |
| Opus 5.5 | $0.00008 | $0.01902 |
| Sonnet 5.5 | $0.00004 | $0.00951 |
| Haiku 4.5 | $0.00002 | $0.00475 |
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 1mo 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.
- 1mo ago Changed cc013d6fc23f
- 1mo 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 (3 stars, last pushed 1mo ago), licensed MIT. It adds 21 tokens to every session and 4,754 once invoked, about $0.0001 per session on Opus 5.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
debug-optimize-lcp
Guides debugging and optimizing Largest Contentful Paint (LCP) using Chrome DevTools MCP tools. Use this skill whenever the user asks about LCP performance, slow page loads, Core Web Vitals optimization, or wants to understand why their page's main content takes too long to appear. Also use when the user mentions…
interactive-login
Log a CLI in with a browser/device-code flow (aws sso, gh, glab, gcloud, …) and save the result to the keychain so later commands can request it through execute.credentials.
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.
azure-messaging-webpubsub-java
Build real-time web applications with Azure Web PubSub SDK for Java. Use when implementing WebSocket-based messaging, live updates, chat applications, or server-to-client push notifications.
cua-driver
Use Cua Driver for desktop or browser tasks that are awkward or unavailable through Bash/APIs, or when the user explicitly wants GUI interaction: app testing, visual bug reproduction, form filling, calendar entry, screenshots, and demo recording. Also covers Cua setup; not OpenAI Codex Computer Use or web research.
open-design-browser
Inspect and exercise local HTML design artifacts with the existing agent-browser CLI, including screenshots and keyboard or interaction checks. Use when rendered evidence helps author or review a design; excludes browser installation, remote services, and unrelated browser automation.