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

storybook-screenshot-docs

Captures full-page HiDPI screenshots of Storybook component Docs pages across four themes.

8.0k|560|Updated Mar 3, 2022
Search Tags:#themes#playwright#storybook#screenshot#Documentation#capture#hidpi
One-click install
npx skills add https://github.com/podman-desktop/podman-desktop --skill storybook-screenshot-docs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: storybook-screenshot-docs
Source: https://github.com/podman-desktop/podman-desktop/tree/main/.agents/skills/storybook-screenshot-docs
Command: npx skills add https://github.com/podman-desktop/podman-desktop --skill storybook-screenshot-docs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Manually capturing consistent, retina-quality screenshots of a Storybook component's full documentation page across light, dark, and high-contrast themes is tedious and error-prone, especially when lazy-loaded stories fail to render.

Core Features & Use Cases

  • Full-Page HiDPI Capture: Uses Playwright with a 2x device scale factor and fullPage screenshots to capture the entire scrollable Docs page.
  • Four-Theme Coverage: Automatically captures light, dark, hc-light, and hc-dark theme variants via Storybook globals in the iframe URL.
  • Lazy-Load Handling: Scrolls to the bottom and back before capturing so all story previews render instead of appearing as blank placeholders.
  • Use Case: A developer updating a component's visual documentation needs PNG screenshots of the autodocs page in every theme to attach to a pull request or design review.

Quick Start

Capture full-page screenshots of the Storybook Docs page for story ID progress-linearprogress in all four themes and save them to the project root with the prefix linear-progress-docs.

Frequently Asked Questions about storybook-screenshot-docs

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

FAQPage Schema
How do I take a full-page screenshot of a Storybook Docs page?▼

Navigate Playwright directly to the iframe URL (iframe.html?id={STORY_ID}--docs&viewMode=docs) rather than the Storybook shell, then call page.screenshot with fullPage set to true. The shell embeds Docs in an iframe, so fullPage only captures the outer frame otherwise.

How do I capture Storybook in dark or high-contrast themes?▼

Append the theme as a global to the iframe URL, for example globals=theme:dark or globals=theme:hc-dark. The supported values are light, dark, hc-light, and hc-dark, using hyphens rather than camelCase.

Why are some Storybook stories blank in my full-page screenshot?▼

Story previews are lazy-loaded, so they render as blank placeholders if never scrolled into view. Scroll to the bottom of the page, wait about 2000ms for stories to render, then scroll back to the top before capturing.

How do I take retina or HiDPI screenshots with Playwright?▼

Use the Chrome DevTools Protocol to send Emulation.setDeviceMetricsOverride with deviceScaleFactor set to 2 before capturing. This produces a 2x resolution PNG while keeping the CSS viewport width unchanged.

What are the prerequisites for capturing Storybook screenshots with Playwright MCP?▼

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 component's story ID prefix, an output directory, and a filename prefix.

Related Skills

Explore More Software Engineering Skills→
UiPathUiPath
18

apollo-install

Clone the apollo-ui repository, install dependencies, build packages, and start Storybook on port 6006.

Official
Intermediate
Eva813Eva813
2

figma-export

Export Figma frames as PNG images via a Python script.

Community
Intermediate
Prompt-or-Die-LabsPrompt-or-Die-Labs
7

visual-regression-test-setup

Set up automated visual regression testing with Percy, Chromatic, Playwright, or BackstopJS.

Official
Intermediate
vecearvecear

visual-regression-tester

Automate visual regression testing of UI with Playwright, Chromatic, or Percy.

Community
Advanced