component-doc

component-doc is a skill for Claude Code, Codex from Ohh-889/skyroc. It costs 60 tokens per session (3,767 once invoked), scanned A, original, MIT.

A Chinese-language workflow for documenting components in the @skyroc/web-ui component library. It locates a component's source code, demo, and existing MDX documentation before creating or updating the page.

In plain words
What is it for?
Use it when documenting components such as Button, Accordion, or AlertDialog. It helps find the relevant files and generate documentation with demos and property/type tables.
Why use it?
It removes the need to search through the project manually and helps documentation match the library's established format. MDX is a document format that allows embedded components and code.

Skill for Claude CodeCodex

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/ohh-889/skyroc/component-doc
Any agent
npx skills add Ohh-889/skyroc --skill component-doc
Clone the repo
git clone --depth 1 https://github.com/Ohh-889/skyroc

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for component-doc

README.md
[![agentmods](https://agentmods.dev/badge/skills/ohh-889/skyroc/component-doc.svg)](https://agentmods.dev/skills/ohh-889/skyroc/component-doc)
Your own site
<a href="https://agentmods.dev/skills/ohh-889/skyroc/component-doc"><img src="https://agentmods.dev/badge/skills/ohh-889/skyroc/component-doc.svg" alt="Measured on agentmods" height="20"></a>
Per session 60 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 3,767 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00060 $0.03767
Opus 5 $0.00030 $0.01884
Sonnet 5 $0.00012 $0.00753
Haiku 4.5 $0.00006 $0.00377

Measured 4d ago against content hash 470c83638d87, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

component-doc scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

.agents/skills/component-doc/SKILL.md · 305 lines

How it starts

The opening of the file, as written. The whole thing — 305 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Component Documentation Workflow

@skyroc/web-ui 组件库编写文档的专用工作流。

文件定位规则

给定组件名 $COMPONENT(用户输入,如 Button),将其转为 kebab-case $slug(如 button),然后按以下路径查找:

用途 路径
组件源码 packages/web/ui/shadcn/src/components/$slug/
Playground Demo apps/web-ui-playground/src/app/[locale]/(demo)/$slug/modules/
文档 MDX apps/web-ui-docs/content/docs/components/$slug.mdx

文档基础设施文件(不需要每次都读,但需要了解):

文件 作用
apps/web-ui-docs/components/props-table.tsx <PropsTable> — API 属性表格
apps/web-ui-docs/components/type-table.tsx <TypeTable> + <UnionType> — 类型定义区
apps/web-ui-docs/components/type-anchor.tsx 类型链接解析(PascalCase 自定义类型 → 蓝色可点击锚点)
apps/web-ui-docs/components/type-registry.ts 跨页面类型链接注册表
apps/web-ui-docs/components/demo/index.tsx <Demo> — 从 playground 加载 live demo
apps/web-ui-docs/components/mdx.tsx MDX 组件注册(Demo / PropsTable / TypeTable / UnionType)

执行流程

Phase 1: 源码阅读与行为校验

  1. 读取 packages/web/ui/shadcn/src/components/$slug/ 下所有文件
    • 重点关注:index.ts(导出)、types.ts(Props 定义)、*-variants.ts(样式变体)、主组件文件
  2. 读取 apps/web-ui-playground/src/app/[locale]/(demo)/$slug/modules/ 下所有 demo
    • 如果目录不存在或 demo 数量不足以覆盖文档需要的功能章节,标记为"需创建 demo"
  3. 如果 preset 包装器存在,读取 packages/web/ui/shadcn/src/preset/$slug/ 了解预设封装和 useComponentConfig 集成
  4. 如果已有文档 MDX,读取 apps/web-ui-docs/content/docs/components/$slug.mdx
  5. 读取一个已完成的文档作为参考模板(优先 alert.mdx,其次 button.mdx
实现一致性校验(必须执行)

文档不是 API 想象稿,必须从 源码、类型、demo、实际行为 四者交叉验证。

写文档前必须同时检查:

  • types.ts 声明了哪些 public props / types
  • 主组件实际解构了哪些 props
  • props 是否真的传递给对应子组件或底层库
  • 默认值实际在哪里设置
  • classNames / slot props / size / variant / color 等样式控制是否真的生效
  • index.ts 实际导出了哪些组件和类型

如果发现 类型/API 承诺实现行为 不一致:

  1. 先明确指出这是实现问题或 API 语义不一致
  2. 如果任务允许修改代码,应优先修实现或类型,而不是在文档里规避
  3. 如果不能修改实现,必须在最终说明中列为风险/阻塞,并在文档中避免承诺未实现能力
  4. 不允许只降低文档表述来掩盖实现 bug

典型例子:

  • BottomSheetProps.size 声明为主组件尺寸,但主组件没有传给 BottomSheetContent:这是实现 bug,应提出或修复
  • props 被解构但没有使用:不要在文档中承诺该能力已生效
  • 类型继承了底层库 props,但封装组件覆盖或丢弃了其中一部分:以实际封装行为为准

Read the full file on GitHub · 305 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 4d ago First seen · 305 lines · 60 tokens per session scan A 470c83638d87

Subscribe to this mod's changes

component-doc is a skill published in the GitHub repository Ohh-889/skyroc (792 stars, last pushed 2d ago), licensed MIT. It adds 60 tokens to every session and 3,767 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

pro-upgrade

Use when the user wants to upgrade their Ant Design Pro project to the latest version. Triggers on: upgrade pro, pro upgrade, migrate pro, update pro, 升级, 迁移项目, "how to upgrade", "update to latest", "keep project up to date".

ant-design/ant-design-pro · 63 tokens

demo-create

基于项目中 .vscode/south.code-snippets 定义的 CRUD 模板,快速生成后台管理系统的标准 CRUD 页面代码。该技能根据用户提供的业务模块信息(如模块名称、API路径、字段配置等),自动生成完整的页面文件(Page)、数据模型文件(Model)和 API 接口文件(Api),支持分页列表页面(demoPage)、独立操作页面(demoOptionPage)两种页面模式。.

southliu/south-admin-react · 99 tokens

init-project

初始化整个项目,清除模板自带的示例内容(src/pages/demo、src/pages/content、src/components/Github、src/servers/content、menus/demo 及相关 i18n),并连带删除代码中的 import 与引用。执行时会先以 dry-run 预览将要删除的文件和将要修改的引用,经用户确认后再真正执行。.

southliu/south-admin-react · 83 tokens

antd

Use when the user's task involves Ant Design (antd) — writing antd components, debugging antd issues, querying antd APIs/props/tokens/demos, migrating between antd versions, or analyzing antd usage in a project. Triggers on antd-related code, imports from 'antd', or explicit antd questions.

ant-design/ant-design-pro · 69 tokens

creative-tim-ui

Creative Tim UI block library assistant. Use when adding, generating, or modifying UI blocks/components/pages from creative-tim.com/ui. Covers design philosophy (minimalism, the 95% rule, research-first), block discovery, both CLI install methods, PRO API key setup, and Creative Tim design rules (orange brand…

creativetimofficial/ui · 91 tokens

admin-console-blueprint

Use when you need to design, scaffold, refactor, or document a medium-sized admin console built as an independent Vite/React SPA backed by modular Go admin APIs, Cookie session auth, and CLI-provisioned administrator accounts. Helpful for tasks like planning a new admin console, extracting reusable architecture from…

LSTM-Kirigaya/jinhui-skills · 91 tokens