New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Chakra UI v2 to v3 Migration

by chakra-ui in chakra-ui/chakra-ui

Guides an upgrade from Chakra UI v2 to v3: inspect the project, swap packages, run the official codemod, then fix provider, color mode, props, theming and Next.js code.

MITAuto-check passedFrontend & Design

Install Chakra UI v2 to v3 Migration

skills CLI
$ npx skills add chakra-ui/chakra-ui --skill chakra-ui-migrate -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install chakra-ui/chakra-ui chakra-ui-migrate --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/chakra-ui/chakra-ui.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/chakra-ui-migrate .claude/skills/chakra-ui-migrate && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
chakra-ui-migrate
GitHub stars
41k
Token cost
~3.4k tokens
SKILL.md length
805 words
Files
1
Skills in repo
3
Repo updated
First seen
Licence
MIT

At a glance

Guides an upgrade from Chakra UI v2 to v3: inspect the project, swap packages, run the official codemod, then fix provider, color mode, props, theming and Next.js code.

  • Works in 10 steps: Inspect the project → Update packages → Run the codemod → …
  • Upgrading a project from Chakra UI v2 to v3
  • SKILL.md covers Step 1 — Inspect the project, Step 2 — Update packages, Step 3 — Run the codemod and Step 4 — Update the Provider, plus 7 more sections
  • Calls npm, npx and pnpm

What it does

The agent inspects the project before changing anything, reading package.json for the Chakra version, related packages, the framework (Next.js with App or Pages Router, Vite or plain React) and the package manager from the lockfile, and it spot-checks provider, theme and color mode files. Chakra UI v3 needs Node 20 or newer, so the agent confirms that first when the environment is uncertain.

Package changes come next: remove @chakra-ui/icons, @chakra-ui/hooks, @chakra-ui/next-js, @emotion/styled and framer-motion, install @chakra-ui/react and @emotion/react, and replace the removed packages with lucide-react or react-icons, react-use or usehooks-ts, and the asChild pattern. The official codemod runs as a dry run first, then for real, and its result should be committed before manual edits because it does not replace a review.

Later steps cover provider setup, color mode, prop renaming, compound components, theming, recipes and Next.js changes, and the skill also fits questions about breaking changes after an upgrade or differences between the two versions.

When your agent uses it

  • Upgrading a project from Chakra UI v2 to v3
  • Fixing breaking changes right after a Chakra upgrade
  • Converting ColorModeScript, useColorModeValue, extendTheme or isDisabled usage
  • Checking what changed between Chakra UI v2 and v3

Example prompts

  • “Migrate this Next.js app from Chakra UI v2 to v3.”
  • “After upgrading Chakra my build fails on useColorModeValue, so fix it.”
  • “Run the Chakra codemod in dry-run mode first and show me what it plans to change.”
  • “What replaces @chakra-ui/icons in Chakra UI v3?”

Requirements

  • Node.js 20 or newer
  • A project using Chakra UI v2

Workflow steps

10 steps, taken from the step headings in SKILL.md.

  1. Inspect the project
  2. Update packages
  3. Run the codemod
  4. Update the Provider
  5. Color mode migration
  6. Prop renames
  7. Component migrations
  8. Theming migration
  9. Next.js specifics
  10. Validation checklist

What it can do on your machine

Read from SKILL.md and the folder at commit f799e4d. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npm
    • npx
    • pnpm
    • yarn

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npm, npx, pnpm and yarn, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Chakra UI v2 to v3 Migration loads about 3.4k tokens when it runs. Until then it costs about 156 tokens; SKILL.md has 805 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~156
When it runs · the whole SKILL.md, loaded when a task matches
~3.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from chakra-ui/chakra-ui at commit f799e4d, republished under its MIT licence (© chakra-ui). 805 words, ~3,395 tokens.

Download SKILL.mdSave it as .claude/skills/chakra-ui-migrate/SKILL.md (or your agent's skills folder).
name
chakra-ui-migrate
description
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.

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:

package.json

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
bash
# npm
npm uninstall @chakra-ui/icons @chakra-ui/hooks @chakra-ui/next-js @emotion/styled framer-motion

# pnpm
pnpm remove @chakra-ui/icons @chakra-ui/hooks @chakra-ui/next-js @emotion/styled framer-motion

# yarn
yarn remove @chakra-ui/icons @chakra-ui/hooks @chakra-ui/next-js @emotion/styled framer-motion

@emotion/styled and framer-motion are no longer required in v3.

Install v3 core packages
bash
# npm
npm install @chakra-ui/react @emotion/react

# pnpm
pnpm add @chakra-ui/react @emotion/react

# yarn
yarn add @chakra-ui/react @emotion/react
Replacements for removed packages
RemovedReplacement
@chakra-ui/iconslucide-react or react-icons
@chakra-ui/hooksreact-use or usehooks-ts
@chakra-ui/next-jsasChild 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):

bash
npx @chakra-ui/codemod upgrade --dry

Review what it proposes. When satisfied:

bash
npx @chakra-ui/codemod upgrade

After the codemod, commit the changes before making manual edits so you have a clean diff to work from.

Step 4 — Update the Provider

Old v2 pattern
tsx
// v2
import { ChakraProvider } from "@chakra-ui/react"
import theme from "./theme"

;<ChakraProvider theme={theme}>{children}</ChakraProvider>
New v3 pattern (using Chakra CLI snippets)

Generate the provider and component snippets:

bash
npx @chakra-ui/cli snippet add

This creates components/ui/provider.tsx (plus toaster and tooltip snippets) and automatically installs required npm dependencies — including next-themes. Import and use it:

tsx
// v3 — app/layout.tsx (Next.js App Router)
import { Provider } from "@/components/ui/provider"

;<html lang="en" suppressHydrationWarning>
  <body>
    <Provider>{children}</Provider>
  </body>
</html>

The Provider file includes "use client" — do not add it to layout.tsx. See the Next.js section for Pages Router placement.

Custom theme in v3

Replace extendTheme with createSystem:

ts
// v2
import { extendTheme } from "@chakra-ui/react"
// v3
import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react"

export const theme = extendTheme({ colors: { brand: { 500: "#2196f3" } } })

const config = defineConfig({
  theme: { tokens: { colors: { brand: { 500: { value: "#2196f3" } } } } },
})
export const system = createSystem(defaultConfig, config)

Pass system to ChakraProvider via value={system}.

Step 5 — Color mode migration

Remove all v2 color mode patterns
tsx
// REMOVE these v2 imports and usages:
import { ColorModeScript } from "@chakra-ui/react"
// ❌
import { useColorMode } from "@chakra-ui/react"
// ❌ (use next-themes)
import { useColorModeValue } from "@chakra-ui/react"
// ❌ (use CSS tokens)
import { DarkMode, LightMode } from "@chakra-ui/react"

// ❌

// Also remove from _document.tsx:
;<ColorModeScript initialColorMode={theme.config.initialColorMode} /> // ❌
v3 color mode approach

Color mode is handled by next-themes via the generated Provider. Use semantic tokens that automatically respond to the active color mode:

tsx
// Use Chakra semantic tokens — they flip automatically in dark mode
<Box color="fg.default" bg="bg.subtle">
  ...
</Box>

For a color mode toggle, use the generated components/ui/color-mode.tsx snippet or useColorMode from next-themes directly.

Step 6 — Prop renames

These boolean and style props were renamed in v3 for consistency with HTML and modern React conventions. The codemod catches most of these, but verify manually afterward.

Boolean props
v2v3
isOpenopen
defaultIsOpendefaultOpen
isDisableddisabled
isInvalidinvalid
isRequiredrequired
isReadOnlyreadOnly
isCheckedchecked
isLoadedloaded
isIndeterminateindeterminate
Style and layout props
v2v3
colorSchemecolorPalette
noOfLineslineClamp
truncatedtruncate
spacing (Stack)gap
applytextStyle or layerStyle
Nested style props
tsx
// v2 — sx with nested pseudo-selectors
<Box sx={{ "&:hover": { color: "blue.500" } }} />

// v3 — css prop with "&" selectors
<Box css={{ "&:hover": { color: "blue.500" } }} />

Step 7 — Component migrations

Renamed components
v2v3
ModalDialog
FormControlField
SelectNativeSelect
AlertDialogAlertDialog (compound, see below)

Modal is the most common rename — every <Modal>, <ModalOverlay>, <ModalContent>, <ModalHeader>, <ModalBody>, <ModalFooter>, and <ModalCloseButton> becomes a Dialog.* compound part:

tsx
// v2
<Modal isOpen={open} onClose={onClose}>
  <ModalOverlay />
  <ModalContent>
    <ModalHeader>Title</ModalHeader>
    <ModalBody>Body</ModalBody>
    <ModalFooter><Button onClick={onClose}>Close</Button></ModalFooter>
  </ModalContent>
</Modal>

// v3
<Dialog.Root open={open} onOpenChange={({ open }) => setOpen(open)}>
  <Dialog.Backdrop />
  <Dialog.Positioner>
    <Dialog.Content>
      <Dialog.Header><Dialog.Title>Title</Dialog.Title></Dialog.Header>
      <Dialog.Body>Body</Dialog.Body>
      <Dialog.Footer><Button onClick={() => setOpen(false)}>Close</Button></Dialog.Footer>
      <Dialog.CloseTrigger />
    </Dialog.Content>
  </Dialog.Positioner>
</Dialog.Root>
Show full SKILL.md (340 more words)Show less
Compound component rewrites

v3 adopts a consistent compound component API. The codemod handles many of these, but complex custom usage needs manual review.

Checkbox

tsx
// v2
<Checkbox isChecked={val} onChange={fn}>Label</Checkbox>

// v3
<Checkbox.Root checked={val} onCheckedChange={fn}>
  <Checkbox.Control><Checkbox.Indicator /></Checkbox.Control>
  <Checkbox.Label>Label</Checkbox.Label>
</Checkbox.Root>

Progress

tsx
// v2
<Progress value={60} colorScheme="blue" />

// v3
<Progress.Root value={60} colorPalette="blue">
  <Progress.Track><Progress.Range /></Progress.Track>
</Progress.Root>

Accordion

tsx
// v2
<Accordion><AccordionItem><AccordionButton /><AccordionPanel /></AccordionItem></Accordion>

// v3
<Accordion.Root>
  <Accordion.Item value="item-1">
    <Accordion.ItemTrigger />
    <Accordion.ItemContent />
  </Accordion.Item>
</Accordion.Root>

FormControl → Field

tsx
// v2
<FormControl isInvalid={!!error} isRequired>
  <FormLabel>Email</FormLabel>
  <Input type="email" />
  <FormErrorMessage>{error}</FormErrorMessage>
  <FormHelperText>We'll never share your email.</FormHelperText>
</FormControl>

// v3
<Field.Root invalid={!!error} required>
  <Field.Label>Email</Field.Label>
  <Input type="email" />
  <Field.ErrorText>{error}</Field.ErrorText>
  <Field.HelpText>We'll never share your email.</Field.HelpText>
</Field.Root>

All FormControl sub-parts map to Field.*:

  • FormLabel → Field.Label
  • FormErrorMessage → Field.ErrorText
  • FormHelperText → Field.HelpText
  • FormControl props isInvalid, isRequired, isDisabled → invalid, required, disabled

Dialog / Drawer / Menu / Tabs follow the same compound pattern: use ComponentName.Root, .Trigger, .Content, .Item, etc. Check the Chakra UI v3 docs for the specific compound API for each.

tsx
// v2 — @chakra-ui/next-js
import { LinkOverlay } from "@chakra-ui/next-js"

// v3 — asChild pattern
import NextLink from "next/link"
<ChakraLink asChild><NextLink href="/about">About</NextLink></ChakraLink>

import NextImage from "next/image"
<ChakraImage asChild><NextImage src="..." alt="..." /></ChakraImage>

Step 8 — Theming migration

styleConfig and multiStyleConfig → recipes
ts
// v3 — single component (recipe)
import { defineRecipe } from "@chakra-ui/react"

// v2
const buttonStyle = {
  baseStyle: { fontWeight: "bold" },
  variants: { solid: { bg: "blue.500" } },
  defaultProps: { variant: "solid" },
}

const buttonRecipe = defineRecipe({
  base: { fontWeight: "bold" },
  variants: { variant: { solid: { bg: "blue.500" } } },
  defaultVariants: { variant: "solid" },
})
ts
// v3 — slot recipe
import { defineSlotRecipe } from "@chakra-ui/react"

// v2 — multiStyleConfig (multi-part component)
const cardStyle = multiStyleConfig({
  parts: ["root", "header"],
  baseStyle: { root: { bg: "white" }, header: { fontWeight: "bold" } },
})

const cardSlotRecipe = defineSlotRecipe({
  slots: ["root", "header"],
  base: { root: { bg: "white" }, header: { fontWeight: "bold" } },
})
Typegen for custom tokens

After adding custom tokens, semantic tokens, recipes, or slot recipes, run typegen to keep TypeScript types in sync:

bash
npx @chakra-ui/cli typegen ./theme.ts

Complex theme migrations — if you're moving a large v2 theme with many custom tokens, semantic tokens, or multi-part component styles, use the chakra-ui-theming skill. It covers the full token/recipe/slot-recipe API in depth and is a better guide than this section alone.

Step 9 — Next.js specifics

App Router
  • Place <Provider> in app/layout.tsx (Server Component — no "use client")
  • The generated components/ui/provider.tsx already has "use client"
  • Add suppressHydrationWarning to <html> to prevent color mode flicker
  • Do not wrap the entire app or layout in "use client"
Pages Router
tsx
// pages/_app.js
import { Provider } from "@/components/ui/provider"

export default function App({ Component, pageProps }) {
  return (
    <Provider>
      <Component {...pageProps} />
    </Provider>
  )
}

Remove any ColorModeScript from pages/_document.tsx — it is not used in v3.

Step 10 — Validation checklist

Work through this after the migration is complete:

  • Reinstall dependencies: npm install / pnpm install
  • TypeScript: npx tsc --noEmit — resolve all type errors
  • Lint: npm run lint
  • Build: npm run build
  • Visually verify color mode toggle (light ↔ dark)
  • Test interactive components: Dialog, Drawer, Menu, Tabs, Accordion
  • Test form components: Checkbox, Select/NativeSelect, Input, Radio
  • Check for visual regressions across key pages
  • Search codebase for leftover v2 imports:
    bash
    grep -r "ColorModeScript\|useColorModeValue\|extendTheme\|styleConfig\|@chakra-ui/icons\|@chakra-ui/next-js" src/

Clarifying questions (when context is unclear)

If the user's version, framework, or scope is ambiguous, ask:

  1. "What version of @chakra-ui/react are you on right now?"
  2. "Are you using Next.js App Router, Pages Router, Vite, or plain React?"
  3. "Are you migrating the full codebase or just specific components?"

State assumptions clearly if you proceed without asking.

© chakra-ui, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/chakra-ui-migrate of chakra-ui/chakra-ui.

Open the folder on GitHubat commit f799e4d

Compare with similar skills

Chakra UI v2 to v3 Migration next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Chakra UI v2 to v3 Migration compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Chakra UI v2 to v3 Migration this skillchakra-ui/chakra-ui41k—~3.4kAutomated safety check: PassMIT
Creative Tim UI Blockscreativetimofficial/ui12k—~2.1kAutomated safety check: NotesMIT
Animated React Component LibrariesHainrixz/editor-pro-max2601 repos~5.7kAutomated safety check: PassCustom licence
Fast Typescript Checkinternet-development/www-sacred1.6k—~4.3kAutomated safety check: PassMIT
Animatedelphi-ai/animate-skill107—~1.3kAutomated safety check: PassNone
Awwwards-Level React AnimationsHainrixz/editor-pro-max260—~4.4kAutomated safety check: PassCustom licence

Similar skills

  • Creative Tim UI Blocks

    creativetimofficial/ui

    Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.

    12k GitHub stars~2.1k tokensUpdated 6 mo ago
    Frontend & DesignAuto-check: notes

  • Animated React Component Libraries

    Hainrixz/editor-pro-max

    Helps choose and drop in animated React components from Magic UI and React Bits for landing pages, marketing sites and dashboards, instead of hand-coding animations.

    260 GitHub starsUsed in 1 repo~5.7k tokens
    Frontend & DesignAuto-check passed

  • Fast Typescript Check

    internet-development/www-sacred

    Keep www-sacred's TypeScript fast to type-check and fast to run.

    1.6k GitHub stars~4.3k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Animate

    delphi-ai/animate-skill

    Animation patterns and best practices for Next.js/React applications.

    107 GitHub stars~1.3k tokensUpdated 8 mo ago
    Frontend & DesignAuto-check passed

  • Awwwards-Level React Animations

    Hainrixz/editor-pro-max

    Guides React animation work with GSAP, Motion, Anime.js and Lenis for scroll effects, page transitions, text effects and generative visuals, with a library decision table.

    260 GitHub stars~4.4k tokensUpdated 6 mo ago
    Frontend & DesignAuto-check passed

  • Motion

    softmaple/softmaple

    Animation skill for Motion (prev Framer Motion) and CSS animation.

    159 GitHub stars~1.1k tokensUpdated today
    Frontend & DesignAuto-check passed

More from chakra-ui/chakra-ui

  • Chakra UI v3 Builder

    chakra-ui/chakra-ui

    Builds responsive, accessible Chakra UI v3 components and layouts, sets up Chakra in new or existing projects, and designs themes with tokens, semantic tokens and recipes.

    41k GitHub stars~3.1k tokensUpdated today
    Auto-check passed

  • Chakra UI v3 Refactor and Review

    chakra-ui/chakra-ui

    Reviews and converts UI code to Chakra UI v3, producing a critique, rewritten code or both, from plain HTML, Tailwind, CSS Modules or styled-components.

    41k GitHub stars~2.8k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Chakra UI v2 to v3 Migration

What does Chakra UI v2 to v3 Migration do?

Guides an upgrade from Chakra UI v2 to v3: inspect the project, swap packages, run the official codemod, then fix provider, color mode, props, theming and Next.js code. js with App or Pages Router, Vite or plain React) and the package manager from the lockfile, and it spot-checks provider, theme and color mode files. Chakra UI v3 needs Node 20 or newer, so the agent confirms that first when the environment is uncertain.

When should I use Chakra UI v2 to v3 Migration?

Chakra UI v2 to v3 Migration fits situations like: upgrading a project from Chakra UI v2 to v3; fixing breaking changes right after a Chakra upgrade; converting ColorModeScript, useColorModeValue, extendTheme or isDisabled usage; checking what changed between Chakra UI v2 and v3.

How do I install Chakra UI v2 to v3 Migration in Claude Code?

Run `npx skills add chakra-ui/chakra-ui --skill chakra-ui-migrate -a claude-code`. Or copy the skill folder (skills/chakra-ui-migrate in chakra-ui/chakra-ui) into .claude/skills/chakra-ui-migrate in your project. Claude Code loads it when a task matches its description.

How do I install Chakra UI v2 to v3 Migration in Codex?

Run `npx skills add chakra-ui/chakra-ui --skill chakra-ui-migrate -a codex`. Or copy the skill folder (skills/chakra-ui-migrate in chakra-ui/chakra-ui) into .agents/skills/chakra-ui-migrate in your project. Codex loads it when a task matches its description.

Can I use Chakra UI v2 to v3 Migration in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add chakra-ui/chakra-ui --skill chakra-ui-migrate -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/chakra-ui-migrate, .gemini/skills/chakra-ui-migrate, .github/skills/chakra-ui-migrate and .opencode/skills/chakra-ui-migrate in your project.

What does Chakra UI v2 to v3 Migration need to run?

Going by SKILL.md and its folder, Chakra UI v2 to v3 Migration needs the command-line tools its instructions call (npm, npx, pnpm and yarn). Our summary lists: Node.js 20 or newer; A project using Chakra UI v2.

Does Chakra UI v2 to v3 Migration access the network?

SKILL.md contains no URLs. Its commands use npm and npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Chakra UI v2 to v3 Migration safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Chakra UI v2 to v3 Migration use?

Chakra UI v2 to v3 Migration is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Chakra UI v2 to v3 Migration use?

About 3.4k tokens (SKILL.md is roughly 14k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Chakra UI v2 to v3 Migration?

Skills that share tags, products or a category with Chakra UI v2 to v3 Migration: Creative Tim UI Blocks (creativetimofficial/ui, 12k stars), Animated React Component Libraries (Hainrixz/editor-pro-max, 260 stars), Fast Typescript Check (internet-development/www-sacred, 1.6k stars) and Animate (delphi-ai/animate-skill, 107 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Chakra UI v2 to v3 Migration?

chakra-ui (a GitHub organization) maintains it in chakra-ui/chakra-ui, which has 40,676 GitHub stars. The repository holds 3 skills in this directory. The repository was last updated on October 6, 2026.

Source: chakra-ui/chakra-ui on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.