Do I need to configure environment secrets manually?

The skill generates the necessary workflow code and provides a checklist of secrets (like VERCEL_TOKEN or CHROMATIC_PROJECT_TOKEN) you need to add to your GitHub repository settings.

What CI/CD providers does this skill support?

The skill primarily generates GitHub Actions workflows, offering deployment configurations for Vercel, Netlify, GitHub Pages, and AWS S3.

Can I use this for accessibility testing?

Yes, the generated pipelines include steps for automated interaction tests and accessibility checks to ensure your components meet WCAG standards.

Does it include visual regression testing?

Yes, it provides out-of-the-box configuration for Chromatic, allowing you to capture screenshots and approve visual changes directly within your PRs.

Does it support monorepos?

While optimized for standard Storybook installations, the generated YAML can be easily adapted for monorepo structures like Turbo or Nx.

Storybook CI/CD Generator

Name: Storybook CI/CD Generator
Author: flight505

byflight505

0•

배포 및 DevOps

Automates the creation of production-ready CI/CD pipelines for Storybook deployment, visual regression testing, and automated quality checks.

The Storybook CI/CD Generator skill streamlines the DevOps workflow for frontend teams by automatically configuring comprehensive GitHub Actions pipelines. It integrates essential development practices such as Chromatic for visual regression, automated interaction and accessibility testing, and seamless deployment to platforms like Vercel or Netlify. By generating standardized, high-quality workflow files, it enables teams to establish robust PR preview environments and maintain visual consistency across component libraries with minimal manual effort.

주요 기능

01Pull Request preview comments with live URLs

02Automated GitHub Actions workflow generation

03Multi-platform deployment support (Vercel, Netlify, AWS S3)

040 GitHub stars

05Bundle size tracking and performance analysis

06Integrated Chromatic visual regression testing

사용 사례

01Standardizing CI/CD workflows across multiple frontend repositories

02Adding robust deployment pipelines to an existing React or Vue component library

03Setting up a new Storybook project with automated visual testing and PR previews

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add flight505/storybook-assistant ci-cd-generator

For use in Claude.ai and ChatGPT

Download Skill