Official agent skill

React18 Legacy Context

by github in github/awesome-copilot

Provides the complete migration pattern for React legacy context API (contextTypes, childContextTypes, getChildContext) to the modern createContext API.

OfficialMITAuto-check passedFrontend & Design

Install React18 Legacy Context

skills CLI
$ npx skills add github/awesome-copilot --skill react18-legacy-context -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install github/awesome-copilot react18-legacy-context --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/github/awesome-copilot.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/react18-legacy-context .claude/skills/react18-legacy-context && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
react18-legacy-context
GitHub stars
40k
Used in
1 other repo
Token cost
~620 tokens
SKILL.md length
131 words
Files
4 (incl. references)
Skills in repo
417
Repo updated
First seen
Licence
MIT

At a glance

Provides the complete migration pattern for React legacy context API (contextTypes, childContextTypes, getChildContext) to the modern createContext API.

  • Works in 3 steps: Create the context object (usually a new… → Update the provider component → Update every consumer component
  • Tasks that involve State management
  • SKILL.md covers This Is Always a Cross-File…, Migration Steps (Always Follow…, Scan Commands and Reference Files
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

React18 Legacy Context is an agent skill from github/awesome-copilot, published by the product's own GitHub organization. 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…

Its SKILL.md is about 620 tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including reference files (for example `references/context-file-template.md`, `references/multi-context.md` and `references/single-context.md`).

It sits in Frontend & Design, covering State management. It works with React. The repository describes itself as: Community-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot. The licence is MIT.

When your agent uses it

  • Tasks that involve State management

Example prompts

  • “Use the react18-legacy-context skill to provide the complete migration pattern for React legacy context API (contextTypes, childContextTypes…”
  • “/react18-legacy-context”

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. Create the context object (usually a new file)
  2. Update the provider component
  3. Update every consumer component

What it can do on your machine

Read from SKILL.md and the folder at commit 727ff2e. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are bash).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

React18 Legacy Context loads about 620 tokens when it runs, and up to ~4.2k if it reads all its reference files. Until then it costs about 167 tokens; SKILL.md has 131 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~167
When it runs · the whole SKILL.md, loaded when a task matches
~620
With references · SKILL.md plus every file in references/, read only if the agent opens them
~4.2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from github/awesome-copilot at commit 727ff2e, republished under its MIT licence (© github). 131 words, ~620 tokens.

Download SKILL.mdSave it as .claude/skills/react18-legacy-context/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.
name
react18-legacy-context
description
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.

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:

  1. Create the context object (usually a new file)
  2. Update the provider component
  3. 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

bash
# 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

© github, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 3 other files (references) in skills/react18-legacy-context of github/awesome-copilot.

  • SKILL.md
  • references/context-file-template.md
  • references/multi-context.md
  • references/single-context.md

Open the folder on GitHubat commit 727ff2e

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in github/awesome-copilot, which our catalogue first saw on October 7, 2026.

Compare with similar skills

React18 Legacy Context next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

React18 Legacy Context compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
React18 Legacy Context this skillgithub/awesome-copilot40k1 repos~620Automated safety check: PassMIT
Dify Component Writing Guidelanggenius/dify158k—~626Automated safety check: PassCustom licence
Pierre Theming Librarypierrecomputer/pierre6.2k—~661Automated safety check: PassApache-2.0
Frontend Patternskurealnum/dotfiles29019 repos~3.7kAutomated safety check: PassNone
Cursor BYOK Frontend Guideleookun/cursor-byok3.2k—~1.9kAutomated safety check: PassMIT
Migrate V8 To V9octanejs/octane1.4k—~4.7kAutomated safety check: PassMIT

Similar skills

  • Use when implementing or refactoring React/TypeScript components and the task requires decisions about component ownership, feature boundaries, state, data…

    158k GitHub stars~626 tokensUpdated today
    Frontend & DesignAuto-check passed
  • Pierre Theming Library

    pierrecomputer/pierre

    Explains how to use the @pierre/theming package to list, resolve, select, switch and persist themes, with controller, color and React references.

    6.2k GitHub stars~661 tokensUpdated today
    Frontend & DesignAuto-check passed
  • Frontend Patterns

    kurealnum/dotfiles

    Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

    290 GitHub starsUsed in 19 repos~3.7k tokens
    Frontend & DesignAuto-check passed
  • Cursor BYOK Frontend Guide

    leookun/cursor-byok

    Sets the rules for building the Cursor BYOK desktop app's React and Tauri frontend, especially its HTTP boundary and component state architecture.

    3.2k GitHub stars~1.9k tokensUpdated 9 days ago
    Frontend & DesignAuto-check passed
  • Migrate V8 To V9

    octanejs/octane

    Perform a complete @tanstack/react-table v8-to-v9 migration: hook and feature architecture, row-model slots, React state and subscriptions, rendering, composable tables, type helpers, and every…

    1.4k GitHub stars~4.7k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Expressive Mvc

    gabeklein/expressive-mvc

    Class-based reactive state management for React (Expressive MVC).

    103 GitHub stars~5.9k tokensUpdated today
    Frontend & DesignAuto-check passed

More from github/awesome-copilot

All 417 skills in this repo
  • Acquire Codebase Knowledge

    github/awesome-copilot

    Official

    Maps an unfamiliar codebase into seven evidence-backed documents in docs/codebase/, using a scan script and templates, for onboarding or architecture write-ups.

    40k GitHub starsUsed in 1 repo~2.3k tokens
    Auto-check passed
  • Azure Architecture Autopilot

    github/awesome-copilot

    Official

    Designs Azure infrastructure from a natural-language description, or diagrams an existing resource group, then refines the design through conversation and deploys it with Bicep.

    40k GitHub starsUsed in 1 repo~1.9k tokens
    Auto-check passed
  • Draw.io Diagram Generator

    github/awesome-copilot

    Official

    Generates, edits and validates draw.io files with correct mxGraph XML, covering flowcharts, architecture, sequence, ER and UML class diagrams.

    40k GitHub starsUsed in 1 repo~4.9k tokens
    Auto-check passed
  • Credit Risk Data Cleaning

    github/awesome-copilot

    Official

    Cleans raw credit data and screens variables before loan modeling, dropping unstable, noisy or redundant features and writing an Excel report of every step.

    40k GitHub starsUsed in 1 repo~1.5k tokens
    Auto-check passed
  • Daily Focus Board

    github/awesome-copilot

    Official

    Builds a warm, browser-based daily focus board the user updates by talking to their agent, with Eisenhower priorities, a brain-dump box and kind not-today carryover.

    40k GitHub stars~3k tokensUpdated today
    Auto-check passed
  • Python Pypi Package Builder

    github/awesome-copilot

    Official

    End-to-end skill for building, testing, linting, versioning, and publishing a production-grade Python library to PyPI.

    40k GitHub starsUsed in 1 repo~4.6k tokens
    Auto-check passed

Works with

Questions about React18 Legacy Context

What does React18 Legacy Context do?

Provides the complete migration pattern for React legacy context API (contextTypes, childContextTypes, getChildContext) to the modern createContext API. React18 Legacy Context is an agent skill from github/awesome-copilot, published by the product's own GitHub organization. Provides the complete migration pattern for React legacy context API (contextTypes, childContextTypes, getChildContext) to the modern createContext API.

When should I use React18 Legacy Context?

React18 Legacy Context fits situations like: tasks that involve State management.

How do I install React18 Legacy Context in Claude Code?

Run `npx skills add github/awesome-copilot --skill react18-legacy-context -a claude-code`. Or copy the skill folder (skills/react18-legacy-context in github/awesome-copilot) into .claude/skills/react18-legacy-context in your project. Claude Code loads it when a task matches its description.

How do I install React18 Legacy Context in Codex?

Run `npx skills add github/awesome-copilot --skill react18-legacy-context -a codex`. Or copy the skill folder (skills/react18-legacy-context in github/awesome-copilot) into .agents/skills/react18-legacy-context in your project. Codex loads it when a task matches its description.

Can I use React18 Legacy Context in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add github/awesome-copilot --skill react18-legacy-context -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/react18-legacy-context, .gemini/skills/react18-legacy-context, .github/skills/react18-legacy-context and .opencode/skills/react18-legacy-context in your project.

What does React18 Legacy Context need to run?

SKILL.md names no scripts, command-line tools or credentials: React18 Legacy Context is instructions for the agent only.

Does React18 Legacy Context access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is React18 Legacy Context safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does React18 Legacy Context use?

React18 Legacy Context is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does React18 Legacy Context use?

About 620 tokens (SKILL.md is roughly 2.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 3.6k tokens, read only when the agent opens those files.

What are the alternatives to React18 Legacy Context?

Skills that share tags, products or a category with React18 Legacy Context: Dify Component Writing Guide (langgenius/dify, 158k stars), Pierre Theming Library (pierrecomputer/pierre, 6.2k stars), Frontend Patterns (kurealnum/dotfiles, 290 stars) and Cursor BYOK Frontend Guide (leookun/cursor-byok, 3.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains React18 Legacy Context?

github (a GitHub organization, an official publisher) maintains it in github/awesome-copilot, which has 39,748 GitHub stars. The repository holds 417 skills in this directory. The repository was last updated on October 7, 2026.

Source: github/awesome-copilot on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.