메뉴
React 18.3.1 and React 19 dependency compatibility matrix.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Expert skill for writing FreeCAD Python scripts, macros, and automation. Use when asked to create FreeCAD models, parametric objects, Part/Mesh/Sketcher scripts, workbench tools, GUI dialogs with PySide, Coin3D scenegraph manipulation, or any FreeCAD Python API task. Covers FreeCAD scripting basics, geometry creation, FeaturePython objects, interface tools, and macro development.
Use this skill whenever the user wants to build scroll animations, scroll effects, parallax, scroll-triggered reveals, pinned sections, horizontal scroll, text animations, or any motion tied to scroll position — in vanilla JS, React, or Next.js. Covers GSAP ScrollTrigger (pinning, scrubbing, snapping, timelines, horizontal scroll, ScrollSmoother, matchMedia) and Framer Motion / Motion v12 (useScroll, useTransform, useSpring, whileInView, variants). Use this skill even if the user just says "animate on scroll", "fade in as I scroll", "make it scroll like Apple", "parallax effect", "sticky section", "scroll progress bar", or "entrance animation". Also triggers for Copilot prompt patterns for GSAP or Framer Motion code generation. Pairs with the premium-frontend-ui skill for creative philosophy and design-level polish.
Enable code intelligence (go-to-definition, find-references, hover, type info) for any programming language by installing and configuring an LSP server for Copilot CLI. Detects the OS, installs the right server, and generates the JSON configuration (user-level or repo-level). Use when you need deeper code understanding and no LSP server is configured, or when the user asks to set up, install, or configure an LSP server.
Govern Power Automate flows and Power Apps at scale using the FlowStudio MCP cached store. Classify flows by business impact, detect orphaned resources, audit connector usage, enforce compliance standards, manage notification rules, and compute governance scores — all without Dataverse or the CoE Starter Kit. Load this skill when asked to: tag or classify flows, set business impact, assign ownership, detect orphans, audit connectors, check compliance, compute archive scores, manage notification rules, run a governance review, generate a compliance report, offboard a maker, or any task that involves writing governance metadata to flows. Requires a FlowStudio for Teams or MCP Pro+ subscription — see https://mcp.flowstudio.app
Monitor Power Automate flow health, track failure rates, and inventory tenant assets using the FlowStudio MCP cached store. The live API only returns top-level run status. Store tools surface aggregated stats, per-run failure details with remediation hints, maker activity, and Power Apps inventory — all from a fast cache with no rate-limit pressure on the PA API. Load this skill when asked to: check flow health, find failing flows, get failure rates, review error trends, list all flows with monitoring enabled, check who built a flow, find inactive makers, inventory Power Apps, see environment or connection counts, get a flow summary, or any tenant-wide health overview. Requires a FlowStudio for Teams or MCP Pro+ subscription — see https://mcp.flowstudio.app
End-to-end skill for building, testing, linting, versioning, and publishing a production-grade Python library to PyPI. Covers all four build backends (setuptools+setuptools_scm, hatchling, flit, poetry), PEP 440 versioning, semantic versioning, dynamic git-tag versioning, OOP/SOLID design, type hints (PEP 484/526/544/561), Trusted Publishing (OIDC), and the full PyPA packaging flow. Use for: creating Python packages, pip-installable SDKs, CLI tools, framework plugins, pyproject.toml setup, py.typed, setuptools_scm, semver, mypy, pre-commit, GitHub Actions CI/CD, or PyPI publishing.
| name | react18-dep-compatibility |
| description | React 18.3.1 and React 19 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.
| 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 |
| 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 |
| 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.
| 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 |
| 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.
| 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 |
| 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 |
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
Only use --legacy-peer-deps when:
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.