What is the chakra-ui-builder skill?
The chakra-ui-builder skill is a SKILL.md in the chakra-ui/chakra-ui repository. It tells an AI coding agent to read your project, set up Chakra UI v3 with the CLI and Provider, then build accessible, responsive components with semantic tokens. Three reference files cover theming, charts and component choice.
Its first instruction is to read package.json before writing anything. The agent looks for the Chakra UI version, the framework, TypeScript or JavaScript, and the package manager implied by the lockfile, then matches existing naming and import style.
The skill lives in the skills folder of the Chakra UI repository, next to the component library it describes. It defaults to v3 patterns and uses v2 only when your project is explicitly on v2.
Setup it walks through
- Install @chakra-ui/react and @emotion/react with npm, pnpm, yarn or bun.
- Run the CLI snippet command, which adds the provider, toaster and tooltip snippets and installs next-themes.
- Wire the Provider into app/layout.tsx, pages/_app.tsx or src/main.tsx, depending on the framework.
- Fall back to a manual Provider file when the CLI fails.
- Fix common problems: unstyled components, hydration mismatch and the v2 extendTheme pattern.
Rules it applies while building
- Layout primitives such as Stack, HStack, SimpleGrid and Container instead of nested Box wrappers.
- Semantic tokens such as bg.subtle and fg.muted, with colorPalette in place of colorScheme.
- Mobile first responsive props, covering at least base and md.
- Field.Root for forms, and disabled instead of isDisabled.
- An aria-label on icon only buttons, meaningful alt text and a proper heading order.
Reference files for deeper work
Three files sit in a references folder: theming.md for tokens, recipes and slot recipes, charts.md for the charts package, and component-decision-tree.md for choosing between similar components. The skill tells the agent when to open each.
Who the chakra-ui-builder skill is for
Best for
- React projects that already use, or are about to adopt, Chakra UI v3.
- Next.js App Router work where use client should stay on leaf components.
- Brand theming with design tokens. For token workflows, see design-token.
Not for
- Projects on other component libraries. If you use shadcn/ui, see the shadcn skill.
- Non React stacks. See also tailwind-design-system.
Use it with UiChemy
Chakra output is React code. UiChemy Composer is an AI visual editor that writes real HTML, CSS and JS inside Elementor or Gutenberg, and Figma to WordPress converts Figma designs. Click Get Started on uichemy.com. See also design-system-patterns.
How to install Chakra UI Builder Skill: Chakra UI v3 Components and Themes
git clone https://github.com/chakra-ui/chakra-ui.gitnpm i @chakra-ui/react @emotion/react, or the equivalent for Yarn, pnpm and Bun. The skill automates that step.Clone the repository
Run
git clone https://github.com/chakra-ui/chakra-ui.git. The skill is the skills/chakra-ui-builder folder, which holds SKILL.md and a references folder.Copy the skill folder
Copy skills/chakra-ui-builder into the place your agent loads skills from. The README does not give a skill install command or name an agent folder.
Keep the references folder
Copy the whole folder, including references/theming.md, references/charts.md and references/component-decision-tree.md, since SKILL.md tells the agent to open them.
Start with a request
Ask for something like a login form, a sidebar or brand colors in Chakra UI. If the project has no Chakra yet, the skill sets it up before building.
Check that it loaded
Ask the agent to add Chakra UI to a project. It should inspect package.json, install @chakra-ui/react and @emotion/react, run the snippet command and wrap the app in the Provider.
Key features
- Reads the project firstThe agent checks package.json for the Chakra version, framework, language and package manager, and defaults to v3 patterns unless the project is on v2.
- CLI snippet setupA single CLI command adds the recommended provider, toaster and tooltip snippets and pulls in next-themes. The output folder depends on the framework.
- Provider wiringExamples cover Next.js App Router, the Pages Router and Vite, plus a manual Provider file for when the CLI is unavailable.
- Troubleshooting listCovers unstyled components, hydration mismatches, a missing next-themes and the v2 extendTheme export that v3 replaces with createSystem.
- Layout primitive tableMaps each need to a primitive: Stack, HStack, Flex, Grid, SimpleGrid, Container, or Box with a semantic element.
- Semantic tokens firstPrefers tokens that adapt to light and dark mode, and reserves raw palette values for colors that should not shift.
- Responsive by defaultUses mobile first array or object syntax and asks that layouts handle at least the base and md breakpoints.
- Forms and accessibilityBuilds fields with Field.Root, adds aria-label to icon buttons, requires alt text and keeps heading levels in order.
- Recipes and slot recipesSuggests a recipe for components with style variants and a slot recipe for multi part components such as a card with header, body and footer.
- Defined output formatAsks for complete runnable code, grouped imports, split components when complex and a short explanation of the key decisions.
Frequently asked questions
What is the chakra-ui-builder skill?
It is a skill in the chakra-ui/chakra-ui repository that guides an AI coding agent to build and theme interfaces with Chakra UI v3. It covers project setup, layout primitives, semantic tokens, responsive styles, forms, accessibility, recipes and charts.
How do I install the chakra-ui-builder skill?
The README has no skill command, so clone chakra-ui/chakra-ui and copy skills/chakra-ui-builder, including its references folder, into the place your agent loads skills from. Chakra UI itself still installs as a normal dependency in your project.
Does the skill support Chakra UI v2?
It defaults to v3 and uses v2 patterns only when your project is explicitly on v2. It also flags v2 habits that break in v3, such as extendTheme, which is replaced by createSystem, and isDisabled, which becomes disabled.
Which frameworks does the skill cover?
It checks for Next.js App Router, Next.js Pages Router, Vite and plain React. It gives Provider wiring for the first three and a table of where the CLI writes files, including a Remix path of app/components/ui.
Can the skill build charts?
Yes. Chart requests send the agent to references/charts.md, which the skill says covers the useChart hook, three chart types, Recharts integration, color tokens and runnable examples. The contents of that file are not reproduced here.
Which AI agents can load the chakra-ui-builder skill?
The repository does not list supported agents for this skill. It is a standard SKILL.md folder, so Claude Code, Cursor, Codex or another agent may load it if that tool supports skill folders. Check your agent's documentation for the right directory.
Does the skill make accessibility decisions for me?
It leans on Chakra's built in accessibility and tells the agent to add what you must supply: aria-label on icon only buttons, alt text, proper labels, buttons for clickable elements, ordered headings and contrast safe semantic tokens.
What license does the skill use?
The chakra-ui/chakra-ui repository is licensed under MIT according to GitHub, and the README shows an MIT license badge. The skill sits inside that repository, so the same license applies to the folder.