MCPInstall

wot-ui-v2

by wot-uiFrontend & Design

回答、生成、重构、排查 wot-ui v2 相关代码时使用。关键词：wot-ui、uni-app、Vue3、wd-、ConfigProvider、useToast、useDialog、Form、Popup、theme、llms-full。适用于组件选型、API 查询、示例页面生成、主题定制、常见坑排查。

Installs
1.2K
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/wot-ui/open-wot --skill wot-ui-v2
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads wot-ui-v2 automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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> 看主题变量。

工作规则

  • 默认把 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 概览

FAQ

What does the wot-ui-v2 skill do?

回答、生成、重构、排查 wot-ui v2 相关代码时使用。关键词：wot-ui、uni-app、Vue3、wd-、ConfigProvider、useToast、useDialog、Form、Popup、theme、llms-full。适用于组件选型、API 查询、示例页面生成、主题定制、常见坑排查。

How do I install wot-ui-v2?

Run npx skills add https://github.com/wot-ui/open-wot --skill wot-ui-v2 in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/wot-ui-v2/ (personal) or .claude/skills/wot-ui-v2/ (project).

Which AI agents can use wot-ui-v2?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is wot-ui-v2 safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains wot-ui-v2?

It is published by wot-ui in wot-ui/open-wot. It has 1,218 recorded installs.

More from wot-ui/open-wot

View all →

create-wot-ui-theme

wot-ui/open-wot

为 wot-ui 生成单文件主题 SCSS，并在用户明确要求接入时追加 App.vue 的 @use。当用户要做品牌主题、语义变量落地、单文件主题接入时使用。

Frontend & Design854 installs

wot-ui-cli

wot-ui/open-wot

使用、调试或维护 @wot-ui/cli 与 open-wot 仓库。适用于 wot CLI 命令、Agent/MCP 接入、doctor/usage/lint、组件知识查询、客户端 adapter、离线数据提取、构建测试、发布包检查和仓库开发；如果任务是直接编写 wd- 组件页面或解释组件 API，应改用 wot-ui-v2 skill。

Frontend & Design853 installs

wot-ui-unocss-preset-guide

wot-ui/open-wot

指导安装、配置并使用 @wot-ui/unocss-preset。Invoke when 用户询问该预设的接入、配置、使用示例或常见问题排查。

Frontend & Design848 installs

migrate-v1-to-v2

wot-ui/open-wot

将用户项目从 Wot UI v1 迁移到 v2。用户要求升级 wot-design-uni 到 @wot-ui/ui、替换旧组件/旧 API、迁移表单校验体系、迁移图标名称，或修复因 v2 不兼容变更导致的编译错误、空图标和运行时报错时调用。

Frontend & Design489 installs

starter-cleaner

wot-ui/open-wot

Open the skill to read its SKILL.md instructions.

Frontend & Design275 installs

openspec-propose

wot-ui/open-wot

Open the skill to read its SKILL.md instructions.

Frontend & Design140 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs