refactor-react — how to use refactor-react how to use refactor-react, refactor-react setup guide, refactor-react vs react-testing-library, refactor-react install, what is refactor-react, refactor-react alternative, refactor-react tutorial, refactor-react storybook integration, refactor-react typescript support

v1.0.0
GitHub

About this Skill

Ideal for Frontend Agents working with React and TypeScript, seeking efficient component refactoring and test updating capabilities. refactor-react is a technical skill that automates the refactoring process of React components, focusing on updating corresponding tests and Storybook stories.

Features

Updates corresponding `*.test.tsx` files after refactoring React components
Modifies `*.stories.tsx` files to reflect changes in component props and structure
Runs `pnpm run test:run` and `pnpm run typecheck` to ensure code integrity
Verifies Storybook stories for display issues after refactoring
Ensures test assertions and queries are updated to maintain test integrity

# Core Topics

hakushun hakushun
[0]
[0]
Updated: 3/9/2026

Quality Score

Top 5%
20
Excellent
Based on code quality & docs
Installation
SYS Universal Install (Auto-Detect)
Cursor IDE Windsurf IDE VS Code IDE
> npx killer-skills add hakushun/ai-dev-starter/refactor-react

Agent Capability Analysis

The refactor-react MCP Server by hakushun is an open-source Community integration for Claude and other AI agents, enabling seamless task automation and capability expansion. Optimized for how to use refactor-react, refactor-react setup guide, refactor-react vs react-testing-library.

Ideal Agent Persona

Ideal for Frontend Agents working with React and TypeScript, seeking efficient component refactoring and test updating capabilities.

Core Value

Empowers agents to refactor React components while ensuring updated tests and Storybook stories, utilizing TypeScript and executing commands like `pnpm run test:run` and `pnpm run typecheck` for validation.

Capabilities Granted for refactor-react MCP Server

Refactoring React components with updated props and structure
Updating corresponding `*.test.tsx` and `*.stories.tsx` files
Validating Storybook stories for display integrity after refactoring

! Prerequisites & Limits

  • Requires React and TypeScript setup
  • Storybook integration necessary for full functionality
  • Dependent on `pnpm` for test and typecheck execution
Project
SKILL.md
534 B
.cursorrules
1.2 KB
package.json
240 B
Ready
UTF-8

# Tags

[No tags]
SKILL.md
Readonly

リファクタ時のテスト・Storybook

  • コンポーネントの props や構造を変えたら、対応する *.test.tsx*.stories.tsx を必ず更新する。
  • テストが落ちたら意図を保ちつつアサーションやクエリを修正する。テストを削除して済ませない。
  • Storybook のストーリーで props や decorators を変更した場合、表示が崩れていないか確認する。
  • リファクタ後に pnpm run test:runpnpm run typecheck を実行して通す。

Related Skills

Looking for an alternative to refactor-react or building a Community AI Agent? Explore these related open-source MCP Servers.

View All

widget-generator

Logo of f
f

widget-generator is an open-source AI agent skill for creating widget plugins that are injected into prompt feeds on prompts.chat. It supports two rendering modes: standard prompt widgets using default PromptCard styling and custom render widgets built as full React components.

149.6k
0
Design

testing

Logo of lobehub
lobehub

Testing is a process for verifying AI agent functionality using commands like bunx vitest run and optimizing workflows with targeted test runs.

73.3k
0
Communication

chat-sdk

Logo of lobehub
lobehub

chat-sdk is a unified TypeScript SDK for building chat bots across multiple platforms, providing a single interface for deploying bot logic.

73.0k
0
Communication

zustand

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

72.8k
0
Communication