Stats
Actions
Tags
From frontend-skills
Installs React Compiler with rsbuild and enforces compiler-friendly patterns via PostToolUse hooks. Flags manual memoization, derived state, useRef cache. Use when setting up React Compiler.
How this skill is triggered — by the user, by Claude, or both
Slash command
/frontend-skills:setup-react-compilerThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
- **babel-plugin-react-compiler** with rsbuild
useMemo/useCallback/React.memo (compiler handle), derived-state-via-useEffect, useRef as memo cache'use no memo' escape hatch + auto-skip component library dirsREACT_COMPILER_MODE=annotation) for brownfield: flag only files with "use memo"See REFERENCE.md for post-compiler rules.
bun add -D babel-plugin-react-compiler @rsbuild/plugin-babel --yarn
import { pluginBabel } from '@rsbuild/plugin-babel';
export default {
plugins: [
pluginBabel({
babelLoaderOptions: {
plugins: [['babel-plugin-react-compiler', {
compilationMode: 'annotation', // 'infer' for greenfield
}]],
},
}),
],
};
Brownfield: set REACT_COMPILER_MODE=annotation in session-env.sh.
Add 'use no memo' to all .tsx in component library dir.
Copy scripts/react-compiler-check.sh + scripts/_hook-lib.sh -> .claude/hooks/. chmod +x. Add to PostToolUse (Edit|Write).
'use no memo'npx claudepluginhub redpanda-data/ui-harness --plugin frontend-skillsEnforces React/TS/security rules via PostToolUse hooks: bans raw HTML, TS escape hatches, XSS vectors, barrel imports, and more. Use when enforcing React patterns or component library standards.
Prevents expensive re-renders and recomputations with React memoization APIs. Covers React.memo, useMemo, useCallback, and React 19 Compiler.
Delivers React 19 patterns for Server Components, Actions, useOptimistic, useFormStatus, Suspense, concurrent features, React Compiler, and TypeScript components/forms. Use for modern React development.