storybook-init

分类: 工具与效率 | 上传者: storybookjs | 下载: 0 | 版本: v1.0（最新）

将 Storybook 添加到尚未配置 Storybook 的项目时使用，尤其是在启用 Storybook MCP 工作流程之前。

更新日志: Source: GitHub https://github.com/storybookjs/mcp

目录结构

当前层级: tree/main/packages/claude-plugin/skills/storybook-init/

📄 SKILL.md 1.3 KB

SKILL.md

---
name: storybook-init
description: Use when adding Storybook to a project that does not have Storybook configured yet, especially before enabling Storybook MCP workflows.
---

# Storybook Init

Use this skill when a project does not already have Storybook configured.

## Workflow

1. Inspect the project to understand its framework, package manager, and workspace layout. Prefer the package manager already used by the repo.
2. Run Storybook's official initializer from the project root:

```sh
npm create storybook@latest
```

Use the matching package-manager command when appropriate, such as `pnpm create storybook@latest` or `yarn create storybook`.

3. Prefer the recommended setup unless the user asks for a minimal setup.
4. If auto-detection fails, rerun the initializer with the closest explicit `--type` value.
5. Add the MCP addon:

```sh
npx storybook add @storybook/addon-mcp
```

6. Use `/storybook-setup-claude-launch` to configure `.claude/launch.json` and start Storybook through that launch entry.
7. Note the Storybook invocation directory (where `storybook dev` runs) as `cwd` when using Storybook MCP proxy tools.

## Guardrails

- Do not hand-write a full Storybook config when the official initializer can do it.
- Preserve existing app source and package manager choices.

登录后下载/点赞/收藏 ❤ 239 | ★ 0

storybook-init

目录结构

SKILL.md

举报内容

提示