Skills
.Work. You
Rest

e2e-tdd

Community

End-to-end TDD for UI development.

Software Engineering#tdd#playwright#e2e testing#visual regression#ui development#agent-browser
Authortacogips
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: e2e-tdd
Download link: https://github.com/tacogips/QraftBox/archive/main.zip#e2e-tdd

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.