Skip to main content
affpapa.org
RU EN
skill GitHub Copilot official · GitHub

react18-dep-compatibility — GitHub Copilot skill: install

Checks minimum dependency versions for React 18.3.1 and React 19. Use it during React upgrades and when resolving peer dependency conflicts.

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

What react18-dep-compatibility does

This skill contains a compatibility matrix for react, react-dom, Testing Library, Apollo Client, Emotion, React Router, Redux, and other common packages. It lists minimum versions for React 18.3.1 and React 19, including requirements related to concurrent mode.

Use the matrix before npm install, when reviewing an upgrade, or when assessing a React Router v5 to v6 migration. The skill also gives rules for --legacy-peer-deps: the package should have no compatible React 18 release, remain actively maintained, and have a declaration mismatch rather than an API incompatibility. Document every use in package.json or MIGRATION.md.

Install it when your agent needs version-specific React dependency checks. It has little value in a project that does not use React.

What it helps with

  • check whether a package supports React 18.3.1
  • choose a minimum dependency version for React 19
  • resolve a peer dependency conflict after a React upgrade
  • assess a react-router v5 to v6 migration
  • decide whether --legacy-peer-deps is justified

Example prompts for the agent

  • Check this project’s dependencies before upgrading to React 18.3.1 and list the minimum required versions.
  • Analyze the `npm ls` conflict for `@apollo/client` on React 19.
  • Tell me whether `--legacy-peer-deps` is acceptable and document the reason in `MIGRATION.md`.

How to install react18-dep-compatibility

1Skills CLI (Vercel)

npx skills add github/awesome-copilot --skill react18-dep-compatibility

2GitHub CLI

gh skill install github/awesome-copilot react18-dep-compatibility

3Manually: put the files in place

.github/skills/react18-dep-compatibility/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

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 webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. Claude Code Claude.ai 186,758installs

Questions about react18-dep-compatibility

How do I install react18-dep-compatibility in GitHub Copilot?

Run npx skills add github/awesome-copilot --skill react18-dep-compatibility, then use .github/skills/react18-dep-compatibility/SKILL.md. You can also run gh skill install github/awesome-copilot react18-dep-compatibility.

What does react18-dep-compatibility do?

The skill maps dependencies to minimum versions for React 18.3.1 and React 19. It also helps review peer dependency conflicts and decide when --legacy-peer-deps needs documentation.

Does the skill cover a react-router v5 to v6 migration?

Yes. It treats that migration as a separate step and points to references/router-migration.md. For React 19, the matrix lists react-router-dom v6.8.0 as the minimum version.

Source text

SKILL.md · MIT 
---
name: react18-dep-compatibility
description: 'React 18.3.1 and React 19 dependency compatibility matrix.'
---

# React Dependency Compatibility Matrix

Minimum versions required for React 18.3.1 and React 19 compatibility.

Use this skill whenever checking whether a dependency supports a target React version, resolving peer dependency conflicts, deciding whether to upgrade or use `legacy-peer-deps`, or assessing the risk of a `react-router` v5 to v6 migration.

Review this matrix before running `npm install` during a React upgrade and before accepting an npm dependency conflict resolution, especially where concurrent mode compatibility may be affected.
## Core Upgrade Targets

| Package | React 17 (current) | React 18.3.1 (min) | React 19 (min) | Notes |
|---|---|---|---|---|
| `react` | 17.x | **18.3.1** | **19.0.0** | Pin exactly to 18.3.1 for the R18 orchestra |
| `react-dom` | 17.x | **18.3.1** | **19.0.0** | Must match react version exactly |

## Testing Libraries

| Package | React 18 Min | React 19 Min | Notes |
|---|---|---|---|
| `@testing-library/react` | **14.0.0** | **16.0.0** | RTL 13 uses ReactDOM.render internally - broken in R18 |
| `@testing-library/jest-dom` | **6.0.0** | **6.0.0** | v5 works but v6 has React 18 matcher updates |
| `@testing-library/user-event` | **14.0.0** | **14.0.0** | v13 is sync, v14 is async - API change required |
| `jest` | **27.x** | **27.x** | jest 27+ with jsdom 16+ for React 18 |
| `jest-environment-jsdom` | **27.x** | **27.x** | Must match jest version |

## Apollo Client

| Package | React 18 Min | React 19 Min | Notes |
|---|---|---|---|
| `@apollo/client` | **3.8.0** | **3.11.0** | 3.8 adds `useSyncExternalStore` for concurrent mode |
| `graphql` | **15.x** | **16.x** | Apollo 3.8+ peer requires graphql 15 or 16 |

Read **`references/apollo-details.md`** for concurrent mode issues and MockedProvider changes.

## Emotion

| Package | React 18 Min | React 19 Min | Notes |
|---|---|---|---|
| `@emotion/react` | **11.10.0** | **11.13.0** | 11.10 adds React 18 concurrent mode support |
| `@emotion/styled` | **11.10.0** | **11.13.0** | Must match @emotion/react version |
| `@emotion/cache` | **11.10.0** | **11.13.0** | If used directly |

## React Router

| Package | React 18 Min | React 19 Min | Notes |
|---|---|---|---|
| `react-router-dom` | **v6.0.0** | **v6.8.0** | v5 → v6 is a breaking migration - see details below |
| `react-router-dom` v5 | 5.3.4 (workaround) | ❌ Not supported | See legacy peer deps note |

**react-router v5 → v6 is a SEPARATE migration sprint.** Read `references/router-migration.md`.

## Redux

| Package | React 18 Min | React 19 Min | Notes |
|---|---|---|---|
| `react-redux` | **8.0.0** | **9.0.0** | v7 works on R18 legacy root only - breaks on concurrent mode |
| `redux` | **4.x** | **5.x** | Redux itself is framework-agnostic - react-redux version matters |
| `@reduxjs/toolkit` | **1.9.0** | **2.0.0** | RTK 1.9 tested against React 18 |

## Other Common Packages

| Package | React 18 Min | React 19 Min | Notes |
|---|---|---|---|
| `react-query` / `@tanstack/react-query` | **4.0.0** | **5.0.0** | v3 doesn't support concurrent mode |
| `react-hook-form` | **7.0.0** | **7.43.0** | v6 has concurrent mode issues |
| `formik` | **2.2.9** | **2.4.0** | v2.2.9 patched for React 18 |
| `react-select` | **5.0.0** | **5.8.0** | v4 has peer dep conflicts with R18 |
| `react-datepicker` | **4.8.0** | **6.0.0** | v4.8+ added React 18 support |
| `react-dnd` | **16.0.0** | **16.0.0** | v15 and below have R18 concurrent mode issues |
| `prop-types` | any | any | Standalone - unaffected by React version |

---

## Conflict Resolution Decision Tree

```
npm ls shows peer conflict for package X
         │
         ▼
Does package X have a version that supports React 18?
  YES → npm install X@[min-compatible-version]
  NO  ↓
         │
Is the package critical to the app?
  YES → check GitHub issues for React 18 branch/fork
      → check if maintainer has a PR open
      → last resort: --legacy-peer-deps (document why)
  NO  → consider removing the package
```

## --legacy-peer-deps Rules

Only use `--legacy-peer-deps` when:
- The package has no React 18 compatible release
- The package is actively maintained (not abandoned)
- The conflict is only a peer dep declaration mismatch (not actual API incompatibility)

**Document every `--legacy-peer-deps` usage** in a comment at the top of package.json or in a MIGRATION.md file explaining why it was necessary.

© github · MIT · github/awesome-copilot

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

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