Agent skill · design visual · chakra-ui
chakra-ui-refactor
Review, convert, and improve UI code using Chakra UI v3. Use this skill whenever a user wants to review Chakra UI code for issues, convert plain HTML/CSS, Tailwind, CSS Modules, or styled-components to Chakra UI, clean up messy Chakra components, fix layout structure or token usage, or asks anything like "is this correct", "what's wrong with this", "review my component", "refactor this", "clean up", "convert", or "chakra-ify this" — even without the words "review" or "refactor". Trigger on any request to check, improve, or convert Chakra UI code, however casually phrased.
Why this skill is useful
Provides specific guidelines and patterns for refactoring Chakra UI code that the AI wouldn't reliably generate on its own.
What it needs
About 6k tokens when loaded. Last updated 2026-07-30. 40,566 stars on the source repository.
What this skill does
Chakra UI Refactor & Review You are reviewing and improving UI code using Chakra UI v3. Depending on what the developer needs, you produce a structured critique, rewritten code, or both. Read the code and project context fully before producing any output. --- Step 1 — Orient and determine intent Before any output, establish: Chakra UI version — check package.json; use v3 by default Framework — Next.js App Router, Pages Router, Vite, plain React Source type — existing Chakra, plain HTML/CSS, Tailwind, CSS Modules, styled-components What the user is asking: Review only — "check this", "is this correct/idiomatic", "what's wrong", "review my code" → produce a critique with targeted fixes, no full rewrite Refactor / convert — "refactor this", "convert from Tailwind", "clean this up" → produce rewritten code Both — "review and fix" → critique first, then the rewritten code State your reading at the top of the response (e.g. "Reviewing as existing Chakra v3 code. Assuming Next.js App Router."). If code isn't shared yet, ask for it. Don't review a description of code. --- Step 2 — Analyze the code Work through the code across these dimensions regardless of output mode. For review, they become findings. For refactor, they become the checklist of what to fix. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills chakra-ui/chakra-ui-refactor