📋 Shadcn Ui
shadcn/ui component patterns with Radix primitives and Tailwind styling. Use when building UI components, using CVA variants, implementing compound components, or styling with data-slot attributes. Triggers on shadcn, cva, cn(), data-slot, Radix, Button, Card, Dialog, VariantProps.
npx playbooks add skill existential-birds/beagle --skill shadcn-ui
About Shadcn Ui
Use Shadcn Ui to configure Claude Code, Cursor, or Copilot for developer workflow: it shadcn/ui component patterns with radix primitives and tailwind styling. use when building ui components, using cva variants, implementing compound components, or styling with data-slot attributes. triggers on shadcn, cva, cn(), data-slot, radix, button, card, dialog, variantprops.
This compact 36-word instruction set is purpose-built for developer workflow work in AI coding agents. Install with a single command.
Use Cases
- Streamlining git workflows and commit conventions
- Setting up CI/CD pipelines and deployment scripts
- Managing monorepos and multi-package projects
- Automating release notes and changelogs
Example Prompts
System Prompt (36 words)
shadcn/ui component patterns with Radix primitives and Tailwind styling. Use when building UI components, using CVA variants, implementing compound components, or styling with data-slot attributes. Triggers on shadcn, cva, cn(), data-slot, Radix, Button, Card, Dialog, VariantProps.
Frequently Asked Questions
What is Shadcn Ui?
Shadcn Ui is a free developer workflow skill for AI coding agents. shadcn/ui component patterns with Radix primitives and Tailwind styling. Use when building UI components, using CVA variants, implementing compound components, or styling with data-slot attributes. Triggers on shadcn, cva, cn(), data-slot, Radix, Button, Card, Dialog, VariantProps.. It provides a specialized system prompt that configures your agent with developer workflow expertise.
How do I use Shadcn Ui with Claude Code?
Run npx playbooks add skill existential-birds/beagle --skill shadcn-ui in your terminal to install Shadcn Ui into your Claude Code session. It works immediately after installation.
Which AI coding agents work with Shadcn Ui?
Shadcn Ui is compatible with Claude Code, Cursor, GitHub Copilot, Windsurf, OpenClaw, Cline, and any AI agent that supports custom system prompts or .cursorrules files.
Is Shadcn Ui free to use?
Yes, Shadcn Ui is completely free and open source. The full source is available on GitHub at https://github.com/existential-birds/beagle/tree/main/skills/shadcn-ui. You only need a subscription to the AI agent you use it with.
