Skip to content
This repository was archived by the owner on Oct 14, 2026. It is now read-only.
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions packages/claude-plugin/skills/stories/SKILL.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,9 @@ description: Invoke FIRST, before creating, editing, or deleting components, sto

Prerequisites:

1. Storybook must be installed in the project. Invoke the `/storybook-init` skill to set up Storybook, but only if the user explicitly invoked this skill and approves a Storybook installation.
2. Storybook must be >= 10.5 (or an alpha/canary version). Invoke the `/storybook-upgrade` skill to upgrade it, but only if the user
explicitly approved a Storybook upgrade.
3. Ensure `@storybook/addon-mcp` is installed. If it is missing, install it with `npx storybook add @storybook/addon-mcp`.
1. **Storybook is not installed** (no Storybook dependencies in `package.json`, no `.storybook/` directory): invoke the `/storybook-init` skill, but only if the user explicitly approves a Storybook installation.
2. **Storybook is installed but outdated** (version < 10.5 and not an alpha/canary version): invoke the `/storybook-upgrade` skill, but only if the user explicitly approved a Storybook upgrade.
3. **Storybook is installed and up to date**: proceed. Ensure `@storybook/addon-mcp` is installed; if it is missing, install it with `npx storybook add @storybook/addon-mcp`.

Run `STORYBOOK_FEATURE_AI_CLI=1 npx storybook ai --help` and read the output in its **entirety** to get the **mandatory, ordered workflow** for working on UI changes, writing stories, and keeping stories in sync with every frontend component you create, modify, or delete. This workflow explains how to write stories, preview stories, and display a curated Storybook review.

Expand Down
6 changes: 6 additions & 0 deletions packages/claude-plugin/skills/storybook-init/SKILL.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,12 @@ name: storybook-init
description: Use when adding Storybook to a project that does not have Storybook configured yet.
---

Prerequisites:

1. **Storybook is not installed** (no Storybook dependencies in `package.json`, no `.storybook/` directory): invoke the `/storybook-init` skill, but only if the user explicitly approves a Storybook installation.
2. **Storybook is installed but outdated** (version < 10.5 and not an alpha/canary version): invoke the `/storybook-upgrade` skill, but only if the user explicitly approved a Storybook upgrade.
3. **Storybook is installed and up to date**: proceed. Ensure `@storybook/addon-mcp` is installed; if it is missing, install it with `npx storybook add @storybook/addon-mcp`.
Comment on lines +6 to +10

1. Run `npm create storybook@latest` inside your project's root directory to install the latest version of Storybook. Use the matching package-manager command when appropriate, such as `pnpm create storybook@latest` or `yarn create storybook`.
2. After initialization succeeds, run `npx storybook add @storybook/addon-mcp`.
3. Invoke the `/storybook-setup` skill to help the user set up project-specific Storybook configuration, such as the `.storybook/preview.ts` file.
5 changes: 1 addition & 4 deletions packages/claude-plugin/skills/storybook-setup/SKILL.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,7 @@ name: storybook-setup
description: Use this skill when Storybook is already installed and the user wants a working `preview` file and stories for real components.
---

Prerequisites:

1. Confirm Storybook exists (`package.json`, `.storybook/`). If not, switch to `/storybook-init`.
2. If Storybook is outdated or upgrade/repair is needed first, switch to `/storybook-upgrade`.
Prerequisites: Storybook must already be installed and up to date. If it is not installed, switch to `/storybook-init`; if it is outdated, switch to `/storybook-upgrade`.

Run `npx storybook ai setup` from the project root (or the Storybook package in a monorepo).

Expand Down
6 changes: 6 additions & 0 deletions packages/claude-plugin/skills/storybook-upgrade/SKILL.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,10 @@ name: storybook-upgrade
description: Use this skill when Storybook exists but needs an upgrade.
---

Prerequisites:

1. **Storybook is not installed** (no Storybook dependencies in `package.json`, no `.storybook/` directory): invoke the `/storybook-init` skill, but only if the user explicitly approves a Storybook installation.
2. **Storybook is installed but outdated** (version < 10.5 and not an alpha/canary version): invoke the `/storybook-upgrade` skill, but only if the user explicitly approved a Storybook upgrade.
3. **Storybook is installed and up to date**: proceed. Ensure `@storybook/addon-mcp` is installed; if it is missing, install it with `npx storybook add @storybook/addon-mcp`.
Comment on lines +6 to +10

Read https://storybook.js.org/docs/releases/upgrading.md in its **entirety** to get the latest Storybook upgrade instructions.
6 changes: 6 additions & 0 deletions packages/codex-plugin/plugins/storybook/skills/init/SKILL.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,12 @@ name: init
description: Use when adding Storybook to a project that does not have Storybook configured yet.
---

Prerequisites:

1. **Storybook is not installed** (no Storybook dependencies in `package.json`, no `.storybook/` directory): invoke the `$storybook:init` skill, but only if the user explicitly approves a Storybook installation.
2. **Storybook is installed but outdated** (version < 10.5 and not an alpha/canary version): invoke the `$storybook:upgrade` skill, but only if the user explicitly approved a Storybook upgrade.
3. **Storybook is installed and up to date**: proceed. Ensure `@storybook/addon-mcp` is installed; if it is missing, install it with `npx storybook add @storybook/addon-mcp`.
Comment on lines +6 to +10

1. Run `npm create storybook@latest` inside your project's root directory to install the latest version of Storybook. Use the matching package-manager command when appropriate, such as `pnpm create storybook@latest` or `yarn create storybook`.
2. After initialization succeeds, run `npx storybook add @storybook/addon-mcp`.
3. Invoke the `$storybook:setup` skill to help the user set up project-specific Storybook configuration, such as the `.storybook/preview.ts` file.
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,7 @@ name: setup
description: Use this skill when Storybook is already installed and the user wants a working `preview` file and stories for real components.
---

Prerequisites:

1. Confirm Storybook exists (`package.json`, `.storybook/`). If not, switch to `$storybook:init`.
2. If Storybook is outdated or upgrade/repair is needed first, switch to `$storybook:upgrade`.
Prerequisites: Storybook must already be installed and up to date. If it is not installed, switch to `$storybook:init`; if it is outdated, switch to `$storybook:upgrade`.

Run `npx storybook ai setup` from the project root (or the Storybook package in a monorepo).

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,9 @@ description: Invoke FIRST, before creating, editing, or deleting components, sto

Prerequisites:

1. Storybook must be installed in the project. Invoke the `$storybook:init` skill to set up Storybook, but only if the user explicitly invoked this skill and approves a Storybook installation.
2. Storybook must be >= 10.5 (or an alpha/canary version). Invoke the `$storybook:upgrade` skill to upgrade it, but only if the user
explicitly approved a Storybook upgrade.
3. Ensure `@storybook/addon-mcp` is installed. If it is missing, install it with `npx storybook add @storybook/addon-mcp`.
1. **Storybook is not installed** (no Storybook dependencies in `package.json`, no `.storybook/` directory): invoke the `$storybook:init` skill, but only if the user explicitly approves a Storybook installation.
2. **Storybook is installed but outdated** (version < 10.5 and not an alpha/canary version): invoke the `$storybook:upgrade` skill, but only if the user explicitly approved a Storybook upgrade.
3. **Storybook is installed and up to date**: proceed. Ensure `@storybook/addon-mcp` is installed; if it is missing, install it with `npx storybook add @storybook/addon-mcp`.

Run `STORYBOOK_FEATURE_AI_CLI=1 npx storybook ai --help` and read the output in its **entirety** to get the **mandatory, ordered workflow** for working on UI changes, writing stories, and keeping stories in sync with every frontend component you create, modify, or delete. This workflow explains how to write stories, preview stories, and display a curated Storybook review.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,10 @@ name: upgrade
description: Use this skill when Storybook exists but needs an upgrade.
---

Prerequisites:

1. **Storybook is not installed** (no Storybook dependencies in `package.json`, no `.storybook/` directory): invoke the `$storybook:init` skill, but only if the user explicitly approves a Storybook installation.
2. **Storybook is installed but outdated** (version < 10.5 and not an alpha/canary version): invoke the `$storybook:upgrade` skill, but only if the user explicitly approved a Storybook upgrade.
3. **Storybook is installed and up to date**: proceed. Ensure `@storybook/addon-mcp` is installed; if it is missing, install it with `npx storybook add @storybook/addon-mcp`.
Comment on lines +6 to +10

Read https://storybook.js.org/docs/releases/upgrading.md in its **entirety** to get the latest Storybook upgrade instructions.
Loading