storybook-screenshot-story

Name: storybook-screenshot-story
Availability: InStock
Author: podman-desktop

Captures HiDPI screenshots of Storybook stories across four UI themes using Playwright.

8.0k|560|Updated Mar 3, 2022

Search Tags:#themes #playwright #storybook #screenshot #Visual Testing #capture #hidpi

Ready to run

npx skills add https://github.com/podman-desktop/podman-desktop --skill storybook-screenshot-story

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: storybook-screenshot-story
Source: https://github.com/podman-desktop/podman-desktop/tree/main/.agents/skills/storybook-screenshot-story
Command: npx skills add https://github.com/podman-desktop/podman-desktop --skill storybook-screenshot-story

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Manually capturing consistent, retina-quality screenshots of Storybook components across light, dark, and high-contrast themes is repetitive and error-prone. This Skill automates the capture of 2x device-scale-factor PNG screenshots for any Storybook story in all four themes.

Core Features & Use Cases

Multi-theme capture: Generates screenshots for light, dark, hc-light, and hc-dark themes in a single automated pass.
HiDPI output: Uses CDP device metrics override with a 2x device scale factor, producing true retina-resolution PNG files.
Use Case: A developer updating a LinearProgress component needs visual documentation of how it renders in every theme. Provide the story ID and output prefix, and receive four consistently sized PNG files ready for a pull request or design review.

Quick Start

Screenshot the Storybook story progress-linearprogress--basic in all four themes and save the PNGs to the project root with the prefix linear-progress.

Frequently Asked Questions about storybook-screenshot-story

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

FAQPage Schema

How do I screenshot a Storybook story in multiple themes?▼

Provide the story ID from the Storybook URL, an output directory, and a filename prefix. The skill navigates to the story iframe URL with each theme global (light, dark, hc-light, hc-dark) and saves one PNG per theme.

How to capture HiDPI retina screenshots with Playwright?▼

Use the CDP session command Emulation.setDeviceMetricsOverride with deviceScaleFactor set to 2 before taking the screenshot. An 800x200 CSS viewport then produces a true 1600x400 pixel PNG.

What prerequisites are needed to screenshot Storybook stories?▼

The Storybook dev server must be running on port 6006, started with pnpm --filter storybook dev, and the Playwright MCP server tools must be available. You also need the story ID from the Storybook URL.

Can this capture animated Storybook components?▼

No, the screenshot captures only a single frame after a 500ms render wait. For animated components where motion matters, use the storybook-record-video skill instead.

Why are my Storybook screenshots blank or partially rendered?▼

Blank captures usually occur when navigation completes before the story finishes rendering. The procedure waits for networkidle plus an additional 500ms delay after navigation to ensure the component fully renders before capturing.