Can I use third-party component registries?

Absolutely. It includes pre-configured support for various registries such as React Bits for animations, ElevenLabs UI for audio, and MapCN for mapping components.

Does it include linting and formatting?

Yes, the skill integrates with Biome to automatically fix whitespace, style issues, and import sorting in all shadcn-generated files.

Does this skill support Tailwind CSS v4?

Yes, it is fully optimized for Tailwind CSS v4, including the use of canonical class names like bg-linear-to-b and updated configuration patterns.

What font system does it use?

By default, it sets up Nunito Sans using Next.js fonts, properly mapping it to the --font-sans CSS variable for use throughout the Tailwind ecosystem.

How does it handle dark mode color consistency?

The skill automatically post-processes CSS variables to ensure neutral grays have zero chroma in oklch, preventing ugly color mismatches between different UI elements.

Shadcn/UI Design System Setup

Name: Shadcn/UI Design System Setup
Author: mattwoodco

bymattwoodco

•

Design Tools

Initializes and configures a professional shadcn/ui design system with custom themes, dark mode, and multi-registry support.

This skill automates the comprehensive setup of a production-ready design system using shadcn/ui and Tailwind CSS v4. Beyond basic initialization, it enforces advanced best practices such as monochrome dark mode token processing to ensure UI consistency, automated linting via Biome, and semantic color enforcement. It provides a complete foundation for Next.js applications, including font integration, multi-registry support for third-party components like React Bits, and a fully functional dark mode toggle implementation.

Key Features

01Multi-registry support for specialized third-party component libraries

02Strict monochrome dark mode color processing for neutral consistency

03Automated shadcn/ui initialization with custom theme presets

04Tailwind CSS v4 canonical class enforcement and semantic token mapping

05Full dark mode implementation with next-themes and custom toggle

063 GitHub stars

Use Cases

01Implementing complex third-party components from registries like React Bits or ElevenLabs

02Standardizing a project's UI architecture with consistent semantic color tokens

03Bootstrapping a new Next.js project with a robust, accessible design system

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mattwoodco/skills add-shadcn

For use in Claude.ai and ChatGPT

Download Skill