solidjs-tailwind-cursorrules-prompt-file — правило для Cursor
Правило для Cursor, которое задаёт агенту стиль кода на Solid.js с Tailwind CSS: сигналы, утилитарные классы, структура папок.
.cursor/rules/solidjs-tailwind-cursorrules-prompt-file.mdcЧто делает solidjs-tailwind-cursorrules-prompt-file
Файл описывает, как писать компоненты Solid.js с Tailwind CSS. Агент получает набор предпочтений: функциональные компоненты, реактивное состояние через createSignal(), стилизация классами Tailwind, директива @apply для переиспользуемых стилей, адаптивные классы и тёмная тема через вариант dark.
Внутри задана структура проекта: src/ с папками components, pages, styles и файлами App.jsx, index.jsx, рядом public/index.html, а в корне tailwind.config.js и postcss.config.js. Отдельный блок инструкций советует JSX для шаблонов, очистку неиспользуемых классов Tailwind в продакшн-сборке, Solid Router для маршрутизации, директиву @layer для своих стилей и режим JIT.
Правило подключено с alwaysApply: false и маской globs: **/*, поэтому оно не применяется само по себе. Если положить файл в .cursor/rules/ и не включить его для нужных файлов, агент просто не увидит инструкций — это первое, что стоит проверить после установки.
Какие задачи решает
- объяснить агенту, что состояние в Solid.js живёт в сигналах, а не в хуках React
- держать стили в классах Tailwind вместо отдельных CSS-файлов
- вынести повторяющиеся наборы классов в
@apply - собрать адаптивную вёрстку через брейкпоинты Tailwind
- добавить тёмную тему вариантом
dark
Примеры запросов агенту
- Создай компонент счётчика на Solid.js: состояние через
createSignal(), кнопки стилизуй классами Tailwind. - Сделай карточку товара адаптивной: на мобильных одна колонка, на десктопе три, тёмная тема через
dark:. - Вынеси повторяющиеся классы кнопки в
@applyвнутриstyles/.
Как установить solidjs-tailwind-cursorrules-prompt-file
Вручную: положить файлы
.cursor/rules/solidjs-tailwind-cursorrules-prompt-file.mdcВо frontmatter: description, globs, alwaysApply
Вручную: положить файлы
.claude/rules/solidjs-tailwind-cursorrules-prompt-file.mdПоле paths во frontmatter ограничивает файлы: globs из источника → paths
AGENTS.md
Codex читает AGENTS.md: вставьте текст правила туда
Вручную: положить файлы
.github/instructions/solidjs-tailwind-cursorrules-prompt-file.instructions.mdПоле applyTo задаёт, к каким файлам применять: globs из источника → applyTo
Вручную: положить файлы
.devin/rules/solidjs-tailwind-cursorrules-prompt-file.mdВручную: положить файлы
.clinerules/solidjs-tailwind-cursorrules-prompt-file.mdПо шагам, с командами для каждой платформы: Cursor rules: файлы .mdc, четыре режима и замена .cursorrules
Вопросы о solidjs-tailwind-cursorrules-prompt-file
Как установить solidjs-tailwind-cursorrules-prompt-file в Cursor?
Положите файл по пути .cursor/rules/solidjs-tailwind-cursorrules-prompt-file.mdc в корне проекта. После этого включите правило для нужных файлов: по умолчанию оно не применяется.
Что делает это правило?
Задаёт агенту Cursor соглашения по Solid.js и Tailwind CSS: функциональные компоненты, createSignal(), утилитарные классы, @apply, @layer, тёмная тема и структура папок проекта.
Почему правило не срабатывает сразу?
В нём стоит alwaysApply: false и маска globs: **/*. Пока вы не включите его вручную, Cursor не подмешивает эти инструкции в контекст.
Исходный текст
solidjs-tailwind-cursorrules-prompt-file.mdc · CC0-1.0
--- description: "Cursor rules for Solid.js development with Tailwind CSS integration." globs: **/* alwaysApply: false --- // Solid.js with Tailwind CSS .cursorrules // Prefer functional components const preferFunctionalComponents = true; // Solid.js and Tailwind CSS best practices const solidjsTailwindBestPractices = [ "Use createSignal() for reactive state", "Implement Tailwind CSS classes for styling", "Utilize @apply directive in CSS files for reusable styles", "Implement responsive design using Tailwind's responsive classes", "Use Tailwind's configuration file for customization", "Implement dark mode using Tailwind's dark variant", ]; // Folder structure const folderStructure = ` src/ components/ pages/ styles/ App.jsx index.jsx public/ index.html tailwind.config.js postcss.config.js `; // Additional instructions const additionalInstructions = ` 1. Use JSX for component templates 2. Implement proper Tailwind CSS purging for production builds 3. Utilize Solid Router for routing when applicable 4. Use Tailwind's @layer directive for custom styles 5. Implement utility-first CSS approach 6. Follow both Solid.js and Tailwind naming conventions 7. Use JIT (Just-In-Time) mode for faster development `;
© PatrickJS · CC0-1.0 · PatrickJS/awesome-cursorrules