Claude MarketplacesSubmit
jezweb avatar

Tailwind V4 Shadcn

jezweb/claude-skills

Gets you set up with Tailwind v4 and shadcn/ui using the new CSS variables and @theme inline pattern instead of the old config file approach. It's production tested on WordPress Auditor, so you're not dealing with experimental syntax. You'd reach for this when starting a new project or migrating from v3, especially if you're hitting those annoying @apply breaks or tw-animate-css errors after upgrading. The installation order matters here: dependencies first, then shadcn init. Pairs well with the tailwind-theme-builder skill from the same author if you need to set up your design tokens properly. Worth noting this handles the Vite plugin setup too, which saves you from the usual configuration headaches.

skills.sh installs
2.7K
GitHub stars
1.1K
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add jezweb/claude-skills --skill tailwind-v4-shadcn --agent claude-code

Installs into .claude/skills of the current project.

Files

Gets you set up with Tailwind v4 and shadcn/ui using the new CSS variables and @theme inline pattern instead of the old config file approach. It's production tested on WordPress Auditor, so you're not dealing with experimental syntax. You'd reach for this when starting a new project or migrating from v3, especially if you're hitting those annoying @apply breaks or tw-animate-css errors after upgrading. The installation order matters here: dependencies first, then shadcn init. Pairs well with the tailwind-theme-builder skill from the same author if you need to set up your design tokens properly. Worth noting this handles the Vite plugin setup too, which saves you from the usual configuration headaches.

Browse the repository on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/jezweb/claude-skills
Categories
Frontend Development, Code Review & Quality

More from jezweb/claude-skills

All 166

Recommended

More Frontend Development
1vercel-labs avatarshadcn-sveltevercel-labs/json-renderPre-built shadcn-svelte components for json-render Svelte apps. Use when working with @json-render/shadcn-svelte, adding standard UI components to a Svelte cata1.2Kskills.sh installs
2laguagu avatarnextjs-shadcnlaguagu/claude-code-nextjs-skillsCreates Next.js frontends with shadcn/ui. Use when building React UIs, components, pages, or applications with shadcn, Tailwind, or modern frontend patterns. Al845skills.sh installs
3mattbx avatarshadcn-component-reviewmattbx/shadcn-skillsReview custom components and layouts against shadcn design patterns, visual style conventions (Vega, Nova, Maia, Lyra, Mira), composition rules, design token us664skills.sh installs
4dauquangthanh avatarfrontend-ui-ux-designdauquangthanh/hanoi-rainbowCreates comprehensive frontend UI/UX designs including user interfaces, design systems, component libraries, responsive layouts, and accessibility implementatio541skills.sh installs
5pproenca avatartailwind-responsive-uipproenca/dot-skillsResponsive UI transformation patterns for Tailwind CSS applications. This skill should be used when making interfaces responsive, refactoring layouts for multip470skills.sh installs
6pproenca avatartailwind-ui-refactorpproenca/dot-skillsRefactoring UI design patterns for Tailwind CSS applications. This skill should be used when writing, reviewing, or refactoring HTML with Tailwind utility class467skills.sh installs