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

•

Design Tools

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

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.

Key Features

01Implementation of Chakra UI v3 compound component patterns using dot notation.

02Responsive layout construction using Box, Flex, Grid, and Stack components.

03Accessible form implementation using the Field and Input component systems.

0464 GitHub stars

05Theming and semantic token configuration for consistent brand identity.

06Custom component recipe and slot recipe definition for complex variants.

Use Cases

01Refactoring legacy React styles into a structured Chakra UI v3 design system.

02Building a responsive, accessible SaaS dashboard with a custom brand theme.

03Implementing complex interactive components like Modals, Menus, and Tabs with built-in accessibility.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add majiayu000/claude-skill-registry chakra-ui

For use in Claude.ai and ChatGPT

Download Skill