ui
为Nuxt.js应用提供现代化、可访问的UI组件库。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：ui。 它的用途是：为Nuxt.js应用提供现代化、可访问的UI组件库。 完整的 Skill 内容见：https://321skill.com/skills/ui-nuxt/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我正在用Nuxt 3开发一个AI工具导航网站，需要一个美观的导航卡片组件和暗色主题切换功能。”，它会建议你使用Nuxt UI的`Card`组件来快速构建卡片布局，并利用其内置的`ColorMode`组件轻松实现主题切换，同时提供相应的配置代码示例。或者，你可以直接要求AI：“基于Nuxt UI的Landing模板，帮我生成一个产品介绍页的代码结构。”
介绍
Nuxt UI是一个专为Nuxt.js框架设计的综合UI组件库，旨在解决开发者在构建现代Web应用时面临的UI设计一致性、开发效率和性能优化等问题。它通过提供一套开箱即用、风格统一的组件，帮助开发者快速搭建美观且功能完善的用户界面。
该库通过简单的模块安装即可集成到Nuxt.js项目中。开发者只需在nuxt.config.ts中配置模块，并在CSS中导入相应的样式，即可在Vue组件中直接使用诸如按钮、表单、导航栏、模态框等丰富的UI组件。对于纯Vue项目，也提供了Vite插件和Vue插件的方式进行集成。
它非常适合使用Nuxt.js进行全栈或前端开发的工程师，尤其是那些希望快速启动项目、避免重复造轮子、并注重应用可访问性和视觉一致性的团队。对于独立开发者或小型团队，其丰富的预设模板能极大缩短从想法到原型的时间。
建议在使用前仔细阅读官方文档，了解组件API和最佳实践。由于库本身基于Tailwind CSS，建议开发者具备一定的Tailwind CSS知识以便进行深度定制。注意当前主分支为v4版本，若项目基于旧版Nuxt，需切换到对应的v2或v3分支。
核心特点
深度集成Nuxt.js生态，提供一流的开发体验和服务器端渲染（SSR）支持；基于Reka UI、Tailwind CSS和Tailwind Variants构建，在提供丰富、现代化组件的同时，保持了极高的样式定制灵活性和运行时性能。
注意事项
主要绑定于Nuxt.js/Vue技术栈，不适用于React、Svelte等其他前端框架的项目。
常见问题
Nuxt UI和Element Plus、Ant Design Vue有什么区别？
Nuxt UI深度集成Nuxt.js，为Nuxt应用提供开箱即用的SSR支持和最佳实践，且设计风格和组件API更贴近现代Web应用趋势。
可以在普通的Vue项目中使用吗？
可以，官方提供了Vite插件和Vue插件，支持在非Nuxt的Vue 3项目中使用。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/ui-nuxt/raw/index.md 读取 ui 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/ui-nuxt/raw/index.md（查看排版版本）