モバイルDOM忠実度 は何をしますか？
このスキルは、コンポジションを作成する前に使用します。信頼すべき情報源は、モバイルビューポートでの実際のサイトであり、静的なスクリーンショットではありません。
ワークフロー
- モバイルビューポートのブラウザでURLを開きます。
- 基準となるブレークポイントを定義します（通常は
390x844、393x852、414x896またはその近辺）。 - ビデオに表示されるDOMセクションを検査します。
- テキスト、
href、src、alt、主要なクラス、ロール、インタラクティブな状態を抽出します。 - コンポーネントが表示されていることを確認した後でのみ、クリック座標をマッピングします。
- 関連する状態をリスト化します：クリック前、クリック後、スクロール後、カート、チェックアウト、確認画面。
MCP DevTools / コンソール
MCP DevToolsが利用可能な場合は、それを使用してコンソールから実際のDOMをクエリします。抽出するデータの例：
const el = document.querySelector("SECTION_SELECTOR");
const rect = el.getBoundingClientRect();
({
text: el.innerText,
rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
classes: el.className,
images: [...el.querySelectorAll("img")].map((img) => ({
src: img.currentSrc || img.src,
alt: img.alt,
width: img.naturalWidth,
height: img.naturalHeight,
})),
links: [...el.querySelectorAll("a")].map((a) => ({
text: a.innerText,
href: a.href,
classes: a.className,
})),
});
クリックを検証するには：
const target = document.querySelector("TARGET_SELECTOR");
const r = target.getBoundingClientRect();
({ centerX: r.x + r.width / 2, centerY: r.y + r.height / 2, visible: r.width > 0 && r.height > 0 });
これらの値を使用して、コンポジション内のカーソルのタイミングと位置を定義します。
キャプチャするもの
- 正確な製品名。
- ベネフィットは実際に表示されている通りに。
- 価格と条件。
- ボタンとCTA。
- メイン画像。
- カルーセルカード。
- クリック検証のための安定したセレクタ。
ルール
- DOMがテキストを提供している場合、コピーを捏造しないでください。
- タイムライン上にコンポーネントが表示される前にクリックしないでください。
- スクリーンショットを構造の唯一の情報源として使用しないでください。
- スナップショット、Cookie、ログ、または検査ファイルを公開しないでください。
- サイトが遅延読み込みを使用している場合、画像が読み込まれてから
srcを抽出してください。
期待される引き継ぎ
短いマップを生成します：
シーン: 製品カルーセル
セレクタ: .rf-cards-scroller-platter
表示される時刻: 2.0s
アクション: 水平スクロール
クリックターゲット: カードリンク、カードが中央に戻った後の中央x/y
必要なテキスト: ...
必要な画像: ...
このマップを使用して、HyperFramesコンポジションをガイドします。
忠実度の基準
次の場合にのみ、セクションは忠実であると見なされます：
- テキストが元のDOMと一致する。
- 画像が同じか、許可された同等物である。
- スペーシングがモバイルの階層に従っている。
- カード、ボタン、ラベルが同じ視覚的な順序を使用している。
- クリックが実際のコンポーネントのバウンディングボックス内で発生する。
- カーソルアクションの前にコンポーネントがレンダリングされている。