Menu
Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.
Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
npx skills add https://github.com/bkywksj/ruoyi-plus-uniapp-docs --skill component-docLa commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.
Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.
Basé sur la classification professionnelle SOC
Affichage de SKILL.md
| 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- 前缀