Does this skill support Chakra UI v2 or v3?

This skill is specifically optimized for Chakra UI v3, emphasizing the latest compound component patterns and the new semantic token system.

Does it support the Chakra CLI and snippets?

Yes, the skill is designed to work alongside the Chakra CLI, helping you integrate pre-built component snippets and the initial provider setup.

How does it handle responsive breakpoints?

It utilizes Chakra's object and array syntax to apply responsive styles across standard breakpoints from mobile (base) to ultra-wide (2xl).

Can this skill help with dark mode implementation?

Yes, it provides guidance on using semantic tokens (like solid, contrast, and fg) that automatically adjust based on the active color mode.

Chakra UI v3 Design System

Name: Chakra UI v3 Design System
Author: majiayu000

bymajiayu000

•

Herramientas de Diseño

Builds accessible React applications using Chakra UI v3 compound components, semantic tokens, and custom styling recipes.

Acerca de

This skill enables Claude to expertly implement the Chakra UI v3 ecosystem within React projects, focusing on high-performance styling and accessibility. It provides specialized knowledge for using the new compound component architecture (e.g., Dialog.Root), managing design tokens for consistent theming, and creating responsive layouts with Flex, Grid, and Stack. By leveraging this skill, developers can rapidly generate production-ready UI code that adheres to Chakra v3 best practices, including semantic token usage for automatic light/dark mode support and the creation of reusable component recipes.

Características Principales

Implementation of Chakra UI v3 compound component patterns using dot notation.
Responsive layout construction using Box, Flex, Grid, and Stack components.
Accessible form implementation using the Field and Input component systems.
64 GitHub stars
Theming and semantic token configuration for consistent brand identity.
Custom component recipe and slot recipe definition for complex variants.

Casos de Uso

Refactoring legacy React styles into a structured Chakra UI v3 design system.
Building a responsive, accessible SaaS dashboard with a custom brand theme.
Implementing complex interactive components like Modals, Menus, and Tabs with built-in accessibility.

Acerca de

Características Principales

Implementation of Chakra UI v3 compound component patterns using dot notation.
Responsive layout construction using Box, Flex, Grid, and Stack components.
Accessible form implementation using the Field and Input component systems.
64 GitHub stars
Theming and semantic token configuration for consistent brand identity.
Custom component recipe and slot recipe definition for complex variants.

Casos de Uso

Refactoring legacy React styles into a structured Chakra UI v3 design system.
Building a responsive, accessible SaaS dashboard with a custom brand theme.
Implementing complex interactive components like Modals, Menus, and Tabs with built-in accessibility.