1LunarVeil/frontend-aesthetics

フロントエンドの美学 (Frontend Aesthetics)

frontend-design は方向性を定めます。つまり、特定の方向性にコミットし、誰も選んでいないデフォルト値を避けることです。このスキルは、それらの選択を検証可能にするための決定ルール、数値、先行事例データ、およびチェックを提供します。必要なときに参照するステップ名を開いてください。事前にすべてを読む必要はありません。

1. 最初にプロジェクトのルールを読む

• デザインに入る前に、概要や契約書を探してください: DESIGN.md、PRODUCT.md、トークンファイル (tokens.css、theme.*、tailwind.config.*)、または FRONTEND_CONTRACT.md のような契約書。これらはこのスキルのデフォルト値よりも優先されます。
• プロジェクトが視覚的な値をトークンを介してルーティングしている場合、コンポーネント内の新しい生の hex、px、または rgba 値は、スタイルの選択ではなく、ファインディング（発見事項）です。
• すでに機能しているものを維持してください: テーマ切り替え、i18nキー、アクセシビリティ動作、既存のコンポーネント。アプリ全体ではなく、求められたスコープをリスタイルしてください。

2. ブリーフ (概要)

references/principles.md に記述されているブリーフを作成してください: 主題、対象者とコンテキスト、メイン画面の役割、密度、言語、および5つの次元（タイポグラフィ、カラー、レイアウト、モーション、ディテール）。3つの拒否事項を追加します: このデザインが似てはいけないデフォルト値。ユーザーが好みを説明していない場合は、1つの方向性を提案し、その理由を述べてください。ユーザーに質問しないでください。

3. 先行事例

スキルのベースディレクトリから以下を実行します:

python scripts/design_lookup.py "saas dashboard dark" --ux --motion

英語のキーワードを使用してください。出力は、一致する製品タイプ、そのスタイル、コントラストチェック済みのテキストとUIペアを備えたパレット、タイポグラフィのペアリング、および推論ルールを提供します。これを証拠として扱い、答えとして扱わないでください。最初のスタイルは、多くの場合、高密度ツールには適さないトレンドピック（グラスモーフィズム、ネオン、ベントー）です。テキストペアは192のパレット行のうちの1つのみで失敗しますが、ほとんどのパレットは背景に対するコントラスト比が3:1未満の境界線を持つため、使用前にすべてのパレットでUIペアをチェックする必要があります。

4. 方向性

references/directions.md から1つの方向性を選ぶか、独自の方向性を定義し、それがこのブリーフに適合する理由と、最も近い代替案が適合しない理由を述べてください。大胆さは1つの場所に集中させます: 1つのシグネチャ要素。その周りのすべては規律正しくします。

5. コンポーネントより先にトークン

最初に変数としてカラーロール、タイプスケール、スペーシング、半径、エレベーション、モーション時間を定義します (references/color-and-type.md、references/layout-and-motion.md)。出荷するすべてのテキストペアをチェックします:

python scripts/wcag.py "#1f2937" "#ffffff" "#556070" "#f6f7f9"

6. 構築

ハッピーパスだけでなく、すべての状態をカバーします (references/components-and-states.md)。コピーをプロダクトの言語で保持し、最も長い翻訳をテストします。

7. 報告前に検証

• レンダリングして見てください。python scripts/visual_capture.py <url> --out shots --matrix は、デフォルト、150%スケール、狭いビュー、スマートフォンビューを提供し、フレームが落ち着くのを待ち、コンソールエラーを報告します。references/visual-review.md を読んでください。キャプチャなしのレビューはビジュアルレビューではありません。
• 変更後、再度キャプチャし、scripts/image_diff.py before.png after.png を実行します。変更された領域が、あなたが変更したと主張するものと一致しない場合、その主張は間違っています。
• python scripts/slop_scan.py <changed paths>。終了ステータス1は、ブロックするファインディングがあることを意味します。
• 実際に出荷したすべてのテキストペアとUIペアのコントラスト (wcag.py)。
• キーボードのみのパス、モーション低減のパス、および最悪ケースのデータを使用したブレークテスト。
• コンソールエラーは失敗です。blank として報告されたキャプチャも同様です。unsettled として報告されたものは疑わしいものとして扱います。

ブラウザに到達できない場合、「視覚的に検証されていません」と書き、スキップした状態を名前として挙げ、レンダリングされたUIがどのように見えるかについては何も主張しないでください。

8. 報告

方向性とその理由を名前として挙げ、トークンブロックを指定し、各検証をそのコマンドと結果とともにリストします。検証されなかったものをリストします。

基本ルール（外観と引き換えにしてはいけないもの）

• テキストのコントラストは少なくとも4.5:1。大きなテキスト（24px、または18.66px太字）およびUI境界線またはフォーカスインジケータは少なくとも3:1が必要。
• すべてのインタラクティブ要素には、ホバー状態とは異なる、可視のキーボードフォーカスインジケータがあります。
• 色だけでは意味を伝えてはいけません。
• モーションは prefers-reduced-motion を尊重します。1秒間に3回以上点滅するものはありません。
• 本文テキストは、ウェブでは少なくとも16px、高密度デスクトップUIでは14px。12px未満のテキストはありません。
• すべての状態が存在します: ローディング、空、エラー、無効、部分データ。
• プレースホルダーコピーは出荷されません。エラーは何が起こったかと次に何をすべきかを示します。
• テキストは最も長い現実的な文字列に耐えます: 翻訳、CJK、長いパス、モデル名。

テイストルール

• 1つの支配的なニュートラルがほとんどの作業を行います。1つのアクセントは画面の約10%以下をカバーします。成功、警告、危険の色はテーマ間で固定されたままです。
• 最大2つのタイプファミリーと、必要に応じてモノスペースフェイス。1つのスケール比率。階層は、ボックスの前にサイズ、ウェイト、色、スペースから生まれます。
• より少ない境界線とより少ないネストされたカード。1つの小さなスケールからの半径。パレットに合わせた色合いのシャドウ。最大3つのエレベーションレベル。
• モーション: 画面ごとに1つの意図的な瞬間、transform と opacity のみ、セッション中に何度も繰り返されるアクションにはアニメーションなし。
• コピー: 文頭のみ大文字、平易な動詞、ボタン、結果メッセージ、メニュー内のアクションに同じ名前。

選択テスト

すべてのデフォルト（フォント、パレット、半径、シャドウ、レイアウト、アイコンセット）は、このブリーフのために選ばれなければなりません。理由を挙げられない場合は、変更してください。あなたが選んだデフォルトは「スラップの兆候」(tell) ではありません。references/anti-slop.md は、一般的な tell と、それぞれをフラグするスキャナールールをリストしています。

ファイル

• references/principles.md: 決定順序、ブリーフテンプレート、拒否事項。
• references/directions.md: 検証済みの開始トークンを備えた9つの方向性。
• references/color-and-type.md: パレット、ダークモード、コントラスト、タイプスケール、フォント読み込み、CJK。
• references/layout-and-motion.md: グリッド、密度、スペーシング、半径、エレベーション、モーション。
• references/components-and-states.md: コンポーネント、状態マトリックス、コピー、ブレークテスト。
• references/desktop-app.md: WebView およびデスクトップアプリ向けのルール。
• references/anti-slop.md: tell、それらがデフォルトとして読まれる理由、質問すべきこと、スキャナールールID。
• references/critique.md: レビュー手順、9つの柱、重大度、出力形式。
• references/visual-review.md: UIのレンダリング、キャプチャ、読み取り、再差分の方法。
• references/sources.md: 各ルールの出典と、意図的に使用しなかったもの。
• scripts/wcag.py、scripts/design_lookup.py、scripts/slop_scan.py、scripts/visual_capture.py、scripts/image_diff.py: 読み取り専用、サードパーティパッケージなし、ネットワーク不要。python が PATH にない場合は py -3 を使用。
• data/: ui-ux-pro-max からベンダーされた MIT ライセンスの CSV データ（data/PROVENANCE.md を参照）。