Component Doc Gen

Scan frontend src directories and generate docs/components.md so Claude Code can reuse existing Vue/React components during design-to-code generation.

majiayu000 b983a15 2 files · 2.9 KB Updated 567 repo stars

File contents

component-doc-gen

职责: 扫描项目 src/ 目录,提取组件 props/emits/用法,生成 docs/components.md 初稿。

运行场景: GitLab/Codeup 定时 CI Pipeline,不在 design-to-code 流程中内联调用。

不做: 生成 tech-spec.md(API 路径只有人知道)、修改现有组件代码。

执行步骤

1. 发现组件(确定性,脚本执行)

bash scripts/detect-components.sh <项目根目录>

输出每行格式:<shared|page>:<components目录>:<组件文件路径>

2. 按类型分组

  • shared → 通用组件(跨页面可用)
  • page → 页面级组件(仅所属页面使用)

3. 逐文件提取(AI 读取,每文件独立处理)

读取每个组件文件,提取:

提取项 Vue 3 来源 React/TSX 来源
组件名 文件名 / name 选项 函数名 / export default
Props defineProps<T>()withDefaults TypeScript interface / PropTypes
Emits defineEmits() 回调 props(onXxx
用法示例 从 props 推断基础用法 从 props 推断基础用法

提取规则:

  • Props 名称和类型以源码为准,不推测语义
  • 无法确定的标注 ⚠️ 需人工确认
  • 不读取组件内部实现逻辑(只看对外接口)

4. 生成 docs/components.md

格式见 → output-format.md

5. 输出变更摘要

生成完成:
  通用组件:N 个
  页面级组件:M 个(来自 K 个页面)
  需人工确认:P 项(已在文件中标注 ⚠️)

docs/components.md 已写入,请审阅后提交 MR。

关键约束

  • 每次全量重新生成(不做增量 diff,避免过时信息残留)
  • 文件顶部必须保留 ⚠️ 自动生成 提示,合并后由开发者手动删除
  • 同名组件(shared 和 page 各有一个)在文档中分开列出,不合并

majiayu000/claude-skill-registry-data/tree/main/documents/component-doc-gen commit b983a15289

Frequently asked questions

npx skillmds add majiayu000/component-doc-gen