frontend-devtools-skill

CLI and installable agent skill for Chrome DevTools-style CSS debugging, responsive website building, landing page design, and inspiration-site research.

This repo also includes an installable agent skill at skills/frontend-devtools-skill/ for ecosystems like npx skills, Codex, and Claude Code plugin workflows.

The CLI/binary name and the installable skill name are both frontend-devtools-skill.

Why

Existing tools (Chrome DevTools MCP, Playwright MCP) give agents screenshots or raw evaluate_script. Neither provides the structured inspection data a frontend dev uses daily: which CSS rules apply, what's overridden, exact padding/margin values, grid track sizes, or why something overflows.

frontend-devtools-skill uses Chrome DevTools Protocol directly (CSS.getMatchedStylesForNode, DOM.getBoxModel, DOMSnapshot.captureSnapshot) to return machine-readable JSON that agents can reason about precisely.

Install The Skill

Install the skill directly via the agent ecosystem so coding agents can discover and use the workflow without cloning the repo:

npx skills add hetpatel-11/frontend-devtools-skill --skill frontend-devtools-skill

Install to specific agents:

npx skills add hetpatel-11/frontend-devtools-skill --skill frontend-devtools-skill -a codex -a claude-code

List what the repo exposes:

npx skills add hetpatel-11/frontend-devtools-skill --list

If you want to explore or extend the tool yourself, clone the repo first and then run the CLI locally:

git clone https://github.com/hetpatel-11/frontend-devtools-skill.git
cd frontend-devtools-skill
pnpm install
pnpm build
# Run commands for the local CLI entry point
npx frontend-devtools-skill inspect ".hero-card" --url http://localhost:3000 --pretty

Install

npm install -g frontend-devtools-skill
# or
npx frontend-devtools-skill <command>

Releases are still pending on npm, so the above commands will work once the package is published.

Requires Playwright's Chromium:

npx playwright install chromium

If you rename the GitHub repo to match the package name, update the repo path in those commands accordingly.

Claude Code

This repo is also structured as a Claude Code plugin root:

• Claude skill content lives in skills/frontend-devtools-skill/SKILL.md
• Claude plugin metadata lives in .claude-plugin/plugin.json

For local development, you can load it directly:

claude --plugin-dir .

If you distribute it as a public repo and users install it through a marketplace or plugin-aware tooling, Claude can discover the same skills/ directory.

Commands

inspect - Element inspection with CSS cascade

frontend-devtools-skill inspect ".card" --url http://localhost:3000 --pretty

Returns box model (content/padding/border/margin quads), computed styles, the full CSS cascade with selectors and source file:line, layout type (flex/grid/block), and parent context.

snapshot - Full page layout tree

frontend-devtools-skill snapshot --url http://localhost:3000 --selector ".main" --pretty

Captures the entire DOM tree with bounding boxes and computed styles in a single CDP call. Use --selector to scope to a subtree.

diagnose - Layout problem solver

frontend-devtools-skill diagnose ".overflow-element" --url http://localhost:3000 --problem overflow --pretty

Walks the ancestor chain and identifies constraint sources: overflow clipping, max-width/height limits, flex-shrink:0, etc. Returns a summary explaining why the element is sized or positioned the way it is.

console - Console errors and warnings

frontend-devtools-skill console --url http://localhost:3000 --level error
frontend-devtools-skill console --connect http://127.0.0.1:9222 --level warning

network - Failed and slow requests

frontend-devtools-skill network --url http://localhost:3000 --failed-only
frontend-devtools-skill network --url http://localhost:3000 --slow 500
frontend-devtools-skill network --connect http://127.0.0.1:9222 --failed-only

diff - Visual regression

frontend-devtools-skill diff reference.png --url http://localhost:3000 --selector ".hero" --threshold 0.1

--threshold is the allowed mismatch percentage. For example, 0.1 allows up to 0.1% of pixels to differ. --pixelThreshold controls per-pixel sensitivity in the underlying image comparison and defaults to 0.1.

browser - Launch a clean CDP browser

frontend-devtools-skill browser --port 9222 --url http://localhost:3000

Launches Chrome for Testing with a temporary profile, remote debugging enabled, and safe flags that avoid macOS keychain password prompts. It prints the browserUrl, webSocketDebuggerUrl, and temporary profile path as JSON.

Browser modes

# Launch fresh headless browser (default)
frontend-devtools-skill inspect "body" --url http://localhost:3000

# Recommended: launch a clean browser for connect mode
frontend-devtools-skill browser --port 9222 --url http://localhost:3000
frontend-devtools-skill inspect "body" --connect http://127.0.0.1:9222

# Manual launch if you need your own Chrome process
/path/to/chrome --remote-debugging-port=9222 --user-data-dir=/tmp/frontend-devtools-skill-profile --use-mock-keychain --password-store=basic http://localhost:3000
frontend-devtools-skill inspect "body" --connect http://127.0.0.1:9222

Use frontend-devtools-skill browser for attachable sessions whenever possible. It launches Chrome with a temporary profile and flags that avoid macOS keychain password prompts.

Output

All commands output JSON to stdout. Use --pretty for formatted output. Errors return {"error": true, "message": "..."} with exit code 1.

How it differs from Chrome DevTools MCP

	Chrome DevTools MCP	frontend-devtools-skill
CSS inspection	None - use evaluate_script	CSS.getMatchedStylesForNode - full cascade with selectors, source locations, overrides
Box model	None structured	DOM.getBoxModel - exact content/padding/border/margin quads
Layout info	Accessibility tree (no layout data)	Grid tracks, flex properties, parent context
Layout diagnosis	None	Ancestor chain walk with constraint detection
Token overhead	27 tools (~18k tokens)	6 commands
Output format	Mixed	JSON-only, optimized for agents

Development

pnpm install
pnpm build
pnpm test