From react19-upgrade
Preserves React 18 concurrent patterns (useTransition, useDeferredValue, Suspense) during React 19 migration and guides adoption of new APIs (use, useOptimistic, Actions).
npx claudepluginhub passelin/marketplace-test --plugin react19-upgradeThis skill uses the workspace's default tool permissions.
React 19 introduced new APIs that complement the migration work. This skill covers two concerns:
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Analyzes competition with Porter's Five Forces, Blue Ocean Strategy, and positioning maps to identify differentiation opportunities and market positioning for startups and pitches.
React 19 introduced new APIs that complement the migration work. This skill covers two concerns:
These patterns exist in React 18 codebases and must not be accidentally removed or broken:
If the R18 orchestra already ran, ReactDOM.render → createRoot is done. Verify it's correct:
// CORRECT React 19 root (same as React 18):
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
useTransition from React 18 works identically in React 19. Do not touch these patterns during migration:
// React 18 useTransition unchanged in React 19:
const [isPending, startTransition] = useTransition();
function handleClick() {
startTransition(() => {
setFilteredResults(computeExpensiveFilter(input));
});
}
// React 18 useDeferredValue unchanged in React 19:
const deferredQuery = useDeferredValue(query);
// React 18 Suspense with lazy unchanged in React 19:
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
return (
<Suspense fallback={<Spinner />}>
<LazyComponent />
</Suspense>
);
}
These are worth adopting in a post-migration cleanup sprint. Do not introduce these DURING the migration stabilize first.
For full patterns on each new API, read:
references/react19-use.md the use() hook for promises and contextreferences/react19-actions.md Actions, useActionState, useFormStatus, useOptimisticreferences/react19-suspense.md Suspense for data fetching (the new pattern)During the React 19 migration itself, these concurrent-mode patterns must be left completely untouched:
# Verify nothing touched these during migration:
grep -rn "useTransition\|useDeferredValue\|Suspense\|startTransition" \
src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."
If the migrator touched any of these files, review the changes the migration should only have modified React API surface (forwardRef, defaultProps, etc.), never concurrent mode logic.