qwik-tailwind-cursorrules-prompt-file — правило для Cursor
Правило для Cursor, которое задаёт агенту стиль кода на Qwik с Tailwind CSS: ленивые функции, сигналы, структура папок. Пригодится, когда проект на Qwik City и TypeScript.
.cursor/rules/qwik-tailwind-cursorrules-prompt-file.mdcЧто делает qwik-tailwind-cursorrules-prompt-file
Файл описывает, как писать компоненты Qwik и стилизовать их через Tailwind. Агент получает список практик: суффикс $ для лениво загружаемых функций, useSignal() для реактивного состояния, классы Tailwind вместо отдельных стилей, директива @apply в CSS для переиспользуемых наборов.
Внутри задана структура проекта: src/ с папками components/ и routes/, файлы global.css, root.tsx, entry.ssr.tsx, а в корне — tailwind.config.js, postcss.config.js, vite.config.ts и tsconfig.json. Отдельный блок инструкций требует TypeScript для всех .ts и .tsx, очистку неиспользуемых классов Tailwind в продакшен-сборке, роутинг через Qwik City, директиву @layer для своих стилей, тёмную тему через вариант dark и server$ для серверного кода.
Правило подключено с alwaysApply: false и glob **/*, поэтому в Cursor его нужно включать вручную под конкретную задачу. Если в проекте не Qwik, а React или Svelte, файл будет только мешать: он тянет за собой структуру папок и соглашения Qwik City.
Какие задачи решает
- объяснить агенту, что функции в Qwik помечаются суффиксом
$ - перевести стилизацию компонентов на классы Tailwind
- задать реактивное состояние через
useSignal() - вынести серверный код в
server$ - удержать структуру папок Qwik City при генерации новых файлов
Примеры запросов агенту
- Создай компонент счётчика в
src/components/на Qwik с состоянием черезuseSignal()и стилями Tailwind - Добавь тёмную тему через вариант
darkв Tailwind и проверь, что классы не конфликтуют - Опиши роут в
src/routes/через Qwik City и вынеси загрузку данных вserver$
Как установить qwik-tailwind-cursorrules-prompt-file
Вручную: положить файлы
.cursor/rules/qwik-tailwind-cursorrules-prompt-file.mdcВо frontmatter: description, globs, alwaysApply
Вручную: положить файлы
.claude/rules/qwik-tailwind-cursorrules-prompt-file.mdПоле paths во frontmatter ограничивает файлы: globs из источника → paths
AGENTS.md
Codex читает AGENTS.md: вставьте текст правила туда
Вручную: положить файлы
.github/instructions/qwik-tailwind-cursorrules-prompt-file.instructions.mdПоле applyTo задаёт, к каким файлам применять: globs из источника → applyTo
Вручную: положить файлы
.devin/rules/qwik-tailwind-cursorrules-prompt-file.mdВручную: положить файлы
.clinerules/qwik-tailwind-cursorrules-prompt-file.mdПо шагам, с командами для каждой платформы: Cursor rules: файлы .mdc, четыре режима и замена .cursorrules
Вопросы о qwik-tailwind-cursorrules-prompt-file
Как установить qwik-tailwind-cursorrules-prompt-file в Cursor?
Положи файл по пути .cursor/rules/qwik-tailwind-cursorrules-prompt-file.mdc в корне проекта. Cursor подхватит его как правило.
Что делает это правило?
Задаёт агенту соглашения разработки на Qwik с Tailwind CSS: суффикс $ для ленивых функций, useSignal() для состояния, классы Tailwind для стилей, TypeScript для всех .ts и .tsx.
Правило применяется ко всем файлам автоматически?
Нет. В нём стоит alwaysApply: false, так что включать его нужно вручную. Glob **/* при этом покрывает любой файл проекта.
Исходный текст
qwik-tailwind-cursorrules-prompt-file.mdc · CC0-1.0
--- description: "Cursor rules for Qwik development with Tailwind CSS integration." globs: **/* alwaysApply: false --- // Qwik.js with Tailwind CSS (TypeScript and Vite included) .cursorrules // Prefer functional components const preferFunctionalComponents = true; // Qwik.js and Tailwind CSS best practices const qwikTailwindBestPractices = [ "Use $ suffix for lazy-loaded functions", "Utilize useSignal() for reactive state", "Implement Tailwind CSS classes for styling", "Use @apply directive in CSS files for reusable styles", "Implement responsive design using Tailwind's responsive classes", "Utilize Tailwind's configuration file for customization", "Leverage TypeScript for type safety", "Use Vite's fast HMR for development", ]; // Folder structure const folderStructure = ` src/ components/ routes/ global.css root.tsx entry.ssr.tsx public/ tailwind.config.js postcss.config.js vite.config.ts tsconfig.json `; // Additional instructions const additionalInstructions = ` 1. Use TypeScript for all .ts and .tsx files 2. Implement proper Tailwind CSS purging for production builds 3. Utilize Qwik City for routing when applicable 4. Use Tailwind's @layer directive for custom styles 5. Implement dark mode using Tailwind's dark variant 6. Follow both Qwik and Tailwind naming conventions 7. Use server$ for server-side code execution 8. Leverage Vite plugins for optimized builds `;
© PatrickJS · CC0-1.0 · PatrickJS/awesome-cursorrules