CLI: Add storybook skills file and commands to install them#34520
Closed
yannbf wants to merge 4 commits intoproject/sb-agentic-setupfrom
Closed
CLI: Add storybook skills file and commands to install them#34520yannbf wants to merge 4 commits intoproject/sb-agentic-setupfrom
yannbf wants to merge 4 commits intoproject/sb-agentic-setupfrom
Conversation
yannbf
changed the title
|
View your CI Pipeline Execution ↗ for commit f27a958
☁️ Nx Cloud last updated this comment at |
|
View your CI Pipeline Execution ↗ for commit 6b028a4 ☁️ Nx Cloud last updated this comment at |
Contributor
📝 WalkthroughWalkthroughAdds a new CLI subcommand Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant CLI as "CLI (storybook ai install-skills)"
participant Telemetry as "Telemetry\n(withTelemetry)"
participant Installer as "installAgentSkills"
participant FS as "Package FS\n(skills/)"
participant Exec as "executeCommand\n(npx skills add)"
CLI->>Telemetry: invoke command
Telemetry->>Installer: call installAgentSkills()
Installer->>FS: resolve create-storybook package -> skills/ path
Installer->>Exec: run `npx skills add <skillsDir> --skill * --yes`
Exec-->>Installer: success / failure (stdout/stderr)
Installer-->>Telemetry: return (logs warnings on failure)
Telemetry-->>CLI: complete (emit 'ai-install-skills' event)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
✨ Finishing Touches📝 Generate docstrings
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
code/lib/cli-storybook/skills/setup-storybook/SKILL.md (1)
1-37: Please updateAGENTS.mdalongside this new skills workflow.This PR adds a new agent-facing command plus automatic skill installation during
init, so the contributor guidance should mention when skills are installed and when agents should usestorybook ai prepare.Based on learnings: Keep
AGENTS.mdup to date when Storybook's architecture, tooling, workflows, or contributor guidance changes.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@code/lib/cli-storybook/skills/setup-storybook/SKILL.md` around lines 1 - 37, The PR adds a new agent-facing command and automatic skill installation but AGENTS.md wasn't updated; update AGENTS.md to document the new "npx storybook ai prepare" command, explain that skills are automatically installed during `storybook init` (or during your project's init flow), and add guidance for contributors on when to update AGENTS.md (e.g., when Storybook architecture, tooling, workflows, or skills installation behavior changes). Reference the new skill file SKILL.md and the command name "npx storybook ai prepare" in the AGENTS.md entry so agents know to run that command and understand the installation semantics.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@code/lib/cli-storybook/src/ai/install-agent-skills.ts`:
- Around line 22-27: The npx skills add invocation in install-agent-skills.ts
(the executeCommand call that runs 'npx', args ['skills','add', skillsDir,
'--skill','*','--yes']) can hang indefinitely; wrap it with a bounded timeout
(e.g., create an AbortController or use a Promise.race with a setTimeout) so
that if the timeout elapses you kill the child/process and reject with a clear
error. Specifically, modify the code around executeCommand in
install-agent-skills.ts to start a timer (configurable timeout value), pass the
abort signal to executeCommand or call child.kill() when the timer fires, clear
the timer on success, and surface a descriptive error so the caller’s catch path
runs instead of blocking the init flow.
In `@code/lib/create-storybook/src/commands/UserPreferencesCommand.ts`:
- Around line 195-196: Update the user-facing message in UserPreferencesCommand
(the message string used in doInitiate()) so it does not promise a tailored
prompt will be generated during init; instead say we will install Storybook AI
skills now and instruct the user to run "npx storybook ai prepare" later to
generate the tailored prompt and setup instructions. Locate the message constant
or property inside UserPreferencesCommand (used by doInitiate()/prompt flow) and
change the copy accordingly to avoid implying the prompt is produced
immediately.
In `@code/lib/create-storybook/src/initiate.ts`:
- Around line 117-121: The dynamic import of installAgentSkills from
'../../cli-storybook/src/ai/install-agent-skills.ts' will fail for consumers
because package distributions exclude src; update create-storybook so the AI
skill installer is reachable at runtime: either (A) move the installAgentSkills
implementation into create-storybook (so initiate.ts can import it directly), or
(B) add a public export in cli-storybook (e.g., export installAgentSkills from a
published path like '@storybook/cli/ai' that is included in the package "files")
and change the dynamic import in initiate.ts to that published path; adjust the
import call around options.agent / selectedFeatures.has(Feature.AI) to use the
new module location (symbol: installAgentSkills) so runtime consumers don’t get
MODULE_NOT_FOUND.
---
Nitpick comments:
In `@code/lib/cli-storybook/skills/setup-storybook/SKILL.md`:
- Around line 1-37: The PR adds a new agent-facing command and automatic skill
installation but AGENTS.md wasn't updated; update AGENTS.md to document the new
"npx storybook ai prepare" command, explain that skills are automatically
installed during `storybook init` (or during your project's init flow), and add
guidance for contributors on when to update AGENTS.md (e.g., when Storybook
architecture, tooling, workflows, or skills installation behavior changes).
Reference the new skill file SKILL.md and the command name "npx storybook ai
prepare" in the AGENTS.md entry so agents know to run that command and
understand the installation semantics.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: f4403ed2-159a-47a7-978c-7b25aeb3c3b0
📒 Files selected for processing (7)
code/core/src/telemetry/types.tscode/lib/cli-storybook/package.jsoncode/lib/cli-storybook/skills/setup-storybook/SKILL.mdcode/lib/cli-storybook/src/ai/install-agent-skills.tscode/lib/cli-storybook/src/bin/run.tscode/lib/create-storybook/src/commands/UserPreferencesCommand.tscode/lib/create-storybook/src/initiate.ts
Comment on lines
+22
to
+27
| try { | ||
| await executeCommand({ | ||
| command: 'npx', | ||
| args: ['skills', 'add', skillsDir, '--skill', '*', '--yes'], | ||
| stdio: 'inherit', | ||
| }); |
Contributor
There was a problem hiding this comment.
Bound the npx skills add call with a timeout.
This now runs on the init path, so a stalled npx resolution/install can block the whole setup indefinitely. The catch only helps once the child process exits.
🛡️ Suggested fix
export async function installAgentSkills(): Promise<void> {
const currentDir = dirname(fileURLToPath(import.meta.url));
const skillsDir = join(currentDir, '..', '..', 'skills');
+ const controller = new AbortController();
+ const timeout = setTimeout(() => controller.abort(), 60_000);
try {
await executeCommand({
command: 'npx',
args: ['skills', 'add', skillsDir, '--skill', '*', '--yes'],
stdio: 'inherit',
+ signal: controller.signal,
});
} catch (error) {
// Non-critical — don't fail the init if skill export fails
logger.warn(
`Could not install agent skills: ${error instanceof Error ? error.message : String(error)}`
);
+ } finally {
+ clearTimeout(timeout);
}
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| try { | |
| await executeCommand({ | |
| command: 'npx', | |
| args: ['skills', 'add', skillsDir, '--skill', '*', '--yes'], | |
| stdio: 'inherit', | |
| }); | |
| export async function installAgentSkills(): Promise<void> { | |
| const currentDir = dirname(fileURLToPath(import.meta.url)); | |
| const skillsDir = join(currentDir, '..', '..', 'skills'); | |
| const controller = new AbortController(); | |
| const timeout = setTimeout(() => controller.abort(), 60_000); | |
| try { | |
| await executeCommand({ | |
| command: 'npx', | |
| args: ['skills', 'add', skillsDir, '--skill', '*', '--yes'], | |
| stdio: 'inherit', | |
| signal: controller.signal, | |
| }); | |
| } catch (error) { | |
| // Non-critical — don't fail the init if skill export fails | |
| logger.warn( | |
| `Could not install agent skills: ${error instanceof Error ? error.message : String(error)}` | |
| ); | |
| } finally { | |
| clearTimeout(timeout); | |
| } | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@code/lib/cli-storybook/src/ai/install-agent-skills.ts` around lines 22 - 27,
The npx skills add invocation in install-agent-skills.ts (the executeCommand
call that runs 'npx', args ['skills','add', skillsDir, '--skill','*','--yes'])
can hang indefinitely; wrap it with a bounded timeout (e.g., create an
AbortController or use a Promise.race with a setTimeout) so that if the timeout
elapses you kill the child/process and reject with a clear error. Specifically,
modify the code around executeCommand in install-agent-skills.ts to start a
timer (configurable timeout value), pass the abort signal to executeCommand or
call child.kill() when the timer fires, clear the timer on success, and surface
a descriptive error so the caller’s catch path runs instead of blocking the init
flow.
Comment on lines
195
to
+196
| message: dedent`Would you like to improve your Storybook setup with AI? | ||
| We will provide you with a prompt that you can use with your LLM to fully set up Storybook with best practices, tailored to your project.`, | ||
| We will install Storybook skills for your AI coding agent (Claude, Cursor, Copilot, etc.) and provide you with a prompt to fully set up Storybook with best practices, tailored to your project.`, |
Contributor
There was a problem hiding this comment.
Don't promise the tailored prompt is generated during init.
In the non-agent flow, doInitiate() only installs the skills and then tells the user to run npx storybook ai prepare later. This copy reads like the tailored prompt is produced immediately after consent, which is not what the current flow does.
✏️ Suggested wording
- We will install Storybook skills for your AI coding agent (Claude, Cursor, Copilot, etc.) and provide you with a prompt to fully set up Storybook with best practices, tailored to your project.`,
+ We will install Storybook skills for your AI coding agent (Claude, Cursor, Copilot, etc.). Then you can run \`storybook ai prepare\` to generate a tailored prompt for finishing your setup with project-specific best practices.`,🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@code/lib/create-storybook/src/commands/UserPreferencesCommand.ts` around
lines 195 - 196, Update the user-facing message in UserPreferencesCommand (the
message string used in doInitiate()) so it does not promise a tailored prompt
will be generated during init; instead say we will install Storybook AI skills
now and instruct the user to run "npx storybook ai prepare" later to generate
the tailored prompt and setup instructions. Locate the message constant or
property inside UserPreferencesCommand (used by doInitiate()/prompt flow) and
change the copy accordingly to avoid implying the prompt is produced
immediately.
Member
There was a problem hiding this comment.
Shouldn't we say something like "We'll install skills and tell you which skill to call to set up Storybook"? As the skill would be providing the prompt rather than us adding skills + printing a prompt?
Package BenchmarksCommit: The following packages have significant changes to their size or dependencies:
|
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 185 | 185 | 0 |
| Self size | 76 KB | 76 KB | 🎉 -48 B 🎉 |
| Dependency size | 32.31 MB | 32.26 MB | 🎉 -51 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/angular
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 185 | 185 | 0 |
| Self size | 140 KB | 140 KB | 0 B |
| Dependency size | 30.46 MB | 30.41 MB | 🎉 -52 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/ember
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 189 | 189 | 0 |
| Self size | 15 KB | 15 KB | 🎉 -18 B 🎉 |
| Dependency size | 29.02 MB | 28.97 MB | 🎉 -52 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/nextjs
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 534 | 534 | 0 |
| Self size | 650 KB | 650 KB | 0 B |
| Dependency size | 60.30 MB | 60.27 MB | 🎉 -39 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/nextjs-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 92 | 93 | 🚨 +1 🚨 |
| Self size | 1.12 MB | 1.12 MB | 🎉 -36 B 🎉 |
| Dependency size | 23.30 MB | 23.76 MB | 🚨 +465 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-native-web-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 121 | 122 | 🚨 +1 🚨 |
| Self size | 30 KB | 30 KB | 🎉 -18 B 🎉 |
| Dependency size | 24.37 MB | 24.83 MB | 🚨 +465 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 82 | 83 | 🚨 +1 🚨 |
| Self size | 36 KB | 36 KB | 🎉 -18 B 🎉 |
| Dependency size | 21.08 MB | 21.54 MB | 🚨 +465 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-webpack5
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 271 | 272 | 🚨 +1 🚨 |
| Self size | 23 KB | 23 KB | 🚨 +12 B 🚨 |
| Dependency size | 44.90 MB | 44.88 MB | 🎉 -28 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/server-webpack5
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 197 | 197 | 0 |
| Self size | 16 KB | 16 KB | 🚨 +12 B 🚨 |
| Dependency size | 33.57 MB | 33.52 MB | 🎉 -52 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/vue3-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 108 | 108 | 0 |
| Self size | 36 KB | 36 KB | 🚨 +24 B 🚨 |
| Dependency size | 43.71 MB | 43.73 MB | 🚨 +11 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/cli
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 184 | 184 | 0 |
| Self size | 806 KB | 807 KB | 🚨 +1 KB 🚨 |
| Dependency size | 68.43 MB | 68.17 MB | 🎉 -256 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/codemod
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 177 | 177 | 0 |
| Self size | 32 KB | 32 KB | 0 B |
| Dependency size | 66.71 MB | 66.68 MB | 🎉 -27 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
create-storybook
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 51 | 51 | 0 |
| Self size | 1.28 MB | 1.06 MB | 🎉 -229 KB 🎉 |
| Dependency size | 37.08 MB | 37.08 MB | 🚨 +762 B 🚨 |
| Bundle Size Analyzer | node | node |
@storybook/preset-react-webpack
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 167 | 168 | 🚨 +1 🚨 |
| Self size | 18 KB | 18 KB | 0 B |
| Dependency size | 31.52 MB | 31.49 MB | 🎉 -28 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/react
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 58 | 59 | 🚨 +1 🚨 |
| Self size | 1.44 MB | 1.44 MB | 0 B |
| Dependency size | 13.23 MB | 13.26 MB | 🚨 +25 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
Sidnioulz
requested changes
Apr 10, 2026
Member
Sidnioulz
left a comment
Sidnioulz
left a comment
There was a problem hiding this comment.
Looks like a sound change to me overall! Some code paths seem incompatible with built and packaged NPM code, see comments. Feel free to dismiss review if I'm incorrect.
Comment on lines
+19
to
+20
| const currentDir = dirname(fileURLToPath(import.meta.url)); | ||
| const skillsDir = join(currentDir, '..', '..', 'skills'); |
Member
There was a problem hiding this comment.
Could you please add a comment clarifying where currentDir is expected to land in a user repo? Why ../../?
Does this work equally well when SB is distributed via NPM? Is the path logic stable then?
Alternatively, would using our project root dir detection code work here?
| const skillsDir = join(currentDir, '..', '..', 'skills'); | ||
|
|
||
| try { | ||
| await executeCommand({ |
Member
There was a problem hiding this comment.
Should we add a logger.step to tell users what we're doing before doing something that can be a bit slow?
Comment on lines
195
to
+196
| message: dedent`Would you like to improve your Storybook setup with AI? | ||
| We will provide you with a prompt that you can use with your LLM to fully set up Storybook with best practices, tailored to your project.`, | ||
| We will install Storybook skills for your AI coding agent (Claude, Cursor, Copilot, etc.) and provide you with a prompt to fully set up Storybook with best practices, tailored to your project.`, |
Member
There was a problem hiding this comment.
Shouldn't we say something like "We'll install skills and tell you which skill to call to set up Storybook"? As the skill would be providing the prompt rather than us adding skills + printing a prompt?
| // Install agent skills when an agent is detected or the user opted into AI | ||
| if (options.agent || selectedFeatures.has(Feature.AI)) { | ||
| const { installAgentSkills } = | ||
| await import('../../cli-storybook/src/ai/install-agent-skills.ts'); |
Member
There was a problem hiding this comment.
I would double check that with Norbert. I feel this might not work in NPM packages.
yannbf
force-pushed
the
yann/storybook-skill
branch
from
6b028a4 to
7078b87
Compare
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
code/lib/create-storybook/skills/setup-storybook/SKILL.md (1)
1-37: Please updateAGENTS.mdfor the new skills workflow.This PR introduces new agent-facing behavior (
storybook ai install-skillsplus auto-install during init), so the contributor/agent guidance should be updated inAGENTS.mdalongside this skill content.Based on learnings: Keep
AGENTS.mdup to date when Storybook's architecture, tooling, workflows, or contributor guidance changes.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@code/lib/create-storybook/skills/setup-storybook/SKILL.md` around lines 1 - 37, Update AGENTS.md to document the new agent-facing skills workflow introduced by the setup-storybook skill: describe the commands "storybook ai install-skills" and the auto-install behavior during "npx storybook init", explain when agents should run "npx storybook ai prepare" versus relying on auto-installed skills, and add contributor guidance on maintaining AGENTS.md whenever skills like setup-storybook are added/changed; reference the skill name "setup-storybook" and the exact command strings so agents and maintainers can find and use the new workflow.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@code/lib/create-storybook/skills/setup-storybook/SKILL.md`:
- Line 13: Update the explanatory path in SKILL.md: change the symlink source
reference from node_modules/@storybook/cli/skills/setup-storybook/SKILL.md to
the actual installer source create-storybook/skills/setup-storybook/SKILL.md so
contributors are pointed to the correct package; edit the sentence in the file
SKILL.md that currently references `node_modules/@storybook/cli/...` to instead
reference `create-storybook/skills/...` and keep the rest of the note about
symlink behavior intact.
In `@code/lib/create-storybook/src/install-agent-skills.ts`:
- Around line 24-26: The package resolution for create-storybook is happening
before the non-critical error boundary, so move the require.resolve call into
the existing try/catch (or add a small try around it) to prevent throws from
escaping; specifically, call createRequire(import.meta.url) as now but delay
resolving 'create-storybook/package.json' until inside the try that sets up
skillsDir (resolve into createStorybookPkg and then set skillsDir =
join(dirname(createStorybookPkg),'skills') within the try), and on failure log
the existing non-critical warning and continue without setting skillsDir.
---
Nitpick comments:
In `@code/lib/create-storybook/skills/setup-storybook/SKILL.md`:
- Around line 1-37: Update AGENTS.md to document the new agent-facing skills
workflow introduced by the setup-storybook skill: describe the commands
"storybook ai install-skills" and the auto-install behavior during "npx
storybook init", explain when agents should run "npx storybook ai prepare"
versus relying on auto-installed skills, and add contributor guidance on
maintaining AGENTS.md whenever skills like setup-storybook are added/changed;
reference the skill name "setup-storybook" and the exact command strings so
agents and maintainers can find and use the new workflow.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 2bbb1142-cb3e-4e70-8d62-62ee85b911d0
📒 Files selected for processing (8)
code/core/src/telemetry/types.tscode/lib/cli-storybook/src/bin/run.tscode/lib/create-storybook/package.jsoncode/lib/create-storybook/skills/setup-storybook/SKILL.mdcode/lib/create-storybook/src/commands/UserPreferencesCommand.tscode/lib/create-storybook/src/index.tscode/lib/create-storybook/src/initiate.tscode/lib/create-storybook/src/install-agent-skills.ts
✅ Files skipped from review due to trivial changes (2)
- code/lib/create-storybook/src/commands/UserPreferencesCommand.ts
- code/lib/create-storybook/package.json
🚧 Files skipped from review as they are similar to previous changes (2)
- code/lib/cli-storybook/src/bin/run.ts
- code/core/src/telemetry/types.ts
|
|
||
| # Storybook Setup | ||
|
|
||
| > **Managed by Storybook.** This file is installed and updated by `@storybook/cli`. It is symlinked from `node_modules/@storybook/cli/skills/setup-storybook/SKILL.md`, so it refreshes automatically when you upgrade Storybook. Edit the symlink target only if you know what you're doing — your changes will be overwritten on the next install. |
Contributor
There was a problem hiding this comment.
Correct the symlink source package path.
Line 13 says the file is symlinked from node_modules/@storybook/cli/..., but the installer resolves skills from create-storybook/skills. This can send contributors to the wrong source file.
📝 Proposed fix
-> **Managed by Storybook.** This file is installed and updated by `@storybook/cli`. It is symlinked from `node_modules/@storybook/cli/skills/setup-storybook/SKILL.md`, so it refreshes automatically when you upgrade Storybook. Edit the symlink target only if you know what you're doing — your changes will be overwritten on the next install.
+> **Managed by Storybook.** This file is installed and updated by Storybook tooling. It is symlinked from `node_modules/create-storybook/skills/setup-storybook/SKILL.md`, so it refreshes automatically when you upgrade Storybook. Edit the symlink target only if you know what you're doing — your changes will be overwritten on the next install.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| > **Managed by Storybook.** This file is installed and updated by `@storybook/cli`. It is symlinked from `node_modules/@storybook/cli/skills/setup-storybook/SKILL.md`, so it refreshes automatically when you upgrade Storybook. Edit the symlink target only if you know what you're doing — your changes will be overwritten on the next install. | |
| > **Managed by Storybook.** This file is installed and updated by Storybook tooling. It is symlinked from `node_modules/create-storybook/skills/setup-storybook/SKILL.md`, so it refreshes automatically when you upgrade Storybook. Edit the symlink target only if you know what you're doing — your changes will be overwritten on the next install. |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@code/lib/create-storybook/skills/setup-storybook/SKILL.md` at line 13, Update
the explanatory path in SKILL.md: change the symlink source reference from
node_modules/@storybook/cli/skills/setup-storybook/SKILL.md to the actual
installer source create-storybook/skills/setup-storybook/SKILL.md so
contributors are pointed to the correct package; edit the sentence in the file
SKILL.md that currently references `node_modules/@storybook/cli/...` to instead
reference `create-storybook/skills/...` and keep the rest of the note about
symlink behavior intact.
Comment on lines
+24
to
+26
| const require = createRequire(import.meta.url); | ||
| const createStorybookPkg = require.resolve('create-storybook/package.json'); | ||
| const skillsDir = join(dirname(createStorybookPkg), 'skills'); |
Contributor
There was a problem hiding this comment.
Guard package resolution inside the non-critical error boundary.
Line 25 can throw before the try, which bypasses the fallback warning path and can fail init despite this step being documented as non-critical.
🛠️ Proposed fix
export async function installAgentSkills(): Promise<void> {
- const require = createRequire(import.meta.url);
- const createStorybookPkg = require.resolve('create-storybook/package.json');
- const skillsDir = join(dirname(createStorybookPkg), 'skills');
-
try {
+ const require = createRequire(import.meta.url);
+ const createStorybookPkg = require.resolve('create-storybook/package.json');
+ const skillsDir = join(dirname(createStorybookPkg), 'skills');
await executeCommand({
command: 'npx',
args: ['skills', 'add', skillsDir, '--skill', '*', '--yes'],
stdio: 'inherit',
});📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const require = createRequire(import.meta.url); | |
| const createStorybookPkg = require.resolve('create-storybook/package.json'); | |
| const skillsDir = join(dirname(createStorybookPkg), 'skills'); | |
| export async function installAgentSkills(): Promise<void> { | |
| try { | |
| const require = createRequire(import.meta.url); | |
| const createStorybookPkg = require.resolve('create-storybook/package.json'); | |
| const skillsDir = join(dirname(createStorybookPkg), 'skills'); | |
| await executeCommand({ | |
| command: 'npx', | |
| args: ['skills', 'add', skillsDir, '--skill', '*', '--yes'], | |
| stdio: 'inherit', | |
| }); | |
| } catch (error) { | |
| // Non-critical — don't fail the init if skill export fails | |
| logger.warn( | |
| `Could not install agent skills: ${error instanceof Error ? error.message : String(error)}` | |
| ); | |
| } | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@code/lib/create-storybook/src/install-agent-skills.ts` around lines 24 - 26,
The package resolution for create-storybook is happening before the non-critical
error boundary, so move the require.resolve call into the existing try/catch (or
add a small try around it) to prevent throws from escaping; specifically, call
createRequire(import.meta.url) as now but delay resolving
'create-storybook/package.json' until inside the try that sets up skillsDir
(resolve into createStorybookPkg and then set skillsDir =
join(dirname(createStorybookPkg),'skills') within the try), and on failure log
the existing non-critical warning and continue without setting skillsDir.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@code/lib/create-storybook/src/initiate.ts`:
- Around line 113-119: The post-install "Done" message is emitted
unconditionally even though installAgentSkills() may have failed silently;
update the flow to await and inspect the helper's outcome (e.g., const installed
= await installAgentSkills(); or wrap call in try/catch if it throws) and only
emit the CLI_COLORS.storybook "Done" message when installed is
truthy/successful; otherwise log a fallback message that omits the
/setup-storybook suggestion and only shows the manual "Run `npx storybook ai
prepare`" instructions via logger.log.
- Around line 116-119: The printed follow-up command always omits the resolved
configDir; update the message built in the logger.log call (the
CLI_COLORS.storybook template) to include the configDir variable so users run
the exact command used by init (e.g., `npx storybook ai prepare --config-dir
<configDir>` or similar quoting) — reference the logger.log invocation that
wraps CLI_COLORS.storybook and the configDir variable in this module and
interpolate/format configDir into the output string so the displayed command
targets the actual written config location.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 839a75de-881b-46d1-93e9-34bd72ee41bc
📒 Files selected for processing (1)
code/lib/create-storybook/src/initiate.ts
Comment on lines
+113
to
+119
| const { installAgentSkills } = await import('./install-agent-skills.ts'); | ||
| await installAgentSkills(); | ||
|
|
||
| logger.log( | ||
| CLI_COLORS.storybook(dedent`Done. To finalize setting up with AI, either use the /setup-storybook skill or paste the following prompt to your AI agent: | ||
| Run \`npx storybook ai prepare\` and follow its instructions precisely.`) | ||
| ); |
Contributor
There was a problem hiding this comment.
Don't advertise /setup-storybook after a best-effort install fails.
installAgentSkills() swallows failures and only logs a warning, so this unconditional “Done” message can still imply the skill is available when it was never installed. Please gate the success wording on the helper's result, or fall back to only the manual storybook ai prepare path on failure.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@code/lib/create-storybook/src/initiate.ts` around lines 113 - 119, The
post-install "Done" message is emitted unconditionally even though
installAgentSkills() may have failed silently; update the flow to await and
inspect the helper's outcome (e.g., const installed = await
installAgentSkills(); or wrap call in try/catch if it throws) and only emit the
CLI_COLORS.storybook "Done" message when installed is truthy/successful;
otherwise log a fallback message that omits the /setup-storybook suggestion and
only shows the manual "Run `npx storybook ai prepare`" instructions via
logger.log.
Comment on lines
+116
to
+119
| logger.log( | ||
| CLI_COLORS.storybook(dedent`Done. To finalize setting up with AI, either use the /setup-storybook skill or paste the following prompt to your AI agent: | ||
| Run \`npx storybook ai prepare\` and follow its instructions precisely.`) | ||
| ); |
Contributor
There was a problem hiding this comment.
Preserve configDir in the printed ai prepare command.
configDir is already known here, but Line 118 always tells users to run npx storybook ai prepare. If init wrote the config somewhere other than .storybook, that follow-up step loses the resolved path and can target the wrong config.
💡 Proposed fix
+ const prepareCommand =
+ configDir && configDir !== '.storybook'
+ ? `npx storybook ai prepare --config-dir ${configDir}`
+ : 'npx storybook ai prepare';
+
logger.log(
CLI_COLORS.storybook(dedent`Done. To finalize setting up with AI, either use the /setup-storybook skill or paste the following prompt to your AI agent:
- Run \`npx storybook ai prepare\` and follow its instructions precisely.`)
+ Run \`${prepareCommand}\` and follow its instructions precisely.`)
);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@code/lib/create-storybook/src/initiate.ts` around lines 116 - 119, The
printed follow-up command always omits the resolved configDir; update the
message built in the logger.log call (the CLI_COLORS.storybook template) to
include the configDir variable so users run the exact command used by init
(e.g., `npx storybook ai prepare --config-dir <configDir>` or similar quoting) —
reference the logger.log invocation that wraps CLI_COLORS.storybook and the
configDir variable in this module and interpolate/format configDir into the
output string so the displayed command targets the actual written config
location.
Member
Author
|
Parking this for now, we might circle back later. |
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
2 participants
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.
Closes #
What I did
This PR introduces a new subcommand,
storybook ai install-skillswhich adds a Storybook skill for setting up projects.It also automatically does that during
initin case the user says yes to AI or in an agentic session.Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
Caution
This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake sure this PR contains one of the labels below:
Available labels
bug: Internal changes that fixes incorrect behavior.maintenance: User-facing maintenance tasks.dependencies: Upgrading (sometimes downgrading) dependencies.build: Internal-facing build tooling & test updates. Will not show up in release changelog.cleanup: Minor cleanup style change. Will not show up in release changelog.documentation: Documentation only changes. Will not show up in release changelog.feature request: Introducing a new feature.BREAKING CHANGE: Changes that break compatibility in some way with current major version.other: Changes that don't fit in the above categories.🦋 Canary release
This pull request has been released as version
0.0.0-pr-34520-sha-f27a9583. Try it out in a new sandbox by runningnpx storybook@0.0.0-pr-34520-sha-f27a9583 sandboxor in an existing project withnpx storybook@0.0.0-pr-34520-sha-f27a9583 upgrade.More information
0.0.0-pr-34520-sha-f27a9583yann/storybook-skillf27a95831776090791)To request a new release of this pull request, mention the
@storybookjs/coreteam.core team members can create a new canary release here or locally with
gh workflow run --repo storybookjs/storybook publish.yml --field pr=34520Summary by CodeRabbit
storybook ai install-skillsCLI command to install Storybook skills for AI coding agents.npx storybook ai prepare.