apply-aesthetic

美的デザインの適用

ステップ 0：キットはありますか？ このスキルはキット内のファイルを読み込みます。一度だけ確認してください： ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING KIT_MISSING の場合、インストールされているのはスキルフォルダーのみです。これは npx skills add の実行時に発生します。その旨を明確に伝え、 npx ux-ui-agent-skills init またはプラグインのインストールを案内して、そこで終了してください。開けなかったファイルの内容を推測してはいけません。

アクセシビリティを損なわずに、デザインの方向性を選んで適用します。

手順

1. まずブリーフの推論を行います（必須）。 トークンを扱う前に、業界・分野、対象ユーザーとトーン、結果で実現すべきムードを表す形容詞を 1 つ、モーションの深度、レイアウトファミリーの順序（${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md → Brief Inference + Variance Mandate）を明記します。決定前に生成すると、質の低いデザインになります。
2. ${CLAUDE_SKILL_DIR}/../../../taste/aesthetic-systems.md から方向性を選びます：
   • アーキタイプ（トークンに対応付けられたレシピ）、または
   • 名前付きライブラリーシステム：python3 ${CLAUDE_SKILL_DIR}/../../../scripts/design_systems.py list（または search <term> / show <name>）で参照します。その後、node ${CLAUDE_SKILL_DIR}/../../../scripts/library.mjs get <name> を実行し、表示されたパスにある DESIGN.md を読みます。npm インストールにはインデックスのみが含まれ、仕様は含まれません。そのため、この操作で仕様を取得します（キットに含まれる sha256 と照合します）。仕様がすでにディスク上にある場合、何も取得しません。refused と表示された場合は、仕様を取得できなかったと伝え、代わりにアーキタイプから選んでください。記憶を頼りに仕様を書いてはいけません。
3. aesthetic-systems.md の ライブラリー契約を適用します。semantic.* トークンを選んだシステムのカラーの役割に割り当て直し、タイポグラフィ・スペーシング・角丸・シャドウ・モーションを ${CLAUDE_SKILL_DIR}/../../../tokens/*.json に対応付けます。
4. マッピングした色のペアすべてのコントラストを検証します（${CLAUDE_SKILL_DIR}/../../../scripts/contrast.py / a11y-audit）。ブランドカラーの値が基準を満たさない場合は調整してください。デザインの好みより POUR を優先します。
5. ${CLAUDE_SKILL_DIR}/../../../taste/motion-choreography.md に従ってモーションを追加し、design-taste.md で事前の美的チェックを実行します。

出力

更新または上書きした semantic トークンと、タイポグラフィ・スペーシング・モーションに関するメモを出力し、その後 design-code でレンダリングします。美的チェックとアクセシビリティの両方に合格したことを確認してください。