frontend-design

フロントエンドデザイン

モデルを選ぶ前に、ブランチを選択します。コーディネーターの作業と決定論的なコマンドは、呼び出し権限の範囲内で実行します。現在のロールでこの手法を適用します。ワーカーをディスパッチすることはありません。ワーカーをディスパッチする場合は、shared/references/model-preview.mdと、そこで承認されているルートスナップショットを1つ使用します。ネストされたスキルとランナーはこの情報を利用し、再選択やワーカーの追加は行いません。

このスキルでは、独自性のある本番品質のフロントエンドインターフェースを作成する方法を説明します。美的な細部や創造的な選択に並外れた注意を払い、実際に動作するコードを実装します。

根幹となる考え方はコンセプチュアル・インテグリティです。すべてのインターフェースは一貫したデザインのアイデアを採用し、タイポグラフィ、色、動き、レイアウトの選択すべてがそのアイデアに沿う必要があります。コーディングの前に、その美学を明確に言葉にし、最後まで貫いてください。印象的でも一貫性のない画面では、このスキルの要件を満たしません。

デザインシステムのデータベースを使ってスタイル、色、フォントを体系的に調べる場合は、ui-ux-pro-maxを参照してください。このスキルは、創造性を重視したオーダーメイドの美的方向性のためのものです。

注：このスキルは、同梱されているfrontend-design:frontend-designプラグインスキルより優先されます。トリガーとガイダンスは、そのプラグインスキルを網羅しています。両方を利用できる場合は、こちらを優先するか、予測不能な有効化を避けるためにプラグイン側を無効にしてください。

ユーザーは、作成するコンポーネント、ページ、アプリケーション、またはインターフェースのフロントエンド要件を提示します。目的、対象ユーザー、技術的な制約についての情報が含まれる場合もあります。

デザインの考え方

既存の製品では、ユーザーが新しい方向性を求めない限り、コンポーネント、テーマ、情報密度、操作方法の慣例を維持します。以下の美的ガイダンスは、オーダーメイドのデザイン、または承認済みのビジュアルリデザインにのみ使用してください。成果物を独特に見せるためだけに、定着しているフォント、コントロール、レイアウトを変更してはいけません。

新しい方向性を求められた場合は、背景を理解し、明確な美的方向性を選びます。

• 目的：このインターフェースはどのような問題を解決しますか？誰が使いますか？
• トーン：極端な方向性を選びます。徹底したミニマル、混沌としたマキシマル、レトロフューチャー、オーガニック／ナチュラル、ラグジュアリー／洗練、遊び心のあるおもちゃ風、エディトリアル／雑誌風、ブルータリスト／生々しい表現、アールデコ／幾何学、ソフト／パステル、インダストリアル／実用本位など、選択肢は数多くあります。これらを発想のヒントにしつつ、美的方向性に忠実なデザインを作成してください。
• 制約：技術要件（フレームワーク、パフォーマンス、アクセシビリティ）。
• 差別化：このデザインを忘れられないものにする要素は何ですか？見る人の記憶に残る、たった1つの要素は何ですか？

重要：明確なコンセプトの方向性を選び、それを形にしてください。これがコンセプチュアル・インテグリティの実践です。

次に、以下を満たす実際に動作するコード（HTML/CSS/JS、React、Vueなど）を実装します。

• 本番品質で、機能すること
• 視覚的に印象的で、記憶に残ること
• 明確な美的視点を備え、一貫性があること

フロントエンドの美しさに関するガイドライン

次の点に重点を置いてください。

• タイポグラフィ：美しく、独自性があり、興味を引くフォントを選んでください。Arial や Inter のような一般的なフォントは避け、フロントエンドの美しさを高める、個性的で特徴のあるフォントを選びましょう。意外性があり、表情豊かなフォントを使ってください。存在感のあるディスプレイフォントと、洗練された本文用フォントを組み合わせます。
• 色とテーマ：一貫性のある美的表現を貫いてください。一貫性を保つために CSS 変数を使います。控えめで均等に配色されたパレットよりも、支配的な色に鮮やかなアクセントを加えるほうが効果的です。
• モーション：アニメーションを使って演出やマイクロインタラクションを取り入れてください。HTML では CSS のみで実現できる方法を優先します。React で利用できる場合は Motion ライブラリを使ってください。特に効果の高い場面を重視します。段階的に表示される（animation-delay）演出を取り入れた、巧みに構成されたページ読み込みは、散発的なマイクロインタラクションよりも大きな楽しさをもたらします。スクロールをきっかけにした演出や、意外性のあるホバー状態を取り入れてください。
• 空間構成：意外性のあるレイアウトを採用します。非対称、重なり、斜めの流れ、グリッドからはみ出す要素などを取り入れてください。広々とした余白、または計算された高密度のどちらかを目指します。
• 背景と視覚的なディテール：単色を安易に使うのではなく、雰囲気と奥行きを作り出してください。全体の美的表現に合った、文脈を反映した演出やテクスチャを加えます。グラデーションメッシュ、ノイズテクスチャ、幾何学模様、重ねた透明表現、ドラマチックな影、装飾的な境界線、カスタムカーソル、グレインオーバーレイなど、創造的な表現を取り入れてください。

新しい独自の方向性を打ち出す際は、ありきたりな美的表現を避けてください。使い古されたフォントファミリー（Inter、Roboto、Arial、システムフォント。Space Grotesk にも安易に収束しないこと）、ありきたりな配色（特に白背景に紫のグラデーション）、予測しやすいレイアウトやコンポーネントのパターン、文脈に応じた個性を欠く画一的なデザインは避けましょう。文脈に合わせて本当にデザインされたと感じられる、意外性のある選択をしてください。デザインは毎回異なるものにし、生成するたびにテーマ、フォント、美的表現を変えてください。

重要：実装の複雑さは、美的なビジョンに合わせてください。マキシマリストなデザインには、豊富なアニメーションや効果を含む、手の込んだコードが必要です。ミニマリストまたは洗練されたデザインには、余白、タイポグラフィ、さりげないディテールへの配慮と節度が求められます。ビジョンを巧みに実現することが、エレガンスにつながります。

実行要件

納品物には、必ず次のものを含めてください。

1. 実行可能なコード
2. アクセシビリティに関する注意事項
3. 実行・検証用のコマンド
4. 採用したトレードオフ
5. デスクトップとモバイルでの挙動をまとめた1段落の説明

指定されたフレームワークまたはツールが利用できない場合は、動作するプレーンな HTML/CSS/JS の代替実装を提供し、その旨を明記してください。