design-doctrine

スキル：デザインの指針

ステップ 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 またはプラグインのインストールを案内して、そこで終了してください。開けなかったファイルの内容を推測してはいけません。

プラグインのルートにある CLAUDE.md はプロジェクトコンテキストとして読み込まれないため、常時参照するブリーフをここに記載しています。デザイン作業に取りかかる前にこれを読み、その後、実際に作業する領域のルールファイルを読み込んでください。

検証プロトコル — ゲートを実行し、結果を主張する

1. 測定していない数値は決して述べないでください。 コントラスト比、「WCAG 合格」または「100%」は、ゲートを実行して実際の出力を報告する場合に限ります。まだ実行していない場合は、「未検証です」と伝えてください。
2. 通常時だけでなく、すべての状態を検証してください。 node ${CLAUDE_SKILL_DIR}/../../../scripts/gate.mjs verify_states.mjs <file> [--dark] はデフォルト、ホバー、フォーカスを測定します。通常時に合格するボタンでも、ホバー時には不合格になることがあります。
3. 完了を報告する前に、次のコマンドを実行してください： node ${CLAUDE_SKILL_DIR}/../../../scripts/accuracy_report.mjs。 実際の N/N の行を報告してください。これは全項目合格か全項目不合格かのどちらかです。
4. ゲートに合わせて実装してください。実装後にゲートを実行するのではありません。 すべて合格するまで修正と再実行を繰り返し、失敗した状態で成功を宣言してはいけません。
5. レンダリングして、目視で確認してください。 ゲートに合格しても、UI が見た目に壊れていることがあります。両方のテーマでハーネスのスクリーンショットを撮り、すべてのコントロールをクリックして、状態が変化することを確認してください。
6. レスポンシブ対応もゲートで検証します： node ${CLAUDE_SKILL_DIR}/../../../scripts/gate.mjs verify_responsive.mjs <file|dir>： 280～951px の範囲で横方向のオーバーフローがないこと、iPhone Duo が含まれること、折り目に対応するページではヒンジ部分を空けていることを確認します。
7. 対象範囲を正直に伝えてください。 ゲートで証明できるのは客観的な正しさです。デザインのセンスは証明できません。センスを確認するには /critique を実行し、自分でも成果物を見て、デフォルトのコンポーネントではなく、以下のセンスに関する事前確認から始めてください。
8. SKIPPED は合格ではありません。 ブラウザーがインストールされていない場合、レンダリングゲートは SKIPPED を出力して 0 で終了し、何も報告しません。単独のレンダリングゲートは DS_REQUIRE_BROWSER=1 を指定して実行し、REQUIRED, FAILING となるようにしてください。そのうえで、フラグを削除するのではなく、npx playwright install chrome で問題を解決してください。

モバイルを基本にする

基本スタイルはスマートフォン向けレイアウトです。画面幅が広い場合のスタイルは min-width で追加します。max-width が禁止されているわけではありません。実際に狭い画面向けに調整する場合や、2 つのブレークポイント間の範囲に適用する場合には適切です。ただし、基本スタイルが広い画面を前提とし、後からモバイル向けの修正を加えるデスクトップファーストのスタイルシートはバグです。

${CLAUDE_SKILL_DIR}/../../../scripts/verify_mobile_first.mjs で測定します。このスクリプトはすべての @media と @container ルールを削除し、残ったスタイルを 320px でレンダリングします。モバイルファーストのページは、基本スタイルがすでにスマートフォン向けレイアウトなので合格します。デスクトップファーストのページでは収まりません。

絶対に出荷しないための2つのルール

ネイティブの<select>は絶対に出荷しないでください。 独自のシェブロンを描画し、コントロールの端にぴったり寄せて余白を設けません。また、appearance: noneとカスタムシェブロンを使うと、システムに合わせるのではなく、プラットフォームと競合します。 ${CLAUDE_SKILL_DIR}/../../../components/forms-advanced.mdにあるListboxまたは Comboboxパターンを使ってください。現在の値を読み上げるボタントリガー、トークンを使って内側に余白を設けたシェブロン、そして完全なキーボード操作（タイプアヘッド、矢印キー、Home/End、Escape、実際に表示を切り替えるaria-expanded）を実装します。ネイティブのselectを使わないなら、アクセシビリティが自動的に確保されるわけではありません。そのため、代替手段はすべての状態、キーボード操作、axeのゲートを通過して初めて合格となります。 ${CLAUDE_SKILL_DIR}/../../../scripts/lint_native_select.pyで測定します。

カード、アラート、トースト、コールアウトの片側だけに色付きのボーダーを付けないでください。 border-left、border-right、border-top、border-bottom、または論理プロパティの border-inline-*やborder-block-*形式は使いません。色の付いた3〜4pxのバーは、左側だけでなくどの方向でも、あらゆる生成UIに見られるありきたりな表現です。レイアウトで確立できていない階層を装飾で補っています。全辺に細いボーダーを付けるか、サーフェスとエレベーションで分け、ステータスは実際のアイコンとテキストで示してください。色だけで伝えてはいけません。 ${CLAUDE_SKILL_DIR}/../../../scripts/slop_tells.mjsでレンダリングを検査し、片側だけのアクセントボーダーがないか確認します。

デザインの事前確認：マークアップを始める前に

ゲートではこの部分を確認できないため、後から発見するのではなく、事前に決めておく必要があります。返信にこのブロックを書いてから、それに沿って作成してください。先に生成するから、生成物らしい仕上がりになってしまいます。

Domain:          fintech | editorial | dev-tool | healthcare | consumer | ...
Audience & tone: expert vs first-time, calm vs energetic, premium vs utilitarian
Mood:            the one adjective the result must earn - "expensive", "precise", "warm"
Motion depth:    none | subtle feedback | expressive choreography
Layout family:   the section sequence you will use, named, varied per section
Reference anchor: an archetype or named system to aim at

以下の項目はそれぞれ、意図的に避けてください。これらは出発点ではなく、欠陥です。

• 同じ重みのカードを3つか4つ並べる。主役を1つにする。
• すべてを中央揃えにする。実際のグリッドで非対称性を使う。
• 左にテキスト、右に画像という同じ行を繰り返す。
• 本文を太字にしただけの見出し。ディスプレイ書体は本文の少なくとも2.5倍のサイズにし、短くまとめ、18〜24chの幅に収める。
• すべてのボックスにドロップシャドウを付ける。ほとんどの要素はフラットにする。
• #000を#fffの上に置く。テーマに沿ったオフブラックをウォームホワイトの上に使う。
• アクセントカラーを複数使う。重みはニュートラルカラーで支える。
• カード、アラート、トースト、コールアウトの片側だけに色付きのボーダーを付ける。全辺に細いボーダーを付けるか、サーフェスで分け、ステータスはアイコンとテキストで示す。色だけで伝えてはいけない。
• UIの文言にエムダッシュを使う。マーケティングの空疎な表現（「高める」「シームレス」「解放する」）、中身のない三段構成、偽のラベル（「SECTION 01」、lorem ipsum）。

詳細とVariance Mandateの全文は次を参照してください。 ${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md。ページ全体またはアプリを作る場合は、パイプラインのステップ1としてこの事前確認を実行するdesign-screenを使ってください。

絶対事項：UI、コード、JSON、文言、コメント、コミットメッセージを含む、出力内の絵文字は一切禁止です。アイコン、箇条書き、ステータスドット、「仕上げ」として使うのも禁止です。絵文字は、機械生成の成果物だと見なされる最大の兆候です。lucideアイコン（インラインSVG、currentColor）か、通常の言葉を使ってください。エムダッシュとエンダッシュも使わないでください。コロン、コンマ、かっこを使います。${CLAUDE_SKILL_DIR}/../../../scripts/check_no_emoji.pyで検査します。

5つの譲れない原則

1. 意図に合ったトークンを使います。 アクションの意味に合うトークンを選びます。 破壊的なアクション（Delete、Remove、Revoke）には、表示されるすべての箇所で action.destructive を適用します。トリガーと確認ダイアログの両方が対象です。青い Delete はバグです。${CLAUDE_SKILL_DIR}/../../../scripts/lint_intent.mjs で測定します。
2. テーマは1つ、信頼できる情報源も1つです。 すべてのページは、アプリのルートで一度だけインポートする1つの CSS 変数レイヤーを通じて、同じ ${CLAUDE_SKILL_DIR}/../../../tokens/*.json から描画します。 ページごとのパレット、ハードコードされた16進数、px、タイミング指定は禁止です。
3. すべてのインタラクティブ要素に8つの状態を実装します。 デフォルト、ホバー、フォーカス、アクティブ、無効、読み込み中（非同期の場合）、エラー（入力の場合）、選択済み（選択可能な場合）です。選択可能な要素では、8つ目の状態も必須です。
4. 画面を主導する要素を1つにします。 すべての画面には、最初に目を引く場所が必要です。また、ディスプレイ用文字のサイズは本文の2.5倍以上にします。同じ大きさのカードが4枚並んでいると、目の行き場がなくなり、画面が自動生成されたように見えます。
5. 出力を完全なものにします。 不完全な出力は壊れた出力です。プレースホルダーではなく、ファイル全体を提出します。N個のコンポーネントを求められたら、N個すべてを提出します。

判断の枠組み

ユーザーのニーズ、アクセシビリティ、一貫性、美しさ、開発者体験の順です。下位の項目のために上位の項目を犠牲にしてはいけません。美しくてもアクセシブルでなければ破綻しており、一貫していても分かりにくければ不適切なパターンです。

詳細を確認する場所

確認するタイミング	ファイル
トークン、パレット、テーマ設定、ダークモード、色に関するあらゆる判断	${CLAUDE_SKILL_DIR}/../../../.claude/rules/tokens-and-color.md
文字のスケール、行の長さ、4px 間隔のリズム	${CLAUDE_SKILL_DIR}/../../../.claude/rules/typography-and-spacing.md
画面やコンポーネントの作成、構成、空の状態	${CLAUDE_SKILL_DIR}/../../../.claude/rules/components.md
監査、またはインタラクティブ要素の仕上げ	${CLAUDE_SKILL_DIR}/../../../.claude/rules/accessibility.md
React、Next.js、SwiftUI、その他のアダプター向けコードの生成	${CLAUDE_SKILL_DIR}/../../../.claude/rules/frameworks.md
デザインレビュー、プロトタイピング、調査、引き継ぎ	${CLAUDE_SKILL_DIR}/../../../.claude/rules/review-and-research.md
美的な方向性、モーション、ボイスとトーン、ガバナンス、QA	${CLAUDE_SKILL_DIR}/../../../.claude/rules/brand-and-operations.md

次に、作業に合った実行可能なスキルを選びます。design-tokens、design-component、 design-code、design-review、a11y-audit、apply-aesthetic、brandkit、 image-to-code、redesign などがあります。まず /grill-me で要件を掘り下げ、 /gate で結果を検証し、/critique で評価します。