🧪 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 Vite Shadcn Tailwind4
Use Vite Shadcn Tailwind4 to configure Claude Code, Cursor, or Copilot for testing & qa: it 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 compact 43-word instruction set is purpose-built for testing & qa work in AI coding agents. Install with a single command.
Use Cases
- Writing unit, integration, and end-to-end tests
- Setting up test coverage and CI pipelines
- Refactoring legacy code with confidence using tests
- Creating test plans and QA checklists
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
Frequently Asked Questions
What is Vite Shadcn Tailwind4?
Vite Shadcn Tailwind4 is a free testing & qa skill for AI coding agents. 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. It provides a specialized system prompt that configures your agent with testing & qa expertise.
How do I use Vite Shadcn Tailwind4 with Claude Code?
Run npx playbooks add skill igorwarzocha/opencode-workflows --skill vite-shadcn-tailwind4 in your terminal to install Vite Shadcn Tailwind4 into your Claude Code session. It works immediately after installation.
Which AI coding agents work with Vite Shadcn Tailwind4?
Vite Shadcn Tailwind4 is compatible with Claude Code, Cursor, GitHub Copilot, Windsurf, OpenClaw, Cline, and any AI agent that supports custom system prompts or .cursorrules files.
Is Vite Shadcn Tailwind4 free to use?
Yes, Vite Shadcn Tailwind4 is completely free and open source. The full source is available on GitHub at https://github.com/igorwarzocha/opencode-workflows/tree/main/agents/vite-react-ts-convex-tailwind/.opencode/skill/vite-shadcn-tailwind4. You only need a subscription to the AI agent you use it with.
