react-chakra-ui-cursorrules-prompt-file — правило для Cursor
Правило задаёт Cursor подход к React-проектам с Chakra UI: компоненты, тему, адаптивность, доступность и структуру каталогов.
.cursor/rules/react-chakra-ui-cursorrules-prompt-file.mdcЧто делает react-chakra-ui-cursorrules-prompt-file
Правило настраивает рекомендации для разработки на React с Chakra UI. Оно советует использовать функциональные компоненты с хуками, подключать ChakraProvider в корне приложения, собирать интерфейс из компонентов Chakra UI и создавать собственную тему для стилей бренда. Для адаптивности предлагается применять систему брейкпоинтов Chakra UI и её хуки.
В инструкции также задана структура src/ с каталогами components/, pages/, theme/, hooks/ и utils/. Для темы предусмотрены index.js, foundations/ и components/. Правило требует TypeScript для типизации компонентов, рекомендует композицию, встроенные возможности доступности, проп as, цветовые режимы и layout-компоненты Chakra UI.
Правило использует globs: **/*, но alwaysApply: false. Поэтому Cursor не держит его включённым постоянно, несмотря на шаблон для всех путей.
Какие задачи решает
- собрать React-компоненты на Chakra UI
- задать тему для стилей бренда
- настроить адаптивную вёрстку через брейкпоинты
- разложить исходники по структуре
src/ - добавить тёмный режим через color mode
Примеры запросов агенту
- Создай функциональный React-компонент с хуками и компонентами Chakra UI.
- Настрой тему Chakra UI в
src/theme/index.jsи добавь брейкпоинты для адаптивных стилей. - Разложи код по каталогам
src/components/,src/pages/,src/hooks/иsrc/utils/.
Как установить react-chakra-ui-cursorrules-prompt-file
Вручную: положить файлы
.cursor/rules/react-chakra-ui-cursorrules-prompt-file.mdcВо frontmatter: description, globs, alwaysApply
Вручную: положить файлы
.claude/rules/react-chakra-ui-cursorrules-prompt-file.mdПоле paths во frontmatter ограничивает файлы: globs из источника → paths
AGENTS.md
Codex читает AGENTS.md: вставьте текст правила туда
Вручную: положить файлы
.github/instructions/react-chakra-ui-cursorrules-prompt-file.instructions.mdПоле applyTo задаёт, к каким файлам применять: globs из источника → applyTo
Вручную: положить файлы
.devin/rules/react-chakra-ui-cursorrules-prompt-file.mdВручную: положить файлы
.clinerules/react-chakra-ui-cursorrules-prompt-file.mdПо шагам, с командами для каждой платформы: Cursor rules: файлы .mdc, четыре режима и замена .cursorrules
Вопросы о react-chakra-ui-cursorrules-prompt-file
Как установить react-chakra-ui-cursorrules-prompt-file в Cursor?
Создай файл .cursor/rules/react-chakra-ui-cursorrules-prompt-file.mdc и помести в него правило.
Что делает react-chakra-ui-cursorrules-prompt-file?
Правило направляет Cursor при разработке React-интерфейсов с Chakra UI. Оно задаёт рекомендации по компонентам, теме, адаптивности, доступности и структуре проекта.
Почему правило не применяется постоянно?
В его настройках указано alwaysApply: false, поэтому Cursor не включает правило постоянно. При этом шаблон globs: **/* охватывает все пути, к которым Cursor применяет правила по совпадению.
Исходный текст
react-chakra-ui-cursorrules-prompt-file.mdc · CC0-1.0
---
description: "Cursor rules for React development with Chakra UI integration."
globs: **/*
alwaysApply: false
---
// React + Chakra UI .cursorrules
// Prefer functional components with hooks
const preferFunctionalComponents = true;
// Chakra UI best practices
const chakraUIBestPractices = [
"Use ChakraProvider at the root of your app",
"Utilize Chakra UI components for consistent design",
"Implement custom theme for brand-specific styling",
"Use responsive styles with the Chakra UI breakpoint system",
"Leverage Chakra UI hooks for enhanced functionality",
];
// Folder structure
const folderStructure = `
src/
components/
pages/
theme/
index.js
foundations/
components/
hooks/
utils/
`;
// Additional instructions
const additionalInstructions = `
1. Use TypeScript for type safety with Chakra UI components
2. Implement proper component composition using Chakra UI
3. Utilize Chakra UI's built-in accessibility features
4. Use the 'as' prop for semantic HTML rendering
5. Implement dark mode using Chakra UI's color mode
6. Use Chakra UI's layout components for responsive design
7. Follow Chakra UI best practices for performance optimization
`;
© PatrickJS · CC0-1.0 · PatrickJS/awesome-cursorrules
