Nuxt Ui
Look up Nuxt UI component props, slots, and usage patterns while building Vue/Nuxt interfaces with Reka UI-based primitives.
Overview
nuxt-ui is an agent skill for the Build phase that supplies Nuxt UI component props, slots, and usage references for solo builders implementing Vue/Nuxt frontends.
Install
npx skills add https://github.com/onmax/nuxt-skills --skill nuxt-uiWhat is this skill?
- Reference-style coverage for Nuxt UI primitives such as Accordion and Alert with typed prop tables
- Documents items arrays, icons, colors, variants, and ui class overrides per component
- Notes Reka UI lineage for accessible headless behavior (e.g. Accordion on reka-ui.com)
- Includes slot guidance (#body, #content) and copy-paste UAccordion / UAlert usage blocks
- Integrates with @nuxt/icon for automatic icon handling in documented patterns
Adoption & trust: 5.8k installs on skills.sh; 674 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your agent guesses Nuxt UI prop names and slot names, producing broken Accordion items, wrong variants, or missing icon integration.
Who is it for?
Indie SaaS and content sites on Nuxt 3 where the agent should wire UAccordion, UAlert, and related UI primitives correctly on the first pass.
Skip if: Greenfield projects not using Nuxt UI, or teams needing brand-new design tokens and UX research instead of component API lookup.
When should I use this skill?
Implementing or debugging Nuxt UI components (Accordion, Alert, and related UI primitives) in a Nuxt frontend.
What do I get? / Deliverables
You get accurate, copy-ready component patterns aligned with Nuxt UI and Reka UI APIs while implementing pages and layouts.
- Component usage snippets
- Correct prop and slot wiring for Nuxt UI
Recommended Skills
Journey fit
How it compares
Component reference skill for Nuxt UI—not a generic Tailwind cheat sheet or a Figma-to-code pipeline.
Common Questions / FAQ
Who is nuxt-ui for?
Solo and small-team Nuxt developers who want their coding agent to follow official Nuxt UI component contracts during UI implementation.
When should I use nuxt-ui?
Use in the Build frontend subphase whenever you add dashboards, forms, marketing sections, or refactor Vue templates to Nuxt UI components.
Is nuxt-ui safe to install?
It is documentation-oriented; still review the Security Audits panel on this Prism page before adding any third-party skill to your agent environment.
SKILL.md
READMESKILL.md - Nuxt Ui
# Accordion A stacked set of collapsible panels. > Based on [Reka UI Accordion](https://reka-ui.com/docs/components/accordion) ## Key Props - `items`: as an array of objects with the following properties: - `label?: string`{lang="ts-type"} - `icon?: string`{lang="ts-type"} - `trailingIcon?: string`{lang="ts-type"} - `content?: string`{lang="ts-type"} - `value?: string`{lang="ts-type"} - `disabled?: boolean`{lang="ts-type"} - [`slot?: string`{lang="ts-type"}](#with-custom-slot) - `class?: any`{lang="ts-type"} - `ui?: { item?: ClassNameValue, header?: ClassNameValue, trigger?: ClassNameValue, leadingIcon?: ClassNameValue, label?: ClassNameValue, trailingIcon?: ClassNameValue, content?: ClassNameValue, body?: ClassNameValue }`{lang="ts-type"} ## ::component-code ignore: - items external: - items externalTypes: - AccordionItem[] hide: - class props: class: 'px-4' items: - label: 'Icons' icon: 'i-lucide-smile' content: 'You have nothing to do, @nuxt/icon will handle it automatically. - `disabled`: - `slot`: ## Usage ```vue <UAccordion <!-- props here --> /> ``` ## Slots - `#body` - `#content` # Alert A callout to draw user's attention. ## Key Props - `title`: to set the title of the Alert. - `description`: to set the description of the Alert. - `icon`: to show an [Icon](/docs/components/icon). - `avatar`: to show an [Avatar](/docs/components/avatar). - `color`: to change the color of the Alert. - `variant`: to change the variant of the Alert. - `close`: to display a [Button](/docs/components/button) to dismiss the Alert. - `actions`: to add some [Button](/docs/components/button) actions to the Alert. - `orientation`: to change the orientation of the Alert. - `class`: to override the base styles of the Alert. ## Usage ```vue <UAlert <!-- props here --> /> ``` # App Wraps your app to provide global configurations and more. ## Usage ```vue <UApp <!-- props here --> /> ``` # AuthForm A customizable Form to create login, register or password reset forms. ## Key Props - `fields`: as an array of objects with the following properties: - `name: string`{lang="ts-type"} - `type: 'checkbox' | 'select' | 'otp' | 'InputHTMLAttributes['type']'`{lang="ts-type"} Each field must include a `type` property, which determines the input component and any additional props applied: `checkbox` fields use [Checkbox](/docs/components/checkbox#props) props, `select` fields use [SelectMenu](/docs/components/select-menu#props) props, `otp` fields use [PinInput](/docs/components/pin-input#props) props, and all other types use [Input](/docs/components/input#props) props. - `title`: to set the title of the Form. - `description`: to set the description of the Form. - `icon`: to set the icon of the Form. - `providers`: to add providers to the form. - `separator`: to customize the [Separator](/docs/components/separator) between the providers and the fields. - `submit`: to change the submit button of the Form. ## Usage ```vue <UAuthForm <!-- props here --> /> ``` # AvatarGroup Stack multiple avatars in a group. ## Key Props - `size`: to change the size of all the avatars. - `max`: to limit the number of avatars displayed. ## Usage ```vue <UAvatarGroup <!-- props here --> /> ``` # Avatar An img element with fallback and Nuxt Image support. ## Key Props - `src`: to set the image URL. - `size`: to set the size of the Avatar. - `icon`: to display a fallback [Icon](/docs/components/icon). - `text`: to display a fallback text. - `chip`: to display a chip around the Avatar. ## Usage ```vue <UAvatar <!-- props here --> /> ``` # Badge A short text to represent a status or a category. ## Key Props - `label`: to set the label of the Badge. - `color`: to change the color of the Badge. - `variant`: - `size`: to change the size of the Badge. - `icon`: to show an [Icon](/docs/components/icon) inside the Badge. - `avatar`: to show an [Avatar](/docs/components/avatar) inside the Badge. - `class`: to overri