visual-dev-loop
Installation
SKILL.md
Visual Development Loop
Use this skill when developing frontend/UI features that need visual verification. The agent runs an automated loop: build → preview → screenshot → inspect → fix → repeat until the task is complete.
Tooling Overview
| Tool | Purpose |
|---|---|
| portless | Run dev server with named URL: https://myapp.localhost |
| chrome-devtools MCP | Navigate, screenshot, snapshot, inspect console, network, performance |
| agent-browser MCP | Annotated screenshots (numbered labels), visual diff, React tree inspection, Web Vitals |
Port-Specific Guidance
When running portless as a Bash command, use the PORT env var if port 443 is unavailable:
PORT=443 portless myapp npm run dev