SuperAPI AI 工具集

storybook-component-documentation

前端与建站

查看项目

更新于 10-15 23:40

技能介绍

用途:在 Storybook 中创建或改进组件文档,使用 autodocs、MDX 和 JSDoc 注释生成组件说明,补充组件描述、故事差异、API 参数、迁移指南与设计令牌等内容。

主要能力:

  • Autodocs:在 meta 中添加 tags: ['autodocs'],自动依据故事生成文档页,并可通过 parameters.docs.description.component 补充组件说明。
  • MDX 文档:导入 Meta、Canvas、Story、Controls 等 @storybook/blocks 组件,自定义文档页并展示示例与参数表。
  • JSDoc 注释:为组件 props 编写说明与 @default 等标记,供自动提取。
  • 故事与 API 文档:为单个 story 添加 docs.description.story,使用 argTypes.table.type.summary 描述参数类型。
  • 迁移指南与设计令牌:用 MDX 编写版本迁移说明,用 ColorPalette、ColorItem、Typeset 展示配色与字体。

使用方式:在故事文件的 meta 中启用 autodocs 并填写组件描述;为 props 增加 JSDoc;为故事补充说明;需要自定义页面时编写 MDX,引入 @storybook/blocks 组件。资料中给出的安装命令为 npm install @company/ui-components 或 yarn add @company/ui-components。

适用场景:组件库维护者、设计系统与前端团队编写组件文档时使用。

限制:资料未提供具体版本要求、安装步骤、收费与价格、平台支持等信息;部分内容为示例代码与建议,实际效果取决于项目配置。