shadcn-ui
✓Radix プリミティブと Tailwind スタイルを備えた shadcn/ui コンポーネント パターン。 UI コンポーネントを構築するとき、CVA バリアントを使用するとき、複合コンポーネントを実装するとき、またはデータ スロット属性を使用してスタイルを設定するときに使用します。 shadcn、cva、cn()、データスロット、基数、ボタン、カード、ダイアログ、VariantProps でトリガーします。
SKILL.md
Tokens: bg-background, text-foreground, bg-primary, text-primary-foreground, bg-card, text-card-foreground, border-input, text-muted-foreground
| Multiple visual variants (primary, outline, ghost) | Yes | Plain className | | Size variations (sm, md, lg) | Yes | Plain className | | Compound conditions (outline + large = thick border) | Yes | Conditional cn() | | One-off custom styling | No | className prop | | Dynamic colors from props | No | Inline styles or CSS variables |
| Complex UI with multiple semantic parts | Yes | Single component with many props | | Optional sections (header, footer) | Yes | Boolean show/hide props | | Different styling for each part | Yes | CSS selectors | | Shared state between parts | Yes + Context | Props drilling | | Simple wrapper with children | No | Single component |
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/existential-birds/beagle --skill shadcn-ui- カテゴリ
- *クリエイティブ
- 認証済み
- ✓
- 初回登録
- 2026-02-01
- 更新日
- 2026-02-18
クイックアンサー
shadcn-ui とは？
Radix プリミティブと Tailwind スタイルを備えた shadcn/ui コンポーネント パターン。 UI コンポーネントを構築するとき、CVA バリアントを使用するとき、複合コンポーネントを実装するとき、またはデータ スロット属性を使用してスタイルを設定するときに使用します。 shadcn、cva、cn()、データスロット、基数、ボタン、カード、ダイアログ、VariantProps でトリガーします。 ソース: existential-birds/beagle。
shadcn-ui のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/existential-birds/beagle --skill shadcn-ui インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/existential-birds/beagle
詳細
- カテゴリ
- *クリエイティブ
- ソース
- skills.sh
- 初回登録
- 2026-02-01