storybook-workbench

# Storybook 工作台 **适用于 React + Vite 应用的 Storybook 工具包 — 由 AI 编码代理驱动。** 在实际代码库中使用 Storybook：审计实际存在的组件（真实 vs. AI 生成的）， 映射应用的流程和用户角色，编写符合 CSF3 标准的故事，仅针对重要的状态， 并在 **Claude Code、Codex 和 Cursor** 上部署。所有内容都位于 `.storybook/` 下， 因此 `src/` 保持干净，整个审计过程仅需一个可移除的文件夹。 10 种专注的技能在共享基础上一同工作，由中心枢纽协调 — 而不是一个庞大的单一提示。 --- ## 安装 适用于任何支持 [Agent Skills](https://agentskills.io) 标准的代理。 **任何代理（skills.sh）— 所有 10 种技能（整个捆绑包）：** ```bash npx skills add strongeron/storybook-workbench # 安装所有 10 种技能 npx skills add strongeron/storybook-workbench --all # 相同，完全非交互式（所有技能 + 所有代理，-y）— 用于 CI ``` **仅一种技能** （每种技能都自包含 — 其自身的脚本、引用、包装器和布局装饰器）： ```bash npx skills add strongeron/storybook-workbench --list # 查看 10 种技能 npx skills add strongeron/storybook-workbench -s sb-wrappers # 安装仅此一种技能 npx skills use strongeron/storybook-workbench@sb-wrappers # 在不安装的情况下试用 ``` > 管道注意：渲染器技能显示其他技能产生的数据 — 例如，`sb-wrappers` 的 `ProjectInventory` 读取 `sb-inventory` 的 `project-inventory.json`，`DesignSystemHealth` 读取 `sb-health` 的输出。单独安装时，它们工作并呈现 **空状态**，直到存在该 JSON；添加生产者技能（或提供 JSON）以获取实时数据。纯组合包装器（`StateGrid`/`ABCanvas`/`StateMatrix`/`StorySet`）没有跨技能依赖。 **Claude Code（插件市场）— 整个捆绑包：** ```bash claude plugin marketplace add strongeron/storybook-workbench claude plugin install storybook-workbench@storybook-workbench ``` **Codex：** 安装 **项目范围** （删除 `--global` — skills CLI 不支持 Codex 的全局安装），从项目根目录运行： ```bash npx skills add strongeron/storybook-workbench --agent codex --yes ``` **Cursor：** 技能是 **项目范围** （Cursor 没有全局技能目录）— 从项目根目录运行，然后重新加载窗口： ```bash npx skills add strongeron/storybook-workbench --agent cursor --yes # 然后：Cmd/Ctrl+Shift+P → "Developer: Reload Window" ``` 重新加载后，技能出现在 Cursor 的 **`/` 菜单**下的 **Skills** 中 — 通过名称调用一个技能（`/sb-hub`、`/sb-setup`、`/sb-inventory` 等），或直接用语言提问，匹配的技能会根据描述触发。 然后重启代理会话，使其注册技能。 ### 开始使用 | 代理 | 如何触发 | 开始使用 | |-------|-----------------|------------| | **Claude Code** | 通过描述或名称 | `/sb-hub`，或询问 *"审计此 React+Vite 应用并设置 Storybook"* | | **Cursor** | 通过名称 via `/`，或描述 | 重新加载窗口，然后 `/sb-hub`（技能显示在 `/` 菜单下的 **Skills** 中），或询问 *"审计此 React+Vite 应用并设置 Storybook"* | | **Codex** | 通过名称 | 提及 `$sb-hub`，或特定的 `$sb-stories` / `$sb-audit` | 当不确定时，从 **`sb-hub`** 开始 — 它检查项目并命名下一步（或驱动整个流程）。 --- ## 技能 核心流程，按运行顺序。每个技能都写入 `.storybook/`，并且可以单独调用 — 中心枢纽负责路由。 | # | 技能 | 使用场景 | 写入 | |---|-------|---------------------------|--------| | — | **sb-hub** | 不确定要运行什么 — *"下一步是什么？"* 检查状态并路由（或驱动整个管道）。 | 报告 | | 1 | **sb-setup** | 在没有 Storybook 的应用上安装 Storybook（委托给 `npx storybook` 原生 onboarding）；询问故事存放在哪里。 | `.storybook/` | | 2 | **sb-inventory** | 查找 **真实 vs. 生成的内容** — 您的组件 vs. 供应商 shadcn `ui/`，类型/钩子，死代码 — 以及调用站点处的真实属性值使用情况。 | `project-inventory.json` | | 3 | **sb-flows** | 映射整个应用 — 路由，导航 **边缘**，持久导航 Chrome，和 **用户角色** （谁到达每个屏幕）。 | `flows.json` | | 4 | **sb-health** | 设计系统健康状况 — 原始十六进制应为令牌，未定义/孤立令牌，比例差距，和 `DESIGN.md` 漂移。 | `design-system-health.json` | | 5 | **sb-stories** | 为 **一个** 组件编写 CSF3 故事，涵盖其仅具有实质性差异的状态（无笛卡尔爆炸）。 | `stories/*.stories.tsx` † | | 6 | **sb-wrappers** | 为 Storybook 编写专用视图（StateGrid，ABCanvas，AppFlowGraph，ProjectInventory，DesignSystemHealth ...）。 | `wrappers/*.tsx` | | 7 | **sb-audit** | 定期目录健康检查 — 命名漂移，存档/决策审查，生命周期标签，使用情况刷新。 | `audit/*` | **事件触发（在流程之外）：** | 技能 | 使用场景 | |-------|---------------------------| | **sb-explore** | 在 `src/` 之外的沙盒中原型设计新的/重新设计的组件（应用代码从不依赖它）。 | | **sb-ship** | 将 Explore 实验升级为生产组件（保留历史 — `cp`，而非 `git mv`）。 | > † 故事存放在 `sb-setup` 询问的位置 — 默认 `.storybook/stories/`，或如果您长期拥有仓库，则位于 `src/**/*.stories.tsx`。 ### 典型首次运行 ```text hub → setup（如果需要）→ inventory → flows → health → stories → wrappers / app-map → audit ``` 在 Claude Code 中，只需 `/sb-hub`（它会引导您完成），或用语言提问，正确的技能会触发。 --- ## 测试 此捆绑包提供一个可读的评估表面，位于 **`evals/evals.json`** — 行为案例（加载技能 vs. 基线，具有确定性和 LLM 评估断言），涵盖每个技能的核心声明：CSF3 导入约定，真实 vs. 生成内容的库存，角色感知的流程捕获，自适应路由提取和 ship-preserve-experiment。这是信任信号 — 技能经过测试，而不仅仅是编写。 --- ## 发现错误？奇怪的行为？ 让技能草拟一份 **净化** 的报告 — 版本 + `.storybook/*.json` 形状/计数，仅限，不包括您的源代码，令牌值或组件名称。从项目根目录： ```bash ~/.claude/skills/sb-hub/scripts/report-issue.sh --asked "…" --observed "…" --expected "…" ``` ... 或直接告诉 **`sb-hub`** *"这是错误的 / 报告错误"* （模式 3），它为您运行报告程序。它编写本地草稿并打印 `gh issue create …` 命令 + 空白问题网址 — **无需网络调用；您提交**。或使用 **Bug / 奇怪的行为** 模板打开问题。 每个报告都会累积：报告 → 复现 → **评估案例** → 修复 → 现场学习。参见 [`CONTRIBUTING.md`](./CONTRIBUTING.md)。没有技能在运行时重写自身 — 改进由人工审查和评估门控。 --- ## 许可证 MIT。参见 [`LICENSE`](./LICENSE) 和 [`SECURITY.md`](./SECURITY.md)。变更日志：[`CHANGELOG.md`](./CHANGELOG.md)。