cssprobe-cli
Runtime CSS probe — inspect layout, scroll, colors, backgrounds, fonts and more in a live browser. Built for both humans and AI agents.
Installation
For Humans
npm install -g cssprobe-cli
For LLM Agents
cssprobe-cli skill-install
Quick Start
1. Inspect a Page
cssprobe-cli inspect https://getbootstrap.com/docs/5.3/examples/checkout ".container"
cssprobe-cli inspect https://getbootstrap.com/docs/5.3/examples/checkout
cssprobe-cli inspect ./test.html ".container"
2. Login-Protected Pages
cssprobe-cli state-import cookies.txt --out ~/.cssprobe-cli/states/mysite.json
cssprobe-cli login https://mysite.com
cssprobe-cli inspect https://mysite.com/page ".target" --state ~/.cssprobe-cli/states/mysite.json
3. JSON Output
cssprobe-cli inspect https://getbootstrap.com/docs/5.3/examples/checkout body --json
cssprobe-cli inspect https://getbootstrap.com/docs/5.3/examples/checkout body --json | jq '.findings[] | {id, confidence, message}'
Output Modes
| (default) | Markdown report with ancestor chain, DOM tree, findings | Terminal viewing |
--json | Structured JSON with snapshot, findings, confidence summary | Scripts, jq pipes, AI agent consumption |
Commands
Inspection
cssprobe-cli inspect <url> [selector]
cssprobe-cli login <url>
cssprobe-cli state-import [file]
Inspection
cssprobe-cli inspect https://getbootstrap.com/docs/5.3/examples/checkout body
Configuration
cssprobe-cli config-show
cssprobe-cli config-set <key> <value>
cssprobe-cli config-list
cssprobe-cli config-use <name>
cssprobe-cli config-new <name>
cssprobe-cli config-path
inspect Options
cssprobe-cli inspect <url> [selector] [options]
Arguments:
<url> URL, file:// path, or local HTML file
[selector] CSS selector for root (auto-detected if omitted)
Options:
--json Output structured JSON
--headed Show browser window
--browser <engine> chromium|firefox|webkit (default chromium)
--zoom Run 1x/0.5x viewport diagnosis
--depth <n> DOM tree depth (default: auto)
--max-nodes <n> Node count cap (default 60)
--up-to <tag> Ancestor stop tag (default html)
--state <file> Load saved state (cookies + localStorage)
--brief Compact output: tree sketch + warnings/errors only
state-import
Import cookies from Netscape format (browser export standard) into a Playwright state file.
cssprobe-cli state-import cookies.txt --out mystate.json
cat cookies.txt | cssprobe-cli state-import --out mystate.json
cssprobe-cli state-import new-cookies.txt --merge existing.json --out merged.json
Netscape format (tab-separated):
.example.com TRUE / TRUE 1813025057 session_id abc123
.example.com TRUE / FALSE -1 lang zh-CN
Confidence Model
Every finding carries a confidence level:
| DEFINITE | Based on computed values (facts from getComputedStyle) or accessible declared values |
| INDEFINITE | Declared value uses % — resolves at runtime |
| UNVERIFIABLE | Declared value missing or from blocked cross-origin stylesheet |
The report header shows: confidence: DEFINITE 8 | INDEFINITE 0 | UNVERIFIABLE 1
Configuration
cssprobe-cli config-set browser chromium
cssprobe-cli config-set depth 8
cssprobe-cli config-show
cssprobe-cli config-new staging
cssprobe-cli -p staging config-set browser firefox
cssprobe-cli config-use staging
cssprobe-cli config-list
Priority: CLI flags > Environment variables > Config file
--browser CSSPROBE_BROWSER
--depth CSSPROBE_DEPTH
--headed CSSPROBE_HEADED
-p, --profile CSSPROBE_PROFILE
Config file: ~/.cssprobe-clirc
Agent Skill
cssprobe-cli skill-install
cssprobe-cli skill-install --target opencode
cssprobe-cli skill-install --target claude
cssprobe-cli skill-uninstall
Global Options
--json Output as JSON (default: Markdown)
--raw Output raw result without formatting
--help [command] Show help for a command or global
--version Show version
-p, --profile Use named config profile
Development
npm install
npm run build
npm test
npx tsc --noEmit
License
MIT