generate-readme-screenshots

Official

Auto-generate README screenshots from Storybook.

AuthorlatticeHQ
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Chromatic visual diffs or story data/layout changes can leave README visuals out of sync; this Skill regenerates high-resolution README screenshots from Storybook stories, updating the corresponding assets deterministically.

Core Features & Use Cases

  • Deterministic generation of README screenshots from App.readmeScreenshots.stories.tsx and associated mock data.
  • Automated build, static server, and capture pipeline using Playwright and Sharp.
  • Supports batch regeneration after updates to Storybook components or documentation.

Quick Start

Run the capture pipeline to regenerate all README screenshots after updating Storybook.

Dependency Matrix

Required Modules

playwrightsharp

Components

scripts

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: generate-readme-screenshots
Download link: https://github.com/latticeHQ/latticeWorkbench/archive/main.zip#generate-readme-screenshots

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.