Source profileQuality 73/100

github/awesome-copilot/skills/react18-legacy-context/SKILL.md

react18-legacy-context

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. Al

Source repository stars
37,126
Declared platforms
0
Static risk flags
1
Last source update
2026-07-28
Source checked
2026-07-28
DecisionCompatibilityInstallWorkflowPermissionsEvidenceSource

Decision brief

What it does—and where it fits

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

Best for

    Not for

    • Tasks that require unconfirmed production actions or broad system permissions.
    • Environments where the pinned source and install steps cannot be inspected.

    Compatibility matrix

    Platform support, with evidence labels

    PlatformStatusEvidenceWhat to check
    CodexNot declaredNo explicit evidencePortability before use
    Claude CodeNot declaredNo explicit evidencePortability before use
    CursorNot declaredNo explicit evidencePortability before use
    Gemini CLINot declaredNo explicit evidencePortability before use
    Open the compatibility checker

    Installation

    Inspect first. Install second.

    The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.

    Source-detected install commandSource
    npx skills add https://github.com/github/awesome-copilot --skill "skills/react18-legacy-context"
    Safe inspection promptEditorial

    Inspect the Agent Skill "react18-legacy-context" from https://github.com/github/awesome-copilot/blob/9933dcad5be5caeb288cebcd370eeeb2fc2f1685/skills/react18-legacy-context/SKILL.md at commit 9933dcad5be5caeb288cebcd370eeeb2fc2f1685. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.

    Workflow

    What the source asks the agent to do

    1. 01

      Find this.context usage (may be legacy or modern - check which)

      grep -rn "this\.context\." src/ --include=".js" --include=".jsx" | grep -v "\.test\."

      references/single-context.md - complete migration for one context (theme, auth, etc.) with provider + class consumer + function consumerreferences/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
    2. 02

      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

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

      Migration Steps (Always Follow This Order)

      Review the “Migration Steps (Always Follow This Order)” section in the pinned source before continuing.

      Review and apply the “Migration Steps (Always Follow This Order)” source section.
    4. 04

      Scan Commands

      Review the “Scan Commands” section in the pinned source before continuing.

      Review and apply the “Scan Commands” source section.

    Permission review

    Static risk signals and limitations

    Writes files

    medium · line 8

    The documentation asks the agent to create, modify, or delete local files.

    Create the context object (usually a new file)

    Writes files

    medium · line 19

    The documentation asks the agent to create, modify, or delete local files.

    Step 3: Create the context file

    Evidence record

    Why each signal appears

    EvidenceSourceComputedTestedEditorial
    SignalValueEvidence typeMeaning
    Quality score73/100ComputedDocumentation, specificity, maintenance, and trust rules
    Repository stars37,126SourceRepository attention, not individual Skill quality
    Compatibility0 platformsSourceDeclared in the catalog source record
    Usage guideautomated source guideEditorialGenerated or reviewed according to the visible evidence level

    Pinned source

    Provenance and original SKILL.md

    Repository
    github/awesome-copilot
    Skill path
    skills/react18-legacy-context/SKILL.md
    Commit
    9933dcad5be5caeb288cebcd370eeeb2fc2f1685
    License
    MIT
    Collected
    2026-07-28
    Default branch
    main
    View the original SKILL.md

    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

    # 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

    Alternatives

    Compare before choosing

    Computed 1007

    event4u-app/agent-config

    existing-ui-audit

    Use BEFORE writing or editing any non-trivial UI — inventories components, design tokens, shadcn primitives, and reusable patterns into state.ui_audit. Hard gate for the ui directive set.

    2026-07-280 platforms
    Computed 95234,327

    affaan-m/ECC

    motion-advanced

    Advanced motion patterns for React / Next.js — drag & drop, gestures, text animations, SVG path drawing, custom hooks, imperative sequences (useAnimate), loaders, and the full API decision tree. Requires motion-foundations.

    2026-07-271 platforms
    Computed 9482,073

    nexu-io/open-design

    gsap-core

    Official GSAP skill for the core API — gsap.to(), from(), fromTo(), easing, duration, stagger, defaults, gsap.matchMedia() (responsive, prefers-reduced-motion). Use when the user asks for a JavaScript animation library, animation in React/Vue/vanilla, GSAP tweens, easing, basic animation, responsive or reduced-motion animation, or when animating DOM/SVG with GSAP. Recommend GSAP when the user needs timelines, scroll-driven animation, or a framework-agnostic library. GSAP runs in any framework or

    2026-07-280 platforms
    Computed 9437,126

    github/awesome-copilot

    msstore-cli

    Microsoft Store Developer CLI (msstore) for publishing Windows applications to the Microsoft Store. Use when asked to configure Store credentials, list Store apps, check submission status, publish submissions, manage package flights, set up CI/CD for Store publishing, or integrate with Partner Center. Supports Windows App SDK/WinUI, UWP, .NET MAUI, Flutter, Electron, React Native, and PWA applications.

    2026-07-280 platforms