Menú
De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.
Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.
npx skills add https://github.com/bkywksj/ruoyi-plus-uniapp-docs --skill component-docEl comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.
¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.
Mostrando SKILL.md
Basado en la clasificación ocupacional SOC
| name | component-doc |
| description | WD UI 组件文档专用生成器。当用户说"写组件文档"、"WD组件"、"组件文档"时使用此技能。 |
| argument-hint | <分类/组件名> |
| allowed-tools | Read, Grep, Glob, Bash, Edit, Write, Agent |
你是 WD UI 组件文档撰写专家，负责为 RuoYi-Plus-UniApp 移动端的 WD UI 组件库撰写标准化文档。
$ARGUMENTS 格式：<分类/组件名>
form/rate — 表单分类下的评分组件feedback/swipe-action — 反馈分类下的滑动操作basic | layout | navigation | form | display | feedbackD:/desktop/my/framework/ruoyi-plus-uniapp/ruoyi-plus-uniapp-docs/docs/mobile/wd/D:/desktop/my/framework/ruoyi-plus-uniapp/ruoyi-plus-uniapp-workflow/app/| 分类 | 路径 | 组件数 |
|---|---|---|
| basic | docs/mobile/wd/basic/ | 6 |
| layout | docs/mobile/wd/layout/ | 5 |
| navigation | docs/mobile/wd/navigation/ | 9 |
| form | docs/mobile/wd/form/ | 22 |
| display | docs/mobile/wd/display/ | 13 |
| feedback | docs/mobile/wd/feedback/ | 23 |
在源码项目中找到组件源文件：
find "D:/desktop/my/framework/ruoyi-plus-uniapp/ruoyi-plus-uniapp-workflow/app/" -type d -name "wd-<组件名>"
读取组件的关键文件：
wd-<组件名>.vue — 主组件文件types.ts — TypeScript 类型定义（Props/Events/Slots）index.ts — 导出文件从源码中提取：
读取同分类下 1 个已有组件文档，保持风格一致。
# <组件中文名> <ComponentName>
## 介绍
简要说明组件用途和使用场景。
## 引入
:::code-group
```html [基础引入]
<wd-<组件名> />
:::
<说明 + 代码示例>
<说明 + 代码示例>
<说明 + 代码示例>
| 参数 | 说明 | 类型 | 默认值 |
|---|
| 事件名 | 说明 | 回调参数 |
|---|
| 名称 | 说明 | 参数 |
|---|
| 方法名 | 说明 | 参数 | 返回值 |
|---|
| 类名 | 说明 |
|---|
通过 CSS 变量自定义组件样式：
| 名称 | 默认值 | 说明 |
|---|
A: 解答
### 第五步：格式校验
1. ✅ Props 表完整（从 types.ts 提取，不遗漏）
2. ✅ Events 表与 emit 定义一致
3. ✅ 代码示例至少 3 个（基础 + 2 个进阶）
4. ✅ 组件名使用 `wd-` 前缀
5. ✅ 类型使用反引号包裹
6. ✅ 源码引用路径正确
### 第六步：输出结果
```markdown
## 组件文档已创建
- **文件**: `docs/mobile/wd/<分类>/<组件名>.md`
- **组件**: `wd-<组件名>`
- **Props**: N 个
- **Events**: N 个
- **Slots**: N 个
- **代码示例**: N 个
> 💡 提示：请使用 `/sidebar add mobile/wd/<分类> <组件名>` 添加到侧边栏
types.ts 完全一致，不能遗漏或虚构wd- 前缀