Menú
Upgrade Next.js to the latest version following official migration guides and codemods
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React. Use when: initializing React projects with Tailwind v4, setting up shadcn/ui, implementing dark mode, debugging CSS variable issues, fixing theme switching, migrating from Tailwind v3, or encountering color/theming problems. Covers: @theme inline pattern, CSS variable architecture, dark mode with ThemeProvider, component composition, vite.config setup, common v4 gotchas, and production-tested patterns. Keywords: Tailwind v4, shadcn/ui, @tailwindcss/vite, @theme inline, dark mode, CSS variables, hsl() wrapper, components.json, React theming, theme switching, colors not working, variables broken, theme not applying, @plugin directive, typography plugin, forms plugin, prose class, @tailwindcss/typography, @tailwindcss/forms
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
Vitest fast unit testing framework powered by Vite with Jest-compatible API. Use when writing tests, mocking, configuring coverage, or working with test filtering and fixtures.
Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Use when styling React/Vue/Svelte components, building responsive layouts, implementing design systems, or optimizing CSS workflow.
| name | next-upgrade |
| description | Upgrade Next.js to the latest version following official migration guides and codemods |
| argument-hint | [target-version] |
Upgrade the current project to the latest Next.js version following official migration guides.
Detect current version: Read package.json to identify the current Next.js version and related dependencies (React, React DOM, etc.)
Fetch the latest upgrade guide: Use WebFetch to get the official upgrade documentation:
Determine upgrade path: Based on current version, identify which migration steps apply. For major version jumps, upgrade incrementally (e.g., 13 → 14 → 15).
Run codemods first: Next.js provides codemods to automate breaking changes:
npx @next/codemod@latest <transform> <path>
Common transforms:
next-async-request-api - Updates async Request APIs (v15)next-request-geo-ip - Migrates geo/ip properties (v15)next-dynamic-access-named-export - Transforms dynamic imports (v15)Update dependencies: Upgrade Next.js and peer dependencies together:
npm install next@latest react@latest react-dom@latest
Review breaking changes: Check the upgrade guide for manual changes needed:
next.config.jsUpdate TypeScript types (if applicable):
npm install @types/react@latest @types/react-dom@latest
Test the upgrade:
npm run build to check for build errorsnpm run dev and test key functionality