Does this skill support Chakra UI v2?

This skill specifically targets Chakra UI v3 patterns, including the new composable APIs and recipe system, which differ significantly from v2.

Does it require Framer Motion?

No, Chakra UI v3 has removed the Framer Motion and Emotion dependencies in favor of native CSS animations and optimized recipes.

Can I use standard CSS classes with this skill?

While possible, the skill recommends using style props or the 'chakra' factory to maintain type safety and full integration with the theme's token system.

How does it handle dark mode?

It prioritizes the use of semantic tokens (like bg.subtle) that automatically adapt to color modes, reducing the need for manual conditional logic.

What is the benefit of the composable component pattern?

The Root/Content pattern provides greater flexibility and cleaner code by allowing you to structure components exactly where they are needed rather than passing dozens of props to a single element.

Chakra UI v3 Design System

Name: Chakra UI v3 Design System
Author: agents-inc

byagents-inc

•

Herramientas de Diseño

Builds accessible, high-performance React user interfaces using Chakra UI v3's composable component patterns and design tokens.

This skill provides specialized guidance for implementing Chakra UI v3, a modern React component library focused on accessibility and composability. It streamlines the transition from older versions by emphasizing the use of the createSystem API, style props for rapid development, and semantic tokens for seamless dark mode support. Whether you are prototyping a new application or managing a complex design system, this skill ensures your implementation follows the latest v3 best practices, including the move away from heavy runtime dependencies toward high-performance CSS recipes and Ark UI logic.

Características Principales

015 GitHub stars

02Composable component patterns (Root > Trigger > Content)

03Design token-based styling and recipe systems

04Accessibility-first architecture powered by Ark UI

05Automatic dark mode using semantic tokens

06Mobile-first responsive design via style props

Casos de Uso

01Rapidly prototyping React applications with consistent design tokens

02Migrating existing projects to the Chakra UI v3 architecture

03Building complex, accessible web dashboards with modular components

Características Principales

015 GitHub stars

02Composable component patterns (Root > Trigger > Content)

03Design token-based styling and recipe systems

04Accessibility-first architecture powered by Ark UI

05Automatic dark mode using semantic tokens

06Mobile-first responsive design via style props

Casos de Uso

01Rapidly prototyping React applications with consistent design tokens

02Migrating existing projects to the Chakra UI v3 architecture

03Building complex, accessible web dashboards with modular components