adamjali/site-forge

Site Forge

<execution_context> フェーズ0でモードを解決します。

• auto（高速）： 可能な限り自分で実行します。1つの計画/承認ゲート（フェーズ3）を通過した後は、尋ねることなく完了まで実行します。無料で自分で作成できるメディア（jina; MCP/Higgsfieldが存在する場合）のみを使用します。ステップがブロックされたり、インタラクションが必要になったり、失敗した場合は、スキップして続行し、最後に「スキップ済み / 後でアップグレード」リストに記載します。出荷を優先します。
• full（最高品質）： インタラクティブ。結果を意味のある形で変える選択肢がある場合は常に尋ね、たとえユーザーに依頼が必要な場合でも、最高の無料メディアを使用します（画像はGoogle/Gemini、動画はVeo 3.1 Fast in Flow — 正確なプロンプトを渡すと、ユーザーが生成し、ファイルをドロップします）。ブロックされたステップ → ユーザーに介入を依頼します。

両方のモード：

• 🟢 自動：環境の探索、デザイン、コード作成、フレームの抽出、ffmpegの実行、ローカルプレビュー、および承認後のデプロイを実行します。
• 🟡 両方のモードで2つの必須ゲート：(1) ビルド前のフェーズ3の計画、(2) デプロイ自体 — デプロイするたびに、毎回、直前に尋ねてください。 1回のデプロイの承認が、次のデプロイの承認になることは決してありません。デフォルトはローカルプレビューです。
• 🔴 絶対にしてはいけないこと：偽の認証情報/キーを発明する、ユーザーが未検証とフラグを立てた主張を免責事項なしで公開する、ユーザーのシークレットをフォームに入力する。 </execution_context>

0. 他の何よりも先にプロフィールを選択します。 references/design-profiles.md を読み、1行でそれを述べます：「プロフィール：creative-portfolio。表示サイズ上限の緩和、セリフ体の禁止、スクリムの下限、コンバージョンファニチャー。クラフトフロアは変更なし。」 デフォルトは local-service です。creative-portfolio は写真家、デザイナー、アーティストをカバーします。personal-agency はAdam自身のものです。プロフィールは、Adamの美的ルールのどれが有効かを決定します — クラフトフロアは決して緩和されません。つまり、16pxの本文、4.5:1のコントラスト、44pxのタップターゲット、動きの軽減、スキーマ、16のソーシャルタグ、セキュリティヘッダーは、指示やリファレンスサイトが何をしても適用されます。これを間違えると、ポートフォリオの写真を身にまとった職人向けのサイトができあがります。

1. 最初に references/page-composition.md を読みます（これは、デザインされたページと空っぽのページの違いです）。次に、マークアップの前に frontend-design を呼び出します（インストールされている場合 → それを使用し、それ以外の場合は references/frontend-design.md を読みます — 完全なスキルがそのままバンドルされているので、オフラインでも完全なガイダンスを得られます）。

2. design-taste-frontend を呼び出します。 その1行のデザイン読み取りを述べます（「これを次のように読み取ります：<ページ種類> for <オーディエンス>、<雰囲気> 言語で…」）そして3つのダイヤルを設定します。テイストスキル独自のデフォルトとプリセットを使用します。唯一の例外：MOTION_INTENSITY > 5での永続的なモーションのアンロックはオフのままにします — パルス、きらめき、フロート、タイプライター、無限ループはありません。静的ビルドでは、React/Tailwindスタックのセクションをスキップします。

3. Impeccableはすでに実行されています： そのフックはすべての書き込み時に発動します。そのコマンドはフェーズ7のゲートです。

次に、references/aesthetics.md をテーマ/タイポグラフィ/レイアウト導出ヘルパーとして使用します。これは、凡庸さを防ぐゲートであり、最大の品質向上のてこです。大胆で、指示に固有の方向性にコミットします：

• 1つの明確な美学を、正確に実行します。特徴的なフォントの組み合わせ（Inter/Roboto/Arialは不可）。CSS変数としてまとまりのあるパレット。
• 構造 — どのセクション、どの階層、唯一記憶に残る瞬間 — を指示から導き出します。前回のサイトの形状を再利用しないでください。
• どの機能が適合し、どれを省略するか（リファレンスマップを参照）。シンプルな指示では、凝ったエフェクトを一切使用しない場合があります。フラッグシッププロジェクトでは、複数を使用する場合があります。 計画に組み込むための3〜5行のデザインブリーフを作成します。

Impeccableのフックはすべての書き込み時に発動します。 その発見結果は、最後にまとめて対処するのではなく、出現した時点で解決します — 各結果は修正されるか、理由を明記して偽陽性として明示的に分類されます。修正をスキップするためにルールをインラインで抑制しないでください。抑制にはAdamの確認が必要です。約6回の編集後、ノイズを避けるために静かになります。そのため、フェーズ7の監査は別のハードゲートとして存在します。

シングルページ vs マルチページ。 ワンページャーは単一の index.html として出荷されます。明確に異なるオーディエンスや真の深みがある指示（患者/医師/料金/概要セクションがあるビジネスサイト、サイエンスページがあるマーケティングサイト）は、代わりにマルチページセットとして出荷します — 1つのクロームを共有する別々の *.html ページです。ビルドステップがないため、共有ブロックは手動でコピーされます。したがって、ドリフトは実際のバグです：<head>（FOUC防止のテーマスニペットを含む）、ナビゲーション、フッター、および<script>タグをすべてのページでバイト単位で同一に保ち、デプロイ前にハッシュを取って検証します。静かに異なるページ（異なるフォント、トグルの欠落、デッドリンク）は、典型的な障害です。各ページに自己参照の canonical/og:url + <title>/description を設定し、sitemap.xml + robots.txt を生成し、プライベート/アプリモックアップページには noindex を設定します。ページ数や共有ブロックのサイズが手動コピーを脆弱にする場合、小さなインクルードステップ（Node concat、またはEleventy/Astro）は妥当なトレードオフです — ただし、指示がそれを正当化する場合に限ります。デフォルトはビルドなしです。

次に、3つの機械的なゲート。これらはすべて、実際に出荷された欠陥を検出しています：

python3 <skill>/scripts/audit-seo.py        # SEO、ローカルSEO、セキュリティ。HIGHで終了コード1
python3 <skill>/scripts/check-crops.py      # object-fit:coverが被写体を切り取っていないか
python3 <skill>/scripts/colour-system.py    # 写真ごとに1つの処理、サイト全体

そして、実際のブラウザでインタラクティブ要素をすべてクリックし、状態変化をアサートします。FAQ、フィルターバー、マップパネルはすべて、完全なマークアップ、完全なCSS、そしてハンドラがまったくない状態で出荷されたことがあります。ソース上は何も壊れていないように見えます。コントロールの中心で document.elementFromPoint を使用します。.click() はヒットテストをスキップし、完全に埋もれているコントロールでも通過させてしまうため、使用しないでください。

何かがガタつく感じがする場合は、サンプリングせずにトレースしてください。 performance_start_trace を実行し、スクロールしてから performance_analyze_insight("ForcedReflow") を実行すると、問題のある関数がファイルと行で特定されます。フレームレートのサンプリングにはプラスマイナス10ポイントのばらつきがあり、間違った対象を追いかけることになります。scroll-performance.md を参照してください。

デザインスタックゲート — ハード、デプロイ前、例外なし：

1. /impeccable critique（UXレビュー）、次に /impeccable audit（アクセシビリティ、パフォーマンス、レスポンシブ）。
2. すべての発見結果を修正するか、理由を明記して偽陽性として分類します。インラインで抑制しないでください。抑制にはAdamの確認が必要です。
3. テイストスキル独自のフライト前チェックリスト（セクション14）を実行します。
4. CSSで infinite アニメーションと着色された box-shadow をgrepし、両方を無効にします。これにより、意図的にオーバーライドする1つのテイストスキル設定を確実にキャッチできます。

デフォルトはローカルです。 ビルドディレクトリで python3 -m http.server 8080 を使用してプレビューし、そこで反復します。ユーザーがその時点で要求しない限り、デプロイしないでください — ライブURLは、有料クライアントまたは予定されたデモの場合のみ正当化され、デプロイのたびにNetlifyクレジットが消費されます（1つのサイトへの38回のデプロイで月間許容量を使い果たし、有料アップグレードを余儀なくされました）。未解決の修正はすべて、1回のレビューラウンドにつき1回のデプロイにまとめてください。

モバイルQAは最初の実際のデプロイまで延期されます — ローカルでは実行できず、自動化ブラウザは真のモバイルビューポートをエミュレートできません。デモ時に専用のモバイルパスを計画し、以前に検証されたふりをしないでください。

プロジェクトルートを絶対にデプロイしないでください。 .netlifyignore は netlify deploy --dir では尊重されません。かつてルートをデプロイしたことで、クライアントの自宅住所とトラッカーパスワードがフリート全体に公開されました。明示的な公開ディレクトリを構築し、毎回ライブサーフェスを検証してください：

python3 scripts/make-dist.py .        # Webファイルのみ公開し、.py/.md/package.jsonは除外
netlify deploy --prod --dir dist
scripts/verify-published.sh <host> [owner-street-name]   #