Skip to content
This repository was archived by the owner on Nov 10, 2026. It is now read-only.
Merged
Changes from 5 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
24 changes: 16 additions & 8 deletions packages/codex-plugin/plugins/storybook/skills/stories/SKILL.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ description: Invoke BEFORE you touch a frontend component, on EVERY change, with

# Storybook Stories

The Storybook CLI ai subcommands is the source of truth for _how_ to write stories. This skill
The Storybook CLI ai subcommands are 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.

Expand All @@ -25,6 +25,7 @@ working around it. Treat any shortcut as a failure of this workflow.
you MUST NOT report the component change as complete until this workflow has
finished for every component you touched. A component change without
matching, verified stories is not a deliverable.
- In sandboxed Codex environments, run any Storybook CLI command with `require_escalated` (sandbox/network permissions may otherwise prevent localhost access).
Comment thread
huang-julien marked this conversation as resolved.
Resolved

## Step 0 — Prerequisites

Expand Down Expand Up @@ -78,22 +79,29 @@ invocation without re-prompting.

The Storybook preview MUST be running so the story can be verified.

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:
Run `STORYBOOK_FEATURE_AI_CLI=1 npx storybook ai --help` subcommand with `require_escalated` to check for running Storybook instances.
Comment thread
huang-julien marked this conversation as resolved.
Resolved

Comment thread
huang-julien marked this conversation as resolved.
Resolved
If there is a running instance:
- Note its port and save it in your working memory. USE THIS PORT FOR ANY SUBCOMMAND THAT NEEDS TO KNOW THE PORT (e.g. `preview-stories`).
- Open the preview URL in the preview browser.
- Make the preview browser visible to the user.

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.
3. Save the port being used by Storybook shown in the terminal in your working memory. USE THIS PORT FOR ANY SUBCOMMAND THAT NEEDS TO KNOW THE PORT (e.g. `preview-stories`).
3. Make the preview browser visible to the user.
4. Save the port being used by Storybook shown in the terminal in your working memory. USE THIS PORT FOR ANY SUBCOMMAND THAT NEEDS TO KNOW THE PORT (e.g. `preview-stories`).
5. Open the preview URL in the preview browser.
Comment thread
huang-julien marked this conversation as resolved.
Resolved
Comment thread
huang-julien marked this conversation as resolved.
Resolved
Comment thread
huang-julien marked this conversation as resolved.
Resolved
Comment on lines 94 to +97

**Gate:** Do NOT proceed to Step 2 until the preview browser is open and has rendered the Storybook URL without
error. If launch setup reports an error, surface it to the user and STOP.
**Gate:** Do NOT proceed to Step 2 until the preview browser is visible to the user and has rendered the Storybook URL without
error.

## 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.
- Run `STORYBOOK_FEATURE_AI_CLI=1 npx storybook ai --help` with `require_escalated` 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.
- Run the ai subcommand with `require_escalated` to get the story-writing instructions.

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Specify the exact subcommand for fetching story-writing instructions.

Line 104 says "Run the ai subcommand with require_escalated" without naming the specific subcommand. Based on Storybook documentation, the tool for fetching story-writing instructions is get-storybook-story-instructions. The instruction should explicitly use this name to avoid ambiguity.

📝 Proposed revision for clarity
- Run the ai subcommand with `require_escalated` to get the story-writing instructions.
+ Run `STORYBOOK_FEATURE_AI_CLI=1 npx storybook ai get-storybook-story-instructions` with `require_escalated` to get the story-writing instructions.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/codex-plugin/plugins/storybook/skills/stories/SKILL.md` at line 104,
The instruction on line 104 is ambiguous because it refers to "the ai
subcommand" without specifying which one. Replace the vague phrasing "Run the ai
subcommand with `require_escalated`" with an explicit reference to the specific
subcommand `get-storybook-story-instructions` so readers know exactly which
subcommand to execute. This clarification ensures the documentation provides
unambiguous guidance on fetching 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.
- Create or edit the story strictly following the instructions. When this skill runs for a component change, cover the affected surface: new components get stories, new props/variants/states get covered, renamed states get updated, and deleted components get their stories removed.

Expand Down
Loading