screenshot
Render a local web page / built site and capture full-page screenshots (desktop + mobile) using the pre-installed Chromium. Use when asked to screenshot, render, or "see how it looks" for the vigiles landing site (site/), the audit report (report/), or any local HTML/dev server. Handles the scroll-reveal gotcha (below-the-fold cards captured blank) automatically.
- Installs
- 337
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/zernie/vigiles --skill screenshot- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads screenshot automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
screenshot — render a local page and capture it
Contributor dev skill. Drives the container's pre-installed Chromium (no playwright install,
no browser download) via playwright-core to full-page-screenshot a locally-served page. Built
from the hard-won gotchas of doing this by hand (see below).
When to use
- "screenshot the landing page / site", "how does the report look", "render
site/and show me". - Verifying a UI change in
site/(the landing) orreport/(the audit report) before committing.
Procedure
- Build the target (if it's a Vite app, you need
dist/):- Landing:
cd site && npm install && npm run build→site/dist/ - Report: it builds with the root
npm run build→dist/audit-report.template.html
- Landing:
- Serve it on a port (relative asset refs need the dir as web root):
cd site/dist && python3 -m http.server 8899 >/tmp/httpd.log 2>&1 & sleep 1 && curl -s -o /dev/null -w "%{http_code}\n" http://localhost:8899/ # expect 200 - Ensure the driver (no browser download — uses
PLAYWRIGHT_BROWSERS_PATH):node -e "require.resolve('playwright-core')" 2>/dev/null || npm install --no-save playwright-core - Shoot with the bundled script → writes
<outDir>/<name>-desktop.png+-mobile.png:Override viewports withnode .claude/skills/screenshot/scripts/shot.mjs http://localhost:8899/ "$SCRATCHPAD" landingSHOT_WIDTHS="1440x900,768x1024,390x844". - Look before sending:
Readthe desktop PNG to sanity-check it rendered, THENSendUserFile(display: render) so the user sees it. Send to the scratchpad dir, not the repo.
Gotchas this skill encodes (don't relearn them)
- Scroll-reveal = blank cards. Sections that fade in on scroll (
opacity-0+ IntersectionObserver) are captured INVISIBLE by a naivefullPagescreenshot — the hero renders, everything below the fold is blank. The script scrolls top→bottom to trigger the reveals, then returns to top before shooting. If cards are blank, this is why. - Chromium is pre-installed at
/opt/pw-browsers/chromium-*/chrome-linux/chrome; pass it asexecutablePath+--no-sandbox. NEVER runplaywright install(blocked; wastes time). - CJS-from-ESM import:
playwright-core's entry is CJS, and a script run from the scratchpad can't resolve the repo'snode_modulesby a bare import — usecreateRequire(cwd + '/package.json')(the script does this). - Mobile uploads sometimes 400 on
SendUserFile— retry once, or send desktop alone.
Not shipped
This is a .claude/ contributor skill (this repo's own harness), not a published consumer skill.
FAQ
What does the screenshot skill do?
Render a local web page / built site and capture full-page screenshots (desktop + mobile) using the pre-installed Chromium. Use when asked to screenshot, render, or "see how it looks" for the vigiles landing site (site/), the audit report (report/), or any local HTML/dev server. Handles the scroll-reveal gotcha (below-the-fold cards captured blank) automatically.
How do I install screenshot?
Run npx skills add https://github.com/zernie/vigiles --skill screenshot in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/screenshot/ (personal) or .claude/skills/screenshot/ (project).
Which AI agents can use screenshot?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is screenshot safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains screenshot?
It is published by zernie in zernie/vigiles. It has 337 recorded installs.
More from zernie/vigiles
edit-spec
zernie/vigiles
Edit a vigiles .spec.ts to change a compiled instruction file (CLAUDE.md / AGENTS.md) — add, modify, or remove a rule, section, command, or file pointer (including a request to add a "key file" — the keyFiles field is deprecated). Use whenever you need to change a CLAUDE.md/AGENTS.md that carries a vigiles hash (edit the spec, never the artifact), including adding a new enforce()/check()/guidance() rule.
strengthen
zernie/vigiles
Upgrade a vigiles spec's guidance() rules to enforce() — scan the guidance rules in a CLAUDE.md/AGENTS.md spec and find existing linter rules (ESLint, Ruff, Clippy, Pylint, RuboCop, Stylelint) that back them. Use when asked to strengthen, harden, or make vigiles rules enforceable; NOT for general linting or fixing lint errors.
test-harness
zernie/vigiles
Install vigiles and test a Claude Code harness — hooks, skills, agents, settings, CLAUDE.md — by picking the right tier (unit / deterministic / eval) and writing a test that passes. Use to check that a hook fires or blocks, that a skill triggers, that injected context lands; or to observe a run — which tools it called, whether it stayed inside its declared allowed-tools, what files and side effects it produced, how to intercept a call without executing it.
linter-docs
zernie/vigiles
Deep linter reference for authoring or debugging a vigiles enforce() rule — plugin tables, AST selectors, type-aware rules, auto-fix, and edge cases for ESLint, Ruff, Pylint, RuboCop, Stylelint, and Clippy. Use when you need the exact rule name or config for a specific linter, not for running a linter. (JVM/Go linters — detekt, ktlint, Checkstyle, golangci-lint — and Cedar have no deep-dive file yet; their reference lives in docs/linter-support.md.)
adopt-spec
zernie/vigiles
Adopt a typed .spec.ts for an existing hand-written CLAUDE.md — start from the file you already have, non-destructively
debug-my-harness
zernie/vigiles
Diagnose why an agent harness misbehaved by reading the local flight-recorder ledger (.vigiles/runs.jsonl) — which skills fired or got hijacked, which hooks blocked or wrongly allowed, which subagent tool-contract violations happened, and how a skill's trigger rate moved. Use when asked why a skill stopped firing, why a hook didn't block, why the wrong skill ran, or to debug/investigate what the harness actually did. NOT for writing new rules (use strengthen) or editing the spec (use edit-spec).
Popular docs & writing skills
grill-with-docs
mattpocock/skills
A relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.
lark-markdown
open.feishu.cn
飞书 Markdown：查看、创建、上传、编辑和比较飞书中的原生 Markdown 文件。当用户要操作飞书 Markdown 文件，或比较其远端版本及本地草稿时使用。纯本地 Markdown 文件操作不触发本 skill。不负责将 Markdown 导入为飞书在线文档，也不负责文件搜索、权限、评论、移动、删除等云空间管理操作。
writing-beats
mattpocock/skills
Writing, exploit; assemble raw material into a journey of beats, grounding each term before a beat leans on it.
writing-shape
mattpocock/skills
Writing, exploit: shape raw material into an article, paragraph by paragraph.
writing-fragments
mattpocock/skills
Writing, explore: mine raw fragments, no structure yet.
writing-for-agents
mattpocock/skills
Writing documents for agents. Use when creating or editing skills, or modifying AGENTS.md or CLAUDE.md.