React18 Legacy Context — Agent Skill by GitHub

From the author

Provides the complete migration pattern for React legacy context API (contextTypes, childContextTypes, getChildContext) to the modern createContext API. Use this skill whenever migrating legacy context in class components - this is always a cross-file migration requiring the provider AND all consumers to be updated together. Use it before touching any contextTypes or childContextTypes code, because migrating only the provider without the consumers (or vice versa) will cause a runtime failure. Always read this skill before writing any context migration - the cross-file coordination steps here prevent the most common context migration bugs.

— the description by SaravananRajaraman

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a systematic approach to migrating legacy React context (contextTypes, childContextTypes, getChildContext) to the modern createContext API. Because legacy context is removed in React 19, this migration is critical for upgrading codebases. The skill emphasizes that this is a cross-file operation requiring simultaneous updates to both the provider and all consumers to prevent runtime failures. It includes scanning commands, file templates, and strategies for handling multiple contexts.

What it does

Provides a step-by-step migration procedure for legacy React context.
Offers shell commands to identify legacy providers and consumers in a codebase.
Includes templates for creating new, modular context files.
Explains how to split combined legacy providers into individual modern context providers.
Details strategies for updating class-based consumers to modern standards.
Outlines the correct order of operations to avoid broken application states.

When to use it

When upgrading a React application to version 18 or preparing for version 19.
When refactoring class components that rely on legacy contextTypes.
When you need to replace deprecated getChildContext patterns.
When managing complex applications with multiple nested legacy contexts.

Advantages

Prevents common runtime errors caused by partial migrations.
Standardizes the structure of new context files across the project.
Provides clear, actionable steps to minimize downtime during refactoring.
Offers specific patterns for handling multiple contexts in a single component.

Usage examples

“How do I find all components using legacy context in my project?”: The agent provides grep commands to scan for childContextTypes, getChildContext, and contextTypes to map out the migration scope.
“I have a class component using multiple legacy contexts. How do I migrate it?”: The agent guides you to either use Context.Consumer render props or convert the component to a function component using multiple useContext hooks.

Install

Download the skill as a ZIP:
https://autogineer.com/agent-skills/github/react18-legacy-context/download

Unzip it into the cross-client skills folder of your project:

mkdir -p .agents/skills && unzip react18-legacy-context.zip -d .agents/skills

Documentation by SaravananRajaraman

React 18 Legacy Context Migration

Legacy context (contextTypes, childContextTypes, getChildContext) was deprecated in React 16.3 and warns in React 18.3.1. It is removed in React 19.

This Is Always a Cross-File Migration

Unlike most other migrations that touch one file at a time, context migration requires coordinating:

Create the context object (usually a new file)
Update the provider component
Update every consumer component

Missing any consumer leaves the app broken - it will read from the wrong context or get undefined.

Migration Steps (Always Follow This Order)

Step 1: Find the provider (childContextTypes + getChildContext)
Step 2: Find ALL consumers (contextTypes)
Step 3: Create the context file
Step 4: Update the provider
Step 5: Update each consumer (class components → contextType, function components → useContext)
Step 6: Verify - run the app, check no legacy context warnings remain

Scan Commands

# Find all providers
grep -rn "childContextTypes\|getChildContext" src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."

# Find all consumers
grep -rn "contextTypes\s*=" src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."

# Find this.context usage (may be legacy or modern - check which)
grep -rn "this\.context\." src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."

Reference Files

references/single-context.md - complete migration for one context (theme, auth, etc.) with provider + class consumer + function consumer
references/multi-context.md - apps with multiple legacy contexts (nested providers, multiple consumers of different contexts)
references/context-file-template.md - the standard file structure for a new context module

Files

ATTRIBUTION.mdAdded by AutoGineer897 B
LICENSELicence file added by AutoGineer1.0 KiB
SKILL.md2.4 KiB
references/context-file-template.md3.2 KiB
references/multi-context.md5.6 KiB
references/single-context.md5.1 KiB

Requirements and compatibility

Written for: GitHub Copilot

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Implement
Matt Pocock· Community
A structured workflow for implementing software tasks from specifications or tickets.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository317.5k
Source Driven Development
Addy Osmani· Community
A rigorous process for grounding code implementation in official, version-specific documentation to ensure accuracy and avoid outdated patterns.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository113.9k
Write Swift
Emil Kowalski· Community
A comprehensive guide to writing modern, safe, and performant Swift code following the language's latest idioms and concurrency models.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository54.3k
Cardputer Buddy
AnthropicOfficial
Iterate on the Cardputer-Adv MicroPython app bundle (Claude Buddy, Snake, Hello) after the device is already provisioned via m5-onboard. Use when the user wants to add a new app, push a single changed .py without re-flashing, watch device serial logs, or run a one-shot REPL command. Trigger on "add an app", "push to the cardputer", "tail the device", "run on the device", or follow-up work after /maker-setup.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
Apache-2.0GitHub stars of the source repository46.3k
Typescript Pro
Seth Hobson· Community
An expert TypeScript persona focused on advanced typing, enterprise architecture, and strict type safety.
Software developmentClaude Code
MITGitHub stars of the source repository42.3k
Scala Pro
Seth Hobson· Community
An expert Scala engineer persona specializing in functional programming, distributed systems, and enterprise-grade architecture.
Software developmentClaude Code
MITGitHub stars of the source repository42.3k