shadcn
✓このスキルは、ユーザーが「コンポーネントの追加」、「shadcn の使用」、「ボタンのインストール」、「ダイアログの作成」、「フォームの追加」、「DataTable の使用」、「ダーク モード切り替えの実装」、「cn ユーティリティの使用」を要求する場合、または UI コンポーネント、コンポーネント ライブラリ、またはアクセス可能なコンポーネントについて議論する場合に使用する必要があります。常に最新の shadcn/ui バージョンと最新のパターンを使用してください。
SKILL.md
This skill provides guidance for building interfaces with shadcn/ui, focusing on always using the latest version and modern patterns.
Philosophy: Copy and own your components. Use the new-york style. Leverage Radix UI primitives for accessibility.
| Style | new-york | default (deprecated) | | Toast | sonner | toast component | | Animation | CSS/tw-animate-css | tailwindcss-animate | | forwardRef | Direct ref prop (React 19) | forwardRef wrapper |
このスキルは、ユーザーが「コンポーネントの追加」、「shadcn の使用」、「ボタンのインストール」、「ダイアログの作成」、「フォームの追加」、「DataTable の使用」、「ダーク モード切り替えの実装」、「cn ユーティリティの使用」を要求する場合、または UI コンポーネント、コンポーネント ライブラリ、またはアクセス可能なコンポーネントについて議論する場合に使用する必要があります。常に最新の shadcn/ui バージョンと最新のパターンを使用してください。 ソース: velcrafting/codex-skills。
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/velcrafting/codex-skills --skill shadcn- カテゴリ
- *クリエイティブ
- 認証済み
- ✓
- 初回登録
- 2026-02-01
- 更新日
- 2026-02-18
クイックアンサー
shadcn とは？
このスキルは、ユーザーが「コンポーネントの追加」、「shadcn の使用」、「ボタンのインストール」、「ダイアログの作成」、「フォームの追加」、「DataTable の使用」、「ダーク モード切り替えの実装」、「cn ユーティリティの使用」を要求する場合、または UI コンポーネント、コンポーネント ライブラリ、またはアクセス可能なコンポーネントについて議論する場合に使用する必要があります。常に最新の shadcn/ui バージョンと最新のパターンを使用してください。 ソース: velcrafting/codex-skills。
shadcn のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/velcrafting/codex-skills --skill shadcn インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/velcrafting/codex-skills
詳細
- カテゴリ
- *クリエイティブ
- ソース
- skills.sh
- 初回登録
- 2026-02-01