e2e-tdd

Guide UI feature development through the Plan-Red-Green-Refactor-Validate TDD cycle.

1|Updated Feb 3, 2026

Search Tags:#tdd #playwright #e2e testing #visual regression #ui development #agent-browser

Ready to run

npx skills add https://github.com/tacogips/QraftBox --skill e2e-tdd

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: e2e-tdd
Source: https://github.com/tacogips/QraftBox/tree/main/.agents/skills/e2e-tdd
Command: npx skills add https://github.com/tacogips/QraftBox --skill e2e-tdd

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the Test-Driven Development (TDD) process for user interface features, ensuring robust and visually verifiable code through a combination of automated testing and interactive browser verification.

Core Features & Use Cases

Full TDD Cycle: Guides users through the Plan-Red-Green-Refactor-Validate workflow.
Dual Tooling: Integrates agent-browser for ad-hoc checks and Playwright for repeatable tests.
Visual Confirmation: Enables visual regression testing and spot checks in a real browser environment.
Use Case: When developing a new dark mode toggle for a web application, use this Skill to write a Playwright test that fails initially (Red), implement the minimal code to pass (Green), refactor, and then visually confirm the behavior and appearance using agent-browser.

Quick Start

Use the e2e-tdd skill to implement a new UI feature following the Plan-Red-Green-Refactor-Validate cycle.

Frequently Asked Questions about e2e-tdd

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I implement end-to-end TDD for UI development?▼

End-to-end TDD for UI development is facilitated by guiding you through the Plan-Red-Green-Refactor-Validate cycle, using Playwright for automated regression testing and agent-browser for visual spot verification.

Can I use Playwright for visual regression testing during the TDD Red-Green-Refactor cycle?▼

Playwright is used for deterministic automated regression testing within the TDD cycle, ensuring your UI features pass the Green phase reliably before visual confirmation.

How does agent-browser work with Playwright for UI test verification?▼

Agent-browser provides interactive DOM inspection and visual confirmation in a real browser environment, complementing Playwright's automated tests by enabling ad-hoc visual spot checks and visual regression testing.

What is the best way to visually verify a UI feature implementation using TDD?▼

The best way to visually verify UI implementation is using a dual-tool approach: write failing Playwright tests first, implement the minimal code, and then use agent-browser for interactive visual confirmation.

Do I need both Playwright and agent-browser to run the e2e-tdd workflow?▼

Yes, the e2e-tdd workflow requires Playwright for deterministic automated testing and agent-browser for interactive DOM inspection and visual confirmation to complete the full TDD cycle.

When should I not use an end-to-end TDD approach for UI features?▼

End-to-end TDD for UI features is not suitable for rapid prototyping where visual spot verification and deterministic regression testing are unnecessary overhead during initial exploration.