skillboardUpdated every 6 hours
skillboardProvides 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.
Legacy context (contextTypes, childContextTypes, getChildContext) was deprecated in React 16.3 and warns in React 18.3.1. It is removed in React 19.
Unlike most other migrations that touch one file at a time, context migration requires coordinating:
Missing any consumer leaves the app broken - it will read from the wrong context or get undefined.
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
# 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\."
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 moduleCopy a source-pinned command for your client. You run it yourself.
Destination: .claude/skills/react18-legacy-context · pinned to the source commit
# Run from your project root
git clone https://github.com/github/awesome-copilot.git .skillboard-tmp
git -C .skillboard-tmp checkout f11a4e441c5ff061b4f8ae37952be8c602e4034e
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/skills/react18-legacy-context" ".claude/skills/"
rm -rf .skillboard-tmpReview the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.
sudo apt update && sudo apt install -y gitnpm install -g @anthropic-ai/claude-code# Run from your project root
git clone https://github.com/github/awesome-copilot.git .skillboard-tmp
git -C .skillboard-tmp checkout f11a4e441c5ff061b4f8ae37952be8c602e4034e
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/skills/react18-legacy-context" ".claude/skills/"
rm -rf .skillboard-tmpDestination: .claude/skills/react18-legacy-context
Scanner static-checks@0.1.0 · commit f11a4e441c5f. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.
No static rules matched. This is not a safety guarantee.