@estebanforge/pi-ts-review

TypeScript / React code review against a focused TS + React rubric. Registers a ts_review tool that reads git diffs, filters to .ts/.mts/.cts/.tsx/.jsx, and attaches the rubric (18 entries across 2 sections: TypeScript types + React/JSX, including security and performance flaws). The rubric targets flaws that typescript-eslint (strict) and eslint-plugin-react-hooks do not reliably catch. Every rule is grounded in a confirmed online source — see Sources.

Sibling to @estebanforge/pi-go-review, pi-php-review, pi-rust-review, and pi-js-review. Pair with typescript-eslint and eslint-plugin-react-hooks for lint coverage; this tool focuses on the semantic mistakes those linters may not flag.

Install

pi install npm:@estebanforge/pi-ts-review

Usage

Ask Pi: "review my TypeScript changes" or "review my React changes."

The tool runs git in one of five modes:

Mode	Description	Needs ref
working	Unstaged changes	No
staged	Staged (cached) changes	No
all	All changes vs HEAD	No
commit	A specific commit	Yes (SHA)
range	A commit range	Yes (e.g. main..HEAD)

Narrow scope with path (a file or directory). The tool runs git from that path — so path can point into a nested repo (e.g. a package inside a workspace whose root is not itself a git repo).

What it does

1. Reads the git diff filtered to *.ts / *.mts / *.cts / *.tsx / *.jsx.
2. Attaches the TS + React rubric (18 entries, 2 sections).
3. The LLM reviews the diff and returns findings that propose a corrected snippet:

Severity	Meaning
Bug / Critical	Must fix
Suggestion	Should consider
Nit	Minor improvement
Good pattern	Well done

Each finding cites the entry number (e.g. #6), the file + code fragment, and a corrected snippet. Ends with a Verdict: Approve / Request Changes / Needs Discussion.

Rubric sections

Section	Entries
1. TypeScript Types	#1 - #3
2. React / JSX	#4 - #14

Scope note: this rubric deliberately excludes mistakes that typescript-eslint (strict) and eslint-plugin-react-hooks already enforce (e.g. any, non-null !, Rules of Hooks, exhaustive-deps, @ts-expect-error via ban-ts-comment). It targets the semantic gaps those linters miss: effect cleanup, fetch races, unstable effect deps, derived state, direct state mutation, stale updaters, unsafe as casts, falsy && render, dangerouslySetInnerHTML, plus React-specific security and performance flaws (URL injection, token storage, memoization-defeating inline props, context re-renders).

Sources

The rubric's rules were validated against confirmed online sources during research (searched via Exa and Brave). The sources live here in the README (not embedded in the rubric) to keep the per-call prompt lean.

#	Entry	Source
1	Unsafe as assertion	Effective TS — Item 9: Prefer annotations to assertions · basarat — type-assertion
2	unknown not narrowed	Total TypeScript — Narrowing unknown
3	Missing return types	typescript-eslint — explicit-module-boundary-types
4	Effect without cleanup	React — Lifecycle of Reactive Effects
5	Direct state mutation	React — Updating Objects in State
6	Stale state update	React — Queueing a Series of State Updates
7	dangerouslySetInnerHTML	React — dangerouslySetInnerHTML · OWASP XSS Prevention
8	Derived state via effect	React — You Might Not Need an Effect
9	Fetch-in-effect race	React — Synchronizing with Effects · Lifecycle of Reactive Effects
10	Controlled value/onChange	React — <input> reference
11	&& falsy render	React — Conditional Rendering
12	Index-as-key	React — Rendering Lists
13	setState in render loop	React — Components and Hooks must be pure
14	Unstable value in deps array	React — Removing Effect Dependencies
15	Untrusted URL in href/src	Pragmatic Web Security — Preventing XSS in React (Part 1): Data binding and URLs · OWASP XSS Prevention
16	Auth token in localStorage	OWASP — HTML5 Web Storage Security · IETF OAuth 2.0 for Browser-Based Apps
17	Inline props vs React.memo	React — memo reference · LogRocket The React pattern everyone uses that quietly kills performance
18	Context value recreated	Kent C. Dodds — How to optimize your context value

Primary authorities: Effective TypeScript (Dan Vanderkam), typescript-eslint, React docs (react.dev), Total TypeScript.

TUI rendering

Custom rendering for both the tool call and its result: mode, file count, insertions/deletions, and truncation status at a glance.

License

MIT