Chakraui
Chakra UI accessible React components. Use for React UI.From its SKILL.md
npx -y skills add G1Joshi/Agent-Skills --skill chakrauiAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 12 stars12 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
1.0 KB, 264 tokens by cl100k_base, as published. Nobody here has run it
Chakra UI
Chakra UI v3 (2025) moves to a Zero-runtime engine (Panda CSS under the hood) to solve performance issues, while keeping the developer experience of style props.
When to Use
- Speed: Developing UI with style props (
<Box mt={4} />) is incredibly fast. - Accessibility: WAI-ARIA compliant out of the box.
- Customizability: Easier to customize than MUI.
Core Concepts
Style Props
Passing CSS as props. bg="red.500".
Polymorphism
as prop. <Button as="a" href="...">.
Hooks
useColorMode, useDisclosure (for modals).
Best Practices (2025)
Do:
- Use v3: Significant performance boost over v2 (Emotion-based).
- Use
HStack/VStack: Great abstractions for Flexbox layout. - Extend Theme: Define your colors/fonts in a theme file.
Don't:
- Don't hardcode hex colors: Use theme tokens (
blue.500).
References
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.