How does this skill help with component installation?

It provides the exact CLI commands and manual steps needed to add components directly to your project's UI folder, ensuring all dependencies are correctly handled.

How does it handle accessibility?

It leverages Radix UI's accessible foundations, ensuring keyboard navigation, focus management, and ARIA attributes are maintained during customization.

Can I use this with custom registries?

Yes, the skill supports searching, viewing, and installing items from custom registries defined in your components.json configuration.

Is this compatible with Next.js and React Server Components?

Absolutely, it includes specific guidance for Next.js setups, including configuration for React Server Components (RSC) and TypeScript path aliases.

Does it support both Radix UI and Base UI?

Yes, the skill guides you through choosing and configuring the underlying primitives according to your specific project needs and preferences.

Shadcn UI Integration

Name: Shadcn UI Integration
Author: mhiggs82

bymhiggs82

0•

Design Tools

Streamlines the discovery, installation, and customization of accessible shadcn/ui components using Tailwind CSS and Radix UI.

This skill empowers Claude to act as a specialized frontend engineer for shadcn/ui, facilitating the seamless integration of high-quality, reusable UI components into your codebase. It provides expert guidance on component discovery via MCP tools, automated installation using the shadcn CLI, and advanced customization patterns using Tailwind CSS and class-variance-authority. Whether you are setting up a new project configuration, building complex UI blocks like dashboards and forms, or ensuring WCAG-compliant accessibility, this skill ensures your application adheres to the core shadcn/ui principle of complete code ownership and zero runtime overhead.

Key Features

01Expert guidance on theme customization using CSS variables and Tailwind CSS

020 GitHub stars

03Deep integration with shadcn MCP tools for component discovery and metadata retrieval

04Automated component installation and dependency management via shadcn CLI

05Support for complex UI blocks including dashboards, authentication forms, and sidebars

06Advanced component architecture patterns using the cn() utility and Radix UI primitives

Use Cases

01Implementing complex UI patterns like data tables and multi-step forms with industry best practices

02Migrating existing projects to a modern design system based on Tailwind CSS and Radix UI

03Rapidly scaffolding accessible frontend interfaces with pre-built, customizable components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mhiggs82/parentwise_summary_site_2 shadcn-ui

For use in Claude.ai and ChatGPT

Download Skill