skills.rest
hakushun
hakushunCOMMUNITY
Explore all skills by this author →
GitHub

refactor-react

Update React component tests and Storybook stories after refactors.

Updated Feb 4, 2026
Search Tags:#react#qa#component#refactor#storybook#update#tests
One-click install
npx skills add https://github.com/hakushun/ai-dev-starter --skill refactor-react-hakushun
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
factorialcofactorialco
27

f0-storybook-stories

Generate .stories.tsx files for F0 React components with meta, args, and argTypes.

Official
Intermediate
cartridge-ggcartridge-gg
80

update-storybook-snapshots

Update Storybook visual regression snapshots after intentional UI changes.

Official
Intermediate
gil00pitagil00pita

storybook

Develop, document, and test UI components in isolated Storybook workshops.

Community
Intermediate
SolaneHubSolaneHub

react-modernization

Migrate React class components to hooks and upgrade to React 18.

Community
Advanced