chore: publish from staged

plugins/react18-upgrade/skills/react18-legacy-context/SKILL.md

@@ -0,0 +1,47 @@
+---
+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

plugins/react18-upgrade/skills/react18-legacy-context/references/context-file-template.md

@@ -0,0 +1,116 @@
+# Context File Template
+
+Standard template for a new context module. Copy and fill in the name.
+
+## Template
+
+```jsx
+// src/contexts/[Name]Context.js
+import React from 'react';
+
+// ─── 1. Default Value ───────────────────────────────────────────────────────
+// Shape must match what the provider will pass as `value`
+// Used when a consumer renders outside any provider (edge case protection)
+const defaultValue = {
+  // fill in the shape
+};
+
+// ─── 2. Create Context ──────────────────────────────────────────────────────
+export const [Name]Context = React.createContext(defaultValue);
+
+// ─── 3. Display Name (for React DevTools) ───────────────────────────────────
+[Name]Context.displayName = '[Name]Context';
+
+// ─── 4. Optional: Custom Hook (strongly recommended) ────────────────────────
+// Provides a clean import path and a helpful error if used outside provider
+export function use[Name]() {
+  const context = React.useContext([Name]Context);
+  if (context === defaultValue) {
+    // Only throw if defaultValue is a sentinel - skip if a real default makes sense
+    // throw new Error('use[Name] must be used inside a [Name]Provider');
+  }
+  return context;
+}
+```
+
+## Filled Example - AuthContext
+
+```jsx
+// src/contexts/AuthContext.js
+import React from 'react';
+
+const defaultValue = {
+  user: null,
+  isAuthenticated: false,
+  login: () => Promise.resolve(),
+  logout: () => {},
+};
+
+export const AuthContext = React.createContext(defaultValue);
+AuthContext.displayName = 'AuthContext';
+
+export function useAuth() {
+  return React.useContext(AuthContext);
+}
+```
+
+## Filled Example - ThemeContext
+
+```jsx
+// src/contexts/ThemeContext.js
+import React from 'react';
+
+const defaultValue = {
+  theme: 'light',
+  toggleTheme: () => {},
+};
+
+export const ThemeContext = React.createContext(defaultValue);
+ThemeContext.displayName = 'ThemeContext';
+
+export function useTheme() {
+  return React.useContext(ThemeContext);
+}
+```
+
+## Where to Put Context Files
+
+```
+src/
+  contexts/           ← preferred: dedicated folder
+    AuthContext.js
+    ThemeContext.js
+```
+
+Alternative acceptable locations:
+
+```
+src/context/          ← singular is also fine
+src/store/contexts/   ← if co-located with state management
+```
+
+Do NOT put context files inside a component folder - contexts are cross-cutting and shouldn't be owned by any one component.
+
+## Provider Placement in the App
+
+Context providers wrap the components that need access. Place as low in the tree as possible, not always at root:
+
+```jsx
+// App.js
+import { ThemeProvider } from './ThemeProvider';
+import { AuthProvider } from './AuthProvider';
+
+function App() {
+  return (
+    // Auth wraps everything - login state is needed everywhere
+    <AuthProvider>
+      {/* Theme wraps only the UI shell - not needed in pure data providers */}
+      <ThemeProvider>
+        <Router>
+          <AppShell />
+        </Router>
+      </ThemeProvider>
+    </AuthProvider>
+  );
+}
+```

plugins/react18-upgrade/skills/react18-legacy-context/references/multi-context.md

@@ -0,0 +1,195 @@
+# Multiple Legacy Contexts - Migration Reference
+
+## Identifying Multiple Contexts
+
+A React 16/17 codebase often has several legacy contexts used for different concerns:
+
+```bash
+# Find distinct context names used in childContextTypes
+grep -rn "childContextTypes" src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."
+# Each hit is a separate context to migrate
+```
+
+Common patterns in class-heavy codebases:
+
+- **Theme context** - dark/light mode, color palette
+- **Auth context** - current user, login/logout functions
+- **Router context** - current route, navigation (if using older react-router)
+- **Store context** - Redux store, dispatch (if using older connect patterns)
+- **Locale/i18n context** - language, translation function
+- **Toast/notification context** - show/hide notifications
+
+---
+
+## Migration Order
+
+Migrate contexts one at a time. Each is an independent migration:
+
+```
+For each legacy context:
+  1. Create src/contexts/[Name]Context.js
+  2. Update the provider
+  3. Update all consumers
+  4. Run the app - verify no warning for this context
+  5. Move to the next context
+```
+
+Do not migrate all providers first then all consumers - it leaves the app in a broken intermediate state.
+
+---
+
+## Multiple Contexts in the Same Provider
+
+Some apps combined multiple contexts in one provider component:
+
+```jsx
+// Before - one provider exports multiple context values:
+class AppProvider extends React.Component {
+  static childContextTypes = {
+    theme: PropTypes.string,
+    user: PropTypes.object,
+    locale: PropTypes.string,
+    notifications: PropTypes.array,
+  };
+
+  getChildContext() {
+    return {
+      theme: this.state.theme,
+      user: this.state.user,
+      locale: this.state.locale,
+      notifications: this.state.notifications,
+    };
+  }
+}
+```
+
+**Migration approach - split into separate contexts:**
+
+```jsx
+// src/contexts/ThemeContext.js
+export const ThemeContext = React.createContext('light');
+
+// src/contexts/AuthContext.js
+export const AuthContext = React.createContext({ user: null, login: () => {}, logout: () => {} });
+
+// src/contexts/LocaleContext.js
+export const LocaleContext = React.createContext('en');
+
+// src/contexts/NotificationContext.js
+export const NotificationContext = React.createContext([]);
+```
+
+```jsx
+// AppProvider.js - now wraps with multiple providers
+import { ThemeContext } from './contexts/ThemeContext';
+import { AuthContext } from './contexts/AuthContext';
+import { LocaleContext } from './contexts/LocaleContext';
+import { NotificationContext } from './contexts/NotificationContext';
+
+class AppProvider extends React.Component {
+  render() {
+    const { theme, user, locale, notifications } = this.state;
+    return (
+      <ThemeContext.Provider value={theme}>
+        <AuthContext.Provider value={{ user, login: this.login, logout: this.logout }}>
+          <LocaleContext.Provider value={locale}>
+            <NotificationContext.Provider value={notifications}>
+              {this.props.children}
+            </NotificationContext.Provider>
+          </LocaleContext.Provider>
+        </AuthContext.Provider>
+      </ThemeContext.Provider>
+    );
+  }
+}
+```
+
+---
+
+## Consumer With Multiple Contexts (Class Component)
+
+Class components can only use ONE `static contextType`. For multiple, use `Consumer` render props or convert to a function component.
+
+### Option A - Render Props (keep as class component)
+
+```jsx
+import { ThemeContext } from '../contexts/ThemeContext';
+import { AuthContext } from '../contexts/AuthContext';
+
+class UserPanel extends React.Component {
+  render() {
+    return (
+      <ThemeContext.Consumer>
+        {(theme) => (
+          <AuthContext.Consumer>
+            {({ user, logout }) => (
+              <div className={`panel panel-${theme}`}>
+                <span>{user?.name}</span>
+                <button onClick={logout}>Sign out</button>
+              </div>
+            )}
+          </AuthContext.Consumer>
+        )}
+      </ThemeContext.Consumer>
+    );
+  }
+}
+```
+
+### Option B - Convert to Function Component (preferred)
+
+```jsx
+import { useContext } from 'react';
+import { ThemeContext } from '../contexts/ThemeContext';
+import { AuthContext } from '../contexts/AuthContext';
+
+function UserPanel() {
+  const theme = useContext(ThemeContext);
+  const { user, logout } = useContext(AuthContext);
+
+  return (
+    <div className={`panel panel-${theme}`}>
+      <span>{user?.name}</span>
+      <button onClick={logout}>Sign out</button>
+    </div>
+  );
+}
+```
+
+If converting to a function component is out of scope for this migration sprint - use Option A. If the class component is simple (mostly just render), Option B is worth the minor rewrite.
+
+---
+
+## Context File Naming Conventions
+
+Use consistent naming across the codebase:
+
+```
+src/
+  contexts/
+    ThemeContext.js      → exports: ThemeContext, ThemeProvider (optional)
+    AuthContext.js       → exports: AuthContext, AuthProvider (optional)
+    LocaleContext.js     → exports: LocaleContext
+```
+
+Each file exports the context object. The provider can stay in its original file and just import the context.
+
+---
+
+## Verification After All Contexts Migrated
+
+```bash
+# Should return zero hits for legacy context patterns
+echo "=== childContextTypes ==="
+grep -rn "childContextTypes" src/ --include="*.js" --include="*.jsx" | grep -v "\.test\." | wc -l
+
+echo "=== contextTypes (legacy) ==="
+grep -rn "^\s*static contextTypes\s*=\|contextTypes\.propTypes" src/ --include="*.js" | grep -v "\.test\." | wc -l
+
+echo "=== getChildContext ==="
+grep -rn "getChildContext" src/ --include="*.js" --include="*.jsx" | grep -v "\.test\." | wc -l
+
+echo "All three should be 0"
+```
+
+Note: `static contextType` (singular) is the MODERN API - that's correct. Only `contextTypes` (plural) is legacy.

plugins/react18-upgrade/skills/react18-legacy-context/references/single-context.md

@@ -0,0 +1,224 @@
+# Single Context Migration - Complete Before/After
+
+## Full Example: ThemeContext
+
+This covers the most common pattern - one context with one provider and multiple consumers.
+
+---
+
+### Step 1 - Before State (Legacy)
+
+**ThemeProvider.js (provider):**
+
+```jsx
+import PropTypes from 'prop-types';
+
+class ThemeProvider extends React.Component {
+  static childContextTypes = {
+    theme: PropTypes.string,
+    toggleTheme: PropTypes.func,
+  };
+
+  state = { theme: 'light' };
+
+  toggleTheme = () => {
+    this.setState(s => ({ theme: s.theme === 'light' ? 'dark' : 'light' }));
+  };
+
+  getChildContext() {
+    return {
+      theme: this.state.theme,
+      toggleTheme: this.toggleTheme,
+    };
+  }
+
+  render() {
+    return this.props.children;
+  }
+}
+```
+
+**ThemedButton.js (class consumer):**
+
+```jsx
+import PropTypes from 'prop-types';
+
+class ThemedButton extends React.Component {
+  static contextTypes = {
+    theme: PropTypes.string,
+    toggleTheme: PropTypes.func,
+  };
+
+  render() {
+    const { theme, toggleTheme } = this.context;
+    return (
+      <button className={`btn btn-${theme}`} onClick={toggleTheme}>
+        Toggle Theme
+      </button>
+    );
+  }
+}
+```
+
+**ThemedHeader.js (function consumer - if any):**
+
+```jsx
+// Function components couldn't use legacy context cleanly
+// They had to use a class wrapper or render prop
+```
+
+---
+
+### Step 2 - Create Context File
+
+**src/contexts/ThemeContext.js (new file):**
+
+```jsx
+import React from 'react';
+
+// Default value matches the shape of getChildContext() return
+export const ThemeContext = React.createContext({
+  theme: 'light',
+  toggleTheme: () => {},
+});
+
+// Named export for the context - both provider and consumers import from here
+```
+
+---
+
+### Step 3 - Update Provider
+
+**ThemeProvider.js (after):**
+
+```jsx
+import React from 'react';
+import { ThemeContext } from '../contexts/ThemeContext';
+
+class ThemeProvider extends React.Component {
+  state = { theme: 'light' };
+
+  toggleTheme = () => {
+    this.setState(s => ({ theme: s.theme === 'light' ? 'dark' : 'light' }));
+  };
+
+  render() {
+    // React 19 JSX shorthand: <ThemeContext value={...}>
+    // React 18: <ThemeContext.Provider value={...}>
+    return (
+      <ThemeContext.Provider
+        value={{
+          theme: this.state.theme,
+          toggleTheme: this.toggleTheme,
+        }}
+      >
+        {this.props.children}
+      </ThemeContext.Provider>
+    );
+  }
+}
+
+export default ThemeProvider;
+```
+
+> **React 19 note:** In React 19 you can write `<ThemeContext value={...}>` directly (no `.Provider`). For React 18.3.1 use `<ThemeContext.Provider value={...}>`.
+
+---
+
+### Step 4 - Update Class Consumer
+
+**ThemedButton.js (after):**
+
+```jsx
+import React from 'react';
+import { ThemeContext } from '../contexts/ThemeContext';
+
+class ThemedButton extends React.Component {
+  // singular contextType (not contextTypes)
+  static contextType = ThemeContext;
+
+  render() {
+    const { theme, toggleTheme } = this.context;
+    return (
+      <button className={`btn btn-${theme}`} onClick={toggleTheme}>
+        Toggle Theme
+      </button>
+    );
+  }
+}
+
+export default ThemedButton;
+```
+
+**Key differences from legacy:**
+
+- `static contextType` (singular) not `contextTypes` (plural)
+- No PropTypes declaration needed
+- `this.context` is the full value object (not a partial - whatever you passed to `value`)
+- Only ONE context per class component via `contextType` - use `Context.Consumer` render prop for multiple
+
+---
+
+### Step 5 - Update Function Consumer
+
+**ThemedHeader.js (after - now straightforward with hooks):**
+
+```jsx
+import { useContext } from 'react';
+import { ThemeContext } from '../contexts/ThemeContext';
+
+function ThemedHeader({ title }) {
+  const { theme } = useContext(ThemeContext);
+  return <h1 className={`header-${theme}`}>{title}</h1>;
+}
+```
+
+---
+
+### Step 6 - Multiple Contexts in One Class Component
+
+If a class component consumed more than one legacy context, it gets complex. Class components can only have one `static contextType`. For multiple contexts, use the render prop form:
+
+```jsx
+import { ThemeContext } from '../contexts/ThemeContext';
+import { AuthContext } from '../contexts/AuthContext';
+
+class Dashboard extends React.Component {
+  render() {
+    return (
+      <ThemeContext.Consumer>
+        {({ theme }) => (
+          <AuthContext.Consumer>
+            {({ user }) => (
+              <div className={`dashboard-${theme}`}>
+                Welcome, {user.name}
+              </div>
+            )}
+          </AuthContext.Consumer>
+        )}
+      </ThemeContext.Consumer>
+    );
+  }
+}
+```
+
+Or consider migrating the class component to a function component to use `useContext` cleanly.
+
+---
+
+### Verification Checklist
+
+After migrating one context:
+
+```bash
+# Provider - no legacy context exports remain
+grep -n "childContextTypes\|getChildContext" src/ThemeProvider.js
+
+# Consumers - no legacy context consumption remains
+grep -rn "contextTypes\s*=" src/ --include="*.js" --include="*.jsx" | grep -v "ThemeContext\|\.test\."
+
+# this.context usage - confirm it reads from contextType not legacy
+grep -rn "this\.context\." src/ --include="*.js" | grep -v "\.test\."
+```
+
+Each should return zero hits for the migrated context.