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

0•

设计工具

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.

主要功能

01Theming with semantic tokens for consistent light and dark mode support

02Implementation of Chakra UI v3 compound component patterns and dot notation

03Building accessible, multi-part components using the v3 'Recipes' system

04Responsive layout construction using Box, Flex, Grid, and Stack primitives

05Standardized form implementation with Field, Input, and NativeSelect components

060 GitHub stars

使用场景

01Scaffolding accessible web dashboards with built-in responsive behavior

02Migrating existing React components to the Chakra UI v3 modern architecture

03Creating custom design systems using tokens, semantic colors, and slot recipes

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mgd34msu/goodvibes-gemini chakra-ui

For use in Claude.ai and ChatGPT

Download Skill