メニュー
Advanced DOM inspection and interaction capabilities. Allows analyzing page layout, extracting compact DOM snapshots, manipulating elements, and debugging browser logs.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/zcf0508/unplugin-devpilot --skill dom-inspectorコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
SOC 職業分類に基づく
| name | dom-inspector |
| description | Advanced DOM inspection and interaction capabilities. Allows analyzing page layout, extracting compact DOM snapshots, manipulating elements, and debugging browser logs. |
| allowed-tools | ["get_page_snapshot","get_visual_hierarchy","get_element_details","click_element","input_text","get_console_logs","scroll_to_element","capture_screenshot"] |
Core Principle: Minimize token cost. Always choose the cheapest tool that gets the job done.
| Cost | Tools | Use For |
|---|---|---|
| Low | get_visual_hierarchy, click_element, input_text, scroll_to_element | Layout overview, trigger interactions |
| Mid | get_page_snapshot, get_element_details, get_console_logs | DOM with @eID, element deep dive, logs |
| High | capture_screenshot | Visual comparison with design mockups only |
capture_screenshot → compare with design → edit styles → capture_screenshot → verify
Screenshot is justified here — pixel-level visual comparison requires images.
get_page_snapshot → find @eID → click_element/input_text → get_page_snapshot → verify DOM changes
Example: snapshot → @e42 [button] "Settings" → click_element(e42) → snapshot → confirm dialog appeared
get_console_logs(level="error") → add console.info("[BUG]",...) to code
→ click_element to reproduce → get_console_logs(keyword="[BUG]")
→ fix code → re-trigger → get_console_logs → confirm fix
Important: console.log is NOT captured. Use console.info or higher (warn/error) for debugging.
Use prefixes ([BUG], [PERF]) + keyword/level filter to avoid log noise.
get_visual_hierarchy → understand layout (cheap)
→ get_page_snapshot(startNodeId="eX") → targeted DOM of area of interest
→ get_element_details("eY") → deep dive if needed
Always start with get_visual_hierarchy — cheapest way to understand the page.
Add console.time/PerformanceObserver → click_element to trigger
→ get_console_logs(keyword="[PERF]") → fix → re-trigger → verify
get_visual_hierarchy firstget_page_snapshot (use startNodeId to narrow scope)click_element / input_text with @eIDcapture_screenshotget_console_logs with keyword / levelscroll_to_element before snapshotget_element_detailscapture_screenshot to discover structure (use get_visual_hierarchy)startNodeId)get_console_logs without keyword/level filter (token waste)get_visual_hierarchy and jumping straight to detailed snapshot