colorize

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

$ARGUMENTS の UI に色を追加してください。ui-craft スキルを読み込んでください。

ルール（SKILL.md より）： 90％以上をニュートラルカラーにし、アクセントカラーはひとつ、ビューポートあたりの適用箇所は3～5か所にします。何かを追加する前に、このルールを再確認してください。色を増やしても、デザイン性が高まるわけではありません。

何かを変更する前に、ブランドについて確認してください。 ブランドカラーがある場合は、それを使用してください。ない場合は、OKLCH で2～3個の候補を提示してください。oklch(0.67 0.19 45) のような暖色と、oklch(0.60 0.18 250) のような寒色をひとつずつ含めてください。青をデフォルトにしないでください。

色を使うべき場所：

• プライマリ CTA の背景。
• 重要な指標の色合い。控えめな背景には約8％の不透明度でアクセントカラーを使い、数値自体にはアクセントカラーを最大の強さで使います。
• 現在のナビゲーション項目のアクティブ状態（下線、ドット、または控えめな色合いからひとつ選択）。
• ステータスドット（成功／警告／危険）。6～8px で、ピル型にしないでください。
• フォーカスリング（:focus-visible）。

色を使わない場所（アンチスロップ領域）：

• 見出しのグラデーションテキスト。
• すべてのカードに付ける色付きの左枠または上枠。
• すべてのタグ／ラベルに付ける統一されたチップ。
• 「色」を加えるための絵文字アイコン。
• tabular-nums とシンプルな ↑／↓ のほうがすっきり読める場合の、緑／赤のトレンド矢印。

ノブの条件（VISUAL_DENSITY）：

• ≤ 4 → アクセントカラーはひとつのみ、適用箇所は最大3か所。
• 5-7 → アクセントカラーはひとつ、適用箇所は3～5か所。ステータスドットを使用できます。
• 8+ → 単一のアクセントカラーに加えて、セマンティックパレット（成功／警告／危険）も使用できます。ダッシュボードやデータ UI では、その価値があります。

色を使いすぎている場合は、減らしてください。

UI がすでに色で主張しすぎている場合、このコマンドでは色も削除します。

1. ビューポートごとにアクセントカラーの数を数えます。 1～3色に減らします。プライマリ CTA のアクセントカラーは維持し、それ以外は実際のステータスを表すセマンティックカラー（成功／警告／危険）でない限り、ニュートラルにします。
2. 装飾的な色を抑えます。 背景パターン、意味のない色付きカード、すべてのリスト項目に付ける色付きの左枠、見出しのグラデーション、すべてのタグに付ける色付きのピルを取り除きます。
3. セマンティックカラーは残し、装飾色は削ります。 ステータスドット、フォーカスリング、アクティブなナビゲーション項目の下線は残します。装飾目的の色は取り除きます。

確認するリファレンス： references/color.md（OKLCH、トークン、ダークモード、コントラスト）、references/accessibility.md（AA／AAA のコントラスト比）。

出力： コードを直接編集してください。リテラルの hex 値は CSS 変数（--color-accent、--color-accent-tint）に置き換えてください。既存のトークン命名規則がある場合は、それに従ってください。Review Format の表を出力してください。色を適用する箇所ごとに1行とし、テキストに使う色については比率チェック（AA／AAA）を記載してください。

次のステップ： /tokens — 色に関する決定事項を永続的なトークンの基盤に反映し、このセッション後も維持されるようにします（第2段階）。