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

CSS Cascade Layers

@layer reset, base, tokens, recipes;

Styles are ordered by specificity layers for predictable overrides.