If you've ever watched an AI assistant generate a test file and thought "that looks right" only to spend the next twenty minutes fixing imports, selectors, and mock shapes — this series is for you.
TWD (Test While Developing) is an in-browser testing library built around a simple idea: tests should run inside your real application, against the real DOM, while you develop. No jsdom. No simulated environments. Just your app, a sidebar showing results in real time, and instant feedback as you code.
Over the past year, TWD has grown into a full ecosystem — and the part that changed everything is the AI workflow. A set of skills for Claude Code that let an AI agent write tests, execute them in your browser, fix failures, set up CI, find gaps in your coverage, grade the quality of your tests, and generate visual documentation for your whole team.
This series walks through each piece, in the order you'd use them.
What the Series Covers
1. Stop Letting AI Write Untestable Code. Add Determinism Back with TWD
The starting point. Run /twd:setup to analyze your project, answer a few questions, and generate .claude/twd-patterns.md — a configuration file that teaches the AI agent your project's testing conventions. Framework detection, API patterns, auth middleware, third-party modules — all captured in one file.
2. Your AI Doesn't Just Write Tests. It Runs Them Too
The core of the workflow. The /twd skill writes tests based on your project patterns, sends them to your browser via WebSocket, reads pass/fail results, and iterates until they're green. No screenshots, no heavy payloads — just a tight write-run-fix loop.
3. From Local Tests to CI in One Command
Once you have tests, /twd:ci-setup detects your project configuration and generates a GitHub Actions workflow using the official twd-cli action. Coverage, contract validation, Puppeteer setup — handled automatically.
4. Your Tests Are Running — But Are They Covering the Right Things?
The /twd:test-gaps skill scans your routes, cross-references them against your test files, and classifies each one as tested, partially tested, or untested. High-risk routes with mutations or permissions are flagged first so you know where to focus.
5. Your Tests Pass. But Are They Good?
Having tests is not the same as having good tests. The /twd:test-quality skill grades each test file across four dimensions: journey coverage, interaction depth, assertion quality, and edge case handling. Each file gets a letter grade and actionable suggestions.
6. Turning Your Test Suite Into a Visual Map Your Whole Team Can Read
The final piece. The /twd:test-flow-gallery skill generates Mermaid flowcharts and plain-language summaries from your test files. New developers can understand coverage without reading code. Product can see which user journeys are validated. QA can spot gaps at a glance.
The Philosophy Behind It
TWD is built on a simple principle: automate what you already verify manually. If you check that a form submits correctly by filling it out in the browser, that's your test. TWD just makes it repeatable.
The AI workflow extends that same idea. Instead of writing tests after the fact, the agent writes them as part of the development process — using your conventions, running them against your real app, and iterating until they pass.
The philosophy hasn't changed. What changed is that now your AI agent tests while developing too.
Getting Started
Install the TWD AI plugin for Claude Code:
claude plugin marketplace add BRIKEV/twd-ai
claude plugin install BRIKEV/twd-ai
Then run /twd:setup in your project to kick things off. The rest of the series follows from there.
Full documentation: twd.dev
Source: github.com/BRIKEV/twd-ai
