skills.rest
skaile-ai
skaile-aiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

prog-expert-scadcn

Configure shadcn-nuxt with components.json registry and Tailwind CSS v4 in Nuxt projects.

Updated Mar 28, 2026
Search Tags:#cva#nuxt#component-registry#tailwind-v4#shadcn-vue#auto-import#tailwind-merge
One-click install
npx skills add https://github.com/skaile-ai/ai-assets --skill prog-expert-scadcn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prog-expert-scadcn
Source: https://github.com/skaile-ai/ai-assets/tree/main/dev-implementation-experts-js/skills/prog-expert-scadcn
Command: npx skills add https://github.com/skaile-ai/ai-assets --skill prog-expert-scadcn

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires rich, pyyaml, requests, and includes scripts (resource) components.

What problem does it solve?

Configuring and synchronizing shadcn-nuxt (shadcn-vue) across Nuxt 3/4 projects, including a component registry, Tailwind v4 integration, and automated component patterns, can be time-consuming and error-prone.

Core Features & Use Cases

  • Shadcn-nuxt module integration: Set up the library, helpers, and auto-import patterns for consistent UI components.
  • Component registry: Create and maintain a components.json registry to map components to usage points.
  • Tailwind v4 + CVA: Integrate Tailwind CSS v4 with class-variance-authority and tailwind-merge for robust styling.
  • Use Case: Rapidly scaffold a Nuxt app with a cohesive, reusable component system.

Quick Start

Create a Nuxt project and configure shadcn-nuxt with a components.json registry to begin using auto-imported, themed components.

Frequently Asked Questions about prog-expert-scadcn

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I integrate shadcn-vue into a Nuxt 3 or 4 project?▼

You integrate shadcn-vue by configuring the shadcn-nuxt module, creating a components.json registry, and enabling auto-imported components for seamless UI development.

What is the best way to use Tailwind CSS v4 with shadcn-vue components?▼

The best way to use Tailwind CSS v4 with shadcn-vue is by integrating it via @tailwindcss/vite alongside class-variance-authority and tailwind-merge for robust component styling.

Does shadcn-vue support auto-importing components in Nuxt applications?▼

Yes, shadcn-vue supports auto-importing components in Nuxt applications by configuring the shadcn-nuxt module to automatically map and register UI components for consistent usage.

Why do I need a components.json registry when setting up shadcn-nuxt?▼

You need a components.json registry when setting up shadcn-nuxt to map components to their usage points and maintain synchronization across your Nuxt project's UI system.

Can I use class-variance-authority and tailwind-merge for managing component variants in Nuxt?▼

Yes, you can use class-variance-authority (CVA) and tailwind-merge to manage component variants in Nuxt, applying robust styling patterns for your reusable UI components.

What are the limitations of manually configuring shadcn-vue without a component registry?▼

Manually configuring shadcn-vue without a component registry can be time-consuming and error-prone, leading to synchronization issues between your Nuxt project and your UI components.

Related Skills

Explore More Software Engineering Skills→
leejayhsuleejayhsu

tailwind-v4-shadcn

Automate Tailwind v4 and shadcn/ui setup for React projects.

Community
Intermediate
TinkerbellsTinkerbells
1

nuxt-ui

Provide a cohesive Vue UI toolkit for accessible, themed interfaces.

Community
Advanced
kid-sidkid-sid
186

tailwind

Standardize Tailwind UI styling with cva variants and tailwind-merge.

Community
Advanced
WesleySmitsWesleySmits
6

scaffolding-vue-components

Generate Vue/Nuxt component scaffolds with Composition API, CSS modules, Vitest tests, and Storybook entries.

Community
Advanced