Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From storybook-assistant
Use this skill when the user asks to "setup CI/CD", "configure GitHub Actions", "deploy Storybook", "setup Chromatic", "add visual regression to CI", "create deployment pipeline", or wants to generate complete CI/CD workflows for Storybook deployment and testing.
npx claudepluginhub flight505/storybook-assistantHow this skill is triggered — by the user, by Claude, or both
Slash command
/storybook-assistant:ci-cd-generatorThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generate production-ready CI/CD pipelines for Storybook with one command. Includes automated testing, visual regression, deployment, and PR previews.
Generates complete visual regression testing setup with Storybook stories, configuration files, and CI/CD workflows for Chromatic, Percy, or BackstopJS.
Automates CI/CD pipeline setup with quality gates for linting, type checking, tests, builds, security audits, and deployments using GitHub Actions. Use for new projects, adding checks, or debugging failures.
Generates GitHub Actions CI configs for React/TypeScript projects with coverage gates, visual regression testing, and bundle budgets.
Share bugs, ideas, or general feedback.
Generate production-ready CI/CD pipelines for Storybook with one command. Includes automated testing, visual regression, deployment, and PR previews.
.github/workflows/storybook.yml:
name: Storybook CI/CD
on:
push:
branches: [main]
pull_request:
branches: [main]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- run: npm ci
- run: npm run build-storybook
- run: npm run test-storybook
- name: Upload coverage
uses: codecov/codecov-action@v3
visual-regression:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
- run: npm ci
- run: npm run chromatic
env:
CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_TOKEN }}
deploy:
needs: [test, visual-regression]
if: github.ref == 'refs/heads/main'
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
- run: npm ci
- run: npm run build-storybook
- name: Deploy to Vercel
uses: amondnet/vercel-action@v25
with:
vercel-token: ${{ secrets.VERCEL_TOKEN }}
vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
User: /setup-ci-cd
Detecting environment...
✓ Git repository found
✓ package.json detected
✓ GitHub Actions available
Select deployment target:
[1] Vercel (Recommended)
[2] Netlify
[3] GitHub Pages
[4] AWS S3
Select features:
☑ Automated testing
☑ Visual regression (Chromatic)
☑ Bundle size tracking
☑ PR preview comments
☐ Accessibility checks (already in tests)
Generating workflows...
✓ .github/workflows/storybook.yml
✓ .github/workflows/visual-regression.yml
✓ chromatic.config.js
✓ Updated package.json scripts
Setup environment secrets:
1. Go to GitHub → Settings → Secrets
2. Add: CHROMATIC_PROJECT_TOKEN
3. Add: VERCEL_TOKEN
4. Add: VERCEL_ORG_ID
5. Add: VERCEL_PROJECT_ID
Next PR will trigger full pipeline ✓
One-command CI/CD setup:
Result: Production-ready pipeline in 2 minutes.