refactor-react

Update React component tests and Storybook stories after refactors.

Updated Feb 4, 2026

Search Tags:#react #qa #component #refactor #storybook #update #tests

Ready to run

npx skills add https://github.com/hakushun/ai-dev-starter --skill refactor-react-hakushun

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: refactor-react
Source: https://github.com/hakushun/ai-dev-starter/tree/main/.cursor/skills/refactor-react
Command: npx skills add https://github.com/hakushun/ai-dev-starter --skill refactor-react-hakushun

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams ensure that tests and Storybook stay in sync when refactoring React components, preventing drift between implementation, tests, and visual documentation.

Core Features & Use Cases

Guidance on updating related .test.tsx and .stories.tsx files to reflect prop or structure changes.
Consistency checks to ensure Storybook renders correctly after refactor, including decorators and story props.
Verification workflow that suggests running the project’s test and Storybook pipelines to confirm changes.

Quick Start

Refactor a React component, then update the related tests (.test.tsx) and Storybook stories (.stories.tsx) to reflect the new interface, and run the project’s tests and Storybook to verify the changes.

Frequently Asked Questions about refactor-react

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

FAQPage Schema

How do I keep Storybook stories in sync when refactoring React component props?▼

Keeping Storybook stories in sync during React component refactoring involves updating *.stories.tsx files to match new prop structures and verifying the rendering by running the project's existing Storybook pipeline.

What is the best way to update test files after changing a React component structure?▼

The best way to update test files after changing a React component structure is to modify the related *.test.tsx files to match the refactored component and validate the results using existing test pipelines like pnpm run test:run.

Do I need to install additional dependencies to update tests and Storybook during a React refactor?▼

You do not need to install additional dependencies to update tests and Storybook during a React refactor, as the workflow relies entirely on existing project tooling and validation pipelines.

How do I verify React component refactors do not break existing tests and Storybook stories?▼

To verify React component refactors do not break tests and Storybook stories, execute the project's existing verification pipelines, such as pnpm run test:run and pnpm run storybook, to confirm all updates pass.

Why does my Storybook render incorrectly after updating React component props?▼

Storybook may render incorrectly after updating React component props when the related *.stories.tsx files, including decorators and story props, are not updated to match the newly refactored component interface.