skills.rest
FredoAi
FredoAiOFFICIAL
Explore all skills by this author →
GitHub

chakra-ui-refactor

Reviews and converts UI code to idiomatic Chakra UI v3 components.

Updated May 18, 2026
Search Tags:#code review#accessibility#react#design tokens#refactor#tailwind#chakra ui
One-click install
npx skills add https://github.com/FredoAi/fredo --skill chakra-ui-refactor-fredoai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chakra-ui-refactor
Source: https://github.com/FredoAi/fredo/tree/main/.opencode/skills/chakra-ui-refactor
Command: npx skills add https://github.com/FredoAi/fredo --skill chakra-ui-refactor-fredoai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? UI codebases often accumulate hardcoded colors, outdated Chakra v2 patterns, missing accessibility attributes, and inconsistent styling from mixed sources like Tailwind or styled-components. This Skill provides a structured review and refactor workflow that catches these issues and produces correct, theme-aware Chakra UI v3 code. ## Core Features & Use Cases - Structured Code Review: Categorizes findings into Critical issues, Improvements, and Optional suggestions across accessibility, responsiveness, API correctness, token usage, and maintainability. - Multi-Source Conversion: Converts plain HTML/CSS, Tailwind, CSS Modules, and styled-components into Chakra UI v3 with mapping tables for classes, props, and semantic tokens. - v2 to v3 Migration: Updates legacy patterns like colorScheme, isDisabled, sx, and FormControl to their v3 equivalents such as colorPalette, disabled, css, and Field.Root. - Use Case: A developer pastes a Tailwind-based card component and asks to convert it; the Skill rewrites it with Flex, SimpleGrid, semantic tokens like bg.subtle, and responsive breakpoint objects while preserving all event handlers and state logic. ## Quick Start Ask the assistant to review or convert your component to Chakra UI v3, for example by pasting your component code and requesting a refactor to idiomatic Chakra with semantic theme tokens.

Frequently Asked Questions about chakra-ui-refactor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert Tailwind CSS components to Chakra UI?▼

Map Tailwind utilities to Chakra style props: `flex` becomes `Flex`, `gap-4` becomes `gap={4}`, and `p-4` becomes `p={4}`. Replace responsive prefixes like `md:flex` with Chakra breakpoint objects such as `display={{ base: "none", md: "flex" }}`.

How do I migrate from Chakra UI v2 to v3?▼

Rename v2 props to v3 equivalents: `colorScheme` becomes `colorPalette`, `isDisabled` becomes `disabled`, `isOpen` becomes `open`, and `sx` becomes `css`. Replace `FormControl` with `Field.Root`, `Modal` with `Dialog`, and `Select` with `NativeSelect`.

Why should I use semantic tokens instead of hex colors in Chakra UI?▼

Hardcoded hex or rgba values do not adapt to dark mode or user theme preferences. Semantic tokens like `bg.subtle`, `fg.muted`, and `accent.default` resolve through the theme system, keeping components consistent across light and dark themes.

Does Chakra UI v3 work with Next.js App Router?▼

Yes, but components using hooks need the `"use client"` directive placed correctly at the top of the file. Use `asChild` to compose Chakra `Link` and `Image` with Next.js `next/link` and `next/image` without adding unnecessary client directives.

What accessibility issues are common in Chakra UI components?▼

Common issues include icon-only buttons missing `aria-label`, form fields without `Field.Label` association, interactive `Box` elements with `onClick` but no keyboard access, and suppressed focus rings. Wrapping inputs in `Field.Root` with `Field.ErrorText` addresses most form accessibility gaps.

Related Skills

Explore More Software Engineering Skills→
suhwansuhwan

theme-system

Implement a three-tier token system enabling dark mode in Next.js and Tailwind apps.

Community
Advanced
PrasadTelasulaPrasadTelasula

component-testing

Test React components with React Testing Library and Playwright for frontend correctness.

Community
Intermediate
Radiants-DAORadiants-DAO
1

radflow-compliance

Audit and fix UI code for RadOS design conformance.

Official
Advanced
tanaka-mambingetanaka-mambinge

react-component-creation

Scaffold React components with TypeScript props, Tailwind styling, and Radix primitives.

Community
Intermediate