Skip to main content
ZICQ

Skills ZICQ category:Agent Workflows react19-source-patterns

React19 Source Patterns

Reference for React 19 source-file migration patterns, including API changes, ref handling, and context updates.

1015 installs

Official URL:skills.sh

What this skill does

Intro in this page language first. The official description stays in its original wording; we do not rewrite SKILL.md.

What it does

Reference for React 19 source-file migration patterns, including API changes, ref handling, and context updates.

When to use it

The official description does not include a separate “Use when”. Per the spec, agents activate this skill when the task matches keywords in that description.

How agents load it

Per Agent Skills progressive disclosure: name and description load at startup (~100 tokens); the full SKILL.md body loads when the skill activates; scripts/, references/, and assets/ load only as needed. This file's sections: React 19 Source Migration Patterns; Quick Reference Table; PropTypes Rule; Read the Reference.

File analysis

File analysis: besides SKILL.md, the body references references/api-migrations.md. Those resources load on demand.

React 19 Source Migration PatternsQuick Reference TablePropTypes RuleRead the Reference

Source category:skills.sh agent-skill

SKILL.md & Agent activation

Official spec ↗
name
react19-source-patterns
description
Reference for React 19 source-file migration patterns, including API changes, ref handling, and context updates.
  1. DiscoverThe client exposes names and descriptions to the agent.
  2. ActivateYour request or the task context selects the skill and loads its instructions.
  3. Load resourcesReferenced scripts, documentation and assets are used when needed.
Files referenced by the instructions · 1
  • references/api-migrations.md

These paths are extracted from the text. Check the upstream package to verify the files exist.

Invocation syntax and available tools depend on your Agent client. Client integration guide ↗

Install this skill

Skills CLI ↗

Choose the target agent and installation scope, keep referenced package files, then verify the skill appears in the client's catalog.

This skill references supporting files. Retrieve the complete directory from the source; copying SKILL.md alone may leave missing dependencies.

Ask your Agent to install

Copy these instructions to a compatible agent and confirm the target directory matches your client.

Install the agent skill "react19-source-patterns" into my project. The full SKILL.md and official description are at https://zicq.com/en/skills/skl-b2e4b20ce14b5820-React19-Source-Patterns.html
Save it as .cursor/skills/react19-source-patterns/SKILL.md or .claude/skills/react19-source-patterns/SKILL.md and keep the frontmatter name and description exactly as-is.
This skill also ships scripts/, references/, or assets/ — fetch the whole folder from https://github.com/github/awesome-copilot instead of creating only a SKILL.md.

Full package on GitHub ↗

Install from the terminal · Skills CLI

Requires Node.js and npx. First inspect the repository's skill list to confirm the name.

npx skills add 'https://github.com/github/awesome-copilot' --list

npx skills add 'https://github.com/github/awesome-copilot' --skill 'react19-source-patterns'

The CLI lets you choose the agent interactively. The default scope is the project; use -g for user scope. Confirm package availability with the discovery command, then use npx skills list to inspect installed skills.

Readable layout

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

Agent Workflows

Skill Creator

Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that exte…

Agent Workflows

Clawdhub

Use the ClawdHub CLI to search, install, update, and publish agent skills from clawdhub.com. Use when you need to fetch new skills on the fl…

Agent Workflows

Agent Team Orchestration

Orchestrate multi-agent teams with defined roles, task lifecycles, handoff protocols, and review workflows. Use when: (1) Setting up a team …

Agent Workflows

Superpowers

Spec-first, TDD, subagent-driven software development workflow. Use when: (1) building any new feature or app — triggers brainstorm → plan →…