dev-tdd-frontend

Facilitate test-driven development for Angular and TypeScript applications.

7|3|Updated Mar 19, 2026
One-click install
npx skills add https://github.com/eriklieben/agentic-dev-workflow --skill dev-tdd-frontend
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dev-tdd-frontend
Source: https://github.com/eriklieben/agentic-dev-workflow/tree/main/.claude/skills/dev-tdd-frontend
Command: npx skills add https://github.com/eriklieben/agentic-dev-workflow --skill dev-tdd-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses the challenge of maintaining high code quality and test coverage in modern Angular applications by enforcing a strict test-driven development cycle.

Core Features & Use Cases

  • TDD Lifecycle Enforcement: Guides the developer through the Red-Green-Refactor loop using Vitest and Angular TestBed.
  • Modern Angular Support: Optimized for standalone components, signals, zoneless change detection, and modern control flow.
  • Integrated Testing: Provides patterns for unit testing services, functional guards, and template-driven forms, alongside E2E testing with Playwright.

Quick Start

Invoke the dev-tdd skill by providing a feature description to initiate the test-driven development cycle for your Angular component or service.

Frequently Asked Questions about dev-tdd-frontend

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

FAQPage Schema
How do I start a TDD cycle for a specific Angular feature description?▼

To start a TDD cycle, you provide a feature description to initiate the test-driven development workflow. The skill then generates the necessary Vitest and Angular TestBed testing patterns to drive your component or service implementation.

How do I enforce test-driven development in Angular using Vitest?▼

To enforce test-driven development in Angular, this skill guides you through the Red-Green-Refactor loop using Vitest and Angular TestBed. It provides standardized testing patterns to ensure high code coverage and runtime stability for your components and services.

Can I use Playwright for E2E testing alongside Angular TestBed unit tests?▼

Yes, you can use Playwright for E2E testing alongside Angular TestBed unit tests. This skill provides integrated testing patterns that combine Vitest unit tests for services and guards with Playwright end-to-end verification.

Does this TDD workflow support modern Angular features like signals and zoneless change detection?▼

Yes, this TDD workflow supports modern Angular features including signals, zoneless change detection, and standalone components. It specifically utilizes signal-based assertions to verify runtime stability within your test-driven development cycle.

What is the best way to test functional guards and template-driven forms in TypeScript?▼

The best way to test functional guards and template-driven forms is by applying the standardized Vitest and Angular TestBed patterns provided by this skill. It ensures high code coverage through strict test-driven development practices for TypeScript applications.

How do I start a TDD cycle for a specific Angular feature description?▼

To start a TDD cycle, you provide a feature description to initiate the test-driven development workflow. The skill then generates the necessary Vitest and Angular TestBed testing patterns to drive your component or service implementation.