# Build and Migrate React 19 Applications

React 19 introduces new async patterns and migration requirements. This skill guides implementation with Actions, Server Components, hooks, security practices, and upgrade examples.

## Install

```bash
npx skillstore add calel33/react-19
```

## Metadata

- Status: approved
- Slug: calel33-react-19
- Skillstore revision: r2
- Version status: missing
- Tree hash: f1c641ecad2e71ccebc8a86724aee4a55c30e10f180f6b0d2b58ca2ef50a5a7b
- Author: Calel33
- GitHub username: Calel33
- License: MIT
- Repository: https://github.com/Calel33/my-flash-ui-app--1-/tree/main/skills/react-19
- Ref: a39a91716eadede5f4cdefd78178fed4e837a128
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: confirmation\_required
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands, filesystem, scripts, network, env\_access
- Quality score: 38
- Quality tier: warning
- Public page: https://skillstore.pages.dev/skills/calel33-react-19
- Manifest: https://skillstore.pages.dev/api/skills/calel33-react-19/manifest

## Capabilities

- Explains React 19 Actions, Server Components, Suspense, and execution boundaries.
- Builds form workflows with useActionState, validation, pending states, and error feedback.
- Designs optimistic interactions with useOptimistic and reconciliation after server responses.
- Plans React 18 migrations using dependency updates, codemods, manual changes, tests, and rollback steps.
- Reviews server actions for authentication, authorization, input validation, secret handling, and data exposure.
- Provides complete reference examples for uploads, comments, dashboards, and progressive search.

## Use Cases

- Build a New React 19 Feature: Create forms, optimistic updates, streaming views, or server actions with suitable React 19 patterns.
- Plan a React 18 Upgrade: Identify breaking changes, sequence codemods, define validation tests, and prepare a rollback plan.
- Review Full-Stack React Boundaries: Assess server actions, client components, secrets, authorization, input handling, and data exposure.

## Prompt Templates

### Explain a React 19 Feature

```
Explain [React 19 feature] for a developer new to React 19. Include when to use it, key constraints, and a small example.
```

### Build an Action Form

```
Create a React 19 form for [workflow] using useActionState. Include validation, pending feedback, error handling, and progressive enhancement.
```

### Plan a React 18 Migration

```
Review [project details] and produce a staged React 18 to React 19 migration plan with codemods, manual changes, tests, and rollback steps.
```

### Audit a Full-Stack Pattern

```
Audit [React 19 implementation] for server and client boundaries, authorization, secret handling, input validation, optimistic rollback, and deployment risks.
```

## Limitations

- The skill provides guidance and examples but does not execute, compile, or test an application.
- Framework behavior differs between Next.js, Vite, and other React environments.
- Package versions and vulnerability guidance require verification against current official advisories.
- Production examples still require application-specific authorization, storage, validation, and observability decisions.

## Best Practices

- Treat every server action as a public endpoint and enforce authentication, authorization, and validation.
- Pin dependencies and codemods, review changes, and run tests before production deployment.
- Keep secrets and server-only modules behind clear boundaries and pass minimal data to client components.

## Anti Patterns

- Do not rely on client controls or hidden buttons as authorization.
- Do not publish user uploads after checking only filename and size.
- Do not execute moving package tags or migration tools without review and confirmation.

## Security Audit

- Audited at: 2026-07-23T12:31:52.394\+00:00
- Summary: Most static findings are false positives caused by Markdown backticks, JavaScript template literals, identifiers, and explicitly labeled security examples. Two migration steps invoke unpinned npx packages through @latest, creating a supply-chain execution risk. Separate examples omit object-level authorization and allow unverified uploads into a public directory; no prompt injection was found.

## Stats

- Views: 513
- Downloads: 10
- Favorites: 0
- Popularity score: 0