SuperAPI AI 工具集

wot-ui-v2

前端与建站

查看项目

更新于 10-16 09:15

技能介绍

Wot UI V2 Skill 用于让 Agent 在处理 wot-ui v2 相关任务时,优先采用组件库既有能力、遵守 uni-app 场景限制,并结合本仓库提供的 wot CLI 查询离线知识。

【用途与适用场景】 用户询问某个 wd-* 组件的基础用法、属性、事件、插槽或样式变量;需要生成或重构 uni-app + Vue 3 + TypeScript 的 wot-ui 页面或组件代码;需要在 ConfigProvider、主题变量、暗黑模式、国际化、反馈类 hooks、表单等场景下给出正确做法;需要排查文档中常见的 Toast、Dialog、Popup、Tabs、Slider、样式覆盖问题;用户泛化地提到主题定制,但尚未明确要求按“单文件主题 SCSS + App.vue 只 @use”的结构生成时。

【推荐流程】

  1. 先用本仓库 CLI 或 MCP 工具查组件知识。
  2. 再根据项目实际安装方式决定导入路径与集成方式。
  3. 优先复用现成的 wd-* 组件、hooks、主题变量与组合模式,不要退化成原生标签堆砌。
  4. 如果问题涉及约束或坑位,再查阅参考知识。
  5. 如果用户明确要求生成 src/themes/styles/{主题名}.scss 单文件主题,并把挂载逻辑收进主题文件,优先切换到 create-wot-ui-theme skill。

【查询顺序】 wot list 找组件名。 wot info <Component> 查看 props、events、slots、CSS 变量。 wot demo <Component> 查看 demo 名称或具体 demo 代码。 wot doc <Component> 查看完整 markdown 文档。 wot token <Component> 查看主题变量。

【工作规则】 默认把 wot-ui 视为 uni-app + Vue 3 + TypeScript 组件库。 写页面时优先输出 script setup 风格。 反馈类能力如 useToast、useDialog、useNotify、useImagePreview、useVideoPreview,除了 hook 调用外,通常还需要页面内显式声明对应组件实例。 文档里经常出现 @/uni_modules/wot-ui 导入路径;如果用户项目采用 npm 安装,应切换成 @wot-ui/ui。 主题定制优先走 ConfigProvider 和 CSS 变量,不优先建议深度覆盖内部类名。 生成代码时尽量沿用组件库文档里的命名和交互模式,例如 v-model:visible、before-confirm、confirm、change、custom-class、custom-style。

【参考资料】 Wot UI V2 概览。

【限制】 除以上资料所述内容外,其他功能细节、收费、价格、平台支持范围或实际使用效果暂未提供。