wot-design-uni-skill
v1.0.0
Published
AI coding assistant skill for wot-design-uni v1.x component library. Works with Claude Code, Cursor, Windsurf and other AI coding tools.
Downloads
7
Maintainers
belinchungReadme
Wot Design Uni - Claude Code Skill
版本说明：此 skill 基于 wot-design-uni v1.x 版本开发和测试。如果你使用的是 v2.0 预览版或更高版本，部分 API 可能有所变化，请参考最新文档。
✨ 特性
- 🎯 智能组件推荐 - 根据需求自动推荐最合适的组件
- 📝 代码自动生成 - 生成符合规范的完整代码示例
- 🔍 问题诊断 - 快速定位和解决组件使用问题
- 📚 最佳实践 - 提供组件库的最佳实践建议
- 🚀 场景模板 - 内置常见业务场景的代码模板
- 💡 智能补全 - 理解上下文，提供精准的代码建议
- 🔧 跨工具兼容 - 支持 Claude Code、Cursor、Windsurf 等多种 AI 编程工具
🚀 快速开始
支持的工具
本 Skill 可以在以下 AI 编程工具中使用：
- ✅ Claude Code - Anthropic 官方 CLI 工具
- ✅ Cursor - AI 代码编辑器（支持 Claude）
- ✅ Windsurf - AI 编程助手（支持 Claude）
- ✅ 其他支持 Claude 的工具 - 只要支持自定义 prompt/skill
安装方法
方法 1：Claude Code 安装
在 Claude Code 中运行：
/skill install https://raw.githubusercontent.com/BelinChung/wot-design-uni-skill/main/wot-ui-helper.md方法 2：Cursor / Windsurf 安装
- 下载
wot-ui-helper.md文件 - 在工具的设置中添加为自定义 prompt 或 context
- 具体步骤参考各工具的文档
方法 3：npm 全局安装
npm install -g wot-design-uni-skill安装后会自动配置到 Claude Code。
方法 4：手动安装
- 下载
wot-ui-helper.md文件 - 复制到对应工具的配置目录：
# Claude Code # macOS/Linux: ~/.claude/skills/ # Windows: %USERPROFILE%\.claude\skills\ # Cursor # 在设置中添加为 Custom Instructions # Windsurf # 在设置中添加为 Context File
📖 使用示例
示例 1：创建登录表单
输入：
使用 wot-design-uni 创建一个登录表单，包含手机号和密码输入框，需要表单验证AI 输出：
<template>
<wd-form ref="formRef" :model="model">
<wd-cell-group border>
<wd-input
v-model="model.phone"
label="手机号"
prop="phone"
type="tel"
placeholder="请输入手机号"
clearable
:rules="[
{ required: true, message: '请填写手机号' },
{ pattern: /^1\d{10}$/, message: '手机号格式不正确' }
]"
/>
<wd-input
v-model="model.password"
label="密码"
prop="password"
type="password"
show-password
placeholder="请输入密码"
clearable
:rules="[
{ required: true, message: '请填写密码' },
{
validator: (val) => val.length >= 6,
message: '密码长度不能少于6位'
}
]"
/>
</wd-cell-group>
<view class="footer">
<wd-button type="primary" size="large" block @click="handleLogin">
登录
</wd-button>
</view>
</wd-form>
<wd-toast />
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useToast } from 'wot-design-uni'
const toast = useToast()
const formRef = ref()
const model = reactive({
phone: '',
password: ''
})
function handleLogin() {
formRef.value.validate().then(({ valid }) => {
if (valid) {
// 调用登录接口
toast.success('登录成功')
}
})
}
</script>
<style scoped>
.footer {
padding: 20px;
}
</style>示例 2：商品列表页
输入：
创建一个商品列表页面，带搜索和上拉加载更多功能AI 会生成完整的列表页面代码，包括：
- 搜索组件
- 商品列表展示
- 加载更多逻辑
- 空状态处理
示例 3：组件查询
输入：
wot-design-uni 的日期选择器怎么用？AI 会提供：
- 组件说明和用途
- 完整的使用示例
- 常用属性列表
- 注意事项
🎯 支持的场景
📋 表单场景
- 登录/注册表单
- 信息填写表单
- 搜索筛选表单
- 动态表单
- 复杂表单验证
📱 列表场景
- 基础列表展示
- 搜索列表
- 分页/加载更多
- 下拉刷新
- 列表筛选排序
💬 弹窗场景
- 确认对话框
- 表单弹窗
- 选择器弹窗
- 底部动作面板
🎨 展示场景
- 轮播图
- 图片展示
- 卡片列表
- 步骤条
- 标签页切换
📚 文档
- 快速开始指南 - 5 分钟快速上手
- 详细使用指南 - 完整的使用文档和最佳实践
- 跨工具使用指南 - 在 Cursor、Windsurf 等工具中使用
- 测试用例 - 验证 skill 功能
- Skill 源码 - Skill 的完整定义
- wot-design-uni v1.x 官方文档 - 组件库官方文档
🛠️ 管理命令
如果通过 npm 安装，可以使用以下命令：
# 查看安装状态
wot-skill status
# 重新安装
wot-skill install
# 卸载
wot-skill uninstall💡 使用技巧
1. 明确描述需求
❌ 不够明确：
帮我写个表单✅ 清晰明确：
创建一个用户注册表单，包含用户名（必填）、手机号（必填，格式验证）、
邮箱（选填）、地址选择器，使用 wot-design-uni 组件2. 提供上下文
我的项目使用 wot-design-uni，需要在用户列表页添加筛选功能，
包括按状态筛选和按时间范围筛选3. 指定平台
创建一个适配微信小程序的图片上传功能，使用 wot-design-uni 的 Upload 组件🔧 自定义配置
在项目根目录创建 .claude/wot-ui-config.json：
{
"preferredStyle": "composition-api",
"typescript": true,
"platform": "mp-weixin",
"theme": "default",
"locale": "zh-CN"
}📝 更新日志
v1.0.0 (2026-04-21)
- 🎉 首次发布
- ✨ 支持 70+ 组件的智能推荐和代码生成
- 📝 内置常见业务场景模板
- 🔍 智能问题诊断和解决方案
📄 许可证
🔗 相关链接
📌 版本兼容性
| Skill 版本 | wot-design-uni 版本 | 状态 | |-----------|-------------------|------| | v1.x | v1.x (v1.14.0 及以下) | ✅ 完全支持 | | v1.x | v2.0+ | ⚠️ 部分 API 可能不兼容 |
如果你使用的是 wot-design-uni v2.0 或更高版本，建议等待 skill v2.0 版本发布，或参考最新官方文档进行开发。