ReddRadar
Agent skill
chakra-design-system
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.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/chakra-design-system
SKILL.md
Chakra Design System (Stacked Poker)
First steps (always)
- Read the repo rules:
.cursor/rules/frontend-guidelines.mdc. - Check the theme:
app/theme.ts(colors, semantic tokens, breakpoints, shadows, variants). - 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
sxfor 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
sxonly when needed. - Use
useReducedMotion()for motion-heavy UI and provide a non-animated fallback.
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/.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?