完全なWordPress Webサイトを構築する
1つの説明から、完成したブロックテーマを出力します。このスキルは他のwp-*スキルを順番に実行します。各ゲートは、前のゲートが完了するまで次のゲートは開始されません。
Gate 0: 概要（ハードストップ）
ユーザーの説明からSITE_BRIEF.mdを作成します。以下を含めます：
- 目的と対象ユーザー、ブランドのトーン、色とフォント（指定がない場合はデフォルトを提案）。
- ページ一覧（デフォルト：ホーム、概要、サービスまたは製品、ブログ、お問い合わせ）。
- 機能（お問い合わせフォーム、ブログ、ギャラリー、ショップ）。ユーザーがリクエストしたもののみ。
- 前提条件、番号付き、それぞれにデフォルト値を記載。
それを表示し、ユーザーに承認、却下、または指示を求めます。ここで停止し、待機します。
Gate 1: プロジェクトセットアップ
- 新しいフォルダ（ユーザーが指定した名前）で作業します。既存のサイトのファイルには決して触れません。
- ブロックテーマを作成：
style.css、theme.json、templates/、parts/（ヘッダー、フッター）、patterns/、assets/、functions.php。 - WordPressコアブロックとパターンを使用します。ページビルダーやCSSフレームワークは使用しません。
- オプションのローカルテスト：必要に応じてWordPress Playgroundまたは
wp-envを使用。
Gate 2: デザインシステム（wp-responsive-fluid-design）
theme.jsonで色、可変タイプスケール、スペーシングトークンを定義します。ヘッダー、フッター、ナビゲーション、モバイルメニューを構築します。すべての値はトークンから取得します。
Gate 3: ページとコンテンツ
概要にあるすべてのページのテンプレートとパターンを作成します。目的がわかっている場合は明確なプレースホルダーコピー（lorem ipsumは避ける）とaltテキスト付きの画像を使用します。セマンティックHTMLを使用：ページごとに1つのh1。
Gate 4: モーション（wp-animated-block-theme）
まずCSSで、次にInteractivity APIを使用して、スクロール表示、ホバー、ページ遷移効果を追加します。すべてがprefers-reduced-motionを尊重します。コンテンツはJSなしでも表示可能にします。リクエストされた効果に必要な場合のみwp-gsap-lottie-integrationを使用します。
Gate 5: チェック
wp-motion-performance-audit：High項目（レイアウトをトリガーするアニメーション、レイアウトシフト、重いスクリプト）を修正。wp-accessible-ui-review：High項目（フォーカス、コントラスト、ラベル、見出し）を修正。- 360、768、1024、1440 pxで確認：水平スクロールがないこと。
- 検証：PHPファイルで
php -l、theme.jsonでJSONの有効性。
Gate 6: 引き渡し
テーマフォルダに短いREADME.mdを記述：インストール方法（zipでアップロード）、ページの編集方法、未検証の項目（実機Lighthouse、実機デバイス、スクリーンリーダー、ホスティング）。実行した以上のことは主張しないでください。ユーザーが要求しない限り、デプロイ、プッシュ、コミットは行わないでください。
ルール
- シークレット、APIキー、絶対ローカルパスをファイルに含めないでください。
- ユーザーが承認したプラグインのみ追加してください。プラグインはなしが望ましいです。
- ジェネリックなプレースホルダーコンテンツを使用し、実際の個人データやクライアントデータは決して使用しないでください。
- 各変更は概要に追跡可能であるようにしてください。