Agent skill · software engineering · aiskillstore
react-19
Guide for React 19 development with Actions, Server Components, and new hooks. Use for building React 19 apps, form handling, optimistic updates, and migrations.
Why this skill is useful
Provides specific patterns and commands for building applications with React 19 that the AI wouldn't reliably generate on its own.
What it needs
Requires @types/react, @types/react-dom, react, react-dom installed locally. About 3k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
React 19 React 19 (stable since Dec 2024) simplifies async operations, improves SSR, and enhances DX with Actions, Server Components, and new hooks. When to Use Building React 19 applications Async form handling with automatic pending/error states Server Components for SSR Optimistic UI updates Migrating from React 18 Server Actions for full-stack forms Installation Required: Enable modern JSX transform in tsconfig.json: Core Concepts Execution Boundaries Type Runs State Access ------ ------ ------- -------- Server Component Server No DB, FS, Secrets Client Component Browser Yes DOM, Browser APIs Server Action Server No DB, APIs Conventions "use server" = Server Action "use client" = Client Component No directive = Server Component (in RSC environment) async component = Auto-suspends Essential Patterns 1. Forms with useActionState 2. Optimistic Updates 3. Server Actions 4. Streaming with Suspense Security Essentials See references/security-guide.md for complete security guidance. Migration from React 18 1. Update to React 18.3 first (fix warnings) 2. Update to React 19: npm install react@19 react-dom@19 3. Run codemods: npx codemod@latest react/19/migration-recipe 4. Fix TypeScript: npx types-react-codemod@latest preset-19 ./src 5. Test thoroughly Key breaking changes: ReactDOM.render → createRoot PropTypes removed → Use TypeScript forwardRef deprecated → Use ref as prop useRef() requires argument → useRef(null) See references/upgrade-checklist.md and references/migration-patterns.md. Quick Reference New Hooks Hook Purpose ------ --------- useActionState Form state with async actions useOptimistic Instant UI feedback use() Read promises/context (can be conditional) useTransition Non-urgent updates See references/hooks-api.md for detailed API docs. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/react-19