fullpage-screenshot

An open agent skill for capturing full-page screenshots of a website at several viewport widths in one run.

make install                                   # into ~/.claude/skills
make capture URL=https://example.com           # or run it directly

width  requested  captured  height  status
375    375        375       4205    ok
768    768        773       3865    OVERFLOWS BY 5px
992    992        992       2707    ok
  • Whole page, not the viewport. Uses the browser's own full-page capture, so sticky headers appear once rather than in every stitched slice.
  • Waits for images. A full-page capture otherwise races image decoding.
  • Finds a Chrome you already have instead of downloading another one.
  • Reports horizontal overflow for free. A full-page capture expands to fit overflow, so a captured width above the requested width is a responsive bug.
  • Handles pages that need setting up - basic auth, cookie banners, state toggles - through --auth and --prepare.

See SKILL.md for the full interface and references/troubleshooting.md when a browser will not start.

Layout

fullpage-screenshot/     the skill itself - this is what an agent reads
  SKILL.md               metadata and instructions
  scripts/capture.mjs    the capture script
  references/            troubleshooting, loaded only when needed
skill.json               package manifest, for registries
Makefile                 install, validate, run

The skill sits in a subdirectory rather than at the repository root because the Agent Skills spec requires the name in the frontmatter to match its parent directory name. The repository is named for people browsing GitHub; the directory is named for the spec.

Validated with the reference implementation:

make validate     # npx skills-ref validate ./fullpage-screenshot
# Valid skill: ./fullpage-screenshot

Install

git clone https://github.com/mad-coders/fullpage-screenshot-ai-skill
cd fullpage-screenshot-ai-skill
make install
make check
target what it does
make install copy into ~/.claude/skills/fullpage-screenshot and install puppeteer-core
make install-project into ./.claude/skills instead, so it travels with a repo
make link symlink rather than copy, so git pull updates the installed skill
make check confirm it is installed, and report which browsers actually launch
make uninstall remove it
make capture URL=... run a capture without remembering the flags

How Claude finds it

Claude Code reads SKILL.md from two places, and the directory name has to match the name in the frontmatter:

~/.claude/skills/fullpage-screenshot/SKILL.md          personal, every project
<project>/.claude/skills/fullpage-screenshot/SKILL.md  project, shared via git

Agents load a skill progressively: the name and description at startup for every skill, the rest of SKILL.md once the skill is chosen, and anything in scripts/ or references/ only when it is actually needed. That is why the troubleshooting notes live in references/ rather than in SKILL.md - they cost nothing until something breaks.

The description in the frontmatter is the whole discovery surface. Claude decides whether a skill applies by matching the task against that one line, so it names the situations rather than the implementation - "screenshot a site", "full-page captures", "check a page across breakpoints". A description that said "wraps puppeteer" would never match anything a person actually asks for.

Skills are listed when a session starts, so open a new session after installing. Then either ask for the thing - "take full-page screenshots of example.com at mobile and desktop" - or invoke it directly with /fullpage-screenshot.

Licence

MIT - see LICENSE.