This handles Wot UI v2 component queries and code generation for uni-app Vue 3 projects. It knows to check the offline CLI first for component APIs, demos, and theme tokens before generating code, which keeps you from reinventing components that already exist. The workflow is sensible: look up the wd-* component, grab its props and events, then write actual wot-ui code instead of falling back to generic HTML. It also knows the common gotchas around Toast, Dialog, and theme customization. If you're building mini-program UIs with this library and want answers that reference actual component docs rather than hallucinated APIs, this'll save you from constantly alt-tabbing to documentation.

skills.sh installs
1.2K
GitHub stars
38
last updated
Aug 21, 2026

Install

$ npx -y skills add wot-ui/open-wot --skill wot-ui-v2 --agent claude-code

Installs into .claude/skills of the current project.

Files

Wot UI V2 Skill

这个 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。

查询顺序

  1. wot list 找组件名。
  2. wot info <Component> 看 props、events、slots、CSS 变量。
  3. wot demo <Component> 看 demo 名称或具体 demo 代码。
  4. wot doc <Component> 看完整 markdown 文档。
  5. wot token <Component> 看主题变量。

工作规则

Sponsors

Details

Repository
github.com/wot-ui/open-wot
Categories
Frontend Development, Backend & APIs
First seen
Jun 3, 2026

More from wot-ui/open-wot

All 4
1sickn33 avatarfrontend-dev-guidelinessickn33/antigravity-awesome-skillsfrontend dev guidelines1.2Kskills.sh installs
2mastepanoski avatarui-design-reviewmastepanoski/claude-skillsComprehensive visual design and aesthetics evaluation. Analyzes typography, color, spacing, hierarchy, consistency, branding, and current product-category conve1.2Kskills.sh installs
3sickn33 avatarcc-skill-frontend-patternssickn33/antigravity-awesome-skillscc skill frontend patterns1.1Kskills.sh installs
4sickn33 avatartailwind-patternssickn33/antigravity-awesome-skillstailwind patterns1.1Kskills.sh installs
5getsentry avatarsentry-react-setupgetsentry/sentry-agent-skillsSetup Sentry in React apps. Use when asked to add Sentry to React, install @sentry/react, or configure error monitoring, error boundaries, session replay, or br1.1Kskills.sh installs
6patternsdev avatarreact-server-componentspatternsdev/skillsTeaches React Server Components for zero-bundle server rendering. Use when components only need server-side data access and don't require client-side interactiv1Kskills.sh installs