analyze-reference
パターンを抽出し、クローンはしません。このスキルは1つの公開ページ（およびユーザーが指定する最大2つの内部リンク）を読み込み、その構築方法と動作を抽象的な用語で説明し、patterns/<slug>.md に書き出します。サイトからの一切の情報（画像、動画、3D、ロゴ、テキスト、コード、ブランドフォント名、色コード）は保存されません。スクリーンショットは .cache/analyze/ 下の一時的な作業素材（git管理対象外）であり、処理終了時に必ず削除されます。
これはリポジトリのワークフローガイダンスであり、法的助言ではありません。製品化する前にIP弁護士に相談してください（docs/roadmap.md 参照）。
入力
url（必須）: 公開されているhttp(s)ページ。ログイン、ペイウォール、ボットチャレンジの背後にあるページは対象外です。--focus "..."（オプション）: ユーザーがそのサイトのどこを気に入ったか、ユーザーの言葉で記述します。シートのどのセクションを深く掘り下げるかを決定します。フロントマターに記録します（省略時はnone）。- 最大2つの内部リンク（オプション、同一サイト）: それぞれを同じステップで分析し、1つのシートにマージします。それ以上クロールしません。
スラッグ: ホスト名から生成（www. を削除し、ドットをダッシュに変換、例: example-com）。ユーザーがスラッグを指定した場合は --slug を recon.mjs に渡します。patterns/<slug>.md が既に存在する場合は、上書き前に確認します。
すべてのコマンドはリポジトリルートから実行します。スクリプトは .claude/skills/analyze-reference/scripts/ にあり、それぞれ --help に対応しています。
手順
以下の順序で実行します。ステップ6（クリーンアップ）は、ステップ1から5が成功、中断、エラーのいずれで終了しても実行されます。finally ブロックとして扱います。
1. 権限の確認（ブラウザでサイトにアクセスする前）
node .claude/skills/analyze-reference/scripts/check-robots.mjs <url>
robots.txt 内の *、ClaudeBot、anthropic-ai、GPTBot、X-Robots-Tag ヘッダー、<meta name="robots">、およびテキスト・データマイニング予約（TDMRep: /.well-known/tdmrep.json、tdm-reservation ヘッダーとメタ）を評価します。終了コード: 0 許可、1 拒否、2 確認不可。
- 終了コード
1または2: 停止します。シートは作成せず、recon も実行しません。スクリプトが出力した正確な理由をユーザーに伝えます。終了コード2（5xx、タイムアウト、読み取り不能ファイル）は保守的な中断です。権限が確認できなかったことを伝え、ループでリトライせず、他の方法を探さないでください。 - 追加の内部リンクについてもそれぞれ実行します。
robots.txtが404の場合は許可とみなします。401/403の場合は拒否とみなします。
2. 偵察
node .claude/skills/analyze-reference/scripts/recon.mjs <url> [--slug <slug>]
Playwright（ヘッドレスChromium。Playwrightのブラウザがインストールされていない場合は QA_CHROME_PATH または CHROME_PATH を設定）がページを読み込み、スクロールし、.cache/analyze/<slug>/recon.json と screens/{375,768,1440}-<n>.png を書き出します。JSONには構造と統計情報のみが保持されます: セクションの順序と高さ/見出し数・単語数（テキストは含まない）、集計されたフォントサイズ、行高、間隔、グリッド/flexの使用状況、フォントの分類（serif/sans/mono/display、名前は含まない）、色の役割説明（コードは含まない）、検出されたライブラリとそのエビデンス・信頼度、ネットワークドメイン、Canvas/WebGLの有無、およびモーションの観測結果（リビール、ピン、パララックス、スクラブ、スティッキーヘッダー、イーズドスクロール）。
スクロールコンテナ。 一部のページはドキュメントを1ビューポートの高さに保ち、内側のラッパーをスクロールさせます。recon.mjs はこれを検出し（可視で overflow-y: auto|scroll|overlay がビューポートの60%以上を覆い、スクロール範囲が最大の要素）、スクリーンショット、モーションサンプリング、ホイールプローブに使用します。recon.json には scroller: { kind: "document" | "container", scrollHeightPx, clientHeightPx } が記録され、viewports[w].docHeightPx は実際に使用されたスクロール可能な高さです。エビデンスを読む際は scroller.kind を確認してください。ヒューリスティックな判定であり保証はありません。スクリーンショットにサイドパネルやモーダルがページの代わりに表示されている場合は、その旨をシートに記述します。ネストされたスクロールや水平スクロール、スクロール可能要素がなくホイールイベントで駆動されるシーンはカバーしません。また、ある幅（例えばタブレットブレークポイント）でスクロールが停止するページもあります。その場合、その幅のスクリーンショットは1枚で正しいです。
プロキシ配下。 HTTPS_PROXY または HTTP_PROXY が設定されている場合（クラウドセッションなど）、check-robots.mjs と recon.mjs は NODE_USE_ENV_PROXY=1 を指定して自身を一度再実行し、Node の fetch がプロキシを使用するようにし、recon.mjs はプロキシを Chromium に渡します（ループバックは直接接続）。フラグは不要です。Node からの experimental-warning行は非表示になります。証明書は通常通り NODE_EXTRA_CA_CERTS から取得します。スクリプトは証明書を読み取ったり埋め込んだりしません。プロキシがない場合は何も変わりません。
終了コード 3 はページが分析不可能であることを意味します（ログインフォーム、ボットチャレンジ、HTTP 401/403/429、到達不能）。停止: シートは作成せず、理由をユーザーに伝えます（ログインページの場合は「このページは公開されていません」）。ブロックを回避したり、チャレンジを解決したり、ログインしたり、ユーザーエージェントを変更したりしないでください。
3. エビデンスの読み取り
.cache/analyze/<slug>/recon.jsonを完全に読み取ります。- スクリーンショットをReadツールで表示し、幅ごとに少なくとも数枚ずつ確認して、数値だけでは判断できない点（ヒーローの構成、リズム、密度、レイアウトがグリッドを破る箇所、動きのある要素）を評価します。これらはあなただけが見るためのものであり、決してコピー、埋め込み、参照しないでください。
- 信頼度: グローバルまたはDOMクラスと一致するスクリプト名の両方がある場合は
high、どちらか一方のみの場合はmedium、ネットワークドメインのみの場合はlow。アプリコードにバンドルされたライブラリはスクリプト名の一致のみで検出されるため、「likely（可能性あり）」と表記し、recon が報告した信頼度を維持します。
4. シートの作成
patterns/_template.md の構造を patterns/<slug>.md にコピーします。フロントマター（url、slug、本日日付を YYYY-MM-DD、focus、libraries を名前のリスト）とすべてのセクションを、あなた自身の言葉で埋めます:
| セクション | 内容 |
|---|---|
| 要約 | このページの種類と、そこから学ぶ価値がある理由 |
| セクションマップ | セクションの順序: 役割、ビューポートに対するおおよその高さ、レイアウトのアイデア |
| ヒーロー | ヒーロータイプ、最初の画面の構成、読み込み時に動く要素 |
| グリッドと間隔 | カラムシステム、コンテンツ幅クラス、間隔のスケール（基本単位）、垂直リズム |
| タイポグラフィ | 汎用クラス（「大きなグロテスクディスプレイ + セリフボディ」）、スケール比、ウェイト、行間とトラッキングの傾向、ケーシング |
| パレット | 役割とトーン（「ほぼ黒の背景、暖色の彩度の高いアクセント」）、コントラストの特性、テーマ |
| 密度 | 画面あたりのコンテンツ量、余白、セクションあたりのアイデア数、テキストとメディアのバランス |
| モーション | 表: 瞬間、トリガー（ロード、スクロール、ホバー）、タイプ（リビール、ピン、パララックス、スクラブ、ページトランジション、シェーダー/3D）、技法とライブラリ、信頼度 |
| ライブラリ | 検出されたライブラリとそのエビデンスクラス、信頼度 |
| 参考にする点/避ける点 | オリジナルのランディングページでパターンとして再利用すべき点、および模倣するには具体的すぎる、またはリスクのある点 |
モーションエントリ: 関連するエフェクトごとに1行。コンテンツがスクロールに応じてアニメーションする間ピン留めされるセクションは、トリガー scroll、タイプ pin+scrub、ライブラリとその信頼度を記述します。ホバー動作はreconでは測定されません。スクリーンショットまたは hoverTransitionElements の数を確認し、推測する場合は信頼度を low に設定します。
5. 検証
npm run validate:patterns
パスする必要があります。file:line 違反が報告された場合は、該当行をより抽象的に書き直し、再実行します。バリデータを弱めたり、> note: 行を使ってコピーを忍ばせたりしないでください。このプレフィックスは、長い引用ルールからあなた自身の短いコメントのみを除外するためのものです。
オプションとして、ステップ3の後でも未説明のままの興味深いエフェクトがある場合のみ: npx rea-agents analyze-javascript-application <url>（重い処理、必須ではありません）。結論のみを記録します（「スクロールリンクカメラパス、タイムラインライブラリによる、中程度の信頼度」）。その出力、コード、ダンプは決して記録しません。必要なネットワークアクセスがない場合はスキップします。
6. クリーンアップ（常に実行）
node .claude/skills/analyze-reference/scripts/recon.mjs --cleanup <slug>
成功後、任意のステップで中断後、およびエラー後に実行します。その後、.cache/analyze/<slug> が削除され、git status にサイトからのファイルが表示されないこと（成功時は patterns/<slug>.md のみ）を確認します。recon.mjs は失敗時に自身のフォルダを削除しますが、それでもクリーンアップを実行します。
7. ユーザーへの報告
分析した内容、シートのパス、信頼度付きのライブラリ、特定できなかった点、およびPRで人間がシートをレビューする必要があることを伝えます。中断時: 理由と、シートが作成されなかったことを伝えます。
抽象化ルール（厳守）
以下のものをシート、シートのチャット要約、コミット、またはバージョン管理されたファイルに決して入れないでください:
- サイトのテキスト: 見出し、本文、マイクロコピー、altテキスト、メタディスクリプション（ページタイトルとURLは許可）。
- 画像、動画、フォント、3Dモデル、アイコンのURL、およびアセットファイル。
- ソースコード、マークアップ、CSS、JS、シェーダーの断片（短いもの、ミニファイされたもの、編集されたものを含む）。
- 16進数、
rgb()、hsl()、その他の色コード。役割とトーンで説明します。 - ブランド名やプロプライエタリなフォント名。汎用クラスを使用します。
- ロゴ、ブランドマーク、イラスト。
デザイナーが同僚に説明するようにパターンについて記述します。「ピン留めされたステートメントセクション、コンテンツが約1ビューポート分スクラブされる」。マークアップを書き写すのではありません。詳細がコンテンツかパターンか確信が持てない場合は、省略します。
中断ケース
| 状況 | アクション |
|---|---|
robots.txt が *、ClaudeBot、anthropic-ai、GPTBot に対してパスを拒否 | ステップ1で停止、一致したルールを報告、シートなし |
TDM予約（TDMRepファイル、ヘッダー、メタ、または robots.txt ディレクティブ） | ステップ1で停止、報告、シートなし |
X-Robots-Tag またはメタ robots に noai、noindex、none | ステップ1で停止、報告、シートなし |
| 権限が確認できない（5xx、タイムアウト、読み取り不能ファイル） | ステップ1で停止、「権限を確認できません」と伝え、シートなし |
| ログインフォーム、ペイウォール、HTTP 401/403/429、ボットチャレンジ | ステップ2で停止、ページが公開されていないか自動ブラウザをブロックしていると伝え、シートなし。回避しない |
| URLに到達できない、または2xx以外のレスポンス | ステップ2で停止、エラーを報告、シートなし |
| 検証が繰り返し失敗する | さらに抽象化して修正。ポイントを失わずにパスできない場合はその旨を伝え、シートを作成しない |
すべての中断ケースでステップ6を実行します。
帰属
偵察アプローチ（複数幅でのスクリーンショット、DOM構造、計算済みスタイル、インタラクションとスクロール観測）は、JCodesMore/ai-website-cloner-template の clone-website スキルの偵察フェーズを参考にしています（MITライセンス）。偵察フェーズのアイデアのみを再利用し、抽象的な記述のために書き直しました。コードやアセットダウンロード、再構築フェーズは一切含まれていません。