design-sync-storybook-source-shape

Community

Automate Storybook source shape design sync and component preview validation.

Authormkusaka
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill automates the synchronization of a repository's Storybook source shape, enabling efficient building, validating, and matching of component previews.

Core Features & Use Cases

  • Automated Storybook Sync: Synchronize Storybook source shape with component previews for building, validating, and matching.
  • Component Preview Validation: Validate component previews against the Storybook reference to ensure consistency.
  • Use Case: For a developer working on a React application, this Skill can automate the process of building and validating component previews against the Storybook reference, ensuring that the components look as expected before deployment.

Quick Start

Run the skill to synchronize the Storybook source shape and validate component previews for your project.

Dependency Matrix

Required Modules

reactplaywrightchromium

Components

scriptsreferencesassets

💻 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: design-sync-storybook-source-shape
Download link: https://github.com/mkusaka/ccskills/archive/main.zip#design-sync-storybook-source-shape

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