Agent Skills: Nuxt UI Component Finder

Nuxt UI Component Finder

Discover and learn about Nuxt UI components, their usage, props, and customization options.

When to Use

DO USE when:

• User asks "What UI components are available?"
• Need component examples or API reference
• Questions about component props, slots, or events
• Comparing different components for a use case
• Need theming or customization examples

DO NOT USE when:

• General Nuxt questions (use nuxt-documentation-lookup)
• Installation/setup questions (covered in instructions)
• Already know which component to use (instructions have examples)

Available Tools

Component Information

• mcp_nuxt-ui_list-components - List all available components by category
• mcp_nuxt-ui_get-component - Get detailed component documentation
• mcp_nuxt-ui_get-component-metadata - Get component props, slots, events

Examples

• mcp_nuxt-ui_list-examples - Browse component examples
• mcp_nuxt-ui_get-example - Get specific example implementation

Documentation

• mcp_nuxt-ui_list-documentation-pages - List all docs pages
• mcp_nuxt-ui_get-documentation-page - Get specific docs content

Process

For Component Discovery:

1. Use mcp_nuxt-ui_list-components to see all components
2. Components are organized by category:
   • Form (Button, Input, Select, Checkbox, etc.)
   • Layout (Card, Container, Divider, etc.)
   • Navigation (Tabs, Accordion, Breadcrumb, etc.)
   • Overlay (Modal, Popover, Dropdown, Tooltip, etc.)
   • Data (Table, Avatar, Badge, etc.)
   • Feedback (Alert, Progress, Skeleton, etc.)

For Component Details:

1. Use mcp_nuxt-ui_get-component with component name (e.g., "Button")
2. Returns full documentation with usage examples

For Props/API Reference:

1. Use mcp_nuxt-ui_get-component-metadata with component name
2. Returns TypeScript props, slots, events definitions

For Examples:

1. Use mcp_nuxt-ui_list-examples to browse examples
2. Use mcp_nuxt-ui_get-example to get specific implementation

Common Scenarios

"What form components are available?"

1. mcp_nuxt-ui_list-components
2. Filter by category: "Form"
3. Show: Button, Input, Textarea, Select, Checkbox, Radio, Toggle, Form, etc.

"How do I use the Modal component?"

1. mcp_nuxt-ui_get-component with "Modal"
2. Show usage example with v-model
3. Explain programmatic usage with useModal()

"What props does Button accept?"

1. mcp_nuxt-ui_get-component-metadata with "Button"
2. List all props: color, size, variant, icon, loading, disabled, etc.
3. Show TypeScript types

"Show me table examples"

1. mcp_nuxt-ui_list-examples
2. Find Table examples
3. mcp_nuxt-ui_get-example with example name

Component Categories

Form Components:

• Button, ButtonGroup
• Input, Textarea
• Select, SelectMenu
• Checkbox, Radio, Toggle
• Form, FormField

Layout:

• App (required wrapper)
• Card
• Container
• Divider

Navigation:

• Tabs, TabGroup
• Accordion
• Breadcrumb
• Pagination

Overlays:

• Modal
• Popover
• Dropdown
• Tooltip
• ContextMenu

Data Display:

• Table
• Avatar
• Badge, Chip
• Kbd
• Meter

Feedback:

• Alert
• Progress
• Skeleton
• Spinner
• Toast (programmatic)

Example Usage

User: "I need a data table with sorting"

1. Get Table component: mcp_nuxt-ui_get-component("Table")
2. Show sortable example
3. Explain sort prop and @sort event
4. Provide implementation code

User: "How do I customize Button colors?"

1. Get Button metadata: mcp_nuxt-ui_get-component-metadata("Button")
2. Explain color prop (primary, secondary, success, etc.)
3. Show ui prop for advanced customization
4. Provide theming examples

User: "Show me all navigation components"

1. List components: mcp_nuxt-ui_list-components
2. Filter category: "Navigation"
3. Summarize: Tabs, Accordion, Breadcrumb, Pagination
4. Offer to get details on any specific component

Tips

• Component names are PascalCase: "Button", "Modal", "FormField"
• All components have color and size props
• Use ui prop for granular customization
• Check metadata for slots and events
• Examples are practical implementation references