Nuxt UI — скилл
Скилл Nuxt UI v4: агент строит интерфейсы на Vue и Nuxt, подбирает компоненты, настраивает тему и верстает формы и дашборды
- 7 057 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Агент пишет и правит код интерфейса и ставит пакеты npm
- Для справки по компонентам агент обращается к удаленному MCP-серверу ui.nuxt.com
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/nuxt-uiОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Агент пишет и правит код интерфейса и ставит пакеты npm
- Для справки по компонентам агент обращается к удаленному MCP-серверу ui.nuxt.com
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Скилл `nuxt-ui` из репозитория Nuxt UI объясняет агенту, как работать с библиотекой из более чем 125 компонентов на Reka UI и Tailwind CSS. Свойства и слоты компонентов агент берет из MCP-сервера, а сам скилл отвечает на вопрос, какой компонент выбрать и как собрать страницу. Пять правил действуют всегда: оборачивать приложение в `UApp`, использовать семантические цвета вроде `text-default` и `bg-elevated`, смотреть имена слотов в сгенерированных файлах темы, помнить порядок приоритета при переопределении и записывать иконки как `i-{коллекция}-{имя}`. Справочные файлы подгружаются по задаче: выбор между Modal и Slideover, формы со Standard Schema, макеты лендинга, дашборда, документации, чата и редактора, а также таблицы данных, формы входа, оверлеи и навигация.
Для кого. Разработчикам на Nuxt, Vue, Laravel или AdonisJS, которые поручают Claude Code, Cursor или Codex верстку интерфейсов на Nuxt UI.
Подходит, если
- Админку с боковой панелью и таблицами нужно собрать по готовому макету дашборда
- Форму регистрации проверяют по схеме Standard Schema, а ошибки выводятся рядом с полями
- Бренд задан цветами, и тема приложения настраивается через семантические цвета и пропс `ui`
- Агент сомневается, использовать Select или SelectMenu, Toast или Alert, и берет таблицу решений
- Чат с ИИ собирается на Vercel AI SDK по готовому макету
Не подходит, если
- Проект использует Nuxt UI третьей версии или старше: скилл написан под версию 4
- Нужны точные свойства и события компонента: их скилл берет из MCP-сервера, а не хранит сам
- Интерфейс строится на React или другом стеке вне Vue: библиотека и скилл рассчитаны на Vue
Пример запроса к агенту
Собери на Nuxt UI страницу входа с проверкой полей и дашборд с боковой панелью и таблицей заказовОграничения
Скилл рассчитан на Nuxt UI v4: основная ветка репозитория называется `v4`. Точные свойства, слоты и события он не хранит и отправляет агента в MCP-сервер `https://ui.nuxt.com/mcp`, который работает по сети. Установка командой `npx skills add nuxt/ui` забирает навыки из репозитория по умолчанию, а при медленной сети документация советует `npx skills add https://ui.nuxt.com`. Вызвать скилл можно командой `/nuxt-ui` в чате агента. Обновляется он вместе с документацией, поэтому после выхода новой версии библиотеки полезно переустановить его.
Как отключить. Удалите папку `nuxt-ui` из каталога скиллов проекта или глобального каталога агента. Библиотека `@nuxt/ui` в зависимостях остается.
Частые вопросы
Как поставить скилл Nuxt UI?
Выполните `npx skills add nuxt/ui`. Флаг `--agent` выбирает агента, например `--agent claude-code`, а `--global` ставит скилл для всех проектов. В Cursor есть кнопка быстрой установки, в Claude Code работает `claude skill add` с адресом папки скилла.
Нужен ли MCP-сервер вместе со скиллом?
Желателен: скилл учит выбирать компоненты, а точные свойства, слоты и события агент берет через `get-component-metadata`. Подключить сервер можно командой `claude mcp add --transport http nuxt-ui https://ui.nuxt.com/mcp`.
Почему скилл запрещает цвета вроде `text-gray-500`?
Тема Nuxt UI построена на семантических цветах: `text-default`, `bg-elevated`, `border-muted`. Сырые цвета палитры ломают темную тему и перенастройку бренда.
С какими фреймворками работает Nuxt UI?
С Nuxt, Vue на Vite, Laravel с Vite и Inertia, а также AdonisJS с Vite и Inertia. Установка для каждого описана в скилле.
Как найти нужную иконку?
Через инструмент `search-icons` MCP-сервера: по умолчанию он ищет в коллекции `lucide` и возвращает имена вида `i-lucide-search`. Обзор коллекций открывает сайт icones.js.org.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
Скиллыshadcn-vue — скилл для агентов
shadcn-vue skill
Скилл shadcn-vue читает настройки вашего проекта и учит агента добавлять компоненты, формы и темы Vue-порта shadcn/ui по правилам библиотеки
Скилл Bitrix24 UI для Vue и Nuxt
Bitrix24 UI
Официальный скилл Битрикс24 для более чем 130 компонентов b24ui-nuxt: когда какой компонент брать, семантические цвета, формы и готовые макеты
Скиллы Material UI
Material UI agent skills
Четыре официальных скилла Material UI: стилизация, темы, интеграция с Next.js и совместная работа с Tailwind CSS
Скилл подсказывает агенту готовые composable-функции VueUse для Vue 3 и Nuxt и дает справку по использованию и типам каждой функции
Скилл подбирает и ставит анимированные React-компоненты beUI через публичный MCP или реестр shadcn вместо самодельных виджетов
Скиллы Preline UI для агентов: сборка интерфейсов из компонентов Tailwind CSS и генерация тем по токенам
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Авторизация | Звезды репозитория | Главное отличие |
|---|---|---|---|---|
| Nuxt UI (эта карточка) | да | 7 057 | ||
| shadcn-vue — скилл для агентов | да | 10 781 | скилл про компоненты shadcn-vue, а не Nuxt UI | |
| Nuxt MCP Dev | нет | не нужна | 914 | MCP-плагин для разработки Nuxt: читает состояние приложения, но не дает знаний о компонентах |
Коротко о README
В README рассказано о возможностях библиотеки, установке и шаблонах проектов. Про агентов говорит документация: раздел «AI» состоит из страниц про MCP-сервер, `llms.txt` и скиллы. Страница про скиллы описывает пять способов установки и состав скилла.
Бейдж для README
Исходный SKILL.md
---
name: nuxt-ui
description: Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces.
---
# Nuxt UI
Vue component library built on [Reka UI](https://reka-ui.com/) + [Tailwind CSS](https://tailwindcss.com/) + [Tailwind Variants](https://www.tailwind-variants.org/). Works with Nuxt, Vue (Vite), Laravel (Vite + Inertia), and AdonisJS (Vite + Inertia).
## MCP Server
For component API details (props, slots, events, full documentation, examples), use the [Nuxt UI MCP server](https://ui.nuxt.com/docs/getting-started/ai/mcp). If not already configured, add it:
**Cursor** — `.cursor/mcp.json`:
```json
{ "mcpServers": { "nuxt-ui": { "type": "http", "url": "https://ui.nuxt.com/mcp" } } }
```
**Claude Code**:
```bash
claude mcp add --transport http nuxt-ui https://ui.nuxt.com/mcp
```
Key MCP tools:
- `search-components` — find components by name, category, or intent (no params = list all)
- `search-composables` — find composables by name or description (no params = list all)
- `search-icons` — search Iconify icons (defaults to `lucide`), returns `i-{prefix}-{name}` names
- `get-component` — full component documentation with usage examples
- `get-component-metadata` — props, slots, events (lightweight, no docs content)
- `get-example` — real-world code examples
When you need to know **what a component accepts** or **how its API works**, use the MCP. This skill teaches you **when to use which component** and **how to build well**.
## Core rules (always apply)
1. **Always wrap the app in `UApp`** — required for toasts, tooltips, and programmatic overlays. Accepts a `locale` prop for i18n.
2. **Always use semantic colors** — `text-default`, `bg-elevated`, `border-muted`, etc. Never use raw Tailwind palette colors like `text-gray-500`.
3. **Read generated theme files for slot names** — Nuxt: `.nuxt/ui/<component>.ts`, Vue: `node_modules/.nuxt-ui/ui/<component>.ts`. These show every slot, variant, and default class for any component.
4. **Override priority** (highest wins): `ui` prop / `class` prop → global config → theme defaults.
5. **Icons use `i-{collection}-{name}` format** — `lucide` is the default collection. Use the MCP `search-icons` tool to find icons, or browse at [icones.js.org](https://icones.js.org).
## How to use this skill