Individual skill
ast-grep-typescript-react
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.
skills/.experimental/ast-grep-typescript-react/SKILL.md
Source commit cf93c57cac89d6fc3e4194686000411567f5caf3
What was checked
- Matches the observed repository HEAD
- Yes
- Scanner rules are current
- No
- Repository scan complete
- No
- Skill scan complete
- No
- Observed behavior
- Not checked yet
- Last checked
- Nov 5, 2026
These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.
Install this skill
Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.
An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.
Repository context
- Repository stars (not skill ratings)
- 222
- Repository last updated
- Aug 15, 2026
- License
- MIT
Observed agent integration: codex
- writing Derived category
- testing Derived category
- engineering Derived category
- engineering-web Derived category
Files and excerpt
File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.
Browse files
AGENTS.mddoc · 3,359 bytesSKILL.mdcore · 4,845 bytesSKILL.mdcore · 4,845 bytesSKILL.mdcore · 4,845 bytesSKILL.mdcore · 4,845 bytesSKILL.mdcore · 4,845 bytesassets/templates/_template.mddoc · 1,023 bytesmetadata.jsonasset · 1,137 bytesreferences/_sections.mddoc · 1,993 bytesreferences/ctx-fragment-context-selector.mddoc · 1,466 bytesreferences/fix-jsx-rewrite-completeness.mddoc · 1,210 bytesreferences/jsx-attribute-metavars.mddoc · 1,202 bytesreferences/jsx-self-closing-vs-paired.mddoc · 1,126 bytesreferences/lang-scan-ts-and-tsx.mddoc · 1,450 bytesreferences/lang-tsx-for-jsx.mddoc · 1,251 bytesreferences/napi-lang-tsx-findall.mddoc · 1,270 bytesreferences/ts-as-expression-casts.mddoc · 1,042 bytesreferences/ts-generic-react-fc.mddoc · 1,619 bytesreferences/ts-type-only-imports.mddoc · 1,170 bytes
Read excerpt
# 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`
