メニュー
Use this when the user needs to control Chrome, navigate to a page, inspect a tab, click or fill elements, take screenshots, or automate a browser flow with aeroxy/chrome-devtools-cli.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Interview the user relentlessly about a plan or design until branch-level decisions are resolved for execution.
Access Figma designs, extract design systems, and retrieve component specifications. Use when implementing UI from Figma mockups, extracting design tokens, or analyzing design files.
Enforce cost-aware MCP usage. Use when a task might trigger heavy external tools, web search, or broad context expansion. Prevents token burn by ensuring MCPs are only used when local context is insufficient.
Navigate the Warmplane mcp0 facade efficiently. Use when the active config exposes provider capabilities through `mcp0_*` tools and you need to discover or call provider tools without brute-force describing large capability sets. Trigger on requests involving mcp0, Warmplane, or provider work through the facade such as Linear, Notion, Figma, New Relic, Context7, grep.app, or Storybook tools.
Guidelines for creating and managing implementation plans with citations
Apply these conventions during planning and implementation from the start (not only after review feedback). Use for frontend and backend changes when deciding whether to add layers, where to place formatting/validation, how much typing to keep, how to place helper files (.dto.ts/.type.ts/.constant.ts/.util.ts), and how to match existing module patterns during /plan and /work.
| name | chrome-devtools |
| description | Use this when the user needs to control Chrome, navigate to a page, inspect a tab, click or fill elements, take screenshots, or automate a browser flow with aeroxy/chrome-devtools-cli. |
| allowed-tools | ["Bash(chrome-devtools:*)"] |
Use this skill for browser automation tasks that can be solved with the chrome-devtools binary.
Install with one of:
brew tap aeroxy/chrome-devtools-cli && brew install chrome-devtools
cargo install chrome-devtools-cli
The binary name is chrome-devtools.
Chrome remote debugging must be enabled first at chrome://inspect/#remote-debugging.
See references/prerequisites.md.
Page-level commands support both --page <index> and --target <target-id>.
For quick flows, --page is the simplest option. When a command emits a target marker, capture it and reuse --target for a stable multi-step flow.
chrome-devtools list-pages
chrome-devtools new-page https://example.com
# Quick smoke-test path
chrome-devtools --page 3 snapshot
chrome-devtools --page 3 evaluate "document.title"
chrome-devtools --page 3 screenshot --output /tmp/example.png
NAV_OUTPUT="$(chrome-devtools new-page https://example.com)"
if [[ "$NAV_OUTPUT" =~ \[target:([^]]+)\] ]]; then
TARGET="${BASH_REMATCH[1]}"
elif [[ "$NAV_OUTPUT" =~ \(target:[[:space:]]*([^)]*)\) ]]; then
TARGET="${BASH_REMATCH[1]}"
else
echo "Failed to capture target from command output"
exit 1
fi
chrome-devtools --target "$TARGET" snapshot
chrome-devtools --target "$TARGET" screenshot --output ./example.png
This skill is grounded on the currently supported command set:
navigatenew-pageclose-pageselect-pagelist-pagesscreenshotsnapshotevaluateclickfilltype-textpress-keyhoverresizewait-forSee references/commands.md and references/workflow.md for usage patterns.
chrome-devtools does not directly provide prior agent-browser features such as:
@e1When these are requested, be explicit about the gap and either:
evaluate workarounds, orSee references/capability-gaps.md.