Menu
Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.
Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
npx skills add https://github.com/bkywksj/ruoyi-plus-uniapp-docs --skill component-docO comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.
Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.
Exibindo SKILL.md
Baseado na classificação 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- 前缀