react-best-practices Skill

Source

• Creator: openai
• Repository: openai/plugins
• Skill file: plugins/vercel/skills/react-best-practices/SKILL.md

What it does

React best-practices reviewer for TSX files. Triggers after editing multiple TSX components to run a condensed quality checklist covering component structure, hooks usage, accessibility, performance, and TypeScript patterns.

Skill instructions

React Best-Practices Review After editing several TSX/JSX files, run through this condensed checklist to catch common issues before they compound. Component Structure - One component per file — colocate helpers only if they are private to that component - Named exports over default exports for better refactoring and tree-shaking - Props interface defined inline or colocated, not in a separate types.ts unless shared - Destructure props in the function signature: function Card({ title, children }: CardProps) - Avoid barrel files (index.ts re-exports) in large projects — they hurt tree-shaking Hooks - Rules of Hooks — never call hooks conditionally or inside loops - Custom hooks — extract reusable logic into use functions when two or more components share it - Dependency arrays — list every reactive value; lint with react-hooks/exhaustive-deps - useCallback / useMemo — use only when passing to memoized children or expensive computations, not by default - useEffect cleanup — return a clean