extract

コンテキスト： このサブスキルは、より広範な ui-craft スキルの一つの視点です。ui-craft スキルもインストールされている場合は、まずその SKILL.md を読み、Discovery + Anti-Slop + Craft Test を確認してから、以下の特定の視点を適用してください。

$ARGUMENTS から再利用可能な要素を抽出します。ui-craft スキルを読み込みます。

ステップ 1 — 抽出候補を探すために対象をスキャンします：

• 繰り返し使われている Tailwind クラスの組み合わせ — 3 回以上登場するクラス文字列はコンポーネントにします（プロジェクトで cva／tv のバリアントを使っている場合は、まず確認してからバリアントにします）。
• マジックナンバー — リテラル形式で記述された 16 進数カラー、ピクセルサイズ、シャドウ定義、フォントサイズ、z-index 値は、CSS 変数または theme.extend に移します。
• 繰り返し使われているマークアップ — テキスト／プロパティだけが異なるブロックは、プロパティを受け取る単一のコンポーネントにまとめます。

ステップ 2 — 新しい規約を押し付けず、プロジェクトの規約に合わせます：

• 命名 — 近くにあるコンポーネントを確認します。ファイル名は PascalCase か、kebab-case か。名前付きエクスポートか、デフォルトエクスポートか。正確に合わせます。
• 配置場所 — 新しいディレクトリを作成する前に、components/ui/、ui/、primitives/、src/components/ を確認します。既存のものを再利用します。
• トークン — 既存の CSS 変数の命名規則（--color-*、--space-*、--font-*、--radius-*）を尊重します。並行する別の体系を導入しないでください。

ステップ 3 — 新しいコンポーネントすべてに Anti-Slop Test を適用します（SKILL.md より）：

• コンポーネント名は汎用的ではなく、ドメイン固有のものにします。Card／Box／Item よりも MetricCard／PricingTier／InviteRow が適しています。
• コンポーネントが汎用的なもの（「タイトルと説明があるカード」など）なら、インライン構成にすべきではないか検討します。時期尚早な抽象化は、繰り返しよりも望ましくありません。

ステップ 4 — すべての呼び出し箇所を更新します。 中途半端な移行はしないでください。

調整不可 — DRY は調整できません。

参照する資料：references/layout.md（構成パターン）、references/typography.md と references/color.md（トークンの命名）、およびプロジェクトの既存コンポーネントライブラリ（作成前にスキャンします）。

出力：

1. 新しいコンポーネントファイルとトークンの追加分。
2. すべての呼び出し箇所の更新を示す表：

ファイル	変更前	変更後

3. 1 行の差分：「コンポーネントを N 個、トークンを M 個抽出しました。更新した呼び出し箇所：X。」

次のステップ： /tokens — 今回一元化した値をトークンの基盤（第 2 段階）に移します。