MITupdated 2mo ago
Cuts token cost when driving the Chrome DevTools MCP by preferring text snapshots over screenshots and only escalating to vision when necessary.
Chrome Devtools Optimizer で何ができる?
name: chrome-devtools-optimizer description: Use this skill to reduce token consumption by 70-80% when using the Chrome DevTools MCP. Applies a snapshot-first strategy (text over images) with decision trees and pattern guides for navigation, forms, debugging, and visual checks, plus optional Gemini Flash vision processing for the cases that genuinely need an image. license: MIT
Chrome DevTools Optimizer Skill
Cuts token cost when driving the Chrome DevTools MCP by preferring text snapshots over screenshots and only escalating to vision when necessary.
Usage
Consult the pattern guides in patterns/ and the token-cost reference in
references/ when performing browser automation:
- Snapshot-first: read the accessibility/text snapshot before taking a screenshot.
- Decision trees: navigation, forms, and debugging flows that minimize image captures.
- Optional Gemini Flash: for true visual analysis,
scripts/process-screenshot.jssends one image to Gemini Flash (~$0.001) instead of round-tripping a large screenshot.
# one-time: configure the Gemini API key (read from
# ~/.config/chrome-devtools-optimizer/config.json — never hardcoded)
node scripts/process-screenshot.js <image-path-or-base64>
See agents/chrome-devtools-optimizer.md for the
full decision logic.
インストール
Chrome Devtools Optimizer をクライアントに追加します。お使いのものを選んでください。
npx skills add diegocconsolini/ClaudeSkillCollectionInstalls every skill in the repository, then prompts for which to keep.
/plugin marketplace add diegocconsolini/ClaudeSkillCollectionAdds the repository as a plugin marketplace; install individual plugins with `/plugin install`.
git clone https://github.com/diegocconsolini/ClaudeSkillCollection
cp -r chrome-devtools-optimizer ~/.claude/skills/A skill is a plain directory. Copy it into `.claude/skills/` in a project or in your home directory.
スコア
69 / 100
良好