playbooks

home / skills / harborgrid-justin / lexiflow-premium / codemod-construction-ast

codemod-construction-ast skill

/frontend/.github-skills/codemod-construction-ast

This skill automates large-scale React codebase refactoring by transforming JSX with ASTs, updating imports, and ensuring tests pass.

npx playbooks add skill harborgrid-justin/lexiflow-premium --skill codemod-construction-ast

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
865 B
---
name: codemod-construction-ast
description: Automate large-scale codebase refactoring using AST transformations on React code.
---

# Codemod Construction with ASTs

## Summary
Automate large-scale codebase refactoring using AST transformations on React code.

## Key Capabilities
- Parse React syntax (JSX) into manipulate ASTs (jscodeshift).
- Write robust transforms for prop renaming and component restructuring.
- Update imports and dependencies programmatically.

## PhD-Level Challenges
- Handle diverse coding styles and formatting preservation.
- Implement complex logic for hook migration (Class to Function).
- Verify AST transform correctness across the entire repo.

## Acceptance Criteria
- Deliver a codemod script for a specific refactor task.
- Apply the codemod successfully to the codebase.
- Provide unit tests for the transformation logic.

Overview

This skill automates large-scale React codebase refactors by building codemods that operate on ASTs. It focuses on reliable, repeatable transformations such as prop renames, component restructuring, and import updates. The goal is to reduce manual edits while preserving formatting and behavior across a premium legal management platform codebase.

How this skill works

The skill uses a parser that understands JSX to convert source files into an AST, then applies jscodeshift-style transforms to locate and modify nodes. Transforms include renaming props, rewriting component shapes, migrating class components to hooks, and adjusting import paths. Changes are validated with unit tests and dry-run applications before committing.

When to use it

  • Renaming props or components across hundreds of files
  • Refactoring class components into function components with hooks
  • Restructuring component APIs without breaking consumers
  • Updating import paths after package restructuring
  • Enforcing consistent patterns and removing deprecated APIs

Best practices

  • Write small, focused transforms and compose them for complex tasks
  • Include unit tests that run transforms against representative code snippets
  • Perform dry-run and staged application with git to review changes
  • Preserve original formatting where possible and document any stylistic changes
  • Handle edge cases explicitly (dynamic props, spread attributes, conditional rendering)

Example use cases

  • Rename a commonly used prop across all JSX files and update affected imports
  • Migrate a set of class components to function components, converting lifecycle logic to hooks
  • Consolidate multiple similar components into a single higher-order component and update usage
  • Automate replacement of deprecated third-party components with modern alternatives
  • Adjust folder or package paths and update all related import statements

FAQ

How do you ensure a transform doesn't break runtime behavior?

I include unit tests that validate AST-to-AST expectations, run transforms in a dry mode, and recommend applying changes in CI with integration tests before merging.

Can transforms handle varied coding styles and formatting?

Yes. Transforms target AST nodes rather than text, which preserves semantics; I also add explicit handling for common style variations and use formatting tools in a final pass.