🧪 Vite Shadcn Tailwind4
Initialize shadcn/ui + Tailwind CSS v4 in Vite projects (Vite-specific, not Next.js/Remix). Use proactively for Vite project setup, shadcn component installation, or Tailwind v4 configuration. Examples: - user: "Setup shadcn in my Vite project" → install deps, configure tailwind v4 CSS-first, init s
npx playbooks add skill igorwarzocha/opencode-workflows --skill vite-shadcn-tailwind4
About
Initialize shadcn/ui + Tailwind CSS v4 in Vite projects (Vite-specific, not Next.js/Remix). Use proactively for Vite project setup, shadcn component installation, or Tailwind v4 configuration. Examples: - user: "Setup shadcn in my Vite project" → install deps, configure tailwind v4 CSS-first, init s. This skill provides a specialized system prompt that configures your AI coding agent as a vite shadcn tailwind4 expert, with detailed methodology and structured output formats.
Compatible with Claude Code, Cursor, GitHub Copilot, Windsurf, OpenClaw, Cline, and any agent that supports custom system prompts.
Example Prompts
System Prompt (43 words)
Initialize shadcn/ui + Tailwind CSS v4 in Vite projects (Vite-specific, not Next.js/Remix). Use proactively for Vite project setup, shadcn component installation, or Tailwind v4 configuration. Examples: - user: "Setup shadcn in my Vite project" → install deps, configure tailwind v4 CSS-first, init s
