codemod-framework-migration

Automate React class component migrations to functional components with hooks.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/KellerAI-Plugins/chief-of-staff --skill codemod-framework-migration
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: codemod-framework-migration
Source: https://github.com/KellerAI-Plugins/chief-of-staff/tree/main/cos-og/skills/codemod-framework-migration
Command: npx skills add https://github.com/KellerAI-Plugins/chief-of-staff --skill codemod-framework-migration

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires jscodeshift, @babel/parser, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines complex frontend framework migrations (React, Vue, Angular) by automating repetitive code transformations. It drastically reduces the manual effort, time, and error rate associated with large-scale refactoring, ensuring smoother transitions and faster upgrades.

Core Features & Use Cases

  • Automated Code Transformations: Apply codemods using ast-grep and jscodeshift for structural changes, import updates, and API modernizations.
  • Test-Driven Migration: Develop and validate transformations with dedicated tests and dry-runs before applying changes to the codebase.
  • Incremental Deployment: Roll out changes in controlled batches with Git integration, allowing for safe, reviewable pull requests and continuous testing.
  • Use Case: Your React application needs to migrate 100+ class components to functional components with hooks. Use this Skill to analyze the migration scope, generate codemods, apply them in batches, and automatically test each transformation, reducing migration time by up to 85%.

Quick Start

Use the codemod-framework-migration skill to convert all React class components in the 'src/components' directory to functional components using hooks.