Receber por email
← Voltar para o catálogo

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.

12estrelas
Atualizado há 5 meses

Ver no GitHub ↗

Como adicionar

/plugin marketplace add ursazoo/lanhu-to-code

O comando exato pode variar conforme o repositório. Confira o README no GitHub.

Para o autor da skill

Cole no README do seu repo

Mostra que sua skill está catalogada na Skillteca, gera backlink e tráfego rastreável.

[![Skillteca](https://www.skillteca.com.br/api/badge/component-doc-gen/svg)](https://www.skillteca.com.br/skills/component-doc-gen)

Alerta por categoria

Receba novas skills de Design e Frontend toda segunda

1 email curto, só com as skills novas de Design e Frontend. 4 minutos de leitura, sem spam, cancela com 1 clique.

Você confirma o email no primeiro envio. Sem spam. Cancela com 1 clique.

Ler descrição completa

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 各有一个)在文档中分开列出,不合并
Compartilhar X LinkedIn