chakra-ui

name	chakra-ui
description	Contains Chakra UI v3 documentation for styling, theming, and components. ALWAYS activate when code imports from `@chakra-ui/react`, or when the user asks about Chakra UI components, styling, or theming.

Chakra UI v3

Activation

TRIGGER when: code imports from @chakra-ui/react, user asks about Chakra UI components/styling/theming, or working on frontend UI code.

Important Files

This skill includes full Chakra UI v3 documentation split into three files stored alongside this SKILL.md:

• styling.txt (~110KB) - Styling system: style props, responsive design, CSS variables, dark mode, chakra factory, cascade layers, conditions, focus ring, text/layer/animation styles
• theming.txt (~88KB) - Theming: tokens (colors, spacing, radii, shadows, typography, z-index, animations, breakpoints), semantic tokens, recipes, slot recipes, customization
• components.txt (~1.5MB) - All component docs with usage examples and props

Always read styling.txt and theming.txt when this skill activates — they provide essential context for all Chakra UI work. but, Read components.txt on-demand when working with specific components. Due to its size, use ripgrep to search for the component name (e.g. # Button or # Dialog) rather than reading the whole file.

• The docs are located at: /home/hayley/Projects/mikoto/.claude/skills/chakra-ui/
• The project theme is defined at apps/client/src/components/chakraTheme.tsx

Quick Reference

Core Patterns

// Style props (primary styling method)
<Box bg="blue.500" p="4" borderRadius="md" color="white">
  Content
</Box>

// Responsive (mobile-first breakpoints)
<Box fontSize={{ base: "sm", md: "md", lg: "lg" }}>
  Responsive text
</Box>

// Color opacity via color-mix
<Box bg="red.300/40">Semi-transparent</Box>

// Semantic tokens (auto light/dark)
<Box bg="bg.subtle" color="fg.muted" borderColor="border">
  Themed content
</Box>

Composition with asChild

// Passes Chakra styles to child element
<Button asChild>
  <a href="/link">Click me</a>
</Button>

Footguns

AVOID using chakra() factory to create styled elements. AVOID using styled components AVOID using recipes and slot recipes

When trying to re-use styles, simply create a component and use it. Chakra defines our style system but we use a utility-first approach, similar to Tailwind.

Key Semantic Tokens

Category	Tokens
Background	bg, bg.subtle, bg.muted, bg.emphasized, bg.inverted, bg.panel, bg.error, bg.warning, bg.success, bg.info
Text	fg, fg.muted, fg.subtle, fg.inverted, fg.error, fg.warning, fg.success, fg.info
Border	border, border.muted, border.subtle, border.emphasized, border.inverted, border.error

CSS Cascade Layers

@layer reset, base, tokens, recipes;

Styles are ordered by specificity layers for predictable overrides.