React 19

This teaches Claude to write React 19 code the way it's meant to be written now that the React Compiler handles optimization automatically. The main shift is dropping useMemo and useCallback everywhere since the compiler does that work for you. It covers the new patterns like using ref as a regular prop instead of forwardRef, the use() hook for reading promises and conditional context, and knowing when to mark components with "use client" versus keeping them as server components by default. If you're working on a React 19 project and want Claude to stop suggesting the old manual memoization patterns, this is the skill to load.

skills.sh installs: 270
GitHub stars: 665
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add gentleman-programming/gentleman-skills --skill react-19 --agent claude-code

Installs into .claude/skills of the current project.

Files

No Manual Memoization (REQUIRED)

// ✅ React Compiler handles optimization automatically
function Component({ items }) {
  const filtered = items.filter(x => x.active);
  const sorted = filtered.sort((a, b) => a.name.localeCompare(b.name));

  const handleClick = (id) => {
    console.log(id);
  };

  return <List items={sorted} onClick={handleClick} />;
}

// ❌ NEVER: Manual memoization
const filtered = useMemo(() => items.filter(x => x.active), [items]);
const handleClick = useCallback((id) => console.log(id), []);

Imports (REQUIRED)

// ✅ ALWAYS: Named imports
import { useState, useEffect, useRef } from "react";

// ❌ NEVER
import React from "react";
import * as React from "react";

Server Components First

// ✅ Server Component (default) - no directive
export default async function Page() {
  const data = await fetchData();
  return <ClientComponent data={data} />;
}

// ✅ Client Component - only when needed
"use client";
export function Interactive() {
  const [state, setState] = useState(false);
  return <button onClick={() => setState(!state)}>Toggle</button>;
}