Skill

storybook-setup-claude-launch

Sets up or repairs .claude/launch.json so Claude can start the project's Storybook dev server via the launcher, with autoPort, --ci, and --port flags.

Storybook

frontend

developer-tools

npx claudepluginhub storybookjs/mcp --plugin storybook

Popularity

Parent stars

248

Parent forks

Invocation

How this skill is triggered — by the user, by Claude, or both

Slash command

/storybook:storybook-setup-claude-launch

User invocable

Model invocable

Inline context

Default effort

Context Preview

The summary Claude sees in its skill listing — used to decide when to auto-load this skill

Use this skill when Storybook is configured but Claude needs a `.claude/launch.json` entry to start the dev server (for example when repair instructions mention missing launch config).

SKILL.md

36 lines · ~579 tokens

Similar Skills

storybook-init

248

Initializes Storybook in a project using the official CLI, adds the MCP addon, and configures Claude launch integration.

storybook

storybook-mcp-integration

172

Integrates Storybook MCP server to discover components via docs manifest, preview stories with embeddable URLs, and run tests/a11y audits. Use for reusing existing components, visual verification, and MCP-based testing in React/Storybook projects.

5 files5 tools

ork

bmad-dev-story

Implements user stories from context-filled spec files. Activates on 'dev this story [story file]' or 'implement the next story in the sprint plan' phrases.

1 file

bmad

Stats

LanguageTypeScript

Parent stars248

Parent forks34

MaintenanceExcellent

Last CommitJun 2, 2026

Actions

View Source View Plugin View on GitHub View README

Help us improve

Share bugs, ideas, or general feedback.

Stats

Actions

Help us improve

Share bugs, ideas, or general feedback.

Storybook Setup — Claude Launch

Use this skill when Storybook is configured but Claude needs a .claude/launch.json entry to start the dev server (for example when repair instructions mention missing launch config).

Workflow

Inspect the project's Storybook scripts and preferred package manager.

Inspect any existing .claude/launch.json.

Add or repair a Storybook launch entry that runs the existing Storybook script from the Storybook invocation directory.

Keep other launch entries intact.

Verify the launch entry by using the Claude launcher or by inspecting the saved launch config.

Use the project's existing Storybook script instead of inventing a new command whenever possible.

NEVER start Storybook with a Bash command or background task — not npm run storybook, not storybook dev, not run_in_background, not a detached process. "Start the preview" always means invoking the Claude launcher on the .claude/launch.json Storybook entry. A backgrounded dev server is not a launcher-managed preview and will not satisfy the story workflow.

Claude Launch Config Details

autoPort must be set to true to avoid port conflicts.

Storybook command must pass a --port flag set to the launcher-provided port env var, using the appropriate interpolation syntax for the target shell/launcher (for example, --port $PORT in a POSIX shell or --port %PORT% on Windows), so Storybook starts on the expected port.

Storybook command must use the --ci flag to skip prompts and ensure it can run in a non-interactive environment.

If this skill is invoked when creating stories

If this skill is invoked as part of the story creation flow, start the preview immediately after repairing the launch config — by launching the .claude/launch.json Storybook entry through the Claude launcher — so the user can continue with story creation without manually starting Storybook.