Enforce React 19 patterns with React Compiler and Server Components.
npx skills add https://github.com/yousufaltayeb/cms --skill react-19-yousufaltayeb
Please help me install this Agent Skill. Skill: react-19 Source: https://github.com/yousufaltayeb/cms/tree/main/apps/web/.agents/skills/react-19 Command: npx skills add https://github.com/yousufaltayeb/cms --skill react-19-yousufaltayeb
This Skill helps developers write modern React 19 components and hooks, leveraging the React Compiler for automatic optimizations and adhering to best practices for server components, client components, and the new use() hook.
useMemo, useCallback) as the React Compiler handles it."use client" directive).use() Hook: Demonstrates the use of the use() hook for reading promises and conditional context.useActionState: Provides examples for server actions and managing pending states.ref as Prop: Illustrates the simplified way to pass refs in React 19.Write a new React 19 component using named imports and no manual memoization.
High-intent search queries and answers about installing and using this skill.
React 19 uses the React Compiler for automatic optimization, allowing you to write components without manual memoization like useMemo or useCallback. The compiler handles performance optimizations automatically during the build process.
The use() hook in React 19 reads promises and context conditionally within components. Unlike other hooks, it can be called inside conditional statements to directly access resolved promise values or context data.
Next.js App Router defaults to Server Components. You must add the "use client" directive at the top of a file to designate it as a Client Component when client-side interactivity is required.
You do not need forwardRef to pass refs in React 19. React 19 treats ref as a standard prop, simplifying how refs are passed to child components without extra wrapper functions.
You use useActionState with server actions in React 19 to manage pending states automatically. This hook provides the pending status directly from the server action execution for form handling.
Named imports for React hooks are enforced in React 19 to ensure modern import conventions. This practice aligns with the compiler's optimization strategy and maintains consistent module loading.
sumik5Configure Next.js 16 and React 19 projects with App Router and TypeScript.
cheetah-aloStandardize React 19 .tsx components and hooks with React Compiler patterns.
mblodeScaffold a Next.js turborepo with TypeScript, Tailwind, and shadcn UI.
crozzbiteProvide React 19 component patterns using the React Compiler without manual memoization.