@stacked-labs/chakra-design-system

---
name: chakra-design-system
description: 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.
---

# 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.
- **NEVER modify a shared semantic token in `theme.ts` to style a specific component.** Semantic tokens are app-wide. For component-specific dark-mode overrides, use `_dark={{ color: '...' }}` or `useColorModeValue()` directly on that component. See `references/theme-and-tokens.md` for details.

## Documentation sources (don’t paste full docs)

- Use the Chakra MCP server (see `.cursor/mcp.json`) for component docs and props.
- Chakra LLM docs (as per repo rules): https://chakra-ui.com/llms-full.txt
- Chakra v2 component docs: https://v2.chakra-ui.com/docs/components

## 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/`.
- For React hooks, state, TypeScript, and Next.js patterns: load the `react-architecture` skill.