skills.rest
is-ivanov
is-ivanovCOMMUNITY
Explore all skills by this author →
GitHub

screenshot

Capture PNG screenshots from HTML mockups using Puppeteer.

2|1|Updated Nov 7, 2025
Search Tags:#html#png#screenshots#puppeteer#mockups#visual-regression
One-click install
npx skills add https://github.com/is-ivanov/rpm-ddd --skill screenshot-is-ivanov
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: screenshot
Source: https://github.com/is-ivanov/rpm-ddd/tree/main/.opencode/skills/screenshot
Command: npx skills add https://github.com/is-ivanov/rpm-ddd --skill screenshot-is-ivanov

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes the manual effort of opening HTML mockups one by one to capture consistent screenshots for reviews, documentation, or visual regression checks.

Core Features & Use Cases

  • Batch screenshot generation: Capture all HTML mockups in the default product-specification folders in one run.
  • Targeted capture: Generate screenshots for a single file, a matching folder, or files filtered by name pattern.
  • Viewport-aware rendering: Apply mobile sizing for mockups in mobile directories and desktop sizing elsewhere, with smart cropping to the main mockup element when available.
  • Use Case: When a product or engineering team updates story mockups, use this Skill to quickly regenerate PNG screenshots for stakeholder review without manually opening each page.

Quick Start

Ask the AI to use the screenshot skill to capture all mockups or specify a file or folder you want rendered as PNG images.

Frequently Asked Questions about screenshot

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

FAQPage Schema
How do I convert HTML mockups to PNG screenshots in bulk?▼

Converting HTML mockups to PNG screenshots in bulk requires a centralized Puppeteer runner to automate batch captures across a repository, outputting images to per-directory folders.

How do I capture mobile and desktop viewport screenshots from HTML files?▼

Capturing mobile and desktop viewport screenshots from HTML files involves applying viewport selection during Puppeteer rendering, applying mobile sizing for specific directories and desktop sizing elsewhere.

Do I need to install Puppeteer to take screenshots of HTML files?▼

You need Puppeteer to take screenshots of HTML files, as the process applies conditional npm installation to set up the centralized runner required for automated capture and element-based cropping.

Can I generate PNG screenshots from filename patterns instead of entire directories?▼

Generating PNG screenshots from filename patterns is supported, allowing targeted capture for a single file, a matching folder, or files filtered by name pattern rather than entire directories.

What is the best way to automate visual regression screenshots for product specifications?▼

Automating visual regression screenshots for product specifications is best handled by batch capturing all HTML mockups in default product-specification folders using an automated Puppeteer runner.

Related Skills

Explore More Software Engineering Skills→
lpjhelderlpjhelder

forge-setup

Install and configure kronon-forge with Node.js and npm.

Community
Intermediate
MacPhobosMacPhobos

Screenshot-Based UI Verification

Capture UI screenshots across multiple viewports and generate pull request descriptions.

Community
Intermediate
bruno0henriquebruno0henrique

image-creator

Render self-contained HTML and CSS into PNG images using Playwright.

Community
Advanced
aviz85aviz85
45

html-to-pdf

Convert HTML files, URLs, or streams to PDFs with Puppeteer and RTL support.

Community
Advanced