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 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".
What this skill does
# 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
```bash
# 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
```bash
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`):
```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`):
```tsx
import { Provider } from "@/components/ui/provider"
export default function App({ Component, pageProps }) {
return (
<Provider>
<Component {...pageProps} />
</Provider>
)
}
```
**Vite** (`src/main.tsx`):
```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:
```tsx
"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` over margin between siblings.
---
## Step 3 — Use tokens, not raw values
Chakra v3 ships semantic tokens that automatically adapt to light/dark mode.
Prefer them over hard-coded palette values — they make the component theme-aware
without any extra work.
```tsx
// Prefer semantic tokens
<Box bg="bg.subtle" color="fg.default" borderColor="border.subtle" />
<Text color="fg.muted" />
<Box shadow="md" rounded="lg" />
// Use colorPalette for interactive components (not colorScheme)
<Button colorPalette="blue">Submit</Button>
<Badge colorPalette="green">Active</Badge>
```
Use raw palette values (`blue.500`, `gray.100`) only when a specific color is
intentional and should not shift with color mode.
---
## Step 4 — Responsive styles
Chakra uses mobile-first breakpoints. Use array or object syntax consistently:
```tsx
// Array: [base, sm, md, lg, xl]
<Box px={[4, 6, 8]} fontSize={["sm", "md", "lg"]} />
// Object: explicit breakpoints
<SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} gap={6} />
<Stack direction={{ base: "column", md: "row" }} gap={4} />
```
Every layout component should handle at least `base` (mobile) and `md` (desktop)
breakpoints unless the request is explicitly desktop-only.
---
## Step 5 — Forms
Use `Field.Root` for all form fields — it wires up label, input, error, and help
text correctly:
```tsx
<Field.Root invalid={!!error} required>
<Field.Label>Email address</Field.Label>
<Input type="email" placeholder="[email protected]" />
<Field.ErrorText>{error}</Field.ErrorText>
<Field.HelpText>We'll never share your email.</Field.HelpText>
</Field.Root>
```
For form submission state, use `disabled` (not `isDisabled`) on inputs and
buttons. Group related fields in a `Stack gap={4}`.
---
## Step 6 — Accessibility
Chakra's built-in components handle most accessibility automatically — don't
override it. The things you do need to provide:
- **Icon-only buttons**: always add `aria-label`
```tsx
<IconButton aria-label="Close dialog" icon={<CloseIcon />} />
```
- **Images**: always pass meaningful `alt` text (or `alt=""` for decorative)
- **Form labels**: use `Field.Label` or ensure `htmlFor` matches the input `id`
- **Interactive custom elements**: if you build something with `onClick` on a
`Box`, use `as="button"` or an actual `<button>` so keyboard navigation works
- **Semantic headings**: use `h1`–`h6` hierarchy; don't skip levels
- **Color contrast**: don't use light gray text on white backgrounds; rely on
semantic tokens which are contrast-tested
---
## Step 7 — Next.js: where to add `"use client"`
In Next.js App Router, Server Components are the default. Add `"use client"`
only to files that need it — not to entire layouts or pages.
A component needs `"use client"` when it:
- Uses React hooks (`useState`, `useEffect`, `useContext`, etc.)
- Handles browser events (`onClick` with state, form submission, etc.)
- Uses browser APIs
```tsx
// Server Component — no directive needed
export default function ProductCard({ name, price }: Props) {
Related in Ads & Marketing
ads
IncludedMulti-platform paid advertising audit and optimization skill. Analyzes Google, Meta, YouTube, LinkedIn, TikTok, Microsoft, and Apple Ads. 250+ checks with scoring, parallel agents, industry templates, and AI creative generation.
banana
IncludedAI image generation Creative Director powered by Google Gemini Nano Banana models. Use this skill for ANY request involving image creation, editing, visual asset production, or creative direction. Triggers on: generate an image, create a photo, edit this picture, design a logo, make a banner, visual for my anything, and all /banana commands. Handles text-to-image, image editing, multi-turn creative sessions, batch workflows, and brand presets.
rpg-migration-analyzer
IncludedAnalyzes legacy RPG (Report Program Generator) programs from AS/400 and IBM i systems for migration to modern Java applications. Extracts business logic from RPG III/IV/ILE source code, identifies data structures (D-specs), file operations (F-specs), program dependencies (CALLB/CALLP), and converts RPG constructs to Java equivalents. Generates migration reports, complexity estimates, and Java implementation strategies with POJO classes, JPA entities, and service methods. Use when modernizing AS/400 or IBM i legacy systems, analyzing RPG source files (.rpg, .rpgle, .RPGLE), converting RPG to Java, mapping data specifications to Java classes, planning legacy system migration, or when user mentions RPG analysis, Report Program Generator, RPG III/IV/ILE, AS/400 modernization, IBM i migration, packed decimal conversion, or mainframe application rewrite.
brand-library-architect
IncludedBuild a complete brand library for a product — visual asset render pipeline, brand documentation set (BRAND, COPY, MANIFESTO, BIOS, FAQ, GLOSSARY, TONE, PRICING), open-source convention files (README, CONTRIBUTING, SECURITY, CODE_OF_CONDUCT), and a self-contained press kit. This skill should be used when the user asks to "build a brand library / brand kit / press kit / brand assets" for a product, "set up a brand library workflow," "create a positioning manifesto plus visual identity," or any combination of brand documentation + visual asset pipeline. Apply phase-by-phase or run end-to-end. Templates are product-agnostic and use {{TOKEN}} placeholders the skill prompts the user to fill.
writing-tech-post
IncludedAuthors engineering blog posts end-to-end: launch deep-dives, incident postmortems, architecture migrations, performance case studies, tutorials, AI/agent system writeups, security disclosures, and research-to-product translations. Picks the correct archetype, plans the abstraction ladder, enforces an evidence cadence (diagrams, benchmarks, profiles, traces, code, ablations), tunes voice against publisher house styles (Datadog, Vercel, GitHub, AWS, Meta, Cloudflare, Jane Street), and runs a pre-publish gate for narrative momentum and disclosure ethics. Use when drafting a new engineering post, restructuring a draft that feels flat, deciding which evidence form belongs where, validating that depth and product context are balanced, or preparing a postmortem, migration, or performance narrative for external publication. Do not use for API reference documentation, README authoring, marketing copy, release notes, generic SEO content, ghost-written executive thought leadership, or non-engineering long-form essays.
blog-google
IncludedGoogle API integration for blog performance: PageSpeed Insights, CrUX Core Web Vitals with 25-week history, Search Console performance, URL Inspection, Indexing API, GA4 organic traffic, NLP entity analysis for E-E-A-T, YouTube video search for embedding, and Google Ads Keyword Planner. Progressive feature availability based on credential tier (API key, OAuth/service account, GA4, Ads). Shares config with claude-seo at ~/.config/claude-seo/google-api.json. Use when user says "google data", "page speed", "core web vitals", "search console", "indexation", "GA4", "keyword research", "nlp entities", "blog performance", "youtube search", "google api setup".