sb-hub

Orchestrate multi-phase Storybook audits for React and Vite projects.

18|Updated Jun 16, 2026
One-click install
npx skills add https://github.com/strongeron/storybook-workbench --skill sb-hub
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: sb-hub
Source: https://github.com/strongeron/storybook-workbench/tree/main/skills/sb-hub
Command: npx skills add https://github.com/strongeron/storybook-workbench --skill sb-hub

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires bash, python3, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill solves the fragmentation of Storybook audits by providing a centralized, state-aware orchestrator that guides you through a structured pipeline from discovery to production-ready stories.

Core Features & Use Cases

  • Pipeline Orchestration: Manages the sequential execution of setup, inventory, health checks, and story authoring with hard gates to ensure data integrity.
  • State-Aware Navigation: Automatically detects the current project state and recommends the single next surgical step, preventing manual errors and redundant work.
  • Use Case: When onboarding a new React + Vite project, use this Skill to diagnose the current setup, map the component inventory, and systematically build CSF3 stories without scattering files across your codebase.

Quick Start

Use the sb-hub skill to diagnose the current project state and recommend the next step for your Storybook audit.

Frequently Asked Questions about sb-hub

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit a React and Vite component library for Storybook coverage?

To audit a React and Vite component library, you orchestrate a multi-phase pipeline that maps your component inventory, validates design system health, and automates CSF3 story authoring. This ensures complete Storybook coverage without scattered files.

What is the best way to automate story authoring for existing React components?

Automating story authoring involves executing a state-aware pipeline that navigates from component discovery to production-ready stories. It systematically builds CSF3 stories by maintaining an audit ledger to ensure pipeline consistency and prevent manual errors.

Do I need bash and python3 to run a Storybook audit pipeline?

Yes, bash and python3 are required dependencies to run this Storybook audit pipeline. The orchestrator uses these standard POSIX utilities alongside your React and Vite environment to maintain the audit ledger and manage state-based navigation.

Can I use an automated Storybook audit to validate my design system health?

Yes, you can validate design system health during an automated Storybook audit. The pipeline applies hard gates to ensure data integrity, systematically checking your component inventory against design standards to guarantee health validation.

How does state-aware navigation prevent redundant work during a component inventory?

State-aware navigation prevents redundant work by automatically detecting your project's current state and recommending the single next surgical step. This structured approach avoids manual errors and ensures sequential execution from discovery to story authoring.

Why does my Storybook audit pipeline require an audit ledger?

A Storybook audit pipeline requires an audit ledger to maintain pipeline consistency and ensure data integrity. It stores discovery artifacts and state-based navigation data within the .storybook/ directory, acting as a centralized source of truth across all audit phases.