fec-tdd-workflow

Enforce failing tests before minimal implementations and refactoring in frontend TDD workflows.

21|3|Updated Mar 17, 2026

Search Tags:#workflow #testing #tdd #frontend #unit-testing #regression-testing

Ready to run

npx skills add https://github.com/bovinphang/frontend-craft --skill fec-tdd-workflow

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: fec-tdd-workflow
Source: https://github.com/bovinphang/frontend-craft/tree/main/localized/zh-CN/skills/fec-tdd-workflow
Command: npx skills add https://github.com/bovinphang/frontend-craft --skill fec-tdd-workflow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

用于帮助前端开发团队在实现新功能时采用测试驱动开发（TDD）的方法，先写失败测试，再实现最小代码，最后重构，提升质量与可维护性。

Core Features & Use Cases

先写失败测试：确保需求和契约在实现前就被验证。
最小实现驱动：仅实现通过测试所需的最小代码。
回归测试保障：新增变更带来回归时能快速回归验证。

Quick Start

Follow the cycle: write a failing test, implement the minimal code, and then refactor to keep coverage and clarity.

Frequently Asked Questions about fec-tdd-workflow

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

FAQPage Schema

How do I enforce a test-first frontend workflow for new UI components?▼

A test-first frontend workflow enforces writing failing tests for UI components before implementing minimal code and refactoring. This sequence ensures requirements are validated upfront, improving maintainability and providing immediate regression protection.

What is the minimal implementation step in test-driven development?▼

The minimal implementation step in test-driven development requires writing only the code necessary to pass the currently failing test. This disciplined iteration keeps frontend logic lean, auditable, and directly aligned with verified requirements.

Can I use test-driven development for frontend hooks and routing guards?▼

Test-driven development applies to frontend hooks, composables, utilities, API clients, and routing guards. It supports unit, integration, and end-to-end testing scenarios across UI frameworks to validate logic before implementation.

How do I retain regression tests when refactoring frontend code?▼

To retain regression tests during refactoring, maintain the tests written in the initial failing test phase while optimizing the minimal implementation. This ensures new changes do not break existing verified functionality and provides quick regression validation.

Does test-driven development work for both unit and integration testing in frontend applications?▼

Test-driven development works for unit, integration, and end-to-end testing scenarios in frontend applications. It enforces a disciplined testing sequence that validates components, hooks, and API clients across various UI frameworks.

When should I not use a test-first workflow for frontend development?▼

A test-first workflow may be unnecessary for rapid prototyping or exploratory UI design where visual layout is highly volatile. It is most effective when logic, API clients, and routing guards require strict regression testing and contract validation.