Which version of Chakra UI does this skill support?

This skill is specifically optimized for Chakra UI v2 and Emotion-based styling.

Does this skill follow accessibility standards?

Yes, it prioritizes a11y best practices, including proper component usage and motion-safe UI patterns.

How does the skill handle custom themes?

It references the repository's theme file (app/theme.ts) to utilize semantic tokens and brand-specific color palettes.

Can I use this for mobile development?

Yes, it provides patterns for responsive props and breakpoint helpers to ensure layouts work across all devices.

Chakra UI Design System

Name: Chakra UI Design System
Author: Stacked-Labs

byStacked-Labs

•

デザインツール

Builds and refactors accessible frontend interfaces using Chakra UI v2, Emotion, and customized theme tokens.

概要

The Chakra Design System skill streamlines the frontend development workflow by providing specialized guidance on Chakra UI v2 and Emotion. It is designed to help developers build responsive, accessible, and theme-consistent user interfaces specifically within the Stacked Poker repository. By leveraging repository-specific theme tokens, semantic color values, and established component patterns, this skill ensures that all UI updates maintain visual integrity and follow best practices for accessibility and performance.

主な機能

Enforces the use of semantic tokens and theme-based styling for visual consistency.
2 GitHub stars
Provides guidance on responsive layout implementation using Chakra breakpoint helpers.
Implements motion-safe UI patterns with useReducedMotion hooks.
Integrates with Chakra MCP servers and official documentation for accurate prop management.
Ensures accessibility (a11y) compliance through standardized component usage.

ユースケース

Refactoring legacy CSS into theme-driven Chakra UI components.
Implementing responsive grid systems that adapt seamlessly across mobile and desktop devices.
Developing new, brand-aligned game interfaces for the Stacked Poker platform.

概要

主な機能

Enforces the use of semantic tokens and theme-based styling for visual consistency.
2 GitHub stars
Provides guidance on responsive layout implementation using Chakra breakpoint helpers.
Implements motion-safe UI patterns with useReducedMotion hooks.
Integrates with Chakra MCP servers and official documentation for accurate prop management.
Ensures accessibility (a11y) compliance through standardized component usage.

ユースケース

Refactoring legacy CSS into theme-driven Chakra UI components.
Implementing responsive grid systems that adapt seamlessly across mobile and desktop devices.
Developing new, brand-aligned game interfaces for the Stacked Poker platform.