MCPInstall

wot-ui-unocss-preset-guide

by wot-uiFrontend & Design

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

Installs
848
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-unocss-preset-guide
  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-unocss-preset-guide 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 UnoCSS Preset 使用指南

适用场景

当用户询问以下内容时，优先使用本 Skill：

  • 如何安装 @wot-ui/unocss-preset
  • 如何在 unocss.config.ts 配置 presetWot
  • prefix、preflight、baseTokens 怎么用
  • 为什么类名不生效、自动补全不出现、CI 与本地结果不一致

目标是给出可直接复制的最佳实践，帮助用户快速完成接入并稳定运行。

最小安装步骤

pnpm add -D unocss
pnpm add @wot-ui/unocss-preset

推荐配置（完整示例）

import { presetWot } from '@wot-ui/unocss-preset'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWot({
      prefix: 'wot',
      preflight: true,
      baseTokens: false,
    }),
  ],
})

配置项说明

  • prefix：工具类前缀，默认 wot。示例：wot-text-primary、wot-m-main。
  • preflight：是否注入 wot-ui CSS 变量，默认 true。
  • baseTokens：是否开放基础色板和原始 token 类名，默认 false。

常用类名示例

  • 颜色：wot-text-primary、wot-bg-danger-surface、wot-border-border-main
  • 间距：wot-m-main、wot-gap-tight、wot-gap-x-loose
  • 内边距：wot-p-main、wot-px-tight、wot-pb-loose
  • 圆角：wot-rounded-md、wot-rounded-full
  • 字重：wot-font-medium、wot-font-semibold
  • 排版：wot-text-body-main、wot-text-title-large
  • 透明度：wot-opacity-disabled
  • 描边：wot-border-stroke-main

上手示例（可复制）

1) 一个“卡片”示例（uni-app / Vue）

<template>
  <view class="wot-bg-filled-oppo wot-rounded-2xl wot-p-super-loose wot-border-border-main wot-border-stroke-main">
    <text class="wot-text-title-large wot-text-text-main wot-font-semibold">
      Wot UnoCSS Preset
    </text>

    <view class="wot-mt-tight">
      <text class="wot-text-body-main wot-text-text-secondary">
        wot-text-body-main + wot-text-text-secondary
      </text>
    </view>

    <view class="wot-mt-loose wot-bg-primary wot-rounded-full wot-px-main wot-py-extra-tight">
      <text class="wot-text-label-large wot-text-text-white wot-font-semibold">
        wot-bg-primary
      </text>
    </view>
  </view>
</template>

2) 间距/布局示例（常见组合）

  • 外边距：wot-mt-tight、wot-mt-main、wot-mt-super-loose
  • 内边距：wot-p-loose、wot-px-main、wot-py-extra-tight
  • 横向/纵向组合：wot-mx-main、wot-my-loose
  • gap：wot-gap-tight、wot-gap-x-main、wot-gap-y-loose

3) 语义色示例（背景/文字/边框）

  • 背景：wot-bg-primary、wot-bg-success-surface、wot-bg-warning-surface、wot-bg-danger-surface
  • 文字：wot-text-text-main、wot-text-text-secondary、wot-text-primary、wot-text-success-main
  • 边框：wot-border-border-main、wot-border-success-main、wot-border-warning-main、wot-border-danger-main

4) 暗黑模式示例

预设会输出暗色变量选择器 .wot-theme-dark ...，你只需要在根节点加 class：

<template>
  <view :class="dark ? 'wot-theme-dark' : ''">
    <view class="wot-bg-filled-oppo wot-p-main wot-rounded-lg">
      <text class="wot-text-text-main">当前主题：{{ dark ? 'Dark' : 'Light' }}</text>
    </view>
  </view>
</template>

5) 打开 baseTokens（可选）

当你希望使用基础色板/原始 token 时启用：

presetWot({
  baseTokens: true,
})

启用后会额外提供类似 wot-base-black 这类 token（用于 theme.colors 与颜色规则匹配）。

轻量提醒

  • 历史项目若仍使用 w- 前缀，可通过 prefix: 'w' 兼容。
  • 若 playground/子包构建异常，优先检查是否：
    • 使用包名导入（如 @wot-ui/unocss-preset）
    • 在依赖主包产物的场景下先执行主包构建
  • 若需要同步上游 wot-ui 变量，可使用：
    • pnpm generate:css-vars:clone

常见问题排查

  1. 类名不生效
  • 确认项目已启用 UnoCSS 且 presetWot() 已加入 presets。
  • 确认类名前缀与配置一致（默认 wot-）。
  1. VS Code 没有自动补全
  • 确认安装 UnoCSS 官方扩展。
  • 确认编辑器能定位到项目 unocss.config.ts。
  • 确认类名写在扩展可扫描的文件类型内。
  1. CI 能复现但本地不复现（或反过来）
  • 对齐 Node/pnpm 版本与锁文件。
  • 对齐执行顺序（例如先构建主包，再构建依赖主包产物的 playground）。

响应风格要求

  • 输出简洁、可执行，优先给“可复制配置 + 最短排查路径”。
  • 当用户目标明确时，先给结论和配置，再补充原因说明。
  • 不擅自引入本项目未使用的额外工具链或复杂抽象。

FAQ

What does the wot-ui-unocss-preset-guide skill do?

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

How do I install wot-ui-unocss-preset-guide?

Run npx skills add https://github.com/wot-ui/open-wot --skill wot-ui-unocss-preset-guide 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-unocss-preset-guide/ (personal) or .claude/skills/wot-ui-unocss-preset-guide/ (project).

Which AI agents can use wot-ui-unocss-preset-guide?

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-unocss-preset-guide 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-unocss-preset-guide?

It is published by wot-ui in wot-ui/open-wot. It has 848 recorded installs.

More from wot-ui/open-wot

View all →

wot-ui-v2

wot-ui/open-wot

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

Frontend & Design1.2K installs

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

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