Initialize shadcn/ui in React projects with Tailwind CSS v4 configuration.
npx skills add https://github.com/jubalm/dotfiles --skill shadcn-init
Please help me install this Agent Skill. Skill: shadcn-init Source: https://github.com/jubalm/dotfiles/tree/main/home/.claude/skills/shadcn-init Command: npx skills add https://github.com/jubalm/dotfiles --skill shadcn-init
This Skill guides you through initializing shadcn/ui in React projects (Next.js, Vite, Astro), including setting up Tailwind CSS v4, path aliases, framework detection, and installation validation. It helps avoid misconfigurations and reduces setup time.
Run initialization with defaults: npx shadcn@latest init -d in your React project, follow prompts, and confirm the following files are created: components/ui/button.tsx (or similar), lib/utils.ts, and components.json.
High-intent search queries and answers about installing and using this skill.
Initialize shadcn/ui by running `npx shadcn@latest init` in your React project root. The tool auto-detects your framework (Next.js, Vite, or Astro), configures Tailwind CSS v4, sets up path aliases, and generates components.json and src/lib/utils.ts. Confirm setup by verifying these files exist.
Shadcn/ui initialization supports Next.js, Vite, and Astro. The Skill detects your framework automatically and applies framework-specific setup steps, including Tailwind CSS v4 configuration and path alias setup tailored to each build system.
The initialization script performs framework detection, validates existing Tailwind and CSS imports, generates essential configuration files (components.json and utils), and runs the shadcn init command with defaults or interactive prompts to complete first-time setup.
Path alias configuration is handled automatically during shadcn/ui initialization across Next.js, Vite, and Astro. The setup process configures your framework's path mapping so components can be imported cleanly without deep relative paths.
The initialization script validates for Tailwind CSS v4 and CSS imports before proceeding. If Tailwind isn't detected, setup guidance is provided. The Skill covers Tailwind configuration as part of the shadcn/ui initialization process.
Yes. Use `npx shadcn@latest init -d` to initialize with defaults, skipping interactive prompts. The Skill supports both automated initialization and interactive options depending on your setup preference.
OpenAEC-FoundationGenerate Vite project scaffolds with configuration and starter files.
BuilderIOConfigure shadcn/ui components and validate imports using components.json.
mayervcAutomate Movie App project setup with Vite, React, and TypeScript.
AmidVoshakulBuild accessible design systems with Radix UI headless primitives.
