ast-grep-typescript-react

name

ast-grep-typescript-react

description

Use this skill when writing, debugging, or reviewing ast-grep patterns, YAML rules, or codemods against TypeScript or React (.ts/.tsx) code — searching for JSX elements, props, hooks, imports, or type constructs, and rewriting them. Covers the TS/React-specific traps — the tsx-vs-typescript language split, JSX and TypeScript node kinds, fragment matching, rewrites, and the @ast-grep/napi API. Complements the general-purpose ast-grep skill (rule mechanics) — reach for this one whenever the target code is TypeScript or React.

ast-grep for TypeScript & React

The wrong defaults a capable model hits when pointing ast-grep at .ts/.tsx code — mostly cases where a rule silently matches nothing because the language or a node kind was guessed wrong. This skill assumes you already know ast-grep's rule mechanics (patterns, meta-variables, all/any/has/inside, constraints); it corrects only what TypeScript and React add on top.

For general ast-grep rule-writing mechanics, use the companion ast-grep skill.

When to Apply

• Writing an ast-grep pattern or YAML rule whose target is .ts or .tsx code
• Searching for JSX elements, props, React hooks, imports, or TS type constructs
• Building a codemod that rewrites JSX or TypeScript (rename a component, strip React.FC, migrate imports)
• A rule "matches nothing" on TSX and you don't know why (usually the language or a node kind)
• Driving ast-grep programmatically from a JS/TS script via @ast-grep/napi

First moves when a TS/React rule misbehaves

1. Check the language. JSX-bearing files must run under tsx, never typescript. This is the single most common cause of silent no-match. See .