Agent skill · design visual · chakra-ui
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".
Why this skill is useful
Provides specific commands and setup procedures for integrating Chakra UI v3 into various frameworks, which the AI wouldn't reliably generate on its own.
What it needs
Requires @chakra-ui/react, @emotion/react installed locally. About 7k tokens when loaded. Last updated 2026-07-30. 40,566 stars on the source repository.
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 Generate snippets with the CLI 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): 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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills chakra-ui/chakra-ui-builder