/browser-automation
Browser automation for rendered UI exploration, validation, screenshots,
$ npx -y skills add alexei-led/cc-thingz --skill browser-automation --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.
- You can call itInvoke it directly when you want it.
- Slash command
/browser-automation
Context preview
The summary Claude sees to decide when to auto-load this skill.
Browser automation for rendered UI exploration, validation, screenshots,
SKILL.md
browser-automation.SKILL.mddescription: 'Browser automation for rendered UI exploration, validation, screenshots,
recordings, and end-to-end flows. Use when a task needs an actual browser or rendered
DOM: inspect UI state, click/fill forms, debug frontend behavior, capture evidence,
verify a feature, or run/generate browser tests. NOT for API checks or pure logic
tests where curl, unit tests, or JSDOM is cheaper.'
name: browser-automation
Browser Automation
Use a real browser only when rendered behavior matters: UI state, navigation, forms, auth, screenshots, recordings, accessibility, visual checks, or end-to-end flows.
Keep automation temporary unless the user asks for permanent tests. Do not use a browser for plain HTTP API checks or pure logic tests.
Runtime Selection
1. Prefer a platform built-in browser tool when available in the active tool list. See [`references/platform-browser-tools.md`](references/platform-browser-tools.md). 2. Use the project's configured browser runner when it exists. 3. Use `playwright-skill` only as the bundled fallback/runtime reference. 4. If no runtime is available, report blocked with the missing tool/package.
Use the cheapest runtime that proves the claim.
Workflow
1. Define the goal: explore, validate, screenshot, record, debug, or test. 2. Read needed local context: start scripts, browser config, routes, fixtures, seed/reset docs, and auth notes. 3. Detect or start the dev server. Reuse a reachable server. 4. Use deterministic data: seeded users, fixed dates, stable IDs, reset state, and mocked external services. 5. Drive with semantic targets first: role, label, text, test id; CSS last. 6. Capture artifacts needed to support the result: screenshot, trace, console errors, network failures, accessibility snapshot, manifest, or report. 7. Prefer screenshot/manifest evidence for visual checks in headless harnesses. 8. Report pass, fail, or blocked. Do not imply success if the check did not run.
Playwright Fallback
Use Playwright when no built-in browser tool exists, the project already uses Playwright, or a repeatable script/test is the best artifact.
If using the bundled helper, load `playwright-skill` for exact setup and invocation. Use its turnkey screenshot helpers before writing custom batch scripts:
node scripts/screenshot-url.js --url <url> --selector <ready-selector> --json
node scripts/screenshot-sequence.js --url-template '<url/{n}>' --from 1 --to 10 --jsonDo not write generated files into the helper directory or project unless creating permanent tests was requested.
Script and Test Rules
- Write temporary scripts to `/tmp/playwright-<name>.js` or
`/tmp/playwright-<name>.spec.ts` when using the Playwright fallback.
- Never use fixed sleep delays.
- Wait or assert on visible state, URL, selector, network state, or
accessibility snapshot.
- Prefer headed mode only when the platform exposes a usable visible browser.
In Pi or other headless harnesses, use headless screenshots plus manifests as visual evidence.
- Keep credentials, production data, and destructive actions out of browser
automation unless the user explicitly approves.
Failure Handling
- No target URL: detect a local dev server; ask if none is found.
- Multiple reachable servers: ask which target to use.
- Missing auth or fixture data: ask for safe test credentials or report blocked.
- Runtime unavailable: report the missing tool/package and required enablement.
- Fix or re-run only when fixing is in scope.
- Failure after two scoped attempts: save evidence, quote the failing line or UI
state, and stop.
Output Contract
## Browser Automation Result
Target: <page, feature, or flow>
Runtime: <built-in browser | project runner | playwright-skill | blocked>
Actions: <commands or browser action summary>
Result: <pass | fail | blocked>
Evidence: <screenshot/trace/output path or key observation>
Next Fix: <only when failing or blocked>
Read more
description: 'Browser automation for rendered UI exploration, validation, screenshots, recordings, and end-to-end flows. Use when a task needs an actual browser or rendered DOM: inspect UI state, click/fill forms, debug frontend behavior, capture evidence, verify a feature, or run/generate browser tests. NOT for API checks or pure logic tests where curl, unit tests, or JSDOM is cheaper.' name: browser-automation
Browser Automation
Use a real browser only when rendered behavior matters: UI state, navigation, forms, auth, screenshots, recordings, accessibility, visual checks, or end-to-end flows.
Keep automation temporary unless the user asks for permanent tests. Do not use a browser for plain HTTP API checks or pure logic tests.
Runtime Selection
1. Prefer a platform built-in browser tool when available in the active tool list. See [`references/platform-browser-tools.md`](references/platform-browser-tools.md). 2. Use the project's configured browser runner when it exists. 3. Use `playwright-skill` only as the bundled fallback/runtime reference. 4. If no runtime is available, report blocked with the missing tool/package.
Use the cheapest runtime that proves the claim.
Workflow
1. Define the goal: explore, validate, screenshot, record, debug, or test. 2. Read needed local context: start scripts, browser config, routes, fixtures, seed/reset docs, and auth notes. 3. Detect or start the dev server. Reuse a reachable server. 4. Use deterministic data: seeded users, fixed dates, stable IDs, reset state, and mocked external services. 5. Drive with semantic targets first: role, label, text, test id; CSS last. 6. Capture artifacts needed to support the result: screenshot, trace, console errors, network failures, accessibility snapshot, manifest, or report. 7. Prefer screenshot/manifest evidence for visual checks in headless harnesses. 8. Report pass, fail, or blocked. Do not imply success if the check did not run.
Playwright Fallback
Use Playwright when no built-in browser tool exists, the project already uses Playwright, or a repeatable script/test is the best artifact.
If using the bundled helper, load `playwright-skill` for exact setup and invocation. Use its turnkey screenshot helpers before writing custom batch scripts:
node scripts/screenshot-url.js --url <url> --selector <ready-selector> --json
node scripts/screenshot-sequence.js --url-template '<url/{n}>' --from 1 --to 10 --jsonDo not write generated files into the helper directory or project unless creating permanent tests was requested.
Script and Test Rules
- Write temporary scripts to `/tmp/playwright-<name>.js` or
`/tmp/playwright-<name>.spec.ts` when using the Playwright fallback.
- Never use fixed sleep delays.
- Wait or assert on visible state, URL, selector, network state, or
accessibility snapshot.
- Prefer headed mode only when the platform exposes a usable visible browser.
In Pi or other headless harnesses, use headless screenshots plus manifests as visual evidence.
- Keep credentials, production data, and destructive actions out of browser
automation unless the user explicitly approves.
Failure Handling
- No target URL: detect a local dev server; ask if none is found.
- Multiple reachable servers: ask which target to use.
- Missing auth or fixture data: ask for safe test credentials or report blocked.
- Runtime unavailable: report the missing tool/package and required enablement.
- Fix or re-run only when fixing is in scope.
- Failure after two scoped attempts: save evidence, quote the failing line or UI
state, and stop.
Output Contract
## Browser Automation Result Target: <page, feature, or flow> Runtime: <built-in browser | project runner | playwright-skill | blocked> Actions: <commands or browser action summary> Result: <pass | fail | blocked> Evidence: <screenshot/trace/output path or key observation> Next Fix: <only when failing or blocked>
Portable skills, agents, hooks, and Pi-native extensions for Claude Code, Codex CLI, GitHub Copilot, Cursor, Grok, and Pi. Gemini is retired.
Repo: alexei-led/cc-thingz
Other skills on cc-thingz.
- /playwright-skill
Support-only helper for `browser-automation`. Provides Playwright primitives: dev-server detection, a script runner (`scripts/run.js`), screenshot CLIs, and helper utilities (`scripts/lib/helpers.js`).
Open skill - /committing-code
Scope: inspect changes, group them, and create normal commits only. Do not rewrite history, amend existing commits, force-push, or stage secrets. Ground the proposal in git status, diff, and recent log output.
Open skill - /documenting-code
Scope: documentation files, agent instruction files, and useful code comments only. Not for code-quality review; use `reviewing-code` for that.
Open skill - /fixing-code
Follow the base skill. This Claude overlay only defines tool use and execution details.
Open skill - /improving-tests
Follow the base skill. This Claude overlay only defines tool use and execution details.
Open skill - /refactoring-code
Use this when many edits must preserve externally observable behavior. Stop if you cannot name the maintenance value and the behavior that must stay unchanged.
Open skill

