Skip to main content
skill GitHub Copilot official · GitHub

react19-source-patterns — GitHub Copilot skill: React 19

A reference for moving React source files to React 19, covering API changes, refs, context, and props. Useful during an existing project upgrade.

Install into GitHub Copilot · Skills CLI (Vercel) All methods and platforms ↓
npx skills add github/awesome-copilot --skill react19-source-patterns
Open on GitHub

What react19-source-patterns does

This skill helps review source patterns affected by a React 19 migration. It maps ReactDOM.render to createRoot().render(), ReactDOM.hydrate to hydrateRoot, and unmountComponentAtNode to root.unmount().

It also covers direct ref props instead of forwardRef, ES6 default parameters instead of defaultProps, useRef(null) instead of an empty call, and legacy Context migration to createContext. String refs move to createRef(). The reference keeps .propTypes assignments because the prop-types package still works as a standalone validator.

Install it when you are updating React code and need concrete source-file migration patterns. It is less useful for a small project that does not use these APIs.

What it helps with

  • replace ReactDOM.render with createRoot().render()
  • move server hydration to hydrateRoot()
  • remove findDOMNode in favor of a direct ref
  • migrate legacy Context to createContext
  • check defaultProps, string refs, and useRef() calls

Example prompts for the agent

  • Review this project for React 19 source migration patterns.
  • Replace `ReactDOM.hydrate` and `unmountComponentAtNode` using the skill.
  • Find places where `forwardRef` can become a direct `ref` prop.

How to install react19-source-patterns

1Skills CLI (Vercel)

npx skills add github/awesome-copilot --skill react19-source-patterns

2GitHub CLI

gh skill install github/awesome-copilot react19-source-patterns

3Manually: put the files in place

.github/skills/react19-source-patterns/SKILL.md

From the same set554

The whole set →
git-commit official github This skill reviews Git changes, stages related files, and creates Conventional Commits. Use it when you want an agent to make one commit or split work into separate commits. GitHub Copilot 47,165installs excalidraw-diagram-generator official github Turn a plain-language description into an Excalidraw diagram. Useful for mapping processes, system structure, and relationships between entities. GitHub Copilot 31,639installs multi-stage-dockerfile official github This skill guides GitHub Copilot in writing multi-stage Dockerfiles for different languages and frameworks. Use it when the final runtime image should contain fewer build dependencies. GitHub Copilot 29,688installs documentation-writer official github Skill that turns the agent into a technical writer following the Diátaxis framework: tutorials, how-to guides, reference, and explanation. Proposes structure before writing. GitHub Copilot 27,757installs prd official github Turns a feature idea into a structured PRD with user stories, technical requirements, and risks. Use it when planning a software feature or an AI-powered one. GitHub Copilot 24,035installs refactor official github This skill reshapes existing code without changing its external behavior. Use it for gradual cleanup of large functions, duplication, weak types, and code smells. GitHub Copilot 22,321installs java-springboot official github Gives GitHub Copilot Spring Boot development practices, from project layout to tests and security. Use it when writing or reviewing Java application code. GitHub Copilot 21,272installs create-readme official github This skill reviews a project and creates a structured README.md. Use it when the repository needs clear documentation based on its actual files and code. GitHub Copilot 19,081installs

Similar

visual-edit-precision Adit Jain Enforces targeted, minimal UI edits when you provide screenshots or annotations. It stops the agent from rewriting surrounding component code. Claude Code CX Codex Cursor 2,800installs sign-in-with-google-web official google Guides Google Identity Services setup across web projects. It implements secure token handling and IETF authentication patterns. Claude Code Gemini CLI CX Codex 743installs swiftui-ui-patterns official OpenAI This skill helps build and refactor SwiftUI interfaces, from navigation and state to layouts and controls. Use it for new screens or changes to an existing project. CX Codex GP ChatGPT 114installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. Claude Code 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. Claude Code CX Codex Cursor +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. Claude Code CX Codex Cursor +1 1,200,000installs

Questions about react19-source-patterns

How do I install react19-source-patterns in GitHub Copilot?

Run npx skills add github/awesome-copilot --skill react19-source-patterns or gh skill install github/awesome-copilot react19-source-patterns. The skill file is placed at .github/skills/react19-source-patterns/SKILL.md.

What does react19-source-patterns do?

It provides source migration patterns for React 19. The reference covers ReactDOM APIs, refs, Context, defaultProps, useRef(), and .propTypes.

Should `.propTypes` be removed during a React 19 migration?

No. The skill keeps .propTypes assignments because the prop-types package remains a standalone validator. It also suggests a comment that clarifies the runtime validation change.

Source text

SKILL.md · MIT
---
name: react19-source-patterns
description: 'Reference for React 19 source-file migration patterns, including API changes, ref handling, and context updates.'
---

# React 19 Source Migration Patterns

Reference for every source-file migration required for React 19.

## Quick Reference Table

| Pattern | Action | Reference |
|---|---|---|
| `ReactDOM.render(...)` | → `createRoot().render()` | See references/api-migrations.md |
| `ReactDOM.hydrate(...)` | → `hydrateRoot(...)` | See references/api-migrations.md |
| `unmountComponentAtNode` | → `root.unmount()` | Inline fix |
| `ReactDOM.findDOMNode` | → direct ref | Inline fix |
| `forwardRef(...)` wrapper | → ref as direct prop | See references/api-migrations.md |
| `Component.defaultProps = {}` | → ES6 default params | See references/api-migrations.md |
| `useRef()` no arg | → `useRef(null)` | Inline fix  add `null` |
| Legacy Context | → `createContext` | [→ api-migrations.md#legacy-context](references/api-migrations.md#legacy-context) |
| String refs `this.refs.x` | → `createRef()` | [→ api-migrations.md#string-refs](references/api-migrations.md#string-refs) |
| `import React from 'react'` (unused) | Remove | Only if no `React.` usage in file |

## PropTypes Rule

Do **not** remove `.propTypes` assignments. The `prop-types` package still works as a standalone validator. React 19 only removes the built-in runtime checking from the React package  the package itself remains valid.

Add this comment above any `.propTypes` block:
```jsx
// NOTE: React 19 no longer runs propTypes validation at runtime.
// PropTypes kept for documentation and IDE tooling only.
```

## Read the Reference

For full before/after code for each migration, read **`references/api-migrations.md`**. It contains the complete patterns including edge cases for `forwardRef` with `useImperativeHandle`, `defaultProps` null vs undefined behavior, and legacy context provider/consumer cross-file migrations.

© github · MIT · github/awesome-copilot

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor