How does Auto Form help in development?

Auto Form allows you to generate complete, validated forms automatically by providing a Zod schema, significantly speeding up form development.

What is the relationship between Reka UI and shadcn-vue?

Reka UI is the successor to Radix Vue. This skill uses Reka UI v2 as the foundation for its accessible, headless component primitives.

Can I use this with Nuxt 3?

Absolutely. The skill contains dedicated instructions for Nuxt 3 initialization, including module configuration and path alias setup.

Does it handle dark mode implementation?

Yes, it provides patterns for using @vueuse/core's useColorMode to toggle themes via CSS variables.

Does this skill support Tailwind CSS v4?

Yes, it includes specific configuration patterns for the Tailwind v4 Vite plugin and CSS-variable based theming.

shadcn-vue for Claude Code

Name: shadcn-vue for Claude Code
Author: secondsky

bysecondsky

•

设计工具

Implements accessible, production-ready UI components in Vue and Nuxt applications using Reka UI and Tailwind CSS.

This skill enables Claude to architect and build high-performance interfaces using the shadcn-vue ecosystem for Vue 3 and Nuxt 3. It provides specialized guidance for component initialization, complex data table implementation with TanStack Table, schema-based form generation via Auto Form, and advanced charting. By utilizing Reka UI primitives, it ensures all UI elements meet strict accessibility standards while remaining fully customizable through Tailwind CSS and CSS variables.

主要功能

01Accessibility-first components built on Reka UI (formerly Radix Vue) primitives.

02Automated setup for Vue 3 and Nuxt 3 with Tailwind CSS v4 support.

03Native dark mode support using VueUse and CSS variables.

0421 GitHub stars

05Advanced data table implementation including sorting, filtering, and pagination.

06Schema-driven form generation using Auto Form and Zod validation.

使用场景

01Building complex, accessible admin dashboards with interactive data tables and charts.

02Rapidly generating type-safe forms from Zod schemas to reduce boilerplate code.

03Implementing consistent, themed design systems across large Vue or Nuxt applications.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add secondsky/claude-skills shadcn-vue

For use in Claude.ai and ChatGPT

Download Skill