component-fix-and-verify

Apply a diagnosed fix to a Next.js component with diff preview and verification.

5|1|Updated Jan 23, 2026
One-click install
npx skills add https://github.com/dtsong/my-claude-setup --skill component-fix-and-verify
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: component-fix-and-verify
Source: https://github.com/dtsong/my-claude-setup/tree/main/skills/frontend-qa/component-fix-and-verify
Command: npx skills add https://github.com/dtsong/my-claude-setup --skill component-fix-and-verify

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of applying a specific, diagnosed code fix to a component and then rigorously verifying its correctness through automated checks.

Core Features & Use Cases

  • Apply Diagnosed Fixes: Integrates with prior diagnosis reports to apply a single, targeted code change.
  • Mandatory Diff Preview: Ensures you review the exact code modifications before they are applied.
  • Phased Verification: Executes scoped checks on affected files followed by broad project-wide checks (TypeScript, linting, tests) to ensure the fix doesn't introduce regressions.
  • Atomic Safety & Revert: Provides the capability to revert changes if verification fails.
  • Use Case: After a bug is diagnosed and a specific fix is identified for a React component, use this Skill to apply that fix, preview the changes, run tests specifically for that component, and then run the full test suite to ensure no other part of the application is broken.

Quick Start

Apply the fix described in the DiagnosisReport and verify the changes.

Frequently Asked Questions about component-fix-and-verify

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

FAQPage Schema
How do I apply a diagnosed fix to a Next.js component and verify it?

Apply a diagnosed fix to a Next.js component by integrating with prior diagnosis reports, previewing the mandatory diff, and executing phased verification including tsc, lint, and tests to ensure correctness.

What's the best way to ensure a React component fix doesn't introduce regressions?

Ensure a React component fix does not introduce regressions by executing phased verification, running scoped checks on affected files followed by broad project-wide checks using TypeScript, linting, and testing frameworks like Vitest or Jest.

Can I preview code modifications before applying a fix to a component?

Yes, you can preview code modifications through a mandatory diff preview feature that ensures you review the exact code changes before they are applied to the component.

Does this verification process work with Vitest and Jest testing frameworks?

Yes, the verification process works with testing frameworks like Vitest or Jest, executing predefined verification commands to validate component changes alongside TypeScript and linting checks.

How do I revert Next.js component changes if verification fails?

You can revert Next.js component changes using atomic safety capabilities that automatically undo modifications if the scoped or broad verification checks fail.

Why do I need to validate file paths against component maps before applying fixes?

Validating file paths against component maps ensures that the diagnosed fix targets the correct component, maintaining structural integrity before executing verification commands.