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 lang-tsx-for-jsx.
2. Debug the pattern's AST. ast-grep run --pattern '<your pattern>' --lang tsx --debug-query=ast on a real snippet shows the node kinds and reveals ERROR nodes. Trust this over guessed kind names.
3. Wrap fragments. If the pattern is an attribute, prop, or type annotation, it needs context + selector. See ctx-fragment-context-selector.