tailwind-v4-shadcn

Name: tailwind-v4-shadcn
Rating: 1.8 (1 reviews)
Author: jezweb

35.9

| Set up Tailwind v4 with shadcn/ui using @theme inline pattern and CSS variable architecture. Four-step mandatory pattern: define CSS variables at root, map to Tailwind utilities, apply base styles, get automatic dark mode. Use when: initializing React projects with Tailwind v4, setting up shadcn/ui dark mode, or fixing colors not working, theme not applying, CSS variables broken, tw-animate-css errors, or migrating from v3.

Commands Marketplace

Third-Party Agent Skill: Review the code before installing. Agent skills execute in your AI assistant's environment and can access your files. Learn more about security

Installation for Agentic Skill

View all platforms →

Claude Code (CLI) Fast

skilz install jezweb/claude-skills/tailwind-v4-shadcn

OpenCode (CLI) Fast

skilz install jezweb/claude-skills/tailwind-v4-shadcn --agent opencode

OpenAI Codex (CLI) Native

skilz install jezweb/claude-skills/tailwind-v4-shadcn --agent codex

Gemini CLI (Project) Project

skilz install jezweb/claude-skills/tailwind-v4-shadcn --agent gemini

First time? Install Skilz: pip install skilz

Works with 14 AI coding assistants

Cursor, Aider, Copilot, Windsurf, Qwen, Kimi, and more...

View All Agents

For Claude Desktop Easy

Download Agent Skill ZIP

Extract and copy to ~/.claude/skills/ then restart Claude Desktop

Manual Installation

1. Clone the repository:

git clone https://github.com/jezweb/claude-skills

2. Copy the agent skill directory:

cp -r claude-skills/skills/tailwind-v4-shadcn ~/.claude/skills/

View on GitHub

Need detailed installation help? Check our platform-specific guides:

Claude Desktop Guide Claude Code Guide Troubleshooting

Related Agentic Skills

design-doc-mermaid

by SpillwaveSolutions

Create Mermaid diagrams for any purpose - activity diagrams, deployment diagrams, architecture diagrams, or complete design documents. This skill uses...

100

general› react code

nextjs

by jezweb

| Build Next.js 16 apps with App Router, Server Components/Actions, Cache Components ("use cache"), and async route params. Includes proxy.ts (replace...

general› react code

CommandsMarketplace

cc-trace

by alexfazio

Interactive assistant for intercepting, debugging, analyzing and reviewing Claude Code API requests using mitmproxy. Guides setup, certificate configu...

general› react code

cloudflare-browser-rendering

by jezweb

| Add headless Chrome automation with Puppeteer/Playwright on Cloudflare Workers. Use when: taking screenshots, generating PDFs, web scraping, crawlin...

general› react code

CommandsMarketplace

Agentic Skill Details

Owner: jezweb (GitHub)
Repository: claude-skills
Type: Non-Technical
Meta-Domain: general
Primary Domain: general
Sub-Domain: react code
Market Score: 35.9

Agentic Skill Grades →

Browse Category

More general Agentic Skills

Report Security Issue

Found a security vulnerability in this agent skill?