组件库救星：Storybook 把 Claude Plugin 集成做成了 Skill

每次接新组件库，我都得翻一遍 Storybook 怎么装——npx storybook@latest init、选框架、改配置、装一堆 addon。第二遍时我已经烦了。

直到刷到 storybookjs/storybook 仓库里藏了一套 Claude Plugin Skills（91k+ ⭐），把”初始化、配置、升级”全做成了 AI 可调用的工作流。今天拆给你看。

这玩意是干嘛的

Storybook 是业界标准的前端组件 workshop——独立构建 UI、做可视化测试、出文档站，React/Vue/Angular/Svelte/React Native 全支持。他们把经验拆成了几个 Claude Skill：

• storybook-init：项目还没装时，AI 调它脚手架
• storybook-setup：已装好，补 preview 和真实 story
• storybook-upgrade：跨版本升级，AI 知道每个版本的坑
• storybook-startup-benchmark：测启动时间，做回归对比

为啥值得装

之前用 Claude Code 让 AI 加 Storybook，要么漏装 addon，要么配置写崩。现在 AI 自动加载对应 Skill 文件，按维护者写的最佳实践执行——比如它知道 Next.js 要装哪个 framework 包、Storybook 8 后 preview.ts 必须 type-safe 写法。

最实用的是 storybook-upgrade。Storybook 7 升 8 把 webpack builder 换成了 Vite，AI 拿了这 Skill 后能自动跑 migration codemod、修 autodocs、补 testing annotations，省了我半天手动迁移。

上手姿势

想在 Claude Code 里用，直接在项目根 .claude/settings.json 启用官方插件即可。Skill 文件都在 .agents/skills/ 下，README 写得很清楚。

它不是”花哨的 Skill”——是把行业最佳实践固化下来的工程化产物。Storybook 已是前端必装，AI 集成只是顺手让它更顺手。

👉 https://github.com/storybookjs/storybook

GitHub: https://github.com/storybookjs/storybook