nuxt-ui
The nuxt-ui skill provides guidance and patterns for building user interfaces using @nuxt/ui v4. It includes instructions for component usage, theme customization, layout composition, and integration with Nuxt, Vue, Laravel, and AdonisJS.
Is nuxt-ui safe to install?
Review the source first: our audit of nuxt-ui's source files found 2 shell commands, 1 external URL, file reads and writes (high risk). Every command and URL listed appears verbatim in the skill's source. The skill instructs the agent to execute shell commands for package installation and MCP server configuration, and to read local project files including configuration and theme files.
How we audit skills: our security review methodology.
Who is this skill for?
Developers building web interfaces with Nuxt, Vue, or Vite-based frameworks who want to use the @nuxt/ui component library.
What can you do with it?
- Creating landing pages, dashboards, and documentation sites
- Building forms with validation and error handling
- Implementing overlays like modals, slideovers, and drawers
- Customizing brand themes using semantic colors
- Developing chat interfaces and rich text editors
How good is this skill?
Quality score: 5/10. The skill provides clear, actionable instructions and a structured approach to using the library, including specific file paths and configuration examples.
What does the skill file contain?
# 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" } } }...Frequently asked questions
How do I find documentation for a specific component?
Use the Nuxt UI MCP server tool 'get_component' or 'get_component_metadata' to retrieve props, slots, and usage examples.
What is the required root wrapper for Nuxt UI?
Every application must wrap its content in the 'UApp' component to support toasts, tooltips, and programmatic overlays.
How should I handle colors in my components?
Use semantic colors like 'text-default', 'bg-elevated', or 'border-muted' instead of raw Tailwind palette colors.
Where can I find slot names and default classes for components?
Read the generated theme files located at '.nuxt/ui/<component>.ts' for Nuxt projects or 'node_modules/.nuxt-ui/ui/<component>.ts' for Vue projects.
Related skills
shadcn
217.3KDevelopers building UI components and design systems using shadcn/ui
The shadcn skill manages UI components and design systems for projects using the shadcn/ui framework. It provides tools to search, add, debug, and style components, while enforcing strict composition and styling rules based on project-specific configuration.
emil-design-eng
114.3KDevelopers and designers building user interfaces who want to improve the feel and responsiveness of their software
This skill provides design engineering guidance based on Emil Kowalski's philosophy for UI polish, component design, and animation. It includes specific frameworks for animation decision-making, CSS transition techniques, and component interaction patterns.
make-interfaces-feel-better
37.7KFrontend developers and designers using AI agents to review UI code or implement design system improvements
This skill provides design engineering principles for polishing user interfaces. It guides the agent in reviewing and implementing UI details such as typography, animations, border radii, optical alignment, and performance optimizations.
wind-mcp-skill
27.8KFinancial analysts and users requiring structured financial data, market snapshots, and company research
The wind-mcp-skill provides an interface for AI agents to query financial data from Wind, including A-share, Hong Kong, and US stock market information, fund data, indices, bonds, and financial documents.