1. Habit
  2. Skills
  3. Chakra UI Refactor skill
chakra-ui · 3K installs

Chakra UI Refactor skill
Runs by itself, component files change.

Components stay accessible and v3-correct.

Install the Chakra UI Refactor skill and make it a habit: follow https://gethabit.dev/skills/chakra-ui/chakra-ui-refactor.md

  1. 1Copy
  2. 2Paste into Claude Code, Codex or Cursor
  3. 3It runs by itself

3K installs41K starsMIT licenceSource on GitHub ↗

Chakra UI Refactor

by chakra-ui · 3K installs

The skill

Chakra ui refactor reviews, converts and improves UI code with Chakra UI v3, from plain HTML, Tailwind, CSS Modules or styled-components, checking accessibility, responsiveness, tokens and v3 API use.

Only when you ask.

The habit

Components stay accessible and v3-correct.

↻ Runs by itselfcomponent files change

How the habit works.
You don't have to.

Three questionsWhen does it start? How does it check its work? What does it remember?

01

It starts by itself

component files change. Runs in GitHub Actions or Claude Code routine.

  • ↻ component files change
  • pull_request paths: src/components/**

02

It checks its work

critical issue count. If a check fails, it tells you.

  • ✓no v2 props like isDisabled or colorScheme remain in changed files
  • ✓every icon-only button has an aria-label
  • ✓the count of critical findings is zero

03

It remembers

UI review log. The next run reads it first: v2 patterns still left and repeated patterns to extract.

loops/chakra-ui-review-loop/log.md

One run, step by step.
Then it stops.

Stop ruleStops after the changed components of one pull request, at most 20 files.

  1. 01

    Orient

    Check package.json for the Chakra version and note the framework and source type.

  2. 02

    Check accessibility

    Look for missing labels, keyboard access, heading order and Field.Root usage.

  3. 03

    Check API and tokens

    Flag v2 props and patterns, hardcoded colors and inline style props.

  4. 04

    Check structure

    Flag deep nesting, manual spacing and the wrong layout primitive.

  5. 05

    Report

    Group findings as critical, improvements and optional, with a minimal fix for each critical one.

What it may do.
Nothing more.

Safe by defaultIt writes only in its own folder and asks you before anything goes out.

Is it for you?
Use it when it fits.

Quick checkRead both lists. If the left one sounds like you, the Chakra UI Refactor skill helps.

Use it when

  • ✓ You review a Chakra component
  • ✓ You convert Tailwind to Chakra
  • ✓ You migrate Chakra v2 code to v3

Skip it when

  • – You do not use Chakra UI
  • – You need a new design system

Questions

Chakra UI Refactor skill, answered.

Will it rewrite my components?

Not in this loop. It reviews; a refactor runs only when you ask for one.

Does it add use client everywhere?

No. It adds it only where a component really needs it.

How do I install the Chakra UI Refactor skill?

Copy the prompt at the top into your agent. It installs the skill from chakra-ui/chakra-ui and sets up the habit. Or run npx skills add chakra-ui/chakra-ui --skill chakra-ui-refactor.

Is the Chakra UI Refactor skill free?

Yes. It is published under MIT. Habit is free too.

Chakra UI Refactor. Now as a habit.

Install the Chakra UI Refactor skill and make it a habit: follow https://gethabit.dev/skills/chakra-ui/chakra-ui-refactor.md

  • Free
  • No account
  • Undo in one line

All chakra-ui skills →More design skills →

Works in

  • Claude Code
  • Codex
  • Cursor
  • ChatGPT
  • Claude app

Made by chakra-ui, published under MIT. Habit links to the original and never changes it. Is this your skill?

Copying didn't work here. Select the line and copy it by hand.