/chakra-ui-builder
Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use this skill whenever a user asks to build, create, or
$ npx -y skills add chakra-ui/chakra-ui --skill chakra-ui-builder --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/chakra-ui-builder
Context preview
The summary Claude sees to decide when to auto-load this skill.
Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use this skill whenever a user asks to build, create, or
SKILL.md
chakra-ui-builder.SKILL.mdname: chakra-ui-builder
description: >
Build responsive, accessible UI components and layouts using Chakra UI v3,
install or configure Chakra UI in new and existing projects, and design
scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use
this skill whenever a user asks to build, create, or generate any UI
component, page, form, dashboard, navbar, card, landing section, pricing
table, or layout using Chakra UI; wants to add Chakra UI to a project, set up
ChakraProvider, run CLI snippets, configure color mode, or fix provider
wrapping; or asks about theming — defining brand colors, design tokens,
semantic tokens, dark mode values, component recipes, slot recipes, typegen,
or ejecting the default theme. Trigger on any Chakra UI building, setup, or
theming or charts request, however casually phrased — "add my brand colors",
"make a reusable card style", "build a bar chart", "show me a line chart",
"make me a login form", "build a sidebar", "add Chakra to my app".
Chakra UI Builder
You are building UI with Chakra UI v3 and helping developers set up Chakra UI in their projects. Your job is to produce clean, accessible, responsive code that fits the project — not generic boilerplate. Read the project context first, then build or set up.
---
Step 1 — Read the project context
Check `package.json` if available. Look for:
- Chakra UI version (use v3 patterns by default; only use v2 if explicitly on
v2)
- Framework: Next.js App Router, Pages Router, Vite, plain React
- TypeScript or JavaScript
- Package manager (from lockfile: `pnpm-lock.yaml`, `yarn.lock`, `bun.lock`,
`package-lock.json`)
Also glance at existing components if the user references them, so your code matches the conventions already in use (naming, file structure, import style).
If the requirements are vague or the component is complex enough that choices matter (layout direction, data shape, color palette, number of variants), ask before building rather than generating something that needs to be thrown away.
---
Project setup
If Chakra UI isn't installed yet, complete setup before building.
Install
# npm
npm install @chakra-ui/react @emotion/react
# pnpm
pnpm add @chakra-ui/react @emotion/react
# yarn
yarn add @chakra-ui/react @emotion/react
# bun
bun add @chakra-ui/react @emotion/react
Generate snippets with the CLI
npx @chakra-ui/cli snippet add
With no arguments this adds the recommended set — `provider`, `toaster`, and `tooltip` — and automatically installs required dependencies (including `next-themes`). Use `--all` to add every snippet, or `snippet list` to browse first.
The CLI detects your framework and writes files to the right place:
| Framework | Output path | | --------------------- | -------------------- | | Next.js (with `src/`) | `src/components/ui/` | | Next.js (no `src/`) | `components/ui/` | | Vite / plain React | `src/components/ui/` | | Remix | `app/components/ui/` |
Wire up the Provider
**Next.js App Router** (`app/layout.tsx`):
import { Provider } from "@/components/ui/provider"
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" suppressHydrationWarning>
<body>
<Provider>{children}</Provider>
</body>
</html>
)
}`suppressHydrationWarning` prevents a mismatch caused by `next-themes` injecting the color-mode class. Do **not** add `"use client"` to `layout.tsx` — the generated provider file already has it.
**Next.js Pages Router** (`pages/_app.tsx`):
import { Provider } from "@/components/ui/provider"
export default function App({ Component, pageProps }) {
return (
<Provider>
<Component {...pageProps} />
</Provider>
)
}**Vite** (`src/main.tsx`):
import { Provider } from "./components/ui/provider"
createRoot(document.getElementById("root")!).render(
<StrictMode>
<Provider>
<App />
</Provider>
</StrictMode>,
)Manual Provider (if CLI is unavailable)
If the CLI fails, create `components/ui/provider.tsx` manually and install `next-themes` separately:
"use client"
import { ChakraProvider, defaultSystem } from "@chakra-ui/react"
import { ThemeProvider } from "next-themes"
export function Provider({ children }: { children: React.ReactNode }) {
return (
<ChakraProvider value={defaultSystem}>
<ThemeProvider attribute="class" disableTransitionOnChange>
{children}
</ThemeProvider>
</ChakraProvider>
)
}Common setup issues
- **Unstyled components** — app is not wrapped in `<Provider>`. Check the import
path and that `Provider` wraps the component tree.
- **Hydration mismatch** — add `suppressHydrationWarning` to `<html>` in App
Router.
- **`next-themes` not found** — install it: `npm install next-themes` (only
needed for the manual fallback; the CLI handles it automatically).
- **`extendTheme` not exported** — this is a v2 pattern. Use `createSystem` in
v3.
---
Step 2 — Choose the right layout primitives
Reach for the right Chakra primitive rather than wrapping everything in `Box`:
| Need | Use | | ------------------------ | --------------------------------------- | | Vertical stack of items | `Stack` (default) or `VStack` | | Horizontal row | `HStack` or `Flex` | | CSS Grid | `Grid` + `GridItem` | | Equal-column grid | `SimpleGrid columns={N}` | | Centered page content | `Container maxW="container.lg"` | | Full flexbox control | `Flex` with explicit props | | Semantic section/article | `Box as="section"` / `Box as="article"` |
Avoid deep nesting. If you're three `Box` levels deep with no semantic reason, flatten it. Prefer `gap` ove
Read more
name: chakra-ui-builder description: > Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use this skill whenever a user asks to build, create, or generate any UI component, page, form, dashboard, navbar, card, landing section, pricing table, or layout using Chakra UI; wants to add Chakra UI to a project, set up ChakraProvider, run CLI snippets, configure color mode, or fix provider wrapping; or asks about theming — defining brand colors, design tokens, semantic tokens, dark mode values, component recipes, slot recipes, typegen, or ejecting the default theme. Trigger on any Chakra UI building, setup, or theming or charts request, however casually phrased — "add my brand colors", "make a reusable card style", "build a bar chart", "show me a line chart", "make me a login form", "build a sidebar", "add Chakra to my app".
Chakra UI Builder
You are building UI with Chakra UI v3 and helping developers set up Chakra UI in their projects. Your job is to produce clean, accessible, responsive code that fits the project — not generic boilerplate. Read the project context first, then build or set up.
---
Step 1 — Read the project context
Check `package.json` if available. Look for:
- Chakra UI version (use v3 patterns by default; only use v2 if explicitly on
v2)
- Framework: Next.js App Router, Pages Router, Vite, plain React
- TypeScript or JavaScript
- Package manager (from lockfile: `pnpm-lock.yaml`, `yarn.lock`, `bun.lock`,
`package-lock.json`)
Also glance at existing components if the user references them, so your code matches the conventions already in use (naming, file structure, import style).
If the requirements are vague or the component is complex enough that choices matter (layout direction, data shape, color palette, number of variants), ask before building rather than generating something that needs to be thrown away.
---
Project setup
If Chakra UI isn't installed yet, complete setup before building.
Install
# npm npm install @chakra-ui/react @emotion/react # pnpm pnpm add @chakra-ui/react @emotion/react # yarn yarn add @chakra-ui/react @emotion/react # bun bun add @chakra-ui/react @emotion/react
Generate snippets with the CLI
npx @chakra-ui/cli snippet add
With no arguments this adds the recommended set — `provider`, `toaster`, and `tooltip` — and automatically installs required dependencies (including `next-themes`). Use `--all` to add every snippet, or `snippet list` to browse first.
The CLI detects your framework and writes files to the right place:
| Framework | Output path | | --------------------- | -------------------- | | Next.js (with `src/`) | `src/components/ui/` | | Next.js (no `src/`) | `components/ui/` | | Vite / plain React | `src/components/ui/` | | Remix | `app/components/ui/` |
Wire up the Provider
**Next.js App Router** (`app/layout.tsx`):
import { Provider } from "@/components/ui/provider"
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" suppressHydrationWarning>
<body>
<Provider>{children}</Provider>
</body>
</html>
)
}`suppressHydrationWarning` prevents a mismatch caused by `next-themes` injecting the color-mode class. Do **not** add `"use client"` to `layout.tsx` — the generated provider file already has it.
**Next.js Pages Router** (`pages/_app.tsx`):
import { Provider } from "@/components/ui/provider"
export default function App({ Component, pageProps }) {
return (
<Provider>
<Component {...pageProps} />
</Provider>
)
}**Vite** (`src/main.tsx`):
import { Provider } from "./components/ui/provider"
createRoot(document.getElementById("root")!).render(
<StrictMode>
<Provider>
<App />
</Provider>
</StrictMode>,
)Manual Provider (if CLI is unavailable)
If the CLI fails, create `components/ui/provider.tsx` manually and install `next-themes` separately:
"use client"
import { ChakraProvider, defaultSystem } from "@chakra-ui/react"
import { ThemeProvider } from "next-themes"
export function Provider({ children }: { children: React.ReactNode }) {
return (
<ChakraProvider value={defaultSystem}>
<ThemeProvider attribute="class" disableTransitionOnChange>
{children}
</ThemeProvider>
</ChakraProvider>
)
}Common setup issues
- **Unstyled components** — app is not wrapped in `<Provider>`. Check the import
path and that `Provider` wraps the component tree.
- **Hydration mismatch** — add `suppressHydrationWarning` to `<html>` in App
Router.
- **`next-themes` not found** — install it: `npm install next-themes` (only
needed for the manual fallback; the CLI handles it automatically).
- **`extendTheme` not exported** — this is a v2 pattern. Use `createSystem` in
v3.
---
Step 2 — Choose the right layout primitives
Reach for the right Chakra primitive rather than wrapping everything in `Box`:
| Need | Use | | ------------------------ | --------------------------------------- | | Vertical stack of items | `Stack` (default) or `VStack` | | Horizontal row | `HStack` or `Flex` | | CSS Grid | `Grid` + `GridItem` | | Equal-column grid | `SimpleGrid columns={N}` | | Centered page content | `Container maxW="container.lg"` | | Full flexbox control | `Flex` with explicit props | | Semantic section/article | `Box as="section"` / `Box as="article"` |
Avoid deep nesting. If you're three `Box` levels deep with no semantic reason, flatten it. Prefer `gap` ove
Chakra UI is a component system for building SaaS products with speed ⚡️
Repo: chakra-ui/chakra-ui
Other skills on chakra-ui.
- /chakra-ui-migrate
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
Open skill - /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
Open skill