nuxt-ui_skill

Overview

This skill provides expert knowledge for Nuxt UI v4 components and common patterns. It guides component choices, props, slots, and composition for buttons, cards, modals, forms, navigation, and loading states. Use it to build consistent, accessible UI with Nuxt UI primitives and Heroicons.

How this skill works

I inspect your UI intent and suggest Nuxt UI components, variants, and props to implement it. I recommend slot usage, responsive layout patterns, loading skeletons, and theme-aware color props. I also provide concise code patterns for common scenarios like cards with progress, modals, dropdowns, and empty states.

When to use it

• Creating or refactoring Vue components with visual UI elements
• Implementing buttons, badges, progress bars, cards, or skeletons
• Building forms, checkboxes, radio groups, and modal dialogs
• Adding tooltips, dropdown menus, navigation or breadcrumb trails
• Designing responsive layouts and loading states for async data

Best practices

• Prefer Nuxt UI components over raw HTML for consistent visuals and behavior
• Use the color prop (primary, success, warning, error, etc.) instead of custom Tailwind colors
• Provide loading states using USkeleton for async content and card placeholders
• Leverage slots (header, footer, default, indicator) for flexible component composition
• Use Heroicons via the i-heroicons-* prefix and keep icon usage consistent

Example use cases

• Action button with icon and loading: UButton with icon, trailing/leading and :loading binding
• Course card with progress: UCard + UBadge + UProgress + UButton block to continue
• Form controls: UCheckbox, URadioGroup and grouped validation-ready inputs
• Modal confirmation flow: UModal v-model:open with header/footer slots and action buttons
• Context menu: UDropdownMenu with grouped items and icon definitions
• Loading layout: UCard v-if loading showing USkeleton lines and blocks