skills.rest
podman-desktop
podman-desktopOFFICIAL
Explore all skills by this author →
GitHub

storybook-screenshot-story

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
One-click install
npx skills add https://github.com/podman-desktop/podman-desktop --skill storybook-screenshot-story
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
gihwan-devgihwan-dev
1

component-screenshot

Capture Storybook story screenshots as PNG assets by story-id.

Community
Intermediate
CleanExpoCleanExpo

visual-qa

Capture deterministic Playwright screenshots and diff them against stored baselines.

Community
Intermediate
ruvnetruvnet
70.1k

browser-screenshot-diff

Compares screenshots and accessibility snapshots between two recorded browser sessions to detect visual and DOM divergence.

Community
Intermediate
BjzyLabsBjzyLabs
1

vault-cli

Manage Vault secrets via CLI or REST API with authentication and policy controls.

Official
Intermediate