← ClaudeAtlas

drive-local-webapplisted

Launch or connect to a local development web server and drive it with a reusable headless-Chromium command interface. Use when asked to render, smoke-test, interact with, verify, or screenshot a local frontend or HTML mockup.
ConnorGriffin/skills · ★ 18 · Web & Frontend · score 64
Install: claude install-skill ConnorGriffin/skills
# Drive a local web app Use the bundled Playwright driver instead of writing a one-off browser script. It keeps one page alive while reading commands from standard input and reports each command as `OK` or `FAIL`. ## One-time setup Resolve this installed skill's directory, then run: ```sh cd <drive-local-webapp-skill-directory> npm ci npx playwright install chromium ``` Node.js 20 or newer is recommended. Browser binaries are cached by Playwright. Verify the installation reproducibly: ```sh npm run self-check ``` ## Workflow 1. Start the target application's normal development or demo server. Use throwaway fixtures, never production or personal data. Check that the chosen port is free before binding it. 2. Run `node scripts/driver.mjs` from this skill directory and pipe one command per line: ```sh DRIVER_SCREENSHOT_DIR=/tmp/webapp-shots node scripts/driver.mjs <<'EOF' nav http://127.0.0.1:8766/ wait-for text=Dashboard click button:text-is("Settings") fill input[placeholder="API token"] :: demo-token click button:text-is("Save") screenshot console --errors EOF ``` 3. Treat any `FAIL` line or non-zero exit as a failed check. Treat a non-empty `CONSOLE_ERRORS` array as a failed check unless the error is explicitly expected. 4. Inspect the screenshot itself. File existence does not prove the intended UI rendered. If the host sandbox blocks Chromium process creation, rerun the same driver command with the client's narro