B16 没入型フロントエンド
1つの守るべき視覚的アイデアを中心に、記憶に残る体験を創り出します。このスキルは、より広範なプロジェクトワークフローを補完するものです。ガバナンス、計画、ビルド、検証、レビューのスキルを置き換えるものではなく、B16 Dev OSを再現するものではありません。
ブリーフを確立する
質問をする前に、利用可能なすべてのコンテキストを消化してください。証拠が裏付ける場合にのみ事実を推測し、そのソースを引用するか推測であることを明記し、方向性を根本的に変えうるギャップについてのみ質問してください。方向性がまだ承認されていない場合は、briefing.md を参照してください。
実装前に、ビジュアルテーゼ、コンテンツ階層、ヒーローの焦点、タイポグラフィ、パレット、レイアウトのリズム、モーションナラティブ、使用する可能性のあるスタック、パフォーマンス予算、フォールバック、アセットの出所、および除外事項をカバーする、コンパクトな方向性を提示してください。この方向性の承認を得てください。コンセプトの承認を、デプロイ、購入、アカウント、トークン、または無関係なシステム変更の許可として扱わないでください。
意図を持ってデザインする
- モバイルファーストで開始し、より大きなビューポート向けにコンポジションと振り付けを拡張します。
- アイデンティティを、主題、オーディエンス、マテリアル、言語、実際のコンテンツに基づいて構築します。一般的なコンポーネントキットのような外観は避けてください。
- 視覚的な大胆さは1つの記憶に残る場所に集中させ、サポートシステムは規律を保ちます。
- 人間らしく、技術的に正確なコピーを能動態で記述します。文の先頭のみを大文字にし、emダッシュの句読点は使用しません。証拠、パートナー、お客様の声、測定基準、または機能を決して捏造しないでください。
- プロジェクトごとに1つの一貫したアイコンファミリーを使用し、スタックへの適合性、アイデンティティ、カバレッジ、ライセンス、コスト、メンテナンス、アクセシビリティ、および重みに基づいて選択します。公式または承認されたブランドマークを使用します。スタックがサポートする場合は、実際のツリーシェイキングを使用して個々のアイコンをインポートします。
- すべてのプライマリアクションを、ホバーなしで操作可能にします。関連する場合は、タッチ、キーボード、フォーカス、アクティブ、ローディング、無効、エラー、および空の状態を指定します。
最小限の十分なスタックを選択する
モーション、2Dキャンバス、または3Dを検討する場合は、stack-selection.md を読んでください。変更が正当化され承認されない限り、現在のスタックを維持します。
1つのエフェクトのためにWordPressにReactを追加しないでください。どのライブラリもサイト全体で必須にしないでください。計画に含まれているという理由だけで依存関係をインストールしないでください。単純なトランジションにはCSSとプラットフォームAPIを、コンポーネントの振り付けにはMotionを、意図的なタイムラインやスクロールシーケンスにはGSAPとScrollTriggerを、要求の厳しい2DシーンにはPixiJSを、直接的なWebGLにはThree.jsを、そしてReactがすでに存在し宣言的なシーン構成が有益な場合には、厳選されたdreiヘルパーと共にReact Three Fiberを優先します。Lenisはオプションであり、自動的には使用しません。
ReactBitsとCodropsは、選択的な参照としてのみ使用します。再利用する前に、コードとアセットのライセンスと出所を確認してください。オリジナルの合成を優先し、ライセンスされた抜粋については必要な通知を保持します。
構築する前にモーションを仕様化する
意味のあるアニメーションごとに、以下を記録します。
- 目的：何を説明し、優先順位を付け、確認し、または空間的に理解しやすくするか。
- トリガー：ロード、エントリー、クリック、状態変更、ポインター、スクロール、またはメディアの進行。
- 期間とイージング：繰り返しと中断の制限を含めます。
- モバイルでの動作：ビューポート、粗いポインター、タッチ、バッテリー、デバイス能力に対して何が変わるか。
- フォールバック：動きの抑制、JavaScriptの非利用、メディアの失敗、WebGLの喪失、またはハードウェア制約に対する最終的な静的状態。
ホバーのみに依存した意味や装飾的な連続モーションは避けてください。ナビゲーション、プライマリメッセージ、CTAは、アニメーションが完了する前に機能する必要があります。prefers-reduced-motion: reduce 下では、安定した最終状態をレンダリングし、スクラブ、パララックス、自動再生、スムーズスクロールの動作を短縮するだけでなく、削除します。
パフォーマンスを予算化する
実装前に、プロジェクトに適した測定可能な予算を設定します。初期JavaScript、メディアの重み、フォント数、アニメーションの同時実行数、ロングタスク、レイアウトシフト、Largest Contentful Paintタイミング、フレーム安定性、GPUメモリ、デバイスピクセル比、および熱コストを考慮します。
キャンバスまたはWebGLの場合は、静的ポスターを提供し、ピクセル比を制限し、オフスクリーンまたは非表示の場合は一時停止し、フレームごとの割り当てを避け、小型または制約のあるデバイスでの作業を減らし、コンテキスト障害を処理し、フレーム、オブザーバー、リスナー、テクスチャ、ジオメトリ、マテリアル、レンダーターゲット、レンダラーの状態を破棄します。セマンティックコンテンツとコントロールは、キャンバスの外部または独立して存在する必要があります。
段階的に実装する
承認された方向性と既存のプロジェクト規約を維持します。セマンティックHTMLと実際のコンテンツを信頼できる情報源として保持します。価値を付加する場所にのみ、ヘビーな体験をロードします。複数のシステムが同じプロパティを制御しないようにエフェクトの範囲を制限します。最大で1つのスムーズスクロールエンジンを使用し、その価値が複雑さを上回る場合にのみ使用します。
計画が承認されるまで、ライブラリをインストールしたり、プロジェクトを変更したり、実装したりしないでください。実装が許可された場合は、スタックまたはアセットの追加を行う前に説明し、プロジェクトのパッケージマネージャーとロックファイルを尊重します。
誠実に検証する
実装またはレビュー作業には、verification.md を使用してください。モバイルおよびデスクトップのスクリーンショット、インタラクションの状態、タッチ、キーボード、フォーカス、動きの抑制、静的フォールバック、ローディングおよび障害動作、パフォーマンスの証拠、およびクリーンアップ動作を、変更の規模に比例して検査します。
何が実行され、何が合格し、何が視覚的に検査され、何が未検証のままかを正確に報告してください。ビルド、ブラウザテスト、アクセシビリティチェック、デバイステスト、またはパフォーマンス測定が実行されていないのに、実行されたと暗示しないでください。
参照の出所
このガイダンスは独自の合成です。信頼できるドキュメントと明確にラベル付けされたコミュニティインスピレーションについては、sources.md を参照してください。このスキルを通じて、サードパーティのスキルコードをインストールまたは実行しないでください。