Agent Skills
返回列表
💻

橱窗

开发编程 更新于 2026.08.29

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @org-02qudk26/vitrine。

技能介绍

问题从哪来

组件库一旦脱离「可见的状态」，文档就会和真实 UI 脱节：设计稿里有变体，代码里能切 loading/error，但目录里只有默认态。没有故事的组件就是没有上下文的组件——评审、交接和回归测试都缺少共同参照。

Vitrine（橱窗）把职责收窄在组件展示层：写 CSF 3.0 / CSF Factory 故事、Cosmos 夹具、Play 函数与 Autodocs，做覆盖率与 a11y 审计，以及 Storybook 8→9→10 迁移建议；不直接改生产组件代码，实现仍交给 Artisan / Builder 等代理。

核心能力与工作方式

  • 工具检测与配方路由：识别 Storybook（.storybook/）、React Cosmos、Histoire、Ladle 等；子命令如 story、coverage、vrt、csf3、interaction、a11y、chromatic 等对应不同 reference 文档。
  • 故事创作（默认 story）：按 SURVEY → PLAN → VERIFY → PRESENT；类型安全 Meta（satisfies Meta 或 CSF Factory）；tags: ['autodocs']；交互组件配 Play 函数，优先 getByRole / getByLabelText，而非滥用 data-testid。
  • 质量目标（有校准，非刷量）：故事覆盖率目标 ≥80%（变体 × 状态 × 交互），100% 视为反目标；交互组件至少 1 个覆盖主流程的 Play；a11y 目标 ≥95% 故事通过 axe-core WCAG 2.2 AA；设计代码对齐标记缺故事的 Figma 组件（目标 ≥90%）。
  • 测试与模拟：Vite 系项目优先 addon-vitest；模块 mock 优先 Storybook 9.1+ 的 sb.mock（仅在 .storybook/preview.ts 注册，构建期解析，不用工厂函数）；交互工具统一从 @storybook/test 导入，避免已弃用的 jest/testing-library 包。
  • 视觉回归：Chromatic、Playwright VRT、Lost Pixel、Applitools 等；Storybook 9 可先评估内置视觉测试；不以像素级快照当主策略。
  • 协作边界：组件级 Play 止于组件边界，跨页流程路由 Voyager；单元/集成测路由 Radar；代币定义路由 Muse；UI 实现路由 Artisan/Builder。

适用边界与注意点

会先问再动刀：Chromatic/Applitools 成本、新 addon、50+ 文件大重构、CSF 2→3、Storybook 旁再叠 Cosmos 等。

禁止做法：故事里塞业务逻辑或真实 API；Play 里写 E2E；waitForTimeout；无覆盖率跟踪的「 orphan 故事」；以 100% 故事覆盖率当 KPI。

Storybook 10：仅 ESM、Node 20.16+；CSF Factory 在 React 为预览能力。RSC 故事视为实验性，需 sb.mock 界定异步数据边界。AI 代理场景可配 @storybook/addon-mcp，并用标签排除降低清单噪声。

使用场景

  • 设计系统准备升到 Storybook 9，需要把 CSF 2 故事迁到 CSF 3，并把测试运行程序换成 addon-vitest。
  • Figma 目录里已有变体，但仓库里部分组件没有 stories，需要按变体/状态/交互做覆盖率差距报告并排改进顺序。
  • 交互组件（表单、对话框）要在 Storybook 里补覆盖主流程的 Play 函数，并用 addon-a11y 在 CI 里卡 WCAG 2.2 AA。
  • Monorepo 要在 Chromatic 或 Playwright VRT 上接视觉回归，并用 tags 区分哪些 story 参与截图基线。

适合人员

  • 设计系统平台工程师：要在合并前用内置覆盖率报告和 a11y 通过率约束组件目录，而不是事后人工扫一遍。
  • 前端技术负责人：计划 Storybook 10 全 ESM 迁移，需核对 Node 20.16+ 与 CSF Factory 对 React 故事的格式影响。
  • 应用层前端：上游 Artisan/Builder 已交付组件，你的任务是写 CSF 3.0 stories、Autodocs 和 Play，不碰生产实现。
  • 组件库维护者：希望用 CSF Factory 在 Vitest 里直接复用故事，减少 composeStories 样板并给仅测试故事打标签隐藏侧边栏。