// 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.
| name | storybook-screenshot-story |
| description | 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. |
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.
pnpm --filter storybook dev)mcp__plugin_playwright_playwright__* tools)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 | 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 |
lsof -i :6006 | head -3 # Storybook running?
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';
};
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
List all produced files with their file sizes.
Emulation.setDeviceMetricsOverride with deviceScaleFactor: 2 for HiDPI outputstorybook-record-video skill instead if animation mattershc-light and hc-dark theme names use a hyphen, not camelCaseGuide for working with the Podman Desktop extension feature mechanism: declaring features in an extension manifest, how the registry propagates them to the renderer, and how Svelte components detect active features. Use when adding a new feature declaration to an extension, writing renderer code that reacts to an extension being active/inactive, or debugging why a feature flag is not being picked up.
Reads a GitHub issue and all its linked issues, PRs, and comments to extract requirements and context. Invoke for any request combining a GitHub issue reference (#123, owner/repo#123, or URL) with a need to understand what the issue asks for — extracting acceptance criteria, understanding scope, gathering requirements before implementation or testing, or analyzing what changed. Extracts only what is explicitly stated in the issue and its linked references — does not invent or assume. Not for writing code, running tests, or debugging.
Set up or tear down the UX prototype screen switcher in the Podman Desktop titlebar. Use when the user wants to start a new UI/UX prototype, add prototype screen states, or remove the prototype infrastructure after a prototype ships. Triggers: "set up a prototype", "new prototype", "prototype switcher", "remove prototype", "tear down prototype".
Prepare and execute Design System component modernization. Drafts GitHub subtask issues, applies the Storybook HMR patch, and guides the modernization workflow. Use when starting work on a new component modernization, creating subtask issues, or when the user mentions design system modernization.
Apply or revert the local Storybook HMR patch that auto-rebuilds the UI package when source files change. Use when starting Storybook work, component modernization, or when the user mentions Storybook HMR or hot reload not working for UI components.
Record MP4 videos of a Storybook component story in all four themes (light, dark, hc-light, hc-dark). Use when the user asks to record, capture, or grab a video of a Storybook story or component animation.