Works with the AI tools you already use
Claude Code
Cursor
Codex CLI
Muse
OpenClaw+21 moreClaude CodeCursorCodex CLIMuseOpenClaw
Manus
Grok
Grok Bot+18 agentsLocal Web Interface Probe
Drive, inspect, and debug local web apps with Playwright to capture screenshots, traces, and runtime evidence.
Free
Local Web Interface Probe
Example session with this skill installed
My Vite app is at ~/projects/taskflow and npm run dev serves on port 5173. The 'Create Project' button sometimes does nothing after the modal opens. Start the server if it's not up, open the app headless, go through the modal flow with a test project name, and tell me what actually happens. Capture console messages, failed requests, and full-page screenshots before and after the click, and if the save fires an API call, log its response. Leave the probe script in the project root so I can rerun it, and make sure nothing is left running when you're done.
- Read your context and instructions
- Compiled the local web interface
Summary
Probed the Create Project flow on http://127.0.0.1:5173 with a headless Chromium session. The button fails silently whenever the backend on :8000 is down — the modal's submit handler awaits POST /api/projects, the request fails, and no error branch renders.
| Step | Expected | Observed |
|---|---|---|
| Open app | Title + modal trigger render | OK, 0 console errors |
| Click 'Create Project' | Modal becomes visible | OK after ~120 ms |
| Fill name, submit | POST /api/projects returns 200 | ECONNREFUSED, unhandled promise rejection |
| Success feedback | Toast or redirect | Nothing; button stuck disabled |
| Evidence | Before/after captures | /tmp/before-click.png, /tmp/after-click.png |
Also saved: /tmp/probe/trace.zip and console.log. Reusable probe script written to ~/projects/taskflow/probe_create_project.py — rerun with python probe_create_project.py; it boots both servers if needed and shuts them down on exit.
Next steps
- Add an error branch to the modal submit handler so a failed POST re-enables the button and shows a toast
- Boot the API alongside the frontend in the dev script so the UI is never orphaned
- Re-run the probe script after the fix as a regression smoke check
Connects securely to your tools. The creator never sees your data.
About this skill
The problem
Static code analysis and raw HTML inspection fail to capture the behavior of modern SPAs and hydrated interfaces. You cannot debug what you cannot see, especially when UI elements only appear after JavaScript execution, routing, or specific user interactions.
What it does
- Launches headless Playwright instances to drive and inspect locally running web applications.
- Manages local server lifecycles, ensuring dev servers start and stop alongside the browser session.
- Captures runtime evidence including screenshots, full-page traces, console logs, and network failures.
- Discovers interactive elements like buttons, inputs, and links by evaluating the live, rendered DOM.
- Handles complex interactions such as dialogs, popups, and authenticated states through storage state reuse.
Frameworks & tools
Playwright, Python, Node.js dev servers, Chromium.
Why this beats prompting it yourself
General LLMs often suggest brittle CSS selectors or unreliable network-idle waits that cause flaky tests. This skill provides resilient interaction patterns, specific lifecycle management for local processes, and robust inspection scripts that extract the actual rendered state instead of guessing from source code.
Use cases
- Verify UI changes in a local React or Vue dev server before committing code.
- Debug a broken form submission by capturing the full network and console trace.
- Perform smoke tests on a local site across desktop and mobile viewports.
- Automate multi-step setups in a local dashboard to bypass repetitive manual navigation.
Known limitations
Requires local installation of Playwright and browser binaries. Not designed for complex CI/CD test suite architecture.
How to install
Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.
- 1
Download the ZIP
Free skills download straight away. Paid skills unlock right after purchase.
- 2
Unzip into your skills folder
Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.
- 3
Ask your agent to use it
Restart the agent if it was already running. It picks the skill up automatically - no config needed.
Skills folder by agent
Click the path to copy it. Create the folder if it does not exist yet.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
3 installs
Downloaded by developers to date
Free forever
No account required to browse
Trust & safety
Security scanned
Verified clean 12 days ago
- Free to download with an account