フロントエンドデザイン
概要
この公開インテイクコピーは、https://github.com/tech-leads-club/agent-skills から packages/skills-catalog/skills/(design)/frontend-design を、その出所を隠蔽することなく、ネイティブのOmni Skills編集形状にパッケージ化したものです。
オペレーターが、上流のワークフロー、サポートファイル、リポジトリコンテキストをそのまま維持しつつ、パブリックバリデーターとプライベートエンハンサーが通常の下流処理を継続できるようにする場合に使用します。
このインテイクは、コピーされた上流ファイルをそのまま維持し、metadata.jsonのexternal_sourceブロックとORIGIN.mdをレビューのための来歴アンカーとして使用します。
このスキルは、ありきたりな「AIスロップ」美学を避け、差別化されたプロダクショングレードのフロントエンドインターフェースの作成をガイドします。美的ディテールと創造的な選択に特に注意を払い、実際に動作するコードを実装します。
公開見出しにうまくマッピングできなかったインポート元のセクションも、以下またはサポートファイル内に保持されています。注目すべきインポートセクション: デザインディレクション、AIスロップテスト。
このスキルを使用するタイミング
このセクションをトリガーフィルターとして使用します。オペレーターがファイルをロードしたり、コマンドを実行したり、プルリクエストを開いたりする前に、アクティベーションの境界を明確にします。
- リクエストがインポート元の意図と明確に一致する場合に使用: 「差別化された、プロダクションレベルのフロントエンドインターフェースを高品質なデザインで作成します。ユーザーがWebコンポーネント、ページ、アーティファクト、ポスター、アプリケーションの構築を依頼した場合に使用します。創造的で洗練された...」
- オペレーターがプロセスを最初から書き直す代わりに、上流のワークフローの詳細を保持する必要がある場合に使用。
- 回答、PR、またはレビューパケット内で来歴を可視化する必要がある場合に使用。
- コピーされた上流の参照、例、またはスクリプトが回答を実質的に改善する場合に使用。
- ワークフローがプライベートエンハンサーに引き継がれる前に、公開インテイクリポジトリでレビュー可能な状態を保つ必要がある場合に使用。
操作テーブル
| 状況 | 開始場所 | 重要な理由 |
|---|---|---|
| 初回使用時 | metadata.json | コピーされたワークフローに触れる前に、external_sourceブロックを通じてリポジトリ、ブランチ、コミット、インポートパスを確認します |
| 来歴レビュー | ORIGIN.md | レビュー担当者に、インポート元の平易な監査証跡を提供します |
| ワークフロー実行 | references/color-and-contrast.md | 実行内容を実質的に変更する最小のコピーファイルから始めます |
| サポートコンテキスト | references/interaction-design.md | パッケージ全体をロードせずに、次に適切なコピー元ファイルを追加します |
| 引き継ぎ判断 | ## 関連スキル | タスクが逸脱した場合に、オペレーターがより強力なネイティブスキルに切り替えるのに役立ちます |
ワークフロー
このワークフローは、意図的に編集上および運用上の両方の性質を持っています。インポート元のソースをオペレーターにとって有用に保ちつつ、ダウンストリームのエンハンサーフローに供給する公開インテイク基準を満たします。
- ユーザーの目標、インポートされたワークフローの範囲、およびこのスキルがタスクに対して適切なルーターであるかどうかを確認します。
- コピーされた上流のサポートファイルをロードする前に、概要と来歴ファイルを読みます。
- 現在のリクエストの結果を実質的に変更する参照、例、プロンプト、またはスクリプトのみをロードします。
- 来歴とソースの境界を作業メモで明示的に保ちながら、上流のワークフローを実行します。
- 上流の期待値と、コピーされたファイルで指摘できる証拠に対して結果を検証します。
- 作業がこのインポートされたワークフローの中心領域から外れた場合は、関連スキルにエスカレーションまたは引き継ぎます。
- マージまたはクローズの前に、何が使用され、何が変更され、レビュー担当者がまだ検証する必要があるものを記録します。
インポートされたワークフローノート
インポート: デザインディレクション
大胆な美的方向性にコミットします:
- 目的: このインターフェースはどのような問題を解決しますか？誰が使用しますか？
- トーン: 極端なものを選んでください: 極限のミニマリズム、マキシマリズムのカオス、レトロフューチャー、オーガニック/ナチュラル、ラグジュアリー/洗練、遊び心/おもちゃのような、エディトリアル/雑誌、ブルータリズム/生々しい、アールデコ/幾何学的、ソフト/パステル、インダストリアル/実用的など。選択できるフレーバーはたくさんあります。これらをインスピレーションとして使用しますが、美的方向性に忠実なものをデザインしてください。
- 制約: 技術的要件（フレームワーク、パフォーマンス、アクセシビリティ）。
- 差別化: 何がこれを忘れられないものにしますか？誰かが覚えているであろう唯一のことは何ですか？
重要: 明確な概念的方向性を選択し、それを正確に実行してください。大胆なマキシマリズムと洗練されたミニマリズムの両方が機能します—鍵は強度ではなく、意図性です。
次に、以下のような動作するコードを実装します:
- プロダクショングレードで機能的
- 視覚的に印象的で記憶に残る
- 明確な美的観点でまとまりがある
- 細部に至るまで細心の注意を払って洗練されている
例
例1: 上流のワークフローを直接依頼する
@frontend-design を使用して <task> を処理します。コピーされた上流のワークフローから始め、結果を変更するファイルのみをロードし、回答内で来歴を可視化してください。
説明: オペレーターがインポートされたワークフローを必要とするが、リポジトリ全体は必要ない場合の最も安全な出発点です。
例2: 来歴に基づいたレビューを依頼する
metadata.json と ORIGIN.md に対して @frontend-design をレビューし、どのコピーされた上流ファイルを最初にロードするか、その理由を説明してください。
説明: 出所とファイル選択の正確で監査可能な説明が必要な場合、レビューやトラブルシューティングの前にこれを使用します。
例3: 実行前にコピーされたサポートファイルを絞り込む
<task> に対して @frontend-design を使用します。結果を変更するコピーされた参照、例、またはスクリプトのみをロードし、進める前にファイル名を明示的に指定してください。
説明: これにより、デフォルトでコピーされたパッケージ全体をロードする代わりに、スキルを段階的な開示に沿わせることができます。
例4: レビューアーパケットを構築する
コピーされた上流ファイルと来歴を使用して @frontend-design をレビューし、マージ前のギャップを要約してください。
説明: PRが人間のレビューを待っていて、繰り返し可能な監査パケットが必要な場合に役立ちます。
インポートされた使用上の注意
インポート: 例
例1: 強い美学を持つランディングページ
ユーザーの発言: 「他のSaaSのように見えない、開発者ツール製品のランディングページを構築してください。」 アクション: 大胆な方向性（例: ブルータリズムまたはエディトリアル）を選び、特徴的なタイプの組み合わせとまとまりのあるパレットを選択し、流動的なスペーシングと1つの明確なフォーカルポイントで実装します。カードインカードやヒーローメトリックの決まり文句を避けます。 結果: 明確な階層、記憶に残るタイポグラフィ、そして一般的なAIの兆候（紫のグラデーション、太いアクセントボーダーのある角丸カード）がない単一ページレイアウト。
例2: ダッシュボードまたはアプリUI
ユーザーの発言: 「ダークテーマの分析用ダッシュボードを作成してください。」 アクション: 特定のダークな美学（例: 色味を帯びたニュートラルを使用した洗練されたダーク、デフォルトのグローオンブラックではない）にコミットします。パネルにはコンテナクエリを使用します。考慮されたモーションモーメントを1つ追加します（例: 千鳥状のリストロード）。空の状態が役立つようにします。 結果: 意図的に設計されたと感じられる機能的なダッシュボード—明確なパレット、シアン/紫のグローなし、明確なデータ階層とレスポンシブな動作。
例3: ポスターまたはマーケティングアーティファクト
ユーザーの発言: 「フロントエンドパフォーマンスに関するカンファレンストークのポスターを作成してください。」 アクション: 強いタイポグラフィまたは視覚的なコンセプトを選択します。モジュラータイプスケールと限定されたパレットを使用します。一般的なストックフォト＋見出しのレイアウトを避けます。 結果: デザインされたアーティファクトとして単独で成立するポスター—記憶に残るタイプと構成、テンプレートの埋め込みではありません。
ベストプラクティス
生成された公開スキルを、上流リポジトリのレビュー可能なパッケージングレイヤーとして扱います。目標は、来歴を明示的に保ち、実行を実質的に改善するコピーされたソースマテリアルのみをロードすることです。
-
タイポグラフィ → スケール、ペアリング、ローディング戦略については、タイポグラフィリファレンスを参照してください。
- 美しく、ユニークで、興味深いフォントを選択してください。
- 特徴的なディスプレイフォントと洗練されたボディフォントを組み合わせてください。
- 推奨: 流動的なサイズ変更（clamp）を備えたモジュラータイプスケールを使用する
- 推奨: フォントの太さとサイズを変えて、明確な視覚的階層を作成する
- 非推奨: 使い古されたフォント（Inter、Roboto、Arial、Open Sans、システムデフォルト）を使用する
- 非推奨: 技術/開発者の雰囲気を出すための怠惰な省略表現として、等幅フォントを使用する
- 非推奨: すべての見出しの上に角丸の大きなアイコンを配置する—価値がほとんどなく、サイトがテンプレートのように見える ### カラー＆テーマ → OKLCH、パレット、ダークモードについては、カラーリファレンスを参照してください。
- まとまりのあるパレットにコミットします。
- 優勢な色と鋭いアクセントは、控えめで均等に分散されたパレットよりも優れています。
- 推奨: 知覚的に均一でメンテナンス可能なパレットのために、最新のCSSカラー関数（oklch、color-mix、light-dark）を使用する
- 推奨: ニュートラルをブランドの色相に向けて色味付けする—微妙なヒントでも無意識の結束を生み出す
- 非推奨: 色付きの背景にグレーのテキストを使用する—洗い流されて見える；代わりに背景色のシェードを使用する
- 非推奨: 純粋な黒(#000)または純粋な白(#fff)を使用する—常に色味を付ける；純粋な黒/白は自然界には存在しない
- 非推奨: AIカラーパレット（暗背景にシアン、紫から青へのグラデーション、暗背景のネオンアクセント）を使用する
- 非推奨: 「インパクト」のためにグラデーションテキストを使用する—特にメトリクスや見出しで；装飾的で意味がない
- 非推奨: 光るアクセントを付けたダークモードをデフォルトにする—実際のデザイン決定を必要とせず「クール」に見える ### レイアウト＆スペース → グリッド、リズム、コンテナクエリについては、空間リファレンスを参照してください。
インポートされた操作上の注意
インポート: フロントエンド美学ガイドライン
タイポグラフィ
→ タイポグラフィリファレンス（スケール、ペアリング、ローディング戦略）を参照してください。
美しく、ユニークで、興味深いフォントを選択してください。特徴的なディスプレイフォントと洗練されたボディフォントを組み合わせてください。
推奨: 流動的なサイズ変更（clamp）を備えたモジュラータイプスケールを使用する 推奨: フォントの太さとサイズを変えて、明確な視覚的階層を作成する 非推奨: 使い古されたフォント（Inter、Roboto、Arial、Open Sans、システムデフォルト）を使用する 非推奨: 技術/開発者の雰囲気を出すための怠惰な省略表現として、等幅フォントを使用する 非推奨: すべての見出しの上に角丸の大きなアイコンを配置する—価値がほとんどなく、サイトがテンプレートのように見える
カラー＆テーマ
→ カラーリファレンス（OKLCH、パレット、ダークモード）を参照してください。
まとまりのあるパレットにコミットします。優勢な色と鋭いアクセントは、控えめで均等に分散されたパレットよりも優れています。
推奨: 知覚的に均一でメンテナンス可能なパレットのために、最新のCSSカラー関数（oklch、color-mix、light-dark）を使用する 推奨: ニュートラルをブランドの色相に向けて色味付けする—微妙なヒントでも無意識の結束を生み出す 非推奨: 色付きの背景にグレーのテキストを使用する—洗い流されて見える；代わりに背景色のシェードを使用する 非推奨: 純粋な黒(#000)または純粋な白(#fff)を使用する—常に色味を付ける；純粋な黒/白は自然界には存在しない 非推奨: AIカラーパレット（暗背景にシアン、紫から青へのグラデーション、暗背景のネオンアクセント）を使用する 非推奨: 「インパクト」のためにグラデーションテキストを使用する—特にメトリクスや見出しで；装飾的で意味がない 非推奨: 光るアクセントを付けたダークモードをデフォルトにする—実際のデザイン決定を必要とせず「クール」に見える
レイアウト＆スペース
→ 空間リファレンス（グリッド、リズム、コンテナクエリ）を参照してください。
変化に富んだスペーシングを通じて視覚的なリズムを作成します—どこでも同じパディングではありません。非対称性と予想外の構成を取り入れます。強調のために意図的にグリッドを破ります。
推奨: 変化に富んだスペーシング（タイトなグループ、広々とした区切り）を通じて視覚的なリズムを作成する 推奨: 大きな画面で呼吸するclamp()を使用した流動的なスペーシングを使用する 推奨: 非対称性と予想外の構成を使用し、強調のために意図的にグリッドを破る 非推奨: すべてをカードでラップする—すべてにコンテナが必要なわけではない 非推奨: カードの中にカードをネストする—視覚的なノイズ、階層を平坦化する 非推奨: 同一のカードグリッド（同じサイズのカードにアイコン＋見出し＋テキスト、無限に繰り返される）を使用する 非推奨: ヒーローメトリックレイアウトテンプレート（大きな数字、小さなラベル、サポート統計、グラデーションアクセント）を使用する 非推奨: すべてを中央揃えにする—左揃えのテキストと非対称なレイアウトは、よりデザインされた感じがする 非推奨: どこでも同じスペーシングを使用する—リズムがなければ、レイアウトは単調に感じられる
視覚的な詳細
推奨: ブランドを強化する、意図的で目的のある装飾要素を使用する 非推奨: あらゆる場所でグラスモーフィズムを使用する—ぼかし効果、ガラスカード、グローボーダーを目的的にではなく装飾的に使用する 非推奨: 片側に太い色付きの境界線がある角丸要素を使用する—ほとんど意図的に見えない怠惰なアクセント 非推奨: 装飾としてスパークラインを使用する—洗練されて見えるが、意味のあるものは何も伝えない小さなチャート 非推奨: 一般的なドロップシャドウを持つ角丸長方形を使用する—安全で、忘れられやすく、どんなAI出力でもあり得る 非推奨: 本当に他に良い選択肢がない場合を除きモーダルを使用する—モーダルは怠惰である
モーション
→ モーションリファレンス（タイミング、イージング、動きの軽減）を参照してください。
インパクトの高い瞬間に焦点を当てます：千鳥状のリビールを伴う、よく調整された1回のページロードは、散在するマイクロインタラクションよりも多くの喜びを生み出します。
推奨: 状態変化（エントランス、エグジット、フィードバック）を伝えるためにモーションを使用する 推奨: 自然な減速のために指数関数的なイージング（ease-out-quart/quint/expo）を使用する 推奨: 高さのアニメーションには、高さを直接アニメーション化する代わりに、grid-template-rowsのトランジションを使用する 非推奨: レイアウトプロパティ（width, height, padding, margin）をアニメーション化する—transformとopacityのみを使用する 非推奨: バウンスやエラスティックなイージングを使用する—時代遅れで安っぽく感じられる；実際の物体はスムーズに減速する
インタラクション
→ インタラクションリファレンス（フォーム、フォーカス、ローディングパターン）を参照してください。
インタラクションを高速に感じさせます。楽観的UIを使用します—すぐに更新し、後で同期します。
推奨: 段階的な開示を使用する—シンプルに始め、インタラクションを通じて洗練さを明らかにする（基本オプションを最初に、拡張可能なセクションの背後に高度なオプションを配置する
…
[翻訳のため一部省略]