github/react19-source-patterns
plugins/react19-upgrade/skills/react19-source-patterns/SKILL.md
Reference for React 19 source-file migration patterns, including API changes, ref handling, and context updates.
$ install --global
skillsauthnpx skillsauth add github/awesome-copilot react19-source-patternsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 11, 2026, 3:44 AM6.6s2 files scanned
SKILL.md
- 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 |
| String refs this.refs.x | → createRef() | → 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:
// 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.
Related Skills
github/python-pypi-package-builder
tools
VerifiedTrustedOfficial
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.
29,271SKILL.mdUpdated Apr 11, 2026
github/mcp-security-audit
tools
VerifiedTrustedOfficial
Audit MCP (Model Context Protocol) server configurations for security issues. Use this skill when: - Reviewing .mcp.json files for security risks - Checking MCP server args for hardcoded secrets or shell injection patterns - Validating that MCP servers use pinned versions (not @latest) - Detecting unpinned dependencies in MCP server configurations - Auditing which MCP servers a project registers and whether they're on an approved list - Checking for environment variable usage vs. hardcoded credentials in MCP configs - Any request like "is my MCP config secure?", "audit my MCP servers", or "check .mcp.json" keywords: [mcp, security, audit, secrets, shell-injection, supply-chain, governance]
29,271SKILL.mdUpdated Apr 11, 2026
github/lsp-setup
tools
VerifiedTrustedOfficial
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.
29,271SKILL.mdUpdated Apr 11, 2026
github/gsap-framer-scroll-animation
development
VerifiedTrustedOfficial
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.
29,271SKILL.mdUpdated Apr 11, 2026