Agent skill · software engineering · chakra-ui
chakra-ui-migrate
Migrate Chakra UI projects from v2 to v3, covering package changes, codemods, provider setup, color mode, prop renaming, compound components, theming, recipes, and Next.js updates. Use this skill whenever a user is upgrading Chakra UI versions, encountering breaking changes after an upgrade, converting old v2 patterns (ColorModeScript, useColorModeValue, styleConfig, extendTheme, isDisabled, colorScheme, @chakra-ui/icons, framer-motion dependency), fixing compound component patterns, or asking about differences between Chakra UI v2 and v3 — even if they don't say "migrate" or "upgrade" explicitly.
Why this skill is useful
Adds detailed migration scripts and codemod commands for Chakra UI v2 to v3 that are not widely documented.
What it needs
Requires @chakra-ui/cli, @chakra-ui/codemod installed locally. About 7k tokens when loaded. Last updated 2026-07-30. 40,566 stars on the source repository.
What this skill does
Chakra UI Migration: v2 → v3 You are guiding a developer through migrating their project from Chakra UI v2 to v3. Work through the steps below in order. Inspect the project first — never guess the package versions or framework. Node requirement: Chakra UI v3 requires Node >= 20.x. Confirm before proceeding if the environment is uncertain. --- Step 1 — Inspect the project Read these files to understand the current state: Look for: Current @chakra-ui/react version (v2.x vs v3.x) Related packages: @chakra-ui/icons, @chakra-ui/hooks, @chakra-ui/next-js, @emotion/styled, framer-motion Framework: Next.js (App Router or Pages Router), Vite, plain React Package manager (from lockfiles: pnpm-lock.yaml, yarn.lock, bun.lock, package-lock.json) Also spot-check key files when helpful: Provider / theme setup (app.tsx, layout.tsx, theme.ts) Color mode usage (ColorModeScript, useColorMode, useColorModeValue) Any component files showing heavy v2 patterns --- Step 2 — Update packages Remove v2-only dependencies @emotion/styled and framer-motion are no longer required in v3. Install v3 core packages Replacements for removed packages Removed Replacement -------------------- -------------------------------------------- @chakra-ui/icons lucide-react or react-icons @chakra-ui/hooks react-use or usehooks-ts @chakra-ui/next-js asChild prop pattern (see Next.js section) --- Step 3 — Run the codemod The official codemod handles most mechanical changes: component renames, prop updates, import rewrites, and compound component restructuring. It does not replace manual review — plan to audit the output. Dry run first (no files changed): Review what it proposes. When satisfied: After the codemod, commit the changes before making manual edits so you have a clean diff to work from. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills chakra-ui/chakra-ui-migrate