Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
git clone --depth 1 https://github.com/holtwood/awesome-cursorrules-zhWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/rules/holtwood/awesome-cursorrules-zh/chakra-ui-best-practices)<a href="https://agentmods.dev/rules/holtwood/awesome-cursorrules-zh/chakra-ui-best-practices"><img src="https://agentmods.dev/badge/rules/holtwood/awesome-cursorrules-zh/chakra-ui-best-practices/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/rules/holtwood/awesome-cursorrules-zh/chakra-ui-best-practices"><img src="https://agentmods.dev/badge/rules/holtwood/awesome-cursorrules-zh/chakra-ui-best-practices.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00000 | $0.00624 |
| Opus 5 | $0.00000 | $0.00312 |
| Sonnet 5 | $0.00000 | $0.00125 |
| Haiku 4.5 | $0.00000 | $0.00062 |
Grade A, and why
chakra-ui-best-practices scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 6d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
What it actually says
- 在应用程序根部使用
ChakraProvider：- 确保在 React 应用程序的根组件中包裹
ChakraProvider，以便所有 Chakra UI 组件都能访问主题和上下文。 - 示例：
import { ChakraProvider } from '@chakra-ui/react'; import customTheme from './theme'; // 假设你的主题文件在 './theme/index.js' function App() { return ( <ChakraProvider theme={customTheme}> {/* 你的应用程序内容 */} </ChakraProvider> ); }
- 确保在 React 应用程序的根组件中包裹
- 利用 Chakra UI 组件实现一致的设计：
- 优先使用 Chakra UI 提供的组件来构建 UI，而不是编写自定义 CSS，以确保设计的一致性和可维护性。
- 充分利用其内置的样式 props 和组合能力。
- 实现自定义主题以进行品牌特定的样式设计：
- 通过
extendTheme函数定制颜色、字体、间距、组件样式等，以匹配品牌指南。 - 将主题配置分解为模块化文件（如
foundations和components目录），提高可组织性。
- 通过
- 使用 Chakra UI 断点系统的响应式样式：
- 利用 Chakra UI 的响应式样式语法（数组或对象语法）来轻松实现跨设备的响应式布局和样式。
- 示例：
fontSize={{ base: 'md', md: 'lg', lg: 'xl' }}。
- 利用 Chakra UI hooks 增强功能：
- 使用
useDisclosure管理模态框、抽屉等的打开/关闭状态。 - 使用
useToast显示通知。 - 使用
useBreakpointValue根据断点获取值。 - 使用
useColorMode管理亮/暗模式。
- 使用
- 可访问性：
- 始终关注可访问性，利用 Chakra UI 内置的 WAI-ARIA 支持和语义化 HTML 渲染。
- 确保键盘导航、焦点管理和颜色对比度符合标准。
- 性能优化：
- 按需导入组件，避免不必要的重新渲染（使用
React.memo、useCallback、useMemo）。 - 对于长列表，考虑使用虚拟化。
- 按需导入组件，避免不必要的重新渲染（使用
- 组件组合：
- 善用
asprop 来改变组件渲染的底层 HTML 元素，实现语义化。 - 将复杂逻辑封装在自定义组件中，并使用 Chakra UI 的布局组件进行组合。
- 善用
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 6d ago First seen · 43 lines · 0 tokens per session scan A 804dfb8e9dac
chakra-ui-best-practices is a cursor rule published in the GitHub repository holtwood/awesome-cursorrules-zh (233 stars, last pushed 1mo ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 624 tokens. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other cursor rules, from other repositories
nextjs-react-tailwind-cursorrules-prompt-file
Cursor rules for Next.js development with React and Tailwind CSS integration.
react-components-creation-cursorrules-prompt-file
Cursor rules for React component creation and development.
nextjs-material-ui-tailwind-css-cursorrules-prompt
Cursor rules for Next.js development with Material UI and Tailwind CSS integration.
react-chakra-ui-cursorrules-prompt-file
Cursor rules for React development with Chakra UI integration.
react-styled-components-cursorrules-prompt-file
Cursor rules for React development with Styled Components integration.
ui-patterns
This project follows consistent UI patterns for authentication flows, form handling, and user feedback. All components use modern React patterns with TypeScript and Tailwind CSS.