ブランドの確立または監査
UIをブランドなしで出荷する工場は、テンプレートを出荷しているに等しい。このスキルは製品に具体的なビジュアルおよび言語的アイデンティティを与えるか、既存のものを監査・拡張し、それを配信エージェントが利用できる形式（BRAND.mdとトークン）で書き留める。アイデンティティ（方向性、パレット、タイプペアリング、ボイス）を管轄する。トークンの構造はdesign-systemスキルに属し、表面の実行はfrontend-designスキルに属する。
| 深度 | 参照先 |
|---|---|
パレット階層、oklchトークン、コントラスト、タイプペアリングと流体スケール | references/color-and-typography.md |
| ボイスのスペクトル、特性、メッセージング階層、一貫性チェックリスト | references/voice-and-messaging.md |
手順
-
検出.
search_loreを呼び出して、ブランド、ポジショニング、ボイス、デザインADRを検索する。リポジトリ内でBRAND.md、DESIGN.md、トークンファイル（*.tokens.json、tokens.css、theme.ts）、カスタムプロパティの:rootブロック、ロゴアセット、マーケティングコピーを探す。製品のREADMEとチケットを読んで、オーディエンスと目的を把握する。判断する：ブランドは存在するか？ -
ブランドが存在する → そのスタイルで監査し拡張する. 自分の好みで置き換えない。
- 必要な品質（手順4）と下記の禁止リストに照らしてスコアリングし、各ギャップをファイルと値で明示する。
- ブランドが使用するすべてのテキスト/背景ペアを、すべてのテーマでWCAGコントラスト（本文4.5:1、大テキストとUIは3:1）に対して測定する — 比率を計算すること。
oklchの明度はコントラスト比ではない。テキストとして不合格のブランドカラーは、より暗いテキストセーフバリアントを取得する。例外は認めない。 - 既存の方向性のギャップを埋める：ホバー/アクティブ段階、不足しているサーフェス階層、ダークバリアント、テキストセーフなアクセント、不足しているセマンティックロール。
-
ブランドがない → 1つの方向性にコミットする そして、それがなぜこの製品とオーディエンスに適しているかを書く：エディトリアル/マガジン、スイス/インターナショナル、ネオ・ブルータリズム、ベントー、リアルな奥行きを伴うグラスモーフィズム、ライトまたはダークラグジュアリー、レトロフューチャリズム。「クリーンミニマル」は方向性ではない。ダークモードは習慣ではなくユーザーのために選ばれる。次に定義する：
- パレット を
oklchトークンで、色ごとに明示された役割とともに記述する：サーフェス（少なくとも2階層）、テキスト（プライマリ、ミュート）、アクセント、およびセマンティックロール success / warning / danger / info — それぞれに、塗りつぶし色がテキストとして不合格の場合のテキストセーフバリアントも含める。 - タイプペアリング — ディスプレイ + テキストファミリー（理由付き。製品がコードやデータを表示する場合はモノも含む）、
clamp()流体スケール、ローディング計画：セルフホスト、サブセット化、1つの重要なウェイトをプリロード、メトリックマッチドフォールバック。 - ボイス — オーディエンス、ワンラインプロミス、3～5のボイス特性（それぞれに「言うこと／言わないこと」のペア）、およびエラーや空状態でボイスがどう変わるか。
- パレット を
-
必要な品質をチェックする. ブランドは、納品されたUIが
frontend-designスキルにリストされている10の品質のうち少なくとも4つ（スケール階層、スペーシングリズム、奥行き、タイポグラフィックキャラクター、セマンティックカラー、設計された状態、構成、雰囲気、明確化するモーション、システム内のデータ可視化）を示すことを可能にしなければならない。4つ以上をBRAND.mdに記述する。 -
成果物を書く.
BRAND.md：方向性と根拠、パレットテーブル（トークン、値、役割、コントラスト結果）、タイプペアリングとスケール、ボイス、提供される品質、未解決の質問。作業がビジュアルの場合、リポジトリの形式（DTCG JSONまたはCSSカスタムプロパティ —design-systemスキルを参照）のトークンファイル、例えば：:root { --color-surface: oklch(98% 0.01 95); --color-text: oklch(22% 0.02 265); --color-accent: oklch(64% 0.19 28); /* 塗りのみ。テキストは --color-accent-text を使用 */ --color-accent-text: oklch(50% 0.19 28); --text-display: clamp(2.5rem, 1rem + 6vw, 6rem); --text-base: clamp(1rem, 0.94rem + 0.3vw, 1.125rem); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); } -
不明な戦略は報告し、発明しない. ポジショニングやオーディエンスが本当に未決定で、チケットがそれを解決していない場合、でっち上げてはいけない。配信スキルとして、
mark_ticket_blockedを具体的な質問とともに呼び出す。ロアシードとして、suggest_loreを未解決の質問を明記してブランドに対して呼び出す。 -
確定させる. 配信スキルとして（チケットのワークツリーブランチで作業している —
git branch --show-currentで確認する）、コミットし、record-evidenceスキルでACごとの証拠を記録（BRAND.mdの差分、コントラストテーブル、品質リスト）したら停止する。ランナーがレビューのために送信する。ロアシードとして、suggest_loreでブランドを提案する。人間が承認するまでは提案のまま留まる。
禁止（監査ではこれらを捕捉しなければならない）
- 均一なスペーシングと階層のないデフォルトのカードグリッド。
- 中央揃えの見出し + グラデーションブロブヒーロー（汎用的なCTA付き）。
- 未修正のライブラリ/Tailwind/shadcnデフォルトを完成デザインとして流用すること。
- すべてのコンポーネントで同一の半径、スペーシング、シャドウ。
- 1つの装飾的なアクセントカラーのみを持つグレーオンホワイト。
- 理由のないデフォルトフォントスタック。理由のない2つ以上のファミリー。
- 4.5:1に失敗するアクセントカラーをボディサイズテキストに使用すること。
- 習慣ではなくフィット感で選ばれる反射的なダークモード。
完了条件
BRAND.mdが1つの方向性とその根拠を述べていること。すべてのパレットペアが測定されたコントラスト結果を持ち、すべてのテーマで合格すること。タイプペアリング、スケール、ローディング計画が定義されていること。ボイスが例示とともに特性を持っていること。4つ以上の必要な品質が指定されていること。未解決の戦略的質問が推測ではなくリストアップされていること。トークンがリポジトリの形式で存在すること。
ルール
- 方向性にコミットし、その理由を述べること。「クリーンミニマル」は不可。
- リテラルではなくトークンを使用すること。これにより配信エージェントが再利用できる。
- 既存のブランドはそのスタイルで拡張すること。好みで上書きしない。
- モーショントークンは
transform/opacity用とする。レイアウトに依存するアニメーションをシステムに組み込まない。 - 不明な戦略は、名前付きの未解決質問として扱い、決して答えを発明しない。