Does this skill support Chakra UI v2?

This specific skill is optimized for Chakra UI v3, focusing on its specific compound component architecture, dot-notation imports, and semantic token system.

How does it handle custom component variants?

The skill utilizes Chakra v3 'Recipes' and 'Slot Recipes' to define and apply complex variants for both single-part and multi-part components effectively.

Can this skill help with dark mode implementation?

Yes, it provides implementation patterns for using semantic tokens and built-in components like ColorModeButton to create seamless dark and light mode themes.

Is it compatible with responsive design requirements?

Absolutely. It includes guidance for using object and array syntax to apply responsive styles across all layout primitives like Box, Flex, and Container.

Chakra UI v3 Assistant

Name: Chakra UI v3 Assistant
Author: mgd34msu

bymgd34msu

デザインツール

Builds accessible, high-performance React applications using Chakra UI v3's modern component architecture and design tokens.

概要

This skill empowers Claude to architect and implement robust frontend interfaces using Chakra UI v3. It provides deep knowledge of the library’s modern compound component patterns, semantic tokens for theming, and the new 'recipes' system for component variants. Whether you are building accessible form controls, complex responsive layouts, or full-scale custom design systems with native dark mode support, this skill ensures Claude follows Chakra UI v3 best practices for accessible, scalable, and type-safe React development.

主な機能

Theming with semantic tokens for consistent light and dark mode support
Implementation of Chakra UI v3 compound component patterns and dot notation
Building accessible, multi-part components using the v3 'Recipes' system
Responsive layout construction using Box, Flex, Grid, and Stack primitives
Standardized form implementation with Field, Input, and NativeSelect components
0 GitHub stars

ユースケース

Scaffolding accessible web dashboards with built-in responsive behavior
Migrating existing React components to the Chakra UI v3 modern architecture
Creating custom design systems using tokens, semantic colors, and slot recipes

概要

主な機能

Theming with semantic tokens for consistent light and dark mode support
Implementation of Chakra UI v3 compound component patterns and dot notation
Building accessible, multi-part components using the v3 'Recipes' system
Responsive layout construction using Box, Flex, Grid, and Stack primitives
Standardized form implementation with Field, Input, and NativeSelect components
0 GitHub stars

ユースケース

Scaffolding accessible web dashboards with built-in responsive behavior
Migrating existing React components to the Chakra UI v3 modern architecture
Creating custom design systems using tokens, semantic colors, and slot recipes