本文へ移動
cccskills
無料GitHub で公開

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.

インストール方法を見る

含まれるファイル(4)

  • SKILL.md2.1 KB
  • ci-template.yml1.9 KB
  • output-format.md2.0 KB
  • scripts/detect-components.sh1.2 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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
PropsdefineProps<T>() 或 withDefaultsTypeScript interface / PropTypes
EmitsdefineEmits()回调 props(onXxx)
用法示例从 props 推断基础用法从 props 推断基础用法

提取规则:

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

4. 生成 docs/components.md

格式见 → output-format.md

5. 输出变更摘要

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

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

关键约束

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

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Convert Lanhu HTML/CSS output into project frontend code for Vue, React, or the detected stack, with component reuse and design token mapping.

日本語の概要は準備中です。原文の説明を表示しています。

ursazoo/lanhu-to-code222026年5月12日 更新

code-gen

無料

Extract Lanhu design HTML, CSS, and assets through Lanhu MCP for Claude Code design-to-code workflows. Called by design-to-code.

日本語の概要は準備中です。原文の説明を表示しています。

ursazoo/lanhu-to-code222026年5月12日 更新

Lanhu to Code workflow for Claude Code. Convert Lanhu design URLs into Vue/React frontend code with component reuse, design token mapping, TODO-safe business logic, and optional code review.

日本語の概要は準備中です。原文の説明を表示しています。

ursazoo/lanhu-to-code222026年5月12日 更新

ursazoo のスキルをすべて見る

このスキルの問題を報告する