Storybook Screenshot Story

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:

Theme identifiers

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