Can Claude modify the component source code?

Yes. Because shadcn/ui copies code directly into your project, Claude can utilize this skill to refactor and customize the components to your specific needs.

How does this skill help with shadcn/ui installation?

It provides Claude with the specific CLI commands and configuration patterns needed to initialize shadcn and install components without manual documentation lookups.

Does it support TypeScript and path aliases?

Absolutely. The skill includes standardized configurations for tsconfig.json and vite.config.ts to ensure path aliases like '@/components' work correctly.

Which frameworks are supported by this skill?

The skill includes specialized instructions and best practices for Vite, Next.js, Remix, Astro, TanStack Router, and manual React setups.

Are the components accessible?

Yes, the skill follows shadcn/ui's use of Radix UI primitives, ensuring that components like Dialogs, Popovers, and Selects are fully accessible.

Shadcn UI Assistant

Name: Shadcn UI Assistant
Author: tianzecn

bytianzecn

•

디자인 도구

Streamlines the implementation of accessible, high-performance UI components using the shadcn/ui library and Tailwind CSS.

This skill empowers Claude to efficiently manage and implement the shadcn/ui component library within your project. It provides domain-specific expertise for initializing shadcn, installing specific components via CLI, and configuring design systems using Tailwind CSS and Radix UI primitives. By following 'Open Code' principles, it helps developers build professional-grade, accessible user interfaces while maintaining full control over the component source code, allowing for deep customization and seamless framework integration.

주요 기능

01Framework-specific setup guidance for Vite, Next.js, and TanStack

02Integration of accessible Radix UI primitives and utility-first styling

03Automated component installation and CLI command management

04Standardized configuration of components.json and path aliases

05Comprehensive support for theming and CSS variable customization

061 GitHub stars

사용 사례

01Rapidly scaffolding a new React project with a consistent design system

02Standardizing frontend codebases using utility-first CSS and copy-paste components

03Adding complex UI elements like Forms and Dialogs with pre-built accessibility

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add tianzecn/myclaudecode shadcn-ui

For use in Claude.ai and ChatGPT

Download Skill