chakra-design-system

Stacked-Labs's avatarfrom Stacked-Labs

Build and refactor UI in this repo using Chakra UI v2 + Emotion and the repo theme (`app/theme.ts`). Use for Chakra component usage, responsive layout, a11y, theme tokens/semanticTokens, component variants, and UI polish.

⭐2stars🔀0forks📁View on GitHub🕐Updated Jan 5, 2026
[Code Generation]

When & Why to Use This Skill

This Claude skill streamlines frontend development by enabling the rapid creation and refactoring of UI components using Chakra UI v2 and Emotion. It ensures strict adherence to local design systems, theme tokens, and accessibility standards, allowing developers to maintain a consistent and polished user interface while reducing manual styling effort and technical debt.

Use Cases

  • Building responsive and accessible UI components that automatically align with the project's specific theme tokens and semantic colors.
  • Refactoring legacy or ad-hoc CSS into clean, maintainable Chakra UI code using the 'sx' prop and theme-aware styling.
  • Implementing complex UI variants and layouts that require strict adherence to brand guidelines and predefined design tokens.
  • Enhancing user experience by integrating accessibility features like 'useReducedMotion' and ensuring proper semantic HTML structure.
namechakra-design-system
descriptionBuild and refactor UI in this repo using Chakra UI v2 + Emotion and the repo theme (`app/theme.ts`). Use for Chakra component usage, responsive layout, a11y, theme tokens/semanticTokens, component variants, and UI polish.

Chakra Design System (Stacked Poker)

First steps (always)

  1. Read the repo rules: .cursor/rules/frontend-guidelines.mdc.
  2. Check the theme: app/theme.ts (colors, semantic tokens, breakpoints, shadows, variants).
  3. Find the closest existing component under app/components/ and follow its patterns.

Preferred patterns in this repo

  • Use Chakra props over ad-hoc CSS when possible; use sx for complex selectors/media queries.
  • Prefer semantic tokens (text.primary, bg.navbar, input.lightGray, etc) over hardcoded colors.
  • Prefer colors.brand.* for brand colors (navy/pink/green/yellow).
  • Use responsive props or Chakra breakpoint helpers; keep portrait/landscape styling in sx only when needed.
  • Use useReducedMotion() for motion-heavy UI and provide a non-animated fallback.

Documentation sources (don’t paste full docs)

What to load next

  • For tokens, variants, and how to name colors: read references/theme-and-tokens.md.
  • For component composition patterns used in this repo: read references/component-patterns.md.
  • For starter templates: copy from assets/.