К основному содержанию
правило

qwik-tailwind-cursorrules-prompt-file — правило для Cursor

Правило для Cursor, которое задаёт агенту стиль кода на Qwik с Tailwind CSS: ленивые функции, сигналы, структура папок. Пригодится, когда проект на Qwik City и TypeScript.

Установить в Cursor · Вручную: положить файлы Все способы и платформы ↓
.cursor/rules/qwik-tailwind-cursorrules-prompt-file.mdc
Открыть на GitHub

Что делает 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

По шагам, с командами для каждой платформы: 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

Похожие правила IDE

Все правила IDE по теме «Фронтенд и UI» →
winui3 официальный github Правило задаёт рекомендации для WinUI 3 и Windows App SDK: от XAML и потоков до окон и MVVM. Пригодится, чтобы Copilot учитывал особенности настольных приложений Windows. ★ 40 451звёзд репо vue официальный github Правило задаёт Copilot стандарты Vue 3: Composition API, <script setup>, реактивность, Pinia и Vue Router. Пригодится, когда агент пишет компоненты в вашем стиле. ★ 40 451звёзд репо tanstack-start-shadcn-tailwind официальный github Правило задаёт Copilot стек TanStack Start, Shadcn/ui и Tailwind CSS и требует валидировать внешние данные через Zod. ★ 40 451звёзд репо tailwind-v4-vite официальный github Правило помогает подключить Tailwind CSS v4 к проекту на Vite через официальный плагин. Пригодится и для новой установки, и при переходе с v3. ★ 40 451звёзд репо svelte официальный github Направляет GitHub Copilot на стандарты Svelte 5 и SvelteKit 2: руны вместо старых сторов, типизация компонентов и безопасная работа с SSR. ★ 40 451звёзд репо power-bi-custom-visuals-development официальный github Правило для GitHub Copilot, которое подсказывает агенту, как писать кастомные визуалы Power BI на React, D3.js и TypeScript. ★ 40 451звёзд репо

Из того же набора140

react-query-cursorrules-prompt-file Правило для Cursor, которое задаёт агенту соглашения по React Query: где держать QueryClient, как называть хуки и ключи запросов. ★ 41 024звёзд репо react-native-expo-cursorrules-prompt-file Правило для Cursor, которое задаёт агенту стек и структуру проекта на React Native с Expo. Пригодится, когда нужно, чтобы код в проекте писался единообразно. ★ 41 024звёзд репо react-graphql-apollo-client-cursorrules-prompt-file Правило задаёт Cursor подход к React-разработке с GraphQL и Apollo Client. Оно пригодится для единого устройства запросов, мутаций и компонентов. ★ 41 024звёзд репо rails-cursorrules-prompt-file Правило для Cursor, которое задаёт агенту стиль разработки на Rails 8: генераторы, bin/dev, Solid-стек, Minitest и Hotwire. ★ 41 024звёзд репо qwik-basic-cursorrules-prompt-file Правило Cursor, которое задаёт агенту соглашения Qwik: ленивые функции с суффиксом $, сигналы, задачи и структура проекта на TypeScript и Vite. ★ 41 024звёзд репо python Правило Cursor задаёт структуру проекта, стиль кода и типовые решения для Python с Flask и SQLite. Пригодится, когда агент пишет код в вашем репозитории. ★ 41 024звёзд репо python-llm-ml-workflow-cursorrules-prompt-file Правило задаёт Cursor стек и практики для Python-проектов с LLM и ML. Пригодится для API, экспериментов, тестов и сопровождения кода. ★ 41 024звёзд репо python-github-setup-cursorrules-prompt-file Задаёт Cursor единый стиль Python-кода, тесты, ревью через GitHub Pull Requests и CI на GitHub Actions. Пригодится, когда в команде нет общего свода правил. ★ 41 024звёзд репо

Спонсоры проекта

Компании, которые помогают держать аналитику открытой