color-cli

Color CLI

@kood/color-cli を使用して、カラーを hex、rgb、oklch 間で正確に変換します。

<output_language>

ユーザー向けの成果物、保存されたアーティファクト、レポート、計画、生成されたドキュメント、要約、引き継ぎメモ、コミット／メッセージの草案、検証メモは、この正規スキルファイルが英語で書かれている場合でも、デフォルトですべて韓国語にしてください。

ソースコードの識別子、CLI コマンド、ファイルパス、スキーマキー、JSON／YAML のフィールド名、API 名、パッケージ名、固有名詞、引用されたソースの抜粋は、必要な言語または原文のまま保持してください。

ユーザーが明示的に別の言語を指定した場合、既存の対象アーティファクトとの一貫性を保つ必要がある場合、または機械可読な契約で正確な英語のトークンが必要な場合に限り、別の言語を使用してください。ローカライズされたテンプレートや参考資料（例：*.ko.md や *.ko.json）がある場合は、ユーザー向けの成果物ではそれを優先してください。

</output_language>

AI モデルは、行列の精度誤差、色域マッピングの欠落、度とラジアンの混同により、誤った oklch 変換を出力することがよくあります。このスキルは、CSS Color Level 4 に準拠した結果を得るため、カラー変換を @kood/color-cli（culori を使用）に委ねます。

<instruction_contract>

フィールド	契約
意図	モデルがカラーの計算を推測するのではなく、決定論的なカラー変換を行います。
範囲	@kood/color-cli を通じて、単色変換、複数色変換、CSS ファイルのカラー形式変換を行います。
権限	変換値については color CLI の出力を正とし、デザインやパレットの判断はデザインスキルに委ねます。
根拠	該当する場合は、実行したコマンドの出力、色域に関する警告、CSS の変換／スキップの概要を報告します。
ツール	Bash とインストール済みの color コマンドを使用し、oklch／hex／rgb を手動で計算しないでください。
ループ	ループはありません。各リクエストは 1 回の変換処理です。ユーザーから別の値またはファイルが提示された場合にのみ、再実行します。
出力	カラー値については hex、rgb、oklch を返し、ファイル操作については CSS 変換の概要を返します。
検証	CLI がインストールされていることを確認し、color を使って変換を実行し、CSS ファイルの変更は事前に --dry-run でプレビューします。
停止条件	変換後の値または CSS のドライラン／適用の概要を報告した時点で停止します。インストールが妨げになっている場合は、その原因が明らかになった時点で停止します。

</instruction_contract>

<request_routing>

対象となるリクエスト

• 「#ff0000 を oklch に変換して」
• 「rgb(0, 128, 255) の oklch 値は？」
• 「styles.css 内のすべてのカラーを oklch に変換して」
• 「hex から rgb」「oklch から hex」「このカラーを変換して」
• 「この CSS ファイルのカラーを hex に正規化して」

対象外

• カラーパレットの生成やデザインの提案 — デザインスキルを使用してください。
• 色彩理論の説明 — このスキルを使わず、直接回答してください。
• CSS を一から作成すること — 実装スキルを使用してください。

境界の例

• 「oklch(0.7 0.25 140) は何色？」→ このスキルを使用して、対応する hex／rgb を取得します。
• 「ボタンに適した色を選んで」→ デザインに関する質問のため、このスキルは使用しません。

</request_routing>

@kood/color-cli がまだ利用できない場合は、グローバルにインストールしてください。

npm i -g @kood/color-cli

インストールを確認します。

color --help

color コマンドが見つからない場合は、先にインストールしてから続行してください。

単色の変換

ユーザーが特定のカラー値の変換を依頼した場合：

color "<value>"

例：

color "#ff0000"
color "oklch(0.7 0.25 140)"
color "rgb(255, 0, 0)"
color "hsl(0, 100%, 50%)"

JSON 出力の場合（プログラムでの使用に便利です）：

color --json "#ff0000"

複数のカラーを一度に変換する場合：

color "#e63946" "oklch(0.7 0.25 140)" "rgb(0, 128, 255)"

CSS ファイルのカラー変換

ユーザーが CSS ファイル内のすべてのカラーを特定の形式に変換したい場合：

最初にプレビュー（ドライラン）します：

color css <file> --to <format> --dry-run

変更を適用します（ファイル内で直接変更）：

color css <file> --to <format>

対応する変換先の形式：hex、rgb、oklch。

例：

# Preview oklch conversion
color css styles.css --to oklch --dry-run

# Apply hex conversion
color css src/global.css --to hex

# Convert to rgb
color css theme.css --to rgb

### CSS 変換の動作

• ファイル内の hex、rgb、rgba、oklch パターンを自動検出します
• 変換先の形式になっている色はスキップします
• アルファ値を保持します（例：rgba(255,0,0,0.5) → oklch(0.628 0.258 29.23 / 0.5)）
• CSS コメント（/* ... */）内の色は無視します
• 色域外の oklch 値には CSS Color Level 4 の色域マッピングを適用します

<output_interpretation>

単一色の出力

HEX:   #ff0000
RGB:   rgb(255, 0, 0)
OKLCH: oklch(0.6280 0.2577 29.23)

色域マッピングの警告

oklch 値が sRGB 色域外の場合、ツールは彩度を下げ、次のように表示します。

⚠ Color was outside sRGB gamut — CSS Color Level 4 chroma-reduction applied.

これは、明度と色相を維持しながら、元の oklch の彩度を下げて sRGB に収まるようにしたことを意味します。

CSS 変換の概要

styles.css: 12 colors found, 8 converted, 4 skipped

• converted：変換先の形式に変更された色
• skipped：すでに変換先の形式になっている色

</output_interpretation>

• CSS ファイルを変換する際は、必ず最初に --dry-run を使用し、ユーザーの確認後に適用します。
• ユーザーが oklch 値を指定した場合は、手動で計算せず、必ず変換を実行します。AI モデルは oklch と hex の変換を頻繁に誤るためです。
• ユーザーが必要な形式を選べるよう、出力全体（hex、rgb、oklch）を報告します。
• CSS ファイルを操作する場合は、概要（変換済み／スキップの件数）をユーザーに提示します。

<validation_checklist>

• color --help または同等のインストール確認が成功していること、またはインストール不足によるブロッカーが報告されていること。
• 色の値が手動で推定されず、color によって変換されていること。
• CSS ファイルの変換では、インプレース変更の前に --dry-run でプレビューされていること。
• 単一の値では hex、rgb、oklch が、CSS ファイルでは変換済み／スキップの件数が出力に含まれていること。
• 色域マッピングの警告がユーザー向けの結果に保持されていること。

</validation_checklist>