Storybook Screenshot Story

Documents

storybook-screenshot-story

Storybook Screenshot Story is an Agent Skill for documents published in the podman-desktop/podman-desktop repository on GitHub: a SKILL.md instruction file an AI agent can load to do this task.

Capture HiDPI (retina, 2x) screenshots of a Storybook component story in all four themes (light, dark, hc-light, hc-dark). Use when the user asks to screenshot, capture, or grab an image of a Storybook story or component.

View on GitHub ↗

QUICK START

How to use this skill

Bring this guide into your coding agent with a prompt tailored to the tool you use.

Open your project in Codex.
Copy and paste the prompt below.
Review files and risks before approving any action.

Prompt to paste

Inspect the Agent Skill at https://github.com/podman-desktop/podman-desktop/blob/HEAD/.agents/skills/storybook-screenshot-story/SKILL.md and all supporting files. Report provenance, permissions, scripts, dependencies, and security risks. Propose an exact installation into .agents/skills/storybook-screenshot-story, but wait for my approval before writing files or running scripts.

Copying this prompt does not install or run the skill. Review third-party files before use.

Storybook: Screenshot Story (HiDPI)

Capture retina-quality (2x device scale factor) PNG screenshots of a specific Storybook story across all four themes: light, dark, high-contrast light, and high-contrast dark.

Prerequisites

Storybook dev server running on port 6006 (pnpm --filter storybook dev)
Playwright MCP server available (mcp__plugin_playwright_playwright__* tools)

Required inputs

Ask the user for anything not provided:

Input	Example	Notes
Story ID	`progress-linearprogress--basic`	The Storybook story ID (from the URL `?id=...`)
Output directory	`.` (project root)	Where to save the PNG files
Filename prefix	`linear-progress`	Files will be named `{prefix}-{theme}.png`
Viewport width	`800`	CSS pixel width (default: 800)
Viewport height	`200`	CSS pixel height (default: 200)

Theme identifiers

Theme	Global value	Description
Light	`light`	Standard light theme
Dark	`dark`	Standard dark theme
HC Light	`hc-light`	High-contrast light theme
HC Dark	`hc-dark`	High-contrast dark theme

Procedure

1. Verify prerequisites

lsof -i :6006 | head -3   # Storybook running?

2. Capture screenshots for each theme

For each theme in [light, dark, hc-light, hc-dark], use a browser_run_code_unsafe call. Multiple themes can be captured in a single call for efficiency.

Story iframe URL pattern:

http://localhost:6006/iframe.html?id={STORY_ID}&viewMode=story&globals=theme:{THEME}

Screenshot code pattern (all four themes in one call):

async page => {
  const themes = ['light', 'dark', 'hc-light', 'hc-dark'];
  const outputDir = '{OUTPUT_DIR}';
  const prefix = '{PREFIX}';

  for (const theme of themes) {
    await page.goto(`http://localhost:6006/iframe.html?id={STORY_ID}&viewMode=story&globals=theme:${theme}`, {
      waitUntil: 'networkidle',
    });

    const cdp = await page.context().newCDPSession(page);
    await cdp.send('Emulation.setDeviceMetricsOverride', {
      width: { WIDTH },
      height: { HEIGHT },
      deviceScaleFactor: 2,
      mobile: false,
    });

    await page.waitForTimeout(500);

    await page.screenshot({
      path: `${outputDir}/${prefix}-${theme}.png`,
      type: 'png',
    });
  }

  return 'Captured all 4 themes';
};

3. Verify output

Read each screenshot to confirm correct theme rendering:

// Use the Read tool on each file to visually verify
{OUTPUT_DIR}/{PREFIX}-light.png
{OUTPUT_DIR}/{PREFIX}-dark.png
{OUTPUT_DIR}/{PREFIX}-hc-light.png
{OUTPUT_DIR}/{PREFIX}-hc-dark.png

4. Report results

List all produced files with their file sizes.

Important notes

Use CDP Emulation.setDeviceMetricsOverride with deviceScaleFactor: 2 for HiDPI output
The output PNG has true 2x pixel dimensions: an 800x200 CSS viewport produces a 1600x400 PNG
Wait at least 500ms after navigation for the story to fully render
For animated components, the screenshot captures a single frame - use the storybook-record-video skill instead if animation matters
The hc-light and hc-dark theme names use a hyphen, not camelCase