AgentToolHub
Skill

contributing

contributing — a Claude Code skill from nuxt/ui

Features

  • ✓Combines Reka UI, Tailwind CSS, and Tailwind Variants
  • ✓Ready-to-use Nuxt UI templates
  • ✓Documentation and guides for easy integration
  • ✓Highly performant and accessible UI components
  • ✓Install with simple package manager commands
  • ✓Visit GitHub for more details and templates

Installation Guide

``bash [pnpm]
pnpm add @nuxt/ui tailwindcss
``
``bash [yarn]
yarn add @nuxt/ui tailwindcss
``
``bash [npm]
npm install @nuxt/ui tailwindcss
``
``bash [bun]
bun add @nuxt/ui tailwindcss
``

Nuxt

  • Add the Nuxt UI module in your nuxt.config.ts:

    • ``ts [nuxt.config.ts]
    export default defineNuxtConfig({
    modules: ['@nuxt/ui'],
    css: ['~/assets/css/main.css']
    })
    ``

  • Import Tailwind CSS and Nuxt UI in your CSS:

    • ``css [app/assets/css/main.css]
    @import "tailwindcss";
    @import "@nuxt/ui";
    ``

    Learn more in the installation guide.

    Vue

  • Add the Nuxt UI Vite plugin in your vite.config.ts:

    • ``ts [vite.config.ts]
    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    import ui from '@nuxt/ui/vite'

    export default defineConfig({
    plugins: [
    vue(),
    ui()
    ]
    })
    ``

  • Use the Nuxt UI Vue plugin in your main.ts:

    • ``ts [src/main.ts]
    import './assets/css/main.css'

    import { createApp } from 'vue'
    import { createRouter, createWebHistory } from 'vue-router'
    import ui from '@nuxt/ui/vue-plugin'
    import App from './App.vue'

    const app = createApp(App)

    const router = createRouter({
    routes: [],
    history: createWebHistory()
    })

    app.use(router)
    app.use(ui)

    app.mount('#app')
    ``

  • Import Tailwind CSS and Nuxt UI in your CSS:

    • ``css [src/assets/css/main.css]
    @import "tailwindcss";
    @import "@nuxt/ui";
    ``

    Learn more in the installation guide.

    Reviews