Can I use this with Next.js Server Components?

Absolutely. The skill supports React Server Components (RSC) and can configure your components.json settings accordingly during project initialization.

Is shadcn/ui a traditional NPM library?

No, shadcn/ui is a collection of reusable components that you copy into your own project, giving you full ownership and control over the source code rather than locking it in node_modules.

Does this skill handle Radix UI dependencies?

Yes, the skill manages the installation of necessary peer dependencies like Radix UI or Base UI primitives required for component functionality and accessibility.

How does the skill handle styling conflicts?

It utilizes the cn() utility, combining clsx and tailwind-merge to ensure Tailwind classes are merged intelligently without conflicts or specificity issues.

Can I install full UI blocks like login pages?

Yes, the skill can browse and install complex UI blocks, including dashboards, authentication flows, and sidebar layouts, using the list_blocks and get_block tools.

shadcn/ui Component Integration

Name: shadcn/ui Component Integration
Author: mhiggs82

bymhiggs82

0•

设计工具

Integrates, manages, and customizes accessible shadcn/ui components within your React and Tailwind CSS projects.

This skill empowers Claude to act as a specialized frontend engineer for shadcn/ui, facilitating the discovery and implementation of high-quality, accessible components. Instead of treating shadcn/ui as a rigid library, the skill follows the "copy-and-paste" philosophy, allowing for deep customization of code directly within your repository. It handles everything from initial project configuration and dependency management to complex UI block implementation and theme customization using Tailwind CSS variables and Radix UI primitives.

主要功能

01Expert configuration of components.json including styles, base colors, and path aliases

02Deep customization support through Radix UI primitives and class-variance-authority (cva)

03Implementation of complex UI blocks like dashboards, authentication forms, and sidebars

04Automated component discovery and installation via shadcn CLI and MCP tools

05Intelligent styling management using the cn() utility and Tailwind CSS variables

060 GitHub stars

使用场景

01Rapidly scaffolding modern React dashboards with accessible, pre-built components

02Building custom design systems by extending shadcn/ui primitives with project-specific variants

03Migrating legacy component libraries to a Tailwind-based shadcn/ui architecture

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mhiggs82/parentwise_summary_site shadcn-ui

For use in Claude.ai and ChatGPT

Download Skill