coding-agents
Drive Local Web Apps with Headless Chromium
Learn how the drive-local-webapp skill lets agents launch, interact, and screenshot local frontends using a persistent Playwright driver.
Where this fits
You've just made a change to a local React app and want your agent to verify the UI still works. Or you have an HTML mockup that needs a quick smoke test before you hand it off. Instead of writing a throwaway browser script every time, you need a reusable way to launch, drive, and screenshot a local web server. The drive-local-webapp skill provides exactly that—a persistent headless-Chromium command interface that reads one action per line and reports OK or FAIL.
Why agents benefit
- Persistent browser session – The driver keeps a single page alive across commands, so you can navigate, click, fill, and assert without reloading or re-initializing.
- Standard input protocol – Simple line-based commands (
nav,click,type,screenshot) make it easy to script from any agent framework or shell pipeline. - Deterministic screenshots – Save screenshots to a configurable directory, perfect for visual regression checks or for attaching evidence to a report.
- Zero one-off code – No need to write bespoke Puppeteer or Playwright scripts for each task; the skill's driver is battle-tested and reusable.
- Self-verifying setup –
npm run self-checkconfirms the installation works, so your agent can trust the environment before starting real work.
Practical scenarios
Smoke-test a local dev server after a refactor
After a large refactor, run the driver against your dev server, navigate to key routes, and assert that expected elements appear. The agent can pipe a list of nav and expect commands and report failures immediately.
Capture screenshots for a design review
Point the driver at an HTML mockup, take screenshots at multiple viewport sizes, and save them to a shared folder. This gives stakeholders a quick visual check without manual browser work.
Interact with a form and verify submission
Simulate a user filling out a form, clicking submit, and checking the success message. The driver's command interface makes it trivial to repeat the flow with different inputs, catching client-side errors early.
Add it to your agent workflow
Install the skill with:
npx skills add ConnorGriffin/skills --skill drive-local-webapp
Then run the driver against your local server:
DRIVER_SCREENSHOT_DIR=/tmp/webapp-shots node scripts/driver.mjs <<'EOF'
nav http://127.0.0.1:3000
click #login
fill #username alice
fill #password secret
click button[type=submit]
wait-for .welcome
screenshot home
EOF
Each command returns OK or FAIL, so your agent can branch on the result and retry or log as needed.
Compare before adopting
Before committing, evaluate the skill's quality signals: check the GitHub repo's star count, recent commits, and issue resolution activity. Compare it against alternatives like writing raw Playwright scripts, using Cypress for end-to-end tests, or using a headless browser via a different wrapper. Consider whether the command-line protocol fits your agent's existing tooling and whether the skill's maintenance cadence matches your project's pace.
Why it is worth tracking
With 18 stars and an active author, drive-local-webapp is a small but focused utility that solves a recurring problem for coding agents. Its self-check and clean command interface make it easy to integrate and test. If you frequently need to verify local frontends or mockups, this skill is worth evaluating now—and keeping an eye on as it evolves. For a broader look at how this skill fits into the OpenAgentSkill ecosystem, see the skill page.
Featured Skill
drive-local-webapp
Skill by ConnorGriffin