generate-readme-screenshots

To automate Storybook screenshots for a README, this Skill runs a capture pipeline using Playwright and Sharp. It builds the static server, captures high-resolution WebP assets, and outputs them directly into your static image directory.

Chromatic visual diffs flag out of sync README screenshots when story data or layout changes occur. Regenerating high-resolution screenshots deterministically updates the corresponding WebP assets to resolve these visual discrepancies.

Yes, you can batch regenerate Storybook screenshots after updating documentation. The Skill coordinates the build and static server to capture all updated README visuals from the specified stories file.

Playwright works with Sharp for WebP image processing in screenshot automation by using Playwright to capture high-resolution browser output and Sharp to process and convert the captured images into WebP assets.

The best way to update static image assets when Storybook components change is running an automated capture pipeline. It deterministically regenerates README screenshots from the updated stories and mock data.

You need a static server to capture high-resolution Storybook screenshots because the pipeline builds and serves the stories locally. Playwright then captures the rendered output from this server for Sharp to process.