fusion-tea: Skill for Claude Code

Browser Inspect

Drive a Chromium browser via scripts/browser_inspect.py (chained-flag CLI wrapping Playwright). Each shot writes a PNG plus a JSON sidecar with URL, title, console messages, and page errors — so you can verify UI behavior without re-running the script for every check.

When to Use This

Use this skill instead of asking the user to screenshot, instead of guessing what a page looks like, and instead of editing-without-verifying for any UI change.

Specifically, reach for it when you need to:

• See what a page renders right now (the home grid, a concept profile, the comparison view)
• Verify a change you just made (CSS tweak, template edit, JS fix) actually shows up
• Reproduce or check a multi-step bug (click → expand → re-screenshot → confirm state)
• Check whether console errors or failed fetches are happening on a page
• Read a value off the page (e.g., the LCOE number after a slider drag) without screenshotting

If the user asks "does X work in the browser" or "what does Y look like", run this skill — don't speculate.

Core Workflow

1. Make sure the server is running        (e.g., uv run python exploration/concept_explorer/server.py)
2. Run scripts/browser_inspect.py with chained step flags
3. Read the resulting PNG(s) to see the UI
4. Read the JSON sidecar(s) to check console / errors / DOM state
5. If something's wrong, edit and re-run with --clear

Always Read the JSON sidecar even when the PNG looks fine — console errors are invisible in screenshots and frequently explain "why is this chart blank" or "why didn't the slider update."

Command Reference

Invoke as:

uv run python scripts/browser_inspect.py [--base URL] [--session NAME] [--clear] STEP_FLAGS...

Step flags execute in command-line order. Mix freely:

Flag	Argument	What it does
--goto	PATH or full URL	Navigate. Path is appended to --base. Waits for networkidle + 800ms (configurable via --default-wait).
--shot	NAME	Full-page PNG → NAME.png + sidecar NAME.json.
--shot-vp	NAME	Viewport-only PNG (faster for above-the-fold checks).
--click	SELECTOR	Click first matching element. 5s timeout.
--fill	SELECTOR=VALUE	Type VALUE into an input.
--press	SELECTOR=KEY or KEY	Press a key on an element, or globally.
--hover	SELECTOR	Hover (useful for tooltip-revealed UI).
--wait	MS	Sleep N milliseconds (use after click → wait for animation).
--wait-for	SELECTOR	Wait until element is visible (10s timeout). Better than --wait when you can name the thing.
--scroll-to	SELECTOR	Scroll element into view (then maybe --shot-vp).
--read	SELECTOR or SELECTOR=NAME	Capture element text into reads.json. NAME labels it; defaults to the selector.
--eval	JS_EXPR	Run a JS expression, capture the result into evals.json. Returns must be JSON-serializable.