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 skills add dieter-medium/bidi2pdf --skill page-screenshotsgit clone --depth 1 https://github.com/dieter-medium/bidi2pdfWrote 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/dieter-medium/bidi2pdf/page-screenshots)<a href="https://agentmods.dev/skills/dieter-medium/bidi2pdf/page-screenshots"><img src="https://agentmods.dev/badge/skills/dieter-medium/bidi2pdf/page-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/dieter-medium/bidi2pdf/page-screenshots"><img src="https://agentmods.dev/badge/skills/dieter-medium/bidi2pdf/page-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.00074 | $0.01069 |
| Opus 5.5 | $0.00030 | $0.00428 |
| Sonnet 5.5 | $0.00015 | $0.00214 |
| Haiku 4.5 | $0.00007 | $0.00107 |
Grade A, and why
page-screenshots scanned grade A with 0 findings 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 today.
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.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 85 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Screenshots for review with bidi2pdf
A reviewer, human or agent, judges a page from what Chrome draws. Shoot every page that changed at phone width first, then desktop, each in light and dark mode, and hand over the files with the page and the width in their names.
Does not: compare screenshots against a baseline or judge them - it produces them. For a
visual regression check, diff the PNGs in your own test (bidi2pdf's contains_pdf_image compares
images inside a PDF, see pdf-specs).
Ground rules
- bidi2pdf is the renderer. If it fails, report its
error.code,error.hintand exit code; never make the PDF or screenshot another way (Chrome's own print-to-PDF, another PDF engine). - Install nothing unasked. Name what is missing and suggest a way (the
render-pdfskill's preflight); run nothing that changes the system without the user's yes. - bidi2pdf's results first. Read its
--jsonresult instead of inspecting the PDF with other tools.
1. One shot
bidi2pdf diagnose --url http://app:4000/pricing --screenshot pricing.png --media screen --color_scheme dark
The shot is the whole document at the browser's default viewport. Good for "what did Chrome see"; for review sets with fixed widths use the script below.
2. A review set
SKILL_DIR=/absolute/path/to/skills/page-screenshots
ruby "$SKILL_DIR/scripts/screenshots.rb" --base http://app:4000 --pages /,/pricing,/signup \
--widths 360,1280 --out tmp/screenshots --remote-browser-url http://remote-chrome:3000/session
Set SKILL_DIR first, to the absolute path of this skill's own folder - the folder of this SKILL.md, which the
agent (Claude Code, Codex) names when it loads the skill. Nothing guarantees that the variable is already set:
without it, the command looks for /scripts/screenshots.rb. In a checkout of bidi2pdf it is
"$PWD/claude-plugin/skills/page-screenshots". Run the script by that path, not relative to the project you are
shooting.
It writes one PNG for every page, width and colour scheme and prints each path:
<page path>-<width>-<scheme>.png, with the page's folders kept (/account/settings becomes
account/settings-360-light.png, / becomes index-...). When a page's path holds characters a file
name should not, or a query, the name gets a short hash of the path, so no two pages overwrite each
other. It sets the viewport, emulates prefers-color-scheme
with media: screen, waits for the network to go quiet and captures the full page. Without
--remote-browser-url it starts a local chromedriver. It needs the bidi2pdf release with
BrowserTab#emulate_media (0.1.23 or later).
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- today Changed · +12 lines 9ce23ed713a2
- yesterday First seen · 73 lines · 74 tokens per session scan A 477599f7be0a
page-screenshots is a skill published in the GitHub repository dieter-medium/bidi2pdf (58 stars, last pushed today), licensed MIT. It adds 74 tokens to every session and 1,069 once invoked, about $0.0003 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-10-26.
Other skills, from other repositories
webui-code
Use this skill when generating or reviewing WebUI code. This skill contains knowledge on WebUI code following Chrome's Lit-element architecture and styling guidelines.
figma-design-review
Critique and review Figma designs to ensure alignment with Chromium codebase components, tokens, and structure. Use when the user asks to critique, review, or audit a design, check alignment with code, or compare a Figma node against component specifications or coding standards.
figma-to-webui
Recreate Figma design frames as production-level Chromium WebUI code following Chrome's Lit-element architecture and styling guidelines. Use when asked to create WebUI code from a Figma frame URL.
figma-to-views-json
Recreate Figma design frames as prototype-ready Chromium Views JSON script following Chrome's native Views architecture, component guidelines, and color/shape token mappings. Use when asked to create C++ Views Prototype JSON script from a Figma frame URL.
figma-to-views
Recreate Figma design frames as production-ready Chromium C++ Views code following Chrome's native Views architecture, component guidelines, and color/shape token mappings. Use when asked to create C++ Views code from a Figma frame URL.
chrome-components
Use this skill when you need to map components across platforms, reference Chrome Design System component data, or generate a component spec.