red-green-fix

Fixes bugs as two commits so CI proves the regression test catches the bug.

2.0k|679|Updated Jun 13, 2024
One-click install
npx skills add https://github.com/Comfy-Org/ComfyUI_frontend --skill red-green-fix
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: red-green-fix
Source: https://github.com/Comfy-Org/ComfyUI_frontend/tree/main/.claude/skills/red-green-fix
Command: npx skills add https://github.com/Comfy-Org/ComfyUI_frontend --skill red-green-fix

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

When a test and its fix are committed together, reviewers cannot tell whether the test actually detects the bug or is a no-op. This Skill splits bug fixes into a failing-test commit followed by a minimal-fix commit, creating a verifiable red-then-green CI trail.

Core Features & Use Cases

  • Red-Green Commit Sequence: Commits a failing test first (CI red), then the minimal fix (CI green), proving test validity through CI history.
  • Framework Selection Guidance: Routes logic bugs to Vitest colocated tests and UI/canvas bugs to Playwright browser tests, with examples for each.
  • Anti-Pattern Reference: Ships a reference document covering testing anti-patterns like over-mocking, assertion-free tests, and weakened assertions that invalidate the proof.
  • Use Case: A user reports that absolute model paths resolve incorrectly. The Skill writes a failing Vitest test, pushes it to confirm CI goes red, then applies the minimal path-resolution fix and confirms CI goes green before opening a PR.

Quick Start

Ask the assistant to fix a bug using the red-green workflow and provide a short description of the bug to reproduce.

Frequently Asked Questions about red-green-fix

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

FAQPage Schema
How do I prove a regression test actually catches a bug?

Commit the failing test alone first and let CI run it to produce a red failure, then commit the minimal fix separately so CI turns green. This red-then-green sequence in commit history proves the test detects the bug rather than being a no-op.

How to choose between Vitest and Playwright for a bug fix test?

Use Vitest colocated tests in src*.test.ts for logic, utils, stores, and composables bugs. Use Playwright tests in browser_tests/tests/*.spec.ts for UI interaction, canvas, and workflow bugs.

What should I do if the test passes when it should fail?

The test is not reproducing the bug, so revisit it before pushing. Check that the test setup matches the actual bug scenario, such as specific path formats or workflow structures, and that you are not accidentally testing the happy path.

Can I modify the failing test when writing the fix commit?

No, the test from the red commit is immutable during the fix step. Weakening assertions, updating snapshots, or adding mocks to make it pass invalidates the proof; restart from the test step if changes are needed.

Why does CI fail on the test commit for unrelated reasons?

Lint, typecheck, or other tests may fail independently of your new test. Check CI logs carefully and fix unrelated failures in a separate commit beforehand so the red status is clearly attributable to your test.