القائمة
Scan frontend src directories and generate docs/components.md so Claude Code can reuse existing Vue/React components during design-to-code generation.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Convert Lanhu HTML/CSS output into project frontend code for Vue, React, or the detected stack, with component reuse and design token mapping.
Extract Lanhu design HTML, CSS, and assets through Lanhu MCP for Claude Code design-to-code workflows. Called by design-to-code.
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.
| name | component-doc-gen |
| description | Scan frontend src directories and generate docs/components.md so Claude Code can reuse existing Vue/React components during design-to-code generation. |
| model | sonnet |
| disable-model-invocation | true |
职责： 扫描项目 src/ 目录，提取组件 props/emits/用法，生成 docs/components.md 初稿。
运行场景： GitLab/Codeup 定时 CI Pipeline，不在 design-to-code 流程中内联调用。
不做： 生成 tech-spec.md（API 路径只有人知道）、修改现有组件代码。
bash scripts/detect-components.sh <项目根目录>
输出每行格式：<shared|page>:<components目录>:<组件文件路径>
shared → 通用组件（跨页面可用）page → 页面级组件（仅所属页面使用）读取每个组件文件，提取：
| 提取项 | Vue 3 来源 | React/TSX 来源 |
|---|---|---|
| 组件名 | 文件名 / name 选项 | 函数名 / export default |
| Props | defineProps<T>() 或 withDefaults | TypeScript interface / PropTypes |
| Emits | defineEmits() | 回调 props（onXxx） |
| 用法示例 | 从 props 推断基础用法 | 从 props 推断基础用法 |
提取规则：
⚠️ 需人工确认格式见 → output-format.md
生成完成：
通用组件：N 个
页面级组件：M 个（来自 K 个页面）
需人工确认：P 项（已在文件中标注 ⚠️）
docs/components.md 已写入，请审阅后提交 MR。
⚠️ 自动生成 提示，合并后由开发者手动删除