webpage-screenshot-md

Capture section-level webpage screenshots and generate Markdown image references.

Updated Apr 10, 2026
One-click install
npx skills add https://github.com/Harzva/webpage-screenshot-md-skill --skill webpage-screenshot-md
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: webpage-screenshot-md
Source: https://github.com/Harzva/webpage-screenshot-md-skill/tree/main
Command: npx skills add https://github.com/Harzva/webpage-screenshot-md-skill --skill webpage-screenshot-md

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires puppeteer, and includes scripts (resource) and references (resource) components.

What problem does it solve?

Webpage Screenshot MD provides a repeatable workflow to capture section-level screenshots from web pages and generate Markdown-ready image references for articles, docs, and notes.

Core Features & Use Cases

  • Capture section-level screenshots from any webpage using CSS selectors
  • Combine full-page and selector-based captures
  • Save images to a folder and emit Markdown image lines for easy insertion
  • Optionally update a target Markdown file directly

Quick Start

Run the capture_sections.js script with --url, --config, --out-dir and optional --md-out to generate images and corresponding Markdown lines.

Frequently Asked Questions about webpage-screenshot-md

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I capture section-level screenshots from a webpage for Markdown articles?▼

Capture section-level screenshots from a webpage by using CSS selectors to target specific elements. This approach generates Markdown-ready image references, allowing you to extract reusable visual sections and embed them directly into your articles or documentation.

How do I automate taking webpage screenshots using Puppeteer and output Markdown image links?▼

Automate webpage screenshots using Puppeteer by running a configurable pipeline that accepts a URL, a config file, and an output directory. The script saves the captured images to the specified folder and automatically generates the corresponding Markdown image links for insertion.

Can I capture specific webpage elements with CSS selectors and insert them directly into a Markdown file?▼

Yes, you can capture specific webpage elements using per-shot CSS selectors and insert them directly into a Markdown file. The pipeline supports optional Markdown insertion, allowing it to update a target Markdown file directly with the new image references.

Does this Puppeteer screenshot pipeline work with local HTML files and remote URLs?▼

Yes, the Puppeteer screenshot pipeline works with both local HTML files and remote URLs. It applies a configurable viewport and selector-based captures to ensure repeatable results across various content workflows, whether the target pages are hosted locally or remotely.

What is the best way to capture full-page and section-level screenshots for documentation?▼

The best way to capture full-page and section-level screenshots for documentation is to use a Puppeteer-based pipeline that combines full-page and selector-based captures. This method saves images to a folder and emits Markdown image lines, ensuring repeatable results for blogs and knowledge bases.

Do I need Puppeteer installed to use this webpage screenshot automation?▼

Yes, you need Puppeteer installed as a dependency to use this webpage screenshot automation. The capture pipeline relies on Puppeteer to control the browser, apply configurable viewports, and execute the per-shot CSS selectors for capturing section-level webpage screenshots.