본문으로 건너뛰기
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 各有一个)在文档中分开列出,不合并

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

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의 스킬 모두 보기

이 스킬의 문제 신고