Playbook for Vibe-Coding Zero-Dependency Web Apps with AI Agents
A software engineer successfully built a fully featured, offline-first kids' math game using AI coding agents with zero runtime dependencies. The project demonstrates how to enforce strict unit testing and Puppeteer smoke tests to keep AI-generated code robust and maintainable.
Impact: Medium
Why it matters
You can adopt this architecture to build ultra-lightweight, private, and highly performant web tools using Claude or Cursor without getting bogged down in framework overhead.
TL;DR
- 01Enforce strict testing via native Node unit tests and Puppeteer to keep AI-generated code robust.
- 02Keep bundle sizes minimal (~35 KB) by choosing Vanilla JS and Canvas over heavy frameworks.
- 03Pre-generate heavy assets like audio during development to eliminate runtime API costs and latency.
Key facts
- Core bundle size
- ~35 KB
- Optional audio assets
- ~1.5 MB (lazy-loaded)
- Runtime dependencies
- 0
- State storage
- localStorage (completely offline)
Zero-Dependency Architecture
Escape Run is built using Vanilla JS and Canvas with zero runtime dependencies and no build step. The core game logic fits within a ~35 KB bundle, with an optional ~1.5 MB of lazy-loaded audio assets. All progress is saved locally using localStorage, ensuring complete offline support and user privacy.
Hardening AI Code with Automated Tests
To keep the AI coding agent honest and prevent silent failures, the developer implemented a strict testing layer. Pure game logic (such as skill generators, mastery models, and the Leitner-style spaced-repetition scheduler) is verified using Node's built-in test runner (node --test), completely avoiding heavy testing frameworks. Browser automation tests live in tests/smoke.mjs and tests/nav.mjs, utilizing puppeteer-core to run headless Chrome checks.
Pre-Generated Asset Pipeline
Instead of hitting external APIs during runtime, voice narration and audio effects were generated using ElevenLabs at development time and committed directly to the repository under assets/audio/. A custom script tools/gen-audio.mjs manages these generation tasks when prompts are modified. If these audio files are missing, the engine gracefully falls back to a procedural WebAudio synthesizer.
Try it in 2 minutes
python3 -m http.server 8000
node --testbash
✓ When to use
- When vibe-coding small-to-medium web tools and games using AI coding agents
- When building privacy-first applications that must run completely offline without server-side compute
- When you want to maintain absolute control over performance and keep bundle sizes under 50 KB
✕ When NOT to use
- For large-scale enterprise web systems that heavily rely on complex state-management frameworks like React or Redux
- When you require real-time server-side synchronization and multi-user multiplayer state
What to do today
- Clone the escape-run repository to inspect its testing and asset generation workflows.
- Run `node --test` to see native Node.js unit tests running without third-party frameworks.
- Try implementing headless browser testing in your current AI coding agent workspace using puppeteer-core.
Sources