feat(plugins): drive skills via storybook ai CLI commands instead of the MCP proxy#284
Merged
Merged
Conversation
|
commit: |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #284 +/- ##
=======================================
Coverage 78.81% 78.81%
=======================================
Files 63 63
Lines 1860 1860
Branches 532 532
=======================================
Hits 1466 1466
Misses 219 219
Partials 175 175 ☔ View full report in Codecov by Harness. |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates the Codex and Claude plugin skill documentation to shift “stories” workflows toward using Storybook CLI storybook ai commands (instead of relying on an MCP-proxy-driven workflow), and removes the plugins’ .mcp.json MCP server configurations.
Changes:
- Rewrites the
storiesskill workflows to be CLI-driven (instance discovery, instruction loading, preview, and review publishing). - Updates
frontend-component-writingskills to add Storybook version compatibility guidance and enforce sequential workflow expectations. - Removes Codex/Claude plugin
.mcp.jsonfiles that previously configured@storybook/mcp-proxy.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 13 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/codex-plugin/plugins/storybook/skills/stories/SKILL.md | Updates Codex “stories” skill to reference storybook ai CLI workflow; currently contains multiple internal inconsistencies/invalid skill references that need fixes. |
| packages/codex-plugin/plugins/storybook/skills/frontend-component-writing/SKILL.md | Updates Codex component-writing workflow; opt-in resume step and referenced setup skill names need correction. |
| packages/codex-plugin/plugins/storybook/.mcp.json | Removes Codex plugin MCP server configuration. |
| packages/claude-plugin/skills/stories/SKILL.md | Updates Claude “stories” skill to a CLI-driven workflow; several wording/consistency fixes are needed to fully align steps. |
| packages/claude-plugin/skills/frontend-component-writing/SKILL.md | Updates Claude component-writing workflow; opt-in resume step needs correction after workflow renumbering. |
| packages/claude-plugin/.mcp.json | Removes Claude plugin MCP server configuration. |
Comments suppressed due to low confidence (4)
packages/codex-plugin/plugins/storybook/skills/stories/SKILL.md:15
- The workflow now includes “Step 0 — Prerequisites”, but the gating text still says not to edit stories until “Steps 1 and 2” are complete. This should include Step 0 as well to match the ordered workflow.
This is a STRICT, GATED workflow. You MUST execute the steps below in order and
satisfy each step's **Gate** before moving to the next. Do NOT skip, reorder, or
batch steps. Do NOT write or edit any `*.stories.*` file until Steps 1 and 2 are
complete. If a gate cannot be satisfied, STOP and report to the user instead of
working around it. Treat any shortcut as a failure of this workflow.
packages/claude-plugin/skills/stories/SKILL.md:25
- The workflow now has “Step 0 — Prerequisites”, but the gating text still says not to edit stories until “Steps 1 and 2” are complete. This should include Step 0 as well, otherwise the ordered workflow is internally inconsistent.
This is a STRICT, GATED workflow. You MUST execute the steps below in order and
satisfy each step's **Gate** before moving to the next. Do NOT skip, reorder, or
batch steps. Do NOT write or edit any `*.stories.*` file until Steps 1 and 2 are
complete. If a gate cannot be satisfied, STOP and report to the user instead of
working around it. Treat any shortcut as a failure of this workflow.
packages/claude-plugin/skills/stories/SKILL.md:72
- The Step 2 gate still refers to “this tool has returned” / “called it”, but Step 2 is now described as running a CLI command. Updating the wording avoids mixing tool-call terminology into the CLI workflow.
**Gate:** Do NOT create or edit any `*.stories.*` file until this tool has
returned and you are following its output. If you have not called it this task,
you are not allowed to write a story yet — go back and call it now.
packages/claude-plugin/skills/stories/SKILL.md:97
- Step 5 still instructs calling display-review like an MCP tool. Since this workflow is now CLI-based, update this to run
npx storybook ai display-review(and pass the saved port when supported), and refer to it as a command for consistency.
Once the stories render cleanly, call **display-review** so the user can review
exactly what changed in one place. This tool does NOT just return a link — it
publishes a curated **review page** inside the already-running Storybook and
returns its `reviewUrl`. The review page IS the deliverable; the raw
`preview-stories` URLs from Step 4 are for your own verification.
Comment on lines
+19
to
+22
| - You MUST NOT write or edit a story from memory or existing patterns. The | ||
| `get-storybook-story-instructions` output is the only acceptable source for | ||
| imports, structure, and conventions. | ||
| - You MUST NOT report a story as done until its preview link has been produced | ||
| (Step 4) AND the review page has been published and opened (Step 5). An | ||
| unverified story, or a change with no review page, is not a deliverable. | ||
| - IGNORE LOCAL REGISTERED STORYBOOK MCP |
Comment on lines
+55
to
+56
| **Gate:** Do NOT create or edit any `*.stories.*` file until you are following its output. If you have not called it this task, | ||
| you are not allowed to write a story yet — go back and call it now. |
Comment on lines
+65
to
+69
| ## Step 4 — Preview and verify | ||
|
|
||
| After changes, call **preview-stories** and open the returned links in Codex's | ||
| in-app browser to confirm the stories render without errors. These links are for | ||
| your own verification. | ||
| Produce a preview for every story you touched with **preview-stories** (prefer | ||
| `{ storyId }` inputs). Before showing any returned URL to the user, navigate to | ||
| it in the preview browser and confirm the story renders without errors. |
Comment on lines
+29
to
+32
| - You MUST NOT write or edit a story from memory or existing patterns. The | ||
| `get-storybook-story-instructions` output is the only acceptable source for | ||
| imports, structure, and conventions. | ||
| - YOU MUST USE THE PORT INPUT WHENEVER AVAILABLE FOR ANY TOOL CALL THAT SUPPORTS IT, to ensure your calls are routed through the Storybook MCP Proxy and not directly to the server. | ||
| - IGNORE PROJECT LOCAL STORYBOOK MCP. ONLY USE THE STORYBOOK MCP PROXY SERVER FOR ALL STORYBOOK-RELATED TOOL CALLS, to ensure you are following the MCP's instructions and your calls are routed through the proxy for accurate port handling and preview integration. | ||
| - IGNORE LOCAL REGISTERED STORYBOOK MCP |
Comment on lines
81
to
85
| ## Step 4 — Preview and verify | ||
|
|
||
| USE THE STORYBOOK MCP PROXY SERVER. | ||
|
|
||
| Produce a preview for every story you touched with **preview-stories** (prefer | ||
| `{ storyId }` inputs). Before showing any returned URL to the user, navigate to | ||
| it in the preview browser and confirm the story renders without errors. |
Comment on lines
+50
to
+53
| - Run `npx storybook ai --help` to get all available subcommands and options. | ||
| - Save the available subcommands and options in your working memory for reference. | ||
| - Run the ai subcommand to get the story-writing instructions. | ||
| - Follow the instructions in the output, which will include the exact imports, structure, and conventions to use for the story you are writing or editing. The instructions are the ONLY acceptable source for how to write the story; do NOT rely on memory or existing patterns. |
Comment on lines
+77
to
+81
| Once the stories render cleanly, call **display-review** so the user can review | ||
| exactly what changed in one place. This tool does NOT just return a link — it | ||
| publishes a curated **review page** inside the already-running Storybook and | ||
| returns its `reviewUrl`. The review page IS the deliverable. | ||
|
|
||
| - Group the stories you touched into `collections` covering the **visual | ||
| cascade** of the change: the changed component itself, the components that | ||
| import it, and the pages/containers that render them. Don't ship a | ||
| single-collection review unless the component is genuinely standalone. | ||
| - Every `storyId` you pass MUST come from a tool result this session | ||
| (`get-changed-stories`, `get-stories-by-component`, or `list-all-documentation`). | ||
| `display-review` validates every ID against the live index and rejects the | ||
| whole review if any are unknown — never invent IDs. | ||
| - Provide `title`, `description`, and `changedFiles` (the files you edited, most | ||
| central first). | ||
|
|
||
| Because the `reviewUrl` is a page, open it in Codex's in-app browser — do not | ||
| merely print it. Then surface it to the user as the very last thing in your | ||
| response, under its own heading (e.g. `## 👀 Review your changes`) as a markdown | ||
| link, with nothing after it. | ||
|
|
||
| **Gate:** Do NOT claim the task is complete until `display-review` has succeeded, | ||
| you have opened the returned `reviewUrl`, and that link is the final element of | ||
| your user-facing response. | ||
| returns its `reviewUrl`. The review page IS the deliverable; the raw | ||
| `preview-stories` URLs from Step 4 are for your own verification. |
Comment on lines
18
to
19
| The Storybook CLI ai subcommands is the source of truth for _how_ to write stories. This skill | ||
| is the **mandatory, ordered process** for working on them. |
Comment on lines
+64
to
+68
| - Run `npx storybook ai --help` to get all available subcommands and options. | ||
| - Save the available subcommands and options in your working memory for reference. | ||
| - Run the ai subcommand to get the story-writing instructions. | ||
| - If the subcommand allows a port option, use the port you saved in Step 1. | ||
| - Follow the instructions in the output, which will include the exact imports, structure, and conventions to use for the story you are writing or editing. The instructions are the ONLY acceptable source for how to write the story; do NOT rely on memory or existing patterns. |
Comment on lines
+26
to
+32
| - Storybook must be installed in the project. If it is not, invoke the | ||
| **storybook-init** skill to set it up, or ask the user if they want to set it | ||
| up before proceeding. If the user declines, STOP and report that Storybook is | ||
| required for story work. | ||
| - Storybook must be a canary version (0.0.0-canary) or at least version 10.5. If an older version is | ||
| installed, invoke the **storybook-upgrade** skill to upgrade it before | ||
| proceeding. |
✅ Deploy Preview for storybook-mcp-self-host-example canceled.
|
✅ Deploy Preview for storybook-mcp-self-host-example canceled.
|
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 6 out of 6 changed files in this pull request and generated 9 comments.
Comments suppressed due to low confidence (2)
packages/claude-plugin/skills/stories/SKILL.md:94
- Step 4 uses the Storybook AI CLI (
npx storybook ai preview-stories), but Step 5 switches back to callingdisplay-reviewas a tool. This should be made consistent (either both via CLI, or both via the same tool mechanism), otherwise the workflow is ambiguous.
## Step 5 — Publish the review page
Once the stories render cleanly, call **display-review** so the user can review
exactly what changed in one place. This tool does NOT just return a link — it
publishes a curated **review page** inside the already-running Storybook and
returns its `reviewUrl`. The review page IS the deliverable; the raw
`preview-stories` URLs from Step 4 are for your own verification.
packages/claude-plugin/skills/frontend-component-writing/SKILL.md:38
- The workflow says this skill is invoked before touching a component, but Step 2 refers to “the component you just touched” and the Workflow no longer includes the step to actually make the component change. This makes the procedure incomplete and internally inconsistent.
2. Invoke the **`stories`** skill to create, update, or remove the stories for
the component you just touched. Tell it which component changed and what
changed (new component, new props, new variants, renamed states, deleted
component, etc.) so it can cover or clean up the affected surface.
3. Let the `stories` skill run its full gated workflow — including producing the
Comment on lines
8
to
9
| The Storybook CLI ai subcommands is the source of truth for _how_ to write stories. This skill | ||
| is the **mandatory, ordered process** for working on them. |
Comment on lines
20
to
22
| - You MUST NOT write or edit a story from memory or existing patterns. The | ||
| `get-storybook-story-instructions` output is the only acceptable source for | ||
| imports, structure, and conventions. |
|
|
||
| If any MCP tool returns a "Storybook is not running" error, you MUST NOT ignore | ||
| it and MUST NOT proceed to write the story. STOP and recover: | ||
| Run `STORYBOOK_FEATURE_AI_CLI=1 npx storybook ai --help` subcommand to check for running Storybook instances. If there is a running instance, note its port and open the preview URL in the preview browser. |
Comment on lines
+77
to
+81
| Once the stories render cleanly, call **display-review** so the user can review | ||
| exactly what changed in one place. This tool does NOT just return a link — it | ||
| publishes a curated **review page** inside the already-running Storybook and | ||
| returns its `reviewUrl`. The review page IS the deliverable. | ||
|
|
||
| - Group the stories you touched into `collections` covering the **visual | ||
| cascade** of the change: the changed component itself, the components that | ||
| import it, and the pages/containers that render them. Don't ship a | ||
| single-collection review unless the component is genuinely standalone. | ||
| - Every `storyId` you pass MUST come from a tool result this session | ||
| (`get-changed-stories`, `get-stories-by-component`, or `list-all-documentation`). | ||
| `display-review` validates every ID against the live index and rejects the | ||
| whole review if any are unknown — never invent IDs. | ||
| - Provide `title`, `description`, and `changedFiles` (the files you edited, most | ||
| central first). | ||
|
|
||
| Because the `reviewUrl` is a page, open it in Codex's in-app browser — do not | ||
| merely print it. Then surface it to the user as the very last thing in your | ||
| response, under its own heading (e.g. `## 👀 Review your changes`) as a markdown | ||
| link, with nothing after it. | ||
|
|
||
| **Gate:** Do NOT claim the task is complete until `display-review` has succeeded, | ||
| you have opened the returned `reviewUrl`, and that link is the final element of | ||
| your user-facing response. | ||
| returns its `reviewUrl`. The review page IS the deliverable; the raw | ||
| `preview-stories` URLs from Step 4 are for your own verification. |
Comment on lines
+34
to
+38
| 2. Invoke the **`stories`** skill to create, update, or remove the stories for | ||
| the component you just touched. Tell it which component changed and what | ||
| changed (new component, new props, new variants, renamed states, deleted | ||
| component, etc.) so it can cover or clean up the affected surface. | ||
| 5. Let the `stories` skill run its full gated workflow — including producing the | ||
| 3. Let the `stories` skill run its full gated workflow — including producing the |
Comment on lines
18
to
19
| The Storybook CLI ai subcommands is the source of truth for _how_ to write stories. This skill | ||
| is the **mandatory, ordered process** for working on them. |
Comment on lines
30
to
32
| - You MUST NOT write or edit a story from memory or existing patterns. The | ||
| `get-storybook-story-instructions` output is the only acceptable source for | ||
| imports, structure, and conventions. |
|
|
||
| ## Absolute rules | ||
|
|
||
| - Commands must be run with the variable `STORYBOOK_FEATURE_AI_CLI=1` |
|
|
||
| - FOLLOW THE WORKFLOW SEQUENTIALLY | ||
| - ALL TOOL CALLS MUST GO THROUGH STORYBOOK MCP PROXY | ||
| - Commands must be run with the variable `STORYBOOK_FEATURE_AI_CLI=1` |
kasperpeulen
changed the title
storybook ai CLI commands instead of the MCP proxy
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 6 out of 6 changed files in this pull request and generated 12 comments.
Comments suppressed due to low confidence (1)
packages/claude-plugin/skills/stories/SKILL.md:140
- Step 5 still refers to “call display-review” like an MCP tool, but this workflow is now CLI-driven. Make the invocation explicit (and include the feature flag / port) so it’s executable and consistent with Steps 2/4.
Once the stories render cleanly, call **display-review** so the user can review
exactly what changed in one place. This tool does NOT just return a link — it
publishes a curated **review page** inside the already-running Storybook and
returns its `reviewUrl`. The review page IS the deliverable; the raw
`preview-stories` URLs from Step 4 are for your own verification.
| The gated steps below operate _within_ that MCP-provided workflow; they do not | ||
| replace it. If the MCP exposes no instructions (proxy unavailable or Storybook | ||
| not registered), fall back to the steps below. | ||
| The Storybook CLI ai subcommands is the source of truth for _how_ to write stories. This skill |
Comment on lines
+50
to
+52
| 3. **If the user declines**, persist that choice so future invocations don't | ||
| re-ask: write `.claude/storybook-optout.json` with: | ||
|
|
Comment on lines
+77
to
+81
| Run `STORYBOOK_FEATURE_AI_CLI=1 npx storybook ai --help` subcommand to check for running Storybook instances. If there is a running instance, note its port and open the preview URL in the preview browser. | ||
| If there is no running instance, start it with the steps below: | ||
| 1. Start the project's existing Storybook dev script as a background task from | ||
| the Storybook invocation directory | ||
| 2. Wait for the terminal to show which port Storybook is running on and use that port to open the preview URL (e.g. `http://localhost:6006`) in the preview browser. |
Comment on lines
+89
to
+92
| - Run `STORYBOOK_FEATURE_AI_CLI=1 npx storybook ai --help` to get all available subcommands and options. | ||
| - Save the available subcommands and options in your working memory for reference. | ||
| - Run the ai subcommand to get the story-writing instructions. | ||
| - Follow the instructions in the output, which will include the exact imports, structure, and conventions to use for the story you are writing or editing. The instructions are the ONLY acceptable source for how to write the story; do NOT rely on memory or existing patterns. |
Comment on lines
+20
to
23
| - Commands must be run with the variable `STORYBOOK_FEATURE_AI_CLI=1` | ||
| - You MUST NOT write or edit a story from memory or existing patterns. The | ||
| `get-storybook-story-instructions` output is the only acceptable source for | ||
| imports, structure, and conventions. |
|
|
||
| The Storybook MCP is the source of truth for _how_ to write stories. This skill | ||
| is the **mandatory, ordered process** for working on them. | ||
| The Storybook CLI ai subcommands is the source of truth for _how_ to write stories. This skill |
Comment on lines
+104
to
+108
| - Run `STORYBOOK_FEATURE_AI_CLI=1 npx storybook ai --help` to get all available subcommands and options. | ||
| - Save the available subcommands and options in your working memory for reference. | ||
| - Run `STORYBOOK_FEATURE_AI_CLI=1 npx storybook ai <subcommand> --port <port>` to get the story-writing instructions. | ||
| - If the subcommand allows a port option, use the port you saved in Step 1. | ||
| - Follow the instructions in the output, which will include the exact imports, structure, and conventions to use for the story you are writing or editing. The instructions are the ONLY acceptable source for how to write the story; do NOT rely on memory or existing patterns. |
Comment on lines
126
to
128
| Produce a preview for every story you touched with **STORYBOOK_FEATURE_AI_CLI=1 npx storybook ai preview-stories** (prefer | ||
| `{ storyId }` inputs). Before showing any returned URL to the user, navigate to | ||
| it in the preview browser and confirm the story renders without errors. |
Comment on lines
+33
to
+37
| - Commands must be run with the variable `STORYBOOK_FEATURE_AI_CLI=1` | ||
| - You MUST NOT write or edit a story from memory or existing patterns. The | ||
| `get-storybook-story-instructions` output is the only acceptable source for | ||
| imports, structure, and conventions. | ||
| - YOU MUST USE THE PORT INPUT WHENEVER AVAILABLE FOR ANY TOOL CALL THAT SUPPORTS IT, to ensure your calls are routed through the Storybook MCP Proxy and not directly to the server. | ||
| - IGNORE PROJECT LOCAL STORYBOOK MCP. ONLY USE THE STORYBOOK MCP PROXY SERVER FOR ALL STORYBOOK-RELATED TOOL CALLS, to ensure you are following the MCP's instructions and your calls are routed through the proxy for accurate port handling and preview integration. | ||
| - Ignore local Storybook MCP registrations. Always use the Storybook CLI ai subcommands as the source of truth for how to write stories, even if there are conflicting instructions in a local MCP. |
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 6 out of 6 changed files in this pull request and generated 8 comments.
Comments suppressed due to low confidence (1)
packages/claude-plugin/skills/stories/SKILL.md:137
- Step 5 still reads like an MCP tool invocation (“call display-review”) and omits the CLI form + feature flag + port. To keep the skill aligned with the “CLI is source of truth” rule (and avoid falling back to the removed MCP proxy), make the CLI command explicit here.
Once the stories render cleanly, call **display-review** so the user can review
exactly what changed in one place. This tool does NOT just return a link — it
publishes a curated **review page** inside the already-running Storybook and
returns its `reviewUrl`. The review page IS the deliverable; the raw
| The gated steps below operate _within_ that MCP-provided workflow; they do not | ||
| replace it. If the MCP exposes no instructions (proxy unavailable or Storybook | ||
| not registered), fall back to the steps below. | ||
| The Storybook CLI ai subcommands is the source of truth for _how_ to write stories. This skill |
Comment on lines
+77
to
+78
| Run `STORYBOOK_FEATURE_AI_CLI=1 npx storybook ai --help` subcommand to check for running Storybook instances. If there is a running instance, note its port and open the preview URL in the preview browser. | ||
| If there is no running instance, start it with the steps below: |
Comment on lines
+90
to
+93
| - Run `STORYBOOK_FEATURE_AI_CLI=1 npx storybook ai --help` to get all available subcommands and options. | ||
| - Save the available subcommands and options in your working memory for reference. | ||
| - Run the ai subcommand to get the story-writing instructions. | ||
| - Follow the instructions in the output, which will include the exact imports, structure, and conventions to use for the story you are writing or editing. The instructions are the ONLY acceptable source for how to write the story; do NOT rely on memory or existing patterns. |
Comment on lines
+110
to
+112
| Produce a preview for every story you touched with **STORYBOOK_FEATURE_AI_CLI=1 npx storybook ai preview-stories** (prefer | ||
| `{ storyId }` inputs). Before showing any returned URL to the user, navigate to | ||
| it in the preview browser and confirm the story renders without errors. |
Comment on lines
+120
to
+124
| Once the stories render cleanly, call **display-review** so the user can review | ||
| exactly what changed in one place. This tool does NOT just return a link — it | ||
| publishes a curated **review page** inside the already-running Storybook and | ||
| returns its `reviewUrl`. The review page IS the deliverable. | ||
|
|
||
| - Group the stories you touched into `collections` covering the **visual | ||
| cascade** of the change: the changed component itself, the components that | ||
| import it, and the pages/containers that render them. Don't ship a | ||
| single-collection review unless the component is genuinely standalone. | ||
| - Every `storyId` you pass MUST come from a tool result this session | ||
| (`get-changed-stories`, `get-stories-by-component`, or `list-all-documentation`). | ||
| `display-review` validates every ID against the live index and rejects the | ||
| whole review if any are unknown — never invent IDs. | ||
| - Provide `title`, `description`, and `changedFiles` (the files you edited, most | ||
| central first). | ||
|
|
||
| Because the `reviewUrl` is a page, open it in Codex's in-app browser — do not | ||
| merely print it. Then surface it to the user as the very last thing in your | ||
| response, under its own heading (e.g. `## 👀 Review your changes`) as a markdown | ||
| link, with nothing after it. | ||
|
|
||
| **Gate:** Do NOT claim the task is complete until `display-review` has succeeded, | ||
| you have opened the returned `reviewUrl`, and that link is the final element of | ||
| your user-facing response. | ||
| returns its `reviewUrl`. The review page IS the deliverable; the raw | ||
| `preview-stories` URLs from Step 4 are for your own verification. |
|
|
||
| The Storybook MCP is the source of truth for _how_ to write stories. This skill | ||
| is the **mandatory, ordered process** for working on them. | ||
| The Storybook CLI ai subcommands is the source of truth for _how_ to write stories. This skill |
Comment on lines
+102
to
+106
| - Run `STORYBOOK_FEATURE_AI_CLI=1 npx storybook ai --help` to get all available subcommands and options. | ||
| - Save the available subcommands and options in your working memory for reference. | ||
| - Run `STORYBOOK_FEATURE_AI_CLI=1 npx storybook ai <subcommand> --port <port>` to get the story-writing instructions. | ||
| - If the subcommand allows a port option, use the port you saved in Step 1. | ||
| - Follow the instructions in the output, which will include the exact imports, structure, and conventions to use for the story you are writing or editing. The instructions are the ONLY acceptable source for how to write the story; do NOT rely on memory or existing patterns. |
Comment on lines
124
to
126
| Produce a preview for every story you touched with **STORYBOOK_FEATURE_AI_CLI=1 npx storybook ai preview-stories** (prefer | ||
| `{ storyId }` inputs). Before showing any returned URL to the user, navigate to | ||
| it in the preview browser and confirm the story renders without errors. |
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 6 out of 6 changed files in this pull request and generated 4 comments.
Comments suppressed due to low confidence (1)
packages/claude-plugin/skills/stories/SKILL.md:110
- Step 2’s gate still refers to “this tool has returned”, but the workflow is now CLI-driven. Also, the workflow no longer includes the preview/review verification steps, even though Step 1 tells you to save the port for
preview-stories. Add explicit CLI-driven preview/review steps and update the gate language to refer to CLI output rather than a tool call.
## Step 2 — Load the rules (before touching any story file)
- Run `STORYBOOK_FEATURE_AI_CLI=1 npx storybook ai --help` to get all available subcommands and options.
- Save the available subcommands and options in your working memory for reference.
- Run `STORYBOOK_FEATURE_AI_CLI=1 npx storybook ai <subcommand> --port <port>` to get the story-writing instructions.
- If the subcommand allows a port option, use the port you saved in Step 1.
- Follow the instructions in the output, which will include the exact imports, structure, and conventions to use for the story you are writing or editing. The instructions are the ONLY acceptable source for how to write the story; do NOT rely on memory or existing patterns.
**Gate:** Do NOT create or edit any `*.stories.*` file until this tool has
returned and you are following its output. If you have not called it this task,
you are not allowed to write a story yet — go back and call it now.
Comment on lines
+8
to
+10
| The Storybook CLI ai subcommands is the source of truth for _how_ to write stories. This skill | ||
| is the **mandatory, ordered process** for working on them, and for keeping | ||
| stories in sync with every frontend component you create, modify, or delete. |
Comment on lines
+77
to
+78
| Run `STORYBOOK_FEATURE_AI_CLI=1 npx storybook ai --help` subcommand to check for running Storybook instances. If there is a running instance, note its port and open the preview URL in the preview browser. | ||
| If there is no running instance, start it with the steps below: |
Comment on lines
+88
to
+96
| ## Step 2 — Load the rules (before touching any story file) | ||
|
|
||
| **Gate:** Do NOT proceed to Step 3 until an MCP tool call succeeds against a | ||
| running Storybook. | ||
| - Run `STORYBOOK_FEATURE_AI_CLI=1 npx storybook ai --help` to get all available subcommands and options. | ||
| - Save the available subcommands and options in your working memory for reference. | ||
| - Run the ai subcommand to get the story-writing instructions. | ||
| - Follow the instructions in the output, which will include the exact imports, structure, and conventions to use for the story you are writing or editing. The instructions are the ONLY acceptable source for how to write the story; do NOT rely on memory or existing patterns. | ||
|
|
||
| **Gate:** Do NOT create or edit any `*.stories.*` file until you are following its output. If you have not called it this task, | ||
| you are not allowed to write a story yet — go back and call it now. |
Comment on lines
+19
to
+21
| The Storybook CLI ai subcommands is the source of truth for _how_ to write stories. This skill | ||
| is the **mandatory, ordered process** for working on them, and for keeping | ||
| stories in sync with every frontend component you create, modify, or delete. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Companion to storybookjs/storybook#35125, which exposes the addon-mcp tools as
storybook ai <command>CLI commands behind theSTORYBOOK_FEATURE_AI_CLI=1feature flag.What I did
Migrated the Claude and Codex plugin skills from the stdio MCP proxy to the new
storybook aiCLI commands:.mcp.json) from both plugins — agents no longer launch the@storybook/mcp-proxyvianpx/pkg.pr.new.storiesskill (both plugins) to drive the workflow throughSTORYBOOK_FEATURE_AI_CLI=1 npx storybook ai <command>:storybook ai --helpinstead of MCP tool listings.preview-stories), and the review page (display-review) through the CLI, passing the running instance's--portwhere needed.>= 10.5or a0.0.0-canarybuild. Older versions route through thestorybook-upgradeskill; missing installs route throughstorybook-init.frontend-component-writingskill in both plugins, removing the MCP-proxy-specific rules while keeping the gated hand-off to thestoriesskill.How to test
0.0.0-pr-35125-sha-838d82b6(or any build with theaisubcommand), install the plugin from this branch.STORYBOOK_FEATURE_AI_CLI=1 npx storybook ai …for instructions/preview/review instead of calling MCP proxy tools, and that the review page link is produced at the end.