component-screenshot

Community

Capture Storybook component previews.

Authorgihwan-dev
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Streamline UI validation by automatically generating consistent screenshots from Storybook stories, reducing manual screenshot effort and ensuring reliable visual references.

Core Features & Use Cases

  • Automated Storybook Screenshot: generate PNG previews from individual stories by story-id.
  • Configurable Viewport & Scale: supports width, height, and device-scale factors to match design specs.
  • End-to-end Workflow: builds static Storybook, serves it locally, and captures targeted components for design reviews or visual regression tests.

Quick Start

Run the capture script with a story-id and an output path to generate a screenshot.

Dependency Matrix

Required Modules

@playwright/testexpress

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: component-screenshot
Download link: https://github.com/gihwan-dev/claude-code-gui/archive/main.zip#component-screenshot

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 223,000+ vetted skills library on demand.