cyberneticlibrary
← library

Crawl prototype UI for visual audit

vibe-browser-auditskillsetup L3★3
richfrem/agent-plugins-skills ↗
What it does

Crawl prototype UI and compile visual/functional discovery report

Best for

Documenting what a rapid prototype looks like before architectural reengineering, identifying both preserved business logic and technical debt.

Inputs
  • · Running prototype URL (localhost:port)
  • · Prototype codebase (optional, for ecosystem audit)
Outputs
  • · DISCOVERY_REPORT.md (layout, components, API flows, console warnings)
  • · Preservation Gems vs Tech Debt analysis
  • · Component hierarchies and styling archetypes
  • · Network API intercepts with payload schemas
Requires
  • · Playwright or Puppeteer (Chrome DevTools Protocol)
  • · HTTP request/response tracing
  • · DOM tree inspection and screenshot capture
Preconditions
  • · Prototype server running on accessible localhost port
  • · Bash environment with Python/Node.js available
  • · Optional: source codebase for ecosystem audit
Failure modes
  • · Server not running on port: probe fails, ask user for correct URL
  • · JavaScript errors in console: documented in warnings section
  • · Network trace blocked by CORS: note as limitation in report
Trust signals
  • · Crawls every distinct page, modal, and drawer
  • · Captures actual DOM tree and styling classes
  • · Logs real HTTP requests with payloads
  • · Separates high-value logic (preserve) from boilerplate (replace)