skills.rest
masakinihirota
masakinihirotaCOMMUNITY
Explore all skills by this author →
𝕏@masakinihirotaGitHub

test-workflow

Guide Red-Green-Refactor TDD cycles with Vitest and React Testing Library.

Updated Feb 23, 2026
Search Tags:#code quality#vitest#testing#tdd#refactoring#react testing library
One-click install
npx skills add https://github.com/masakinihirota/vns-masakinihirota-better-old --skill test-workflow-masakinihirota
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: test-workflow
Source: https://github.com/masakinihirota/vns-masakinihirota-better-old/tree/main/.agent/skills/test-workflow
Command: npx skills add https://github.com/masakinihirota/vns-masakinihirota-better-old --skill test-workflow-masakinihirota

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the development process by enforcing a rigorous Test-Driven Development (TDD) cycle, ensuring code quality and reliability from the start.

Core Features & Use Cases

  • TDD Cycle Enforcement: Guides developers through the Red-Green-Refactor process for new features and bug fixes.
  • Testing Strategies: Provides best practices for UI, business logic, and integration testing using Vitest and React Testing Library.
  • Scenario Generation: Offers a structured approach to identifying comprehensive test cases, including edge cases and accessibility.
  • Use Case: When developing a new user authentication component, use this Skill to first write failing tests for login, signup, and password reset, then implement the minimum code to pass, and finally refactor for clarity and efficiency.

Quick Start

Follow the Red-Green-Refactor cycle to implement the new feature by writing a failing test first.

Frequently Asked Questions about test-workflow

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

FAQPage Schema
How do I implement a Test-Driven Development workflow with Vitest?▼

A Test-Driven Development workflow with Vitest enforces the Red-Green-Refactor cycle, guiding you to write failing tests first, implement the minimum code to pass, and then refactor for code quality and reliability.

What is the best way to test React UI components using TDD?▼

Testing React UI components using TDD involves writing failing tests with React Testing Library first, implementing the minimum component code to pass, and refactoring for clarity, while covering scenarios like edge cases and accessibility.

How do I structure test scenarios for business logic and integration testing?▼

Structuring test scenarios for business logic and integration testing requires generating comprehensive test cases that follow specific naming conventions, ensuring edge cases and integration paths are validated before implementation.

Can I use this TDD workflow for fixing existing bugs?▼

Yes, you can use this TDD workflow for bug fixes by first writing a failing test that reproduces the specific bug, implementing the minimum code correction to make it pass, and refactoring the updated logic.

Does this testing strategy cover accessibility scenarios?▼

Yes, this testing strategy includes accessibility scenarios within its structured test generation approach, ensuring UI components tested with React Testing Library meet accessibility standards alongside standard business logic validation.

Related Skills

Explore More Software Engineering Skills→
feraudetferaudet

test-conventions

Standardize TypeScript monorepo test conventions with Vitest and React Testing Library.

Community
Intermediate
ZhiruiFengZhiruiFeng
1

testing

Generate and execute unit, integration, and end-to-end test suites.

Community
Advanced
SandroBeatzSandroBeatz

lint-check

Run ESLint and TypeScript type checking on a codebase.

Community
Intermediate
hbvg234hbvg234
1

tdd

Automate RED→GREEN→REFACTOR cycles with multi-agent context isolation.

Community
Advanced