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

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

Правило для Cursor, которое задаёт агенту стиль кода на Solid.js с Tailwind CSS: сигналы, утилитарные классы, структура папок.

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

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

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

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

Все правила IDE по теме «Фронтенд и UI» →
tanstack-start-shadcn-tailwind официальный github Правило задаёт Copilot стек TanStack Start, Shadcn/ui и Tailwind CSS и требует валидировать внешние данные через Zod. ★ 40 418звёзд репо tailwindcss-development laravel Пишет и правит Tailwind-классы в Blade, JSX и Vue. Срабатывает сам, когда в запросе встречается слово tailwind. CX Codex +1 942установок tailwind-css-patterns giuseppe-trisciuoglio Скилл с готовыми паттернами Tailwind CSS: адаптивные сетки, карточки, формы, тёмная тема. Пригодится, когда агент верстает компоненты на React, Vue или Svelte. CX Codex +1 17 700установок tailwind-4-docs Lombiq Скилл подтягивает локальный снимок документации Tailwind CSS v4 и помогает агенту отвечать по утилитам, конфигу и миграции с v3. CX Codex +1 17 600установок tailwind-v4-shadcn secondsky Скилл настраивает связку Tailwind CSS v4, shadcn/ui и React в проектах на Vite. Помогает избежать ошибок импорта и поломки CSS-переменных при переключении тем оформления. CX Codex +1 8 100установок tailwind-theme-builder jezweb Скилл настраивает тему Tailwind v4 с shadcn/ui и тёмным режимом: ставит зависимости, связывает CSS-переменные через @theme inline, подключает переключатель темы. CX Codex +1 3 200установок

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

tanstack-query-v5-cursorrules-prompt-file Правило для Cursor, которое задаёт агенту стиль работы с TanStack Query v5: ключи запросов, мутации, оптимистичные обновления, Suspense и префетчинг. ★ 41 011звёзд репо tailwind-react-firebase-cursorrules-prompt-file Правило для Cursor задаёт, как писать мобильное веб-приложение на Tailwind, React и Firebase: сначала мобильная вёрстка, потом остальное. ★ 41 011звёзд репо sveltekit-typescript-guide-cursorrules-prompt-file Правило для Cursor, которое настраивает агента на Svelte 5, SvelteKit и TypeScript: структура проекта, руны, состояние. ★ 41 011звёзд репо svelte Правило для Cursor с набором практик по Svelte: структура компонентов, реактивность, сторы, роутинг через SvelteKit и тесты. Пригодится, когда агент пишет или правит код на Svelte. ★ 41 011звёзд репо solidity-hardhat-cursorrules-prompt-file Правило для Cursor, которое настраивает ИИ-ассистента на разработку смарт-контрактов на Solidity с проверками безопасности и работой через Hardhat. ★ 41 011звёзд репо snowflake-snowpark-dbt-cursorrules-prompt-file Правило для Cursor, которое задаёт агенту контекст по Snowpark Python и dbt с адаптером Snowflake. Пригодится, когда пишете пайплайны трансформаций в этих двух инструментах. ★ 41 011звёзд репо shopify-theme-dev-liquid Правило для Cursor с набором практик по темам Shopify: Liquid, JavaScript, CSS, доступность и производительность. Пригодится, если пишете тему и хотите, чтобы агент держал структуру. ★ 41 011звёзд репо salesforce-apex-cursorrules-prompt-file Правило для Cursor, которое настраивает ИИ на разработку Salesforce на Apex: очередь вместо @future, паттерны GoF и минимум комментариев. ★ 41 011звёзд репо

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

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