skills.rest
tacogips
tacogipsCOMMUNITY
Explore all skills by this author →
𝕏@yu_kawa_tacoGitHub

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
One-click install
npx skills add https://github.com/tacogips/QraftBox --skill e2e-tdd
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
cheatcode-aicheatcode-ai
15

webapp-testing

Automate local web application testing with Playwright and headless Chromium.

Official
Intermediate
AutumnsGroveAutumnsGrove
26

webapp-testing

Automate end-to-end web testing across Chromium, Firefox, and WebKit with Playwright.

Community
Advanced
pacphipacphi
14

Chrome DevTools

Debug web pages via Chrome DevTools MCP with performance, network, and DOM inspection.

Community
Advanced
gzp79gzp79

playwright-testing

Automate browser-based tests for API integrations and user journeys with Playwright.

Community
Advanced