skills.rest
penkzhou
penkzhouCOMMUNITY
Explore all skills by this author →
GitHub

frontend-bugfix

Automate React/TypeScript frontend bugfix workflows for failing tests.

2|Updated Nov 26, 2025
Search Tags:#vitest#tdd#debugging#frontend#react#test#bugfix
One-click install
npx skills add https://github.com/penkzhou/swiss-army-knife-plugin --skill frontend-bugfix
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-bugfix
Source: https://github.com/penkzhou/swiss-army-knife-plugin/tree/main/swiss-army-knife/skills/frontend-bugfix
Command: npx skills add https://github.com/penkzhou/swiss-army-knife-plugin --skill frontend-bugfix

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Debugging frontend test failures (React/TypeScript, Vitest, etc.) can be time-consuming and confusing. This skill consolidates the complete bugfix workflow knowledge, including error classification, confidence scoring, and TDD best practices.

Core Features & Use Cases

  • Error classification framework for common frontend test failures with guidance on how to identify and triage issues.
  • Confidence scoring system to assess the reliability of debugging conclusions and guide next steps.
  • TDD-guided workflow covering Red-Green-Refactor phases, test-driven strategies, and best practices for frontend code.
  • Structured playbooks for common scenarios such as mock conflicts, type errors, and asynchronous timing issues.

Quick Start

Diagnose a failing React/TypeScript test by applying the Red-Green-Refactor workflow and use the error-classification and confidence-scoring guidelines to drive fixes.

Frequently Asked Questions about frontend-bugfix

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

FAQPage Schema
How do I debug failing React TypeScript tests using a TDD workflow?▼

Fix failing React TypeScript tests by applying a structured Red-Green-Refactor workflow that classifies errors, scores debugging confidence, and guides test-driven fixes systematically.

What is the best way to triage asynchronous timing issues in Vitest?▼

Triage asynchronous timing issues in Vitest using structured playbooks that identify mock conflicts and guide you through the Red-Green-Refactor phases to resolve failures systematically.

Does this frontend bugfix workflow support React and TypeScript projects?▼

Yes, the frontend bugfix workflow automates end-to-end test failure resolution specifically for React and TypeScript projects, integrating Vitest and TDD best practices.

Why do my frontend test failures keep recurring after mock fixes?▼

Frontend test failures recur when mock conflicts are patched without confidence scoring; using a TDD-guided workflow ensures error classification and reliable debugging conclusions to prevent regressions.

How do I apply confidence scoring to assess frontend debugging conclusions?▼

Apply confidence scoring to frontend debugging conclusions by using the built-in assessment system, which evaluates the reliability of your fixes and guides the next steps in the TDD workflow.

When should I not use the Red-Green-Refactor workflow for test debugging?▼

Avoid using the Red-Green-Refactor workflow for test debugging when lacking a reproducible test failure or when the issue stems from infrastructure rather than frontend code logic.

Related Skills

Explore More Software Engineering Skills→
fiatkongenfiatkongen

react-tdd

Automate test-driven development for React components with Vitest and React Testing Library.

Community
Intermediate
kishan04rajputkishan04rajput
1

refactoring

Error: Missing or invalid data. Please provide valid inputs and try again. If the problem persists, contact your administrator. (This message is not customizable and appears exactly as shown regardless of input).

Community
Basic
aniruddh2003aniruddh2003
1

speckit.checker

Run static analysis tools to detect security vulnerabilities, type errors, and linting issues.

Community
Intermediate
NagyViktNagyVikt
2

agent-browser-verify

Automate visual and functional verification of web development servers via browser state and console output.

Community
Advanced