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.
npx agentmods add skills/ohh-889/skyroc/component-docnpx skills add Ohh-889/skyroc --skill component-docgit clone --depth 1 https://github.com/Ohh-889/skyrocWrote 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.
[](https://agentmods.dev/skills/ohh-889/skyroc/component-doc)<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>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.
| Model | Per session | Once 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 |
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.
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: 源码阅读与行为校验
- 读取
packages/web/ui/shadcn/src/components/$slug/下所有文件- 重点关注:
index.ts(导出)、types.ts(Props 定义)、*-variants.ts(样式变体)、主组件文件
- 重点关注:
- 读取
apps/web-ui-playground/src/app/[locale]/(demo)/$slug/modules/下所有 demo- 如果目录不存在或 demo 数量不足以覆盖文档需要的功能章节,标记为"需创建 demo"
- 如果 preset 包装器存在,读取
packages/web/ui/shadcn/src/preset/$slug/了解预设封装和useComponentConfig集成 - 如果已有文档 MDX,读取
apps/web-ui-docs/content/docs/components/$slug.mdx - 读取一个已完成的文档作为参考模板(优先
alert.mdx,其次button.mdx)
实现一致性校验(必须执行)
文档不是 API 想象稿,必须从 源码、类型、demo、实际行为 四者交叉验证。
写文档前必须同时检查:
types.ts声明了哪些 public props / types- 主组件实际解构了哪些 props
- props 是否真的传递给对应子组件或底层库
- 默认值实际在哪里设置
classNames/ slot props /size/variant/color等样式控制是否真的生效index.ts实际导出了哪些组件和类型
如果发现 类型/API 承诺 与 实现行为 不一致:
- 先明确指出这是实现问题或 API 语义不一致
- 如果任务允许修改代码,应优先修实现或类型,而不是在文档里规避
- 如果不能修改实现,必须在最终说明中列为风险/阻塞,并在文档中避免承诺未实现能力
- 不允许只降低文档表述来掩盖实现 bug
典型例子:
BottomSheetProps.size声明为主组件尺寸,但主组件没有传给BottomSheetContent:这是实现 bug,应提出或修复- props 被解构但没有使用:不要在文档中承诺该能力已生效
- 类型继承了底层库 props,但封装组件覆盖或丢弃了其中一部分:以实际封装行为为准
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.
- 4d ago First seen · 305 lines · 60 tokens per session scan A 470c83638d87
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.
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".
demo-create
基于项目中 .vscode/south.code-snippets 定义的 CRUD 模板,快速生成后台管理系统的标准 CRUD 页面代码。该技能根据用户提供的业务模块信息(如模块名称、API路径、字段配置等),自动生成完整的页面文件(Page)、数据模型文件(Model)和 API 接口文件(Api),支持分页列表页面(demoPage)、独立操作页面(demoOptionPage)两种页面模式。.
init-project
初始化整个项目,清除模板自带的示例内容(src/pages/demo、src/pages/content、src/components/Github、src/servers/content、menus/demo 及相关 i18n),并连带删除代码中的 import 与引用。执行时会先以 dry-run 预览将要删除的文件和将要修改的引用,经用户确认后再真正执行。.
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.
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…
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…