view --main nuxt-ui-skill-dlya-stilizovannyh-ui-komponentov.md
nuxt-ui: Скилл для стилизованных UI компонентов
SKILL.md
components
accordion.md
1.1 KB
alert.md
686 B
app.md
118 B
auth-form.md
1.1 KB
avatar-group.md
226 B
avatar.md
354 B
badge.md
469 B
banner.md
468 B
blog-post.md
1 KB
blog-posts.md
323 B
breadcrumb.md
779 B
button.md
675 B
calendar.md
628 B
card.md
183 B
carousel.md
867 B
changelog-version.md
1 KB
changelog-versions.md
345 B
chat-message.md
597 B
chat-messages.md
502 B
chat-palette.md
140 B
chat-prompt-submit.md
155 B
chat-prompt.md
204 B
checkbox-group.md
1.6 KB
checkbox.md
637 B
chip.md
420 B
collapsible.md
299 B
color-mode-avatar.md
143 B
color-mode-button.md
132 B
color-mode-image.md
148 B
color-mode-select.md
138 B
color-mode-switch.md
132 B
color-picker.md
321 B
command-palette.md
1.4 KB
container.md
141 B
content-navigation.md
464 B
content-search-button.md
271 B
content-search.md
291 B
content-surround.md
251 B
content-toc.md
362 B
context-menu.md
1.8 KB
dashboard-group.md
201 B
dashboard-navbar.md
374 B
dashboard-panel.md
186 B
dashboard-resize-handle.md
135 B
dashboard-search-button.md
277 B
dashboard-search.md
291 B
dashboard-sidebar-collapse.md
147 B
dashboard-sidebar-toggle.md
140 B
dashboard-sidebar.md
525 B
dashboard-toolbar.md
140 B
drawer.md
732 B
dropdown-menu.md
1.9 KB
editor-drag-handle.md
316 B
editor-emoji-menu.md
847 B
editor-mention-menu.md
812 B
editor-suggestion-menu.md
1.1 KB
editor-toolbar.md
1.6 KB
editor.md
316 B
empty.md
513 B
error.md
331 B
field-group.md
243 B
file-upload.md
672 B
footer-columns.md
376 B
footer.md
97 B
form-field.md
546 B
form.md
276 B
header.md
312 B
icon.md
443 B
input-date.md
434 B
input-menu.md
2.1 KB
input-number.md
522 B
input-tags.md
676 B
input-time.md
539 B
input.md
614 B
kbd.md
340 B
link.md
108 B
locale-select.md
191 B
main.md
119 B
marquee.md
402 B
modal.md
944 B
navigation-menu.md
2.1 KB
page-anchors.md
621 B
page-aside.md
120 B
page-body.md
101 B
page-card.md
473 B
page-columns.md
153 B
page-cta.md
487 B
page-feature.md
350 B
page-grid.md
140 B
page-header.md
359 B
page-hero.md
476 B
page-links.md
633 B
page-list.md
209 B
page-logos.md
239 B
page-section.md
975 B
page.md
120 B
pagination.md
527 B
pin-input.md
621 B
popover.md
629 B
pricing-plan.md
1.1 KB
pricing-plans.md
567 B
pricing-table.md
311 B
progress.md
633 B
radio-group.md
1.5 KB
scroll-area.md
678 B
select-menu.md
2 KB
select.md
2.4 KB
separator.md
604 B
skeleton.md
118 B
slideover.md
919 B
slider.md
598 B
stepper.md
1.5 KB
switch.md
473 B
table.md
688 B
tabs.md
1.3 KB
textarea.md
711 B
timeline.md
1.3 KB
toast.md
202 B
tooltip.md
528 B
tree.md
1.5 KB
user.md
472 B
references
components.md
21.5 KB
composables.md
6.2 KB
forms.md
8.6 KB
installation.md
4.7 KB
overlays.md
7.1 KB
theming.md
6.9 KB
scripts
generate-components.ts
8.7 KB
readonly
--- lines
---
name: nuxt-ui
description: Use when building styled UI with @nuxt/ui v4 components - create forms with validation, implement data tables with sorting, build modal dialogs and overlays, configure Tailwind Variants theming. Use vue skill for raw component patterns, reka-ui for headless primitives.
license: MIT
---
# Nuxt UI v4
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)
## When to Use
- Installing/configuring @nuxt/ui
- Using UI components (Button, Card, Table, Form, etc.)
- Customizing theme (colors, variants, CSS variables)
- Building forms with validation
- Using overlays (Modal, Toast, CommandPalette)
- Working with composables (useToast, useOverlay)
**For Vue component patterns:** use `vue` skill
**For Nuxt routing/server:** use `nuxt` skill
## Available Guidance
| File | Topics |
| ------------------------------------------------------------ | -------------------------------------------------------------------------------- |
| **[references/installation.md](references/installation.md)** | Nuxt/Vue setup, pnpm gotchas, UApp wrapper, module options, prefix, tree-shaking |
| **[references/theming.md](references/theming.md)** | Semantic colors, CSS variables, app.config.ts, Tailwind Variants |
| **[references/components.md](references/components.md)** | Component index by category (125+ components) |
| **components/*.md** | Per-component details (button.md, modal.md, etc.) |
| **[references/forms.md](references/forms.md)** | Form components, validation (Zod/Valibot), useFormField |
| **[references/overlays.md](references/overlays.md)** | Toast, Modal, Slideover, Drawer, CommandPalette |
| **[references/composables.md](references/composables.md)** | useToast, useOverlay, defineShortcuts, useScrollspy |
## Loading Files
**Consider loading these reference files based on your task:**
- [ ] [references/installation.md](references/installation.md) - if installing or configuring @nuxt/ui
- [ ] [references/theming.md](references/theming.md) - if customizing theme, colors, or Tailwind Variants
- [ ] [references/components.md](references/components.md) - if browsing component index or finding components by category
- [ ] [references/forms.md](references/forms.md) - if building forms with validation (Zod/Valibot)
- [ ] [references/overlays.md](references/overlays.md) - if using Toast, Modal, Slideover, Drawer, or CommandPalette
- [ ] [references/composables.md](references/composables.md) - if using useToast, useOverlay, or other composables
**DO NOT load all files at once.** Load only what's relevant to your current task.
## Key Concepts
| 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
## Quick Reference
```ts
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css']
})
```
```css
/* assets/css/main.css */
@import 'tailwindcss';
@import '@nuxt/ui';
```
```vue
<!-- app.vue - UApp wrapper required -->
<template>
<UApp>
<NuxtPage />
</UApp>
</template>
```
## Resources
- [Nuxt UI Docs](https://ui.nuxt.com)
- [Component Reference](https://ui.nuxt.com/components)
- [Theme Customization](https://ui.nuxt.com/getting-started/theme)
---
_Token efficiency: Main skill ~300 tokens, each sub-file ~800-1200 tokens_
Инициализация мануала...
//
$ ls -R related_skills/
2026-04-01
⭐ 158
motion-polish: Скилл для анимации и полировки интерфейса
2026-04-01
⭐ 2033
gsap-react: Скилл анимации для React и Next.js
2026-04-01
⭐ 201
code-architecture-tailwind-v4-best-practices: Скилл для Tailwind компонентов
2026-03-29
⭐ 16082
compound-engineering-frontend-design — Создание уникальных и гибких фронтенд-интерфейсов
package.json
$ install --global
skills.sh
npx skills add https://github.com/onmax/nuxt-skills/tree/main/skills/nuxt-ui
$ download --local
man
[HINT] Скачивает всю директорию скилла с GitHub: SKILL.md и все связанные файлы