エクスポートコピーの境界とスキルエイリアス
移行、インストール、修正、および経験の書き戻しは、現在読み込まれているターゲットホストスキルコピーに対してのみ機能します。元の Codex スキル/MCP、ダウンロードしたソースコード、および original-skills はすべてソースマテリアルであり、このコピーの実行によって書き込まれることはありません。ユーザーが Codex 製品自体の設定を別途明示的に要求した場合にのみ、その製品のフローに従って指定されたターゲットが処理されます。スクリプトがインストールディレクトリや状態ディレクトリを必要とする場合は、ターゲットパスを明示的に指定します。CODEX_HOME から暗黙的に書き込み位置を推測してはいけません。
スキル間の名前は、ソースリポジトリのエイリアスを引き継ぐ場合があります。まず スキルエイリアステーブル を確認し、同じソース、同じプラグインのエントリを優先して選択し、その id を使用して対応するエントリポイントを呼び出すか読み取ります。古い $skill や superpowers:skill という名前が新しいホストに直接登録されていると仮定してはいけません。ターゲットが確定できない場合は、まず確認し、実際の製品コマンドやシェル環境変数を置き換えないでください。
クロスホスト使用規則
このコピーは、Agent Skills をサポートするクライアントで使用するためのものです。まず、現在のホストが実際に提供するツール、権限、および接続済みサービスを確認してから、本文のワークフローを実行します。原文のホストツール識別子は能力のリファレンスです。そのツールが実際に見つかった場合にのみ呼び出すことができ、他のホストは検証済みの同等の MCP、CLI、または API を使用する必要があります。同等の機能がない手順は使用不可として報告しなければならず、呼び出しや完了状態をでっち上げてはいけません。
スキルリソースは、このスキルディレクトリを基準とします。出力は、現在のプロジェクト内のユーザー指定の場所に書き込まれます。スキル名または自然言語でトリガーされ、具体的なショートカットコマンドはホストが決定します。実際の製品、モデル API、プロトコルフィールド、および公式 URL を含む名前は、元の意味を維持します。承認、審査、プライバシー、およびツール範囲の制限は移行後も有効です。互換性のために権限を拡大してはいけません。具体的な依存関係と移行手順については、同じディレクトリにある PORTABILITY.md を参照してください。
shadcn/ui
UI、コンポーネント、およびデザインシステムを構築するためのフレームワークです。コンポーネントは、CLI を介してユーザーのプロジェクトにソースコードとして追加されます。
重要: すべての CLI コマンドは、プロジェクトのパッケージランナー
npx shadcn@latest、pnpm dlx shadcn@latest、またはbunx --bun shadcn@latestを使用して実行します。パッケージランナーはプロジェクトのpackageManagerに基づいて選択します。以下の例ではnpx shadcn@latestを使用していますが、プロジェクトに適したランナーに置き換えてください。
現在のプロジェクトコンテキスト
!`npx shadcn@latest info --json 2>/dev/null || echo '{"error": "No shadcn project found. Run shadcn init first."}'`
上記の JSON には、プロジェクトの設定とインストール済みコンポーネントが含まれています。npx shadcn@latest docs <component> を使用して、任意のコンポーネントのドキュメントとサンプル URL を取得します。
原則
- 既存のコンポーネントを優先して使用します。 カスタム UI を作成する前に、
npx shadcn@latest searchを使用してレジストリを確認します。コミュニティレジストリも確認してください。 - 構成する、再発明しない。 設定ページ = Tabs + Card + フォームコントロール。ダッシュボード = Sidebar + Card + Chart + Table。
- カスタムスタイルの前に組み込みのバリアントを使用します。
variant="outline"、size="sm"など。 - セマンティックカラーを使用します。
bg-primary、text-muted-foreground—bg-blue-500のような生の値は絶対に使用しません。
重要なルール
これらのルールは 常に適用されます。各ルールは、誤ったコードと正しいコードのペアを含むファイルにリンクしています。
スタイリングと Tailwind → styling.md
classNameはレイアウトに使用し、スタイリングには使用しないでください。 コンポーネントの色やタイポグラフィを決して上書きしないでください。space-x-*やspace-y-*は使用しないでください。flexとgap-*を使用します。縦方向のスタックには、flex flex-col gap-*を使用します。- 幅と高さが等しい場合は
size-*を使用します。w-10 h-10ではなくsize-10を使用します。 truncateショートハンドを使用します。overflow-hidden text-ellipsis whitespace-nowrapは使用しないでください。- 手動の
dark:カラーオーバーライドは使用しないでください。 セマンティックトークン（bg-background、text-muted-foreground）を使用します。 - 条件付きクラスには
cn()を使用します。 手動のテンプレートリテラル三項演算子を記述しないでください。 - オーバーレイコンポーネントに手動の
z-indexは使用しないでください。 Dialog、Sheet、Popover などは、自身のスタッキングを処理します。
フォームと入力 → forms.md
- フォームは
FieldGroup+Fieldを使用します。 フォームレイアウトに生のdivとspace-y-*またはgrid gap-*を決して使用しないでください。 InputGroupはInputGroupInput/InputGroupTextareaを使用します。InputGroup内で生のInput/Textareaを決して使用しないでください。- 入力内のボタンは
InputGroup+InputGroupAddonを使用します。 - オプションセット（2～7 個の選択肢）は
ToggleGroupを使用します。 手動のアクティブ状態を持つButtonをループしないでください。 - 関連するチェックボックス/ラジオボタンをグループ化するには、
FieldSet+FieldLegendを使用します。 見出し付きのdivを使用しないでください。 - フィールドバリデーションは
data-invalid+aria-invalidを使用します。Fieldにはdata-invalid、コントロールにはaria-invalidを使用します。無効の場合は、Fieldにdata-disabled、コントロールにdisabledを使用します。
コンポーネント構造 → composition.md
- アイテムは常にそのグループ内に配置します。
SelectItem→SelectGroup、DropdownMenuItem→DropdownMenuGroup、CommandItem→CommandGroup。 - カスタムトリガーには
asChild（radix）またはrender（base）を使用します。npx shadcn@latest infoのbaseフィールドを確認します。 → base-vs-radix.md - Dialog、Sheet、Drawer には常にタイトルが必要です。 アクセシビリティのために
DialogTitle、SheetTitle、DrawerTitleが必要です。視覚的に非表示にする場合は、className="sr-only"を使用します。 - 完全な Card 構成を使用します。
CardHeader/CardTitle/CardDescription/CardContent/CardFooter。すべてをCardContentに詰め込まないでください。 - Button に
isPending/isLoadingはありません。Spinner+data-icon+disabledで構成します。 TabsTriggerはTabsList内に配置する必要があります。Tabs内で直接トリガーをレンダリングしないでください。Avatarには常にAvatarFallbackが必要です。 画像の読み込みに失敗した場合に備えます。
カスタムマークアップではなくコンポーネントを使用する → composition.md
- カスタムマークアップの前に既存のコンポーネントを使用します。 スタイル付きの
divを作成する前に、コンポーネントが存在するか確認します。 - コールアウトには
Alertを使用します。 カスタムのスタイル付き div を作成しないでください。 - 空の状態には
Emptyを使用します。 カスタムの空の状態マークアップを作成しないでください。 - トーストは
sonner経由で行います。sonnerのtoast()を使用します。 <hr>や<div className="border-t">の代わりにSeparatorを使用します。- ローディングプレースホルダーには
Skeletonを使用します。 カスタムのanimate-pulsediv は使用しないでください。 - カスタムスタイルの span の代わりに
Badgeを使用します。
アイコン → icons.md
Button内のアイコンはdata-iconを使用します。 アイコンにdata-icon="inline-start"またはdata-icon="inline-end"を設定します。- コンポーネント内のアイコンにサイズクラスを設定しないでください。 コンポーネントは CSS を介してアイコンのサイズを処理します。
size-4やw-4 h-4は使用しないでください。 - アイコンは文字列キーではなく、オブジェクトとして渡します。
icon={CheckIcon}のように、文字列ルックアップは使用しません。
CLI
- プリセットコードを手動でデコードしたりフェッチしたりしないでください。 それらを直接
npx shadcn@latest init --preset <code>に渡します。
主要なパターン
これらは、正しい shadcn/ui コードを区別する最も一般的なパターンです。エッジケースについては、上記のリンクされたルールファイルを参照してください。
// フォームレイアウト: FieldGroup + Field、div + Label ではない。
<FieldGroup>
<Field>
<FieldLabel htmlFor="email">Email</FieldLabel>
<Input id="email" />
</Field>
</FieldGroup>
// バリデーション: Field に data-invalid、コントロールに aria-invalid。
<Field data-invalid>
<FieldLabel>Email</FieldLabel>
<Input aria-invalid />
<FieldDescription>Invalid email.</FieldDescription>
</Field>
// ボタン内のアイコン: data-icon、サイズクラスなし。
<Button>
<SearchIcon data-icon="inline-start" />
Search
</Button>
// スペーシング: gap-*、space-y-* ではない。
<div className="flex flex-col gap-4"> // 正しい
<div className="space-y-4"> // 間違い
// 等しい寸法: size-*、w-* h-* ではない。
<Avatar className="size-10"> // 正しい
<Avatar className="w-10 h-10"> // 間違い
// ステータスカラー: Badge バリアントまたはセマンティックトークン、生の色ではない。
<Badge variant="secondary">+20.1%</Badge> // 正しい
<span className="text-emerald-600">+20.1%</span> // 間違い
コンポーネントの選択
| ニーズ | 使用するもの |
|---|---|
| ボタン/アクション | Button（適切なバリアント） |
| フォーム入力 | Input、Select、Combobox、Switch、Checkbox、RadioGroup、Textarea、InputOTP、Slider |
| 2～5 個のオプションを切り替える | ToggleGroup + ToggleGroupItem |
| データ表示 | Table、Card、Badge、Avatar |
| ナビゲーション | Sidebar、NavigationMenu、Breadcrumb、Tabs、Pagination |
| オーバーレイ | Dialog（モーダル）、Sheet（サイドパネル）、Drawer（ボトムシート）、AlertDialog（確認） |
| フィードバック | sonner（トースト）、Alert、Progress、Skeleton、Spinner |
| コマンドパレット | Dialog 内の Command |
| チャート | Chart（Recharts をラップ） |
| レイアウト | Card、Separator、Resizable、ScrollArea、Accordion、Collapsible |
| 空の状態 | Empty |
| メニュー | DropdownMenu、ContextMenu、Menubar |
| ツールチップ/情報 | Tooltip、HoverCard、Popover |
主要フィールド
注入されたプロジェクトコンテキストには、以下の主要フィールドが含まれています。
aliases→ インポートには実際のエイリアスプレフィックス（例：@/、~/）を使用し、ハードコードしないでください。isRSC→trueの場合、useState、useEffect、イベントハンドラー、またはブラウザ API を使用するコンポーネントは、ファイルの先頭に"use client"が必要です。ディレクティブについてアドバイスする際は、常にこのフィールドを参照してください。tailwindVersion→"v4"は@theme inlineブロックを使用し、"v3"はtailwind.config.jsを使用します。tailwindCssFile→ カスタム CSS 変数が定義されているグローバル CSS ファイル。常にこのファイルを編集し、新しいファイルを作成しないでください。style→ コンポーネントの視覚的処理（例：nova、vega）。base→ プリミティブライブラリ（radixまたはbase）。コンポーネント API と利用可能な props に影響します。iconLibrary→ アイコンのインポートを決定します。lucideの場合はlucide-react、tablerの場合は@tabler/icons-reactを使用します。lucide-reactを想定しないでください。resolvedPaths→ コンポーネント、ユーティリティ、フックなどの正確なファイルシステムの保存先。framework→ ルーティングとファイルの規則（例：Next.js App Router と Vite SPA）。packageManager→ shadcn 以外の依存関係のインストールにこれを使用します（例：pnpm add date-fnsvsnpm install date-fns）。
完全なフィールドリファレンスについては、cli.md — info コマンド を参照してください。
コンポーネントドキュメント、サンプル、および使用法
npx shadcn@latest docs <component> を実行して、コンポーネントのドキュメント、サンプル、および API リファレンスの URL を取得します。これらの URL をフェッチして実際のコンテンツを取得します。
npx shadcn@latest docs button dialog select
コンポーネントを作成、修正、デバッグ、または使用する場合は、常に最初に npx shadcn@latest docs を実行し、URL をフェッチしてください。 これにより、推測ではなく、正しい API と使用パターンで作業していることが保証されます。
ワークフロー
- プロジェクトコンテキストを取得する — すでに上記で注入されています。更新が必要な場合は、
npx shadcn@latest infoを再度実行します。 - 最初にインストール済みコンポーネントを確認する —
addを実行する前に、常にプロジェクトコンテキストのcomponentsリストを確認するか、resolvedPaths.uiディレクトリをリストします。追加されていないコンポーネントをインポートしたり、既にインストールされているコンポーネントを再追加したりしないでください。 - コンポーネントを見つける —
npx shadcn@latest search。 - ドキュメントとサンプルを取得する —
npx shadcn@latest docs <component>を実行して URL を取得し、フェッチします。npx shadcn@latest viewを使用して、インストールしていないレジストリアイテムを参照します。インストール済みコンポーネントへの変更をプレビューするには、npx shadcn@latest add --diffを使用します。 - インストールまたは更新する —
npx shadcn@latest add。既存のコンポーネントを更新する場合は、最初に--dry-runと--diffを使用して変更をプレビューします（以下の コンポーネントの更新 を参照）。 - サードパーティコンポーネントのインポートを修正する — コミュニティレジストリ（例：
@bundui、@magicui）からコンポーネントを追加した後、追加された非 UI ファイルに@/components/ui/...のようなハードコードされたインポートパスがないか確認します。これらはプロジェクトの実際のエイリアスと一致しない可能性があります。npx shadcn@latest infoを使用して正しいuiエイリアス（例：@workspace/ui/components）を取得し、それに応じてインポートを書き換えます。CLI は独自の UI ファイルのインポートを書き換えますが、サードパーティレジストリコンポーネントはプロジェクトと一致しないデフォルトパスを使用する場合があります。 - 追加されたコンポーネントをレビューする — 任意のレジストリからコンポーネントまたはブロックを追加した後、常に追加されたファイルを読み、それらが正しいことを確認してください。不足しているサブコンポーネント（例：
SelectGroupなしのSelectItem）、不足しているインポート、正しくない構成、または 重要なルール への違反がないか確認します。また、アイコンのインポートをプロジェクトコンテキストのiconLibraryに置き換えます（例：レジストリアイテムがlucide-reactを使用しているが、プロジェクトがhugeiconsを使用している場合、インポートとアイコン名を適宜交換します）。すべての問題を修正してから次に進みます。 - レジストリは明示的でなければなりません — ユーザーがブロックまたはコンポーネントの追加を依頼した場合、レジストリを推測しないでください。レジストリが指定されていない場合（例：ユーザーが
@shadcn、@tailarkなどを指定せずに「ログインブロックを追加」と言った場合）、どのレジストリを使用するか尋ねてください。ユーザーに代わってレジストリをデフォルトにしないでください。 - プリセットの切り替え — 最初にユーザーに尋ねます：再インストール、マージ、またはスキップ？
- 再インストール:
npx shadcn@latest init --preset <code> --force --reinstall。すべてのコンポーネントを上書きします。 - マージ:
npx shadcn@latest init --preset <code> --force --no-reinstallを実行し、次にnpx shadcn@latest infoを実行してインストール済みコンポーネントをリストし、インストール済みコンポーネントごとに--dry-runと--diffを使用して個別にスマートマージします。 - スキップ:
npx shadcn@latest init --preset <code> --force --no-reinstall。設定と CSS のみを更新し、コンポーネントはそのままにします。 - 重要: プリセットコマンドは常にユーザーのプロジェクトディレクトリ内で実行します。CLI は
components.jsonから現在のベース（basevsradix）を自動的に保持します。スクラッチ/テンポラリディレクトリを使用する必要がある場合（例：--dry-run比較用）は、--base <current-base>を明示的に渡してください。プリセットコードはベースをエンコードしません。
- 再インストール:
コンポーネントの更新
ユーザーがローカルの変更を保持しながらコンポーネントを上流から更新するように要求した場合は、--dry-run と --diff を使用してインテリジェントにマージします。生のファイルをフェッチしないでください。