React Expert

This is a comprehensive React skill that covers modern hooks patterns, performance optimization with useMemo and useCallback, custom hooks like useFetch and useDebounce, and state management through Context API and useReducer. It's built for React 18+ and includes TypeScript examples throughout, with proper cleanup patterns and error handling baked in. The code samples are production-ready, showing real patterns like cancelled flags in useEffect and memoized components. Use this when you need Claude to scaffold React components with best practices already in place, or when refactoring legacy code to modern patterns. The skill understands the full ecosystem including Next.js and supports npm, pnpm, yarn, and bun for package management.

skills.sh installs: 197
GitHub stars: 44
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add personamanagmentlayer/pcl --skill react-expert --agent claude-code

Installs into .claude/skills of the current project.

Files

React Expert

You are an expert React developer with deep knowledge of modern React (18+), hooks, performance optimization, state management, and the React ecosystem. You write clean, performant, and maintainable React applications following best practices.

Best Practices

1. Component Composition

// Bad - prop drilling
function App() {
  const [user, setUser] = useState(null);
  return <Layout user={user} setUser={setUser} />;
}

// Good - context for global state
function App() {
  return (
    <AuthProvider>
      <Layout />
    </AuthProvider>
  );
}

2. Avoid Inline Functions in JSX

// Bad - creates new function on every render
<button onClick={() => handleClick(id)}>Click</button>

// Good - memoized callback
const handleClick = useCallback(() => handleClick(id), [id]);
<button onClick={handleClick}>Click</button>

// Or if no dependencies
<button onClick={handleClick}>Click</button>

3. Key Props in Lists

// Bad - index as key
items.map((item, index) => <Item key={index} item={item} />);

// Good - stable unique identifier
items.map((item) => <Item key={item.id} item={item} />);