nuxt-ui by onmax/nuxt-skills
npx skills add https://github.com/onmax/nuxt-skills --skill nuxt-ui基于 Reka UI（无头组件） + Tailwind CSS v4 + Tailwind Variants 构建的 Vue 3 和 Nuxt 4+ 组件库。
当前稳定版本： v4.4.0（2026年1月）
对于 Vue 组件模式： 使用 vue 技能 对于 Nuxt 路由/服务器： 使用 nuxt 技能
| 文件 | 主题 |
|---|---|
| references/installation.md | Nuxt/Vue 设置、pnpm 注意事项、UApp 包装器、模块选项、前缀、tree-shaking |
| references/theming.md |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
| 语义化颜色、CSS 变量、app.config.ts、Tailwind Variants |
| references/components.md | 按类别分类的组件索引（125+ 组件） |
| components/*.md | 每个组件的详细信息（button.md、modal.md 等） |
| references/forms.md | 表单组件、验证（Zod/Valibot）、useFormField |
| references/overlays.md | Toast、Modal、Slideover、Drawer、CommandPalette |
| references/composables.md | useToast、useOverlay、defineShortcuts、useScrollspy |
根据你的任务考虑加载以下参考文件：
请勿一次性加载所有文件。 仅加载与当前任务相关的内容。
| 概念 | 描述 |
|---|---|
| UApp | Toast、Tooltip、叠加层组件必需的包装器组件 |
| Tailwind Variants | 具有类型安全性的样式，支持插槽、变体、compoundVariants |
| 语义化颜色 | primary、secondary、success、error、warning、info、neutral |
| Reka UI | 无头组件基元（内置可访问性） |
关于无头组件基元（API 详情、可访问性模式、asChild）：请阅读 reka-ui 技能
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css']
})
/* assets/css/main.css */
@import 'tailwindcss';
@import '@nuxt/ui';
<!-- app.vue - UApp wrapper required -->
<template>
<UApp>
<NuxtPage />
</UApp>
</template>
令牌效率：主技能约 300 令牌，每个子文件约 800-1200 令牌
每周安装量
3.0K
代码仓库
GitHub 星标数
606
首次出现
2026年1月19日
安全审计
安装于
claude-code2.3K
opencode1.2K
gemini-cli1.1K
codex1.1K
github-copilot1.1K
cursor942
Component library for Vue 3 and Nuxt 4+ built on Reka UI (headless) + Tailwind CSS v4 + Tailwind Variants.
Current stable version: v4.4.0 (January 2026)
For Vue component patterns: use vue skill For Nuxt routing/server: use nuxt skill
| File | Topics |
|---|---|
| references/installation.md | Nuxt/Vue setup, pnpm gotchas, UApp wrapper, module options, prefix, tree-shaking |
| references/theming.md | Semantic colors, CSS variables, app.config.ts, Tailwind Variants |
| references/components.md | Component index by category (125+ components) |
| components/*.md | Per-component details (button.md, modal.md, etc.) |
| references/forms.md | Form components, validation (Zod/Valibot), useFormField |
| references/overlays.md | Toast, Modal, Slideover, Drawer, CommandPalette |
| references/composables.md | useToast, useOverlay, defineShortcuts, useScrollspy |
Consider loading these reference files based on your task:
DO NOT load all files at once. Load only what's relevant to your current task.
| Concept | Description |
|---|---|
| UApp | Required wrapper component for Toast, Tooltip, overlays |
| Tailwind Variants | Type-safe styling with slots, variants, compoundVariants |
| Semantic Colors | primary, secondary, success, error, warning, info, neutral |
| Reka UI | Headless component primitives (accessibility built-in) |
For headless component primitives (API details, accessibility patterns, asChild): read the reka-ui skill
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css']
})
/* assets/css/main.css */
@import 'tailwindcss';
@import '@nuxt/ui';
<!-- app.vue - UApp wrapper required -->
<template>
<UApp>
<NuxtPage />
</UApp>
</template>
Token efficiency: Main skill ~300 tokens, each sub-file ~800-1200 tokens
Weekly Installs
3.0K
Repository
GitHub Stars
606
First Seen
Jan 19, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
claude-code2.3K
opencode1.2K
gemini-cli1.1K
codex1.1K
github-copilot1.1K
cursor942
99,500 周安装