TWD brings real-browser AI test loops to Claude Code
TWD (Test While Developing) is an in-browser testing library with a Claude Code AI workflow that writes, runs, fixes, and grades frontend tests against the real DOM — no jsdom required.
Score breakdown
Kevin Julián Martínez Escobar introduces TWD (Test While Developing), an in-browser frontend testing library paired with a suite of Claude Code skills that let an AI agent handle the entire testing lifecycle. Unlike jsdom-based setups, TWD runs tests inside the real application via WebSocket, giving the agent a tight write-run-fix loop with live pass/fail feedback. The workflow spans six skills: `/twd:setup` for project configuration, `/twd` for AI-driven test authoring and iteration, `/twd:ci-setup` for GitHub Actions generation, `/twd:test-gaps` for coverage analysis, `/twd:test-quality` for grading test files, and `/twd:test-flow-gallery` for generating Mermaid flowcharts and plain-language summaries.
- 01TWD (Test While Developing) runs tests inside the real browser DOM, not jsdom or simulated environments.
- 02The AI workflow is a suite of Claude Code skills installed via `claude plugin marketplace add BRIKEV/twd-ai` and `claude plugin install BRIKEV/twd-ai`.
- 03`/twd:setup` generates `.claude/twd-patterns.md`, a config file that teaches the AI agent the project's testing conventions.
In a Dev.to guide, author Kevin Julián Martínez Escobar walks through TWD (Test While Developing), an in-browser testing library that runs tests against the real DOM inside the actual application — eliminating the fidelity gaps introduced by simulated environments like jsdom. The library includes a sidebar that shows test results in real time during development, and its core philosophy is to automate what developers already verify manually in the browser.
The centerpiece of the guide is TWD's AI workflow: a set of Claude Code skills installable via `claude plugin marketplace add BRIKEV/twd-ai` and `claude plugin install BRIKEV/twd-ai`.
The centerpiece of the guide is TWD's AI workflow: a set of Claude Code skills installable via `claude plugin marketplace add BRIKEV/twd-ai` and `claude plugin install BRIKEV/twd-ai`. The workflow begins with `/twd:setup`, which analyzes the project and produces `.claude/twd-patterns.md` — a configuration file encoding the project's framework, API patterns, auth middleware, and third-party module conventions. From there, the `/twd` skill writes tests informed by those patterns, sends them to the browser over WebSocket, reads pass/fail results, and iterates until all tests are green, with no screenshots or heavy payloads involved.
The remaining four skills extend the workflow beyond authoring. `/twd:ci-setup` auto-generates a GitHub Actions workflow using the official `twd-cli` action, handling coverage, contract validation, and Puppeteer setup. `/twd:test-gaps` cross-references routes against existing test files and flags high-risk untested or partially tested routes — prioritizing those involving mutations or permissions. `/twd:test-quality` grades each test file across four dimensions: journey coverage, interaction depth, assertion quality, and edge case handling, returning a letter grade with actionable suggestions. Finally, `/twd:test-flow-gallery` generates Mermaid flowcharts and plain-language summaries from test files so non-engineering stakeholders — product, QA, and new developers — can understand coverage without reading code.
Key facts
- 01TWD (Test While Developing) runs tests inside the real browser DOM, not jsdom or simulated environments.
- 02The AI workflow is a suite of Claude Code skills installed via `claude plugin marketplace add BRIKEV/twd-ai` and `claude plugin install BRIKEV/twd-ai`.
- 03`/twd:setup` generates `.claude/twd-patterns.md`, a config file that teaches the AI agent the project's testing conventions.
- 04The `/twd` skill writes tests, sends them to the browser via WebSocket, and iterates on failures in a write-run-fix loop — no screenshots or heavy payloads.