Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

full-page-screenshot · nexu-io — Claude Code skill: capture web pages

This skill captures full-page screenshots of web pages using Chrome DevTools Protocol with no external dependencies. Handy for portfolios, case studies, and audit reports.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add nexu-io/open-design --skill full-page-screenshot -a claude-code
Open on GitHub

What full-page-screenshot does

The skill uses Chrome DevTools Protocol to grab an entire web page — from top to bottom — in a single image. It requires no additional libraries, only what's already in your system. Useful when you need a screenshot for documentation, a report, or a portfolio without extra setup.

The skill responds to phrases like "full page screenshot" or "long screenshot". Just ask your agent to capture a page, and it will find this skill during planning and run it. Once installed, the skill lives in your agent's skills directory — the path depends on your IDE, but it's usually .agents/skills or .claude/skills.

What it helps with

  • capture a full web page in a single image
  • prepare screenshots for a portfolio or case study
  • generate a screenshot for a site audit

Example prompts for the agent

  • Take a full page screenshot of this page
  • Capture the entire height of the website in one image
  • Make a long screenshot for the report

How to install full-page-screenshot

1Skills CLI (Vercel)

npx skills add nexu-io/open-design --skill full-page-screenshot -a claude-code

2Manually: put the files in place

~/.claude/skills/full-page-screenshot/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/full-page-screenshot/

From the same set39

The whole set →
ui-ux-pro-max nexu-io A discovery catalog entry for the UI/UX Pro Max skill in OpenDesign. It registers design system triggers so agents recognize interface usability requests. Claude Code CX Codex Cursor +1 5,400installs frontend-design nexu-io Skill for building frontend interfaces with considered typography, color and layout — from landing pages to dashboards. Claude Code CX Codex Cursor +1 4,800installs threejs nexu-io Guides the agent in building browser 3D scenes, materials, interactive controls, and post-processing with Three.js. Claude Code CX Codex Cursor +1 3,400installs creative-director nexu-io This skill takes a creative concept from brief to presentation and checks it on three axes. Use it for campaign ideas and creative critique. Claude Code CX Codex Cursor +1 3,400installs design-brief nexu-io Parses an I-Lang design brief into a concrete spec with palette, typography, density, and constraints. Eliminates ambiguity from phrases like "make it professional." Claude Code CX Codex Cursor +1 3,400installs apple-hig nexu-io Integrates Apple Human Interface Guidelines for iOS, macOS, visionOS, watchOS, and tvOS into your coding agent during planning. Claude Code CX Codex Cursor +1 3,200installs hatch-pet nexu-io Creates, validates, and packages 8×9 animated pet spritesheets for Codex. Use it when turning visual references or concept prompts into importable digital pet companions. Claude Code CX Codex Cursor +1 3,100installs d3-visualization nexu-io This skill teaches the agent to create interactive D3.js visualizations. Use it to generate charts for dashboards, reports, and data-rich prototypes. Claude Code CX Codex Cursor +1 3,100installs

Other versions of full-page-screenshot

full-page-screenshot Alireza Rezvani Captures an entire web page as one PNG, including content below the fold. Useful for SPAs, lazy-loaded images, and very tall pages. Claude Code 564installs

Similar

agentation-self-driving benjitaylor Runs autonomous design critiques in a visible browser window and leaves feedback notes directly through the Agentation toolbar. Claude Code CX Codex Cursor +1 7,000installs apify-ultimate-scraper apify Connects your coding agent to Apify actors to extract web data from social networks, maps, and search engines into structured JSON or CSV files. Claude Code CX Codex Cursor +1 16,300installs playwright-skill lackeyjb Write and run Playwright scripts directly in your IDE. Auto-detects dev servers, takes screenshots, checks responsive layouts, tests login flows, and validates web functionality. Claude Code CX Codex Cursor +1 6,900installs wonda-cli degausai Enables terminal agents to generate media and automate research across LinkedIn, Reddit, and X using the Wonda CLI. Useful for automated content workflows. Claude Code CX Codex Cursor +1 74,600installs browserstack Alireza Rezvani Runs Playwright tests on the BrowserStack cloud grid and pulls execution logs with videos. Helpful for verifying cross-browser builds. Claude Code 1,614installs migrate Alireza Rezvani Moves Cypress or Selenium tests to Playwright. Use it when an existing test suite needs file-by-file conversion and checks after each change. Claude Code 1,586installs agent-browser vercel-labs A CLI skill for browser control: it opens pages, fills forms, clicks buttons, and tests web apps. Use it when an agent needs to act inside a website. Claude Code CX Codex Cursor +1 1,200,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. Claude Code Claude.ai 186,758installs

Questions about full-page-screenshot

How do I install full-page-screenshot in Claude Code?

Run npx skills add nexu-io/open-design --skill full-page-screenshot -a claude-code. After installation, the skill will be at ~/.claude/skills/full-page-screenshot/SKILL.md.

What does full-page-screenshot do?

It captures the entire height of a web page via Chrome DevTools Protocol — not just the visible area. No external dependencies required.

Which IDEs support this skill?

Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, and OpenCode. Each platform has its own install command.

Source text

SKILL.md · Apache-2.0 
---
name: full-page-screenshot
description: |
  Capture full-page screenshots of web pages via Chrome DevTools Protocol with zero dependencies. Useful for portfolios, case studies, and audit reports.
triggers:
  - "full page screenshot"
  - "long screenshot"
  - "devtools screenshot"
  - "web capture"
od:
  mode: image
  category: screenshots
  upstream: "https://github.com/LewisLiu007/full-page-screenshot"
---

# full-page-screenshot

> Curated from @LewisLiu007.

## What it does

Capture full-page screenshots of web pages via Chrome DevTools Protocol with zero dependencies. Useful for portfolios, case studies, and audit reports.

## Source

- Upstream: https://github.com/LewisLiu007/full-page-screenshot
- Category: `screenshots`

## How to use

This catalogue entry advertises the skill in OpenDesign so the agent
discovers it during planning. To run the full upstream workflow with
its original assets, scripts, and references, install the upstream
bundle into your active agent's skills directory:

```bash
# Inspect the upstream README for exact paths
open https://github.com/LewisLiu007/full-page-screenshot
```

Then ask the agent to invoke this skill by name (`full-page-screenshot`) or with
one of the trigger phrases listed in this skill's frontmatter.

© nexu-io · Apache-2.0 · nexu-io/open-design

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor