# tailwind-react-firebase-cursorrules-prompt-file

Правило для Cursor задаёт, как писать мобильное веб-приложение на Tailwind, React и Firebase: сначала мобильная вёрстка, потом остальное.

- правило · `type=rule` · Cursor · ★ 41011
- Автор: PatrickJS
- Лицензия: CC0-1.0 · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/PatrickJS/awesome-cursorrules/tree/HEAD/rules/tailwind-react-firebase-cursorrules-prompt-file.mdc
- Обновлён: 2026-05-30
- HTML: https://affpapa.org/nevibecode/rules/tailwind-react-firebase-cursorrules-prompt-file

## Что делает

Файл подключается как правило Cursor и описывает набор соглашений для проекта. Внутри — мобильная вёрстка в первую очередь, адаптивные префиксы Tailwind (`sm:`, `md:`, `lg:`, `xl:`), единая дизайн-система с токенами в `tailwind.config.js`. Отдельно прописаны доступность (контраст, семантическая разметка, навигация с клавиатуры) и размер интерактивных элементов не меньше 44x44 пикселей.

По производительности правило советует `React.lazy()` и `Suspense` для разбиения кода, виртуализацию длинных списков через `react-window`, оптимизацию изображений. Для Firebase — правила безопасности, офлайн-персистентность SDK и запросы с минимумом операций чтения и записи. Формы — через Formik или `react-hook-form` с валидацией и понятными сообщениями об ошибках.

Есть и неочевидный пункт: при создании файла не конфликтовать с существующими `.tsx` и `.jsx`. То есть правило подразумевает, что в проекте уже есть оба типа файлов, и это повод проверить структуру до подключения. В конце файла лежит готовый промпт для языковой модели — про фичу учёта приёма лекарств с отчётами о приверженности лечению. К вашему проекту он отношения не имеет, но показывает, как автор оформляет запросы к модели.

## Установка

### Cursor (родная платформа)

**Вручную: положить файлы**
- Файл: `.cursor/rules/tailwind-react-firebase-cursorrules-prompt-file.mdc` — Во frontmatter: description, globs, alwaysApply

### Claude Code

**Вручную: положить файлы**
- Файл: `.claude/rules/tailwind-react-firebase-cursorrules-prompt-file.md` — Поле paths во frontmatter ограничивает файлы: globs из источника → paths

### Codex

**AGENTS.md**
- Codex читает AGENTS.md: вставьте текст правила туда

### GitHub Copilot

**Вручную: положить файлы**
- Файл: `.github/instructions/tailwind-react-firebase-cursorrules-prompt-file.instructions.md` — Поле applyTo задаёт, к каким файлам применять: globs из источника → applyTo

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/rules/tailwind-react-firebase-cursorrules-prompt-file.md`

### Cline

**Вручную: положить файлы**
- Файл: `.clinerules/tailwind-react-firebase-cursorrules-prompt-file.md`

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/PatrickJS/awesome-cursorrules/tree/HEAD/rules/tailwind-react-firebase-cursorrules-prompt-file.mdc

## Когда брать
- задать единые правила вёрстки для проекта на Tailwind и React
- проверить доступность интерфейса: контраст, клавиатура, семантика
- разбить бандл через `React.lazy()` и `Suspense`
- настроить безопасность и офлайн-режим в Firebase
- выбрать библиотеку для форм и валидации

## Примеры запросов агенту
- Проверь мой компонент по правилам из `.cursor/rules/tailwind-react-firebase-cursorrules-prompt-file.mdc`
- Сделай разметку карточки товара мобильной в первую очередь, как описано в правиле
- Перепиши этот список на виртуализацию через `react-window`

## Похожие
- [tailwind-css-patterns](https://affpapa.org/nevibecode/skills/tailwind-css-patterns.md) — скилл · 17700 установок
- [tailwind-v4-shadcn](https://affpapa.org/nevibecode/skills/tailwind-v4-shadcn.md) — скилл · 8100 установок
- [tailwind-theme-builder](https://affpapa.org/nevibecode/skills/tailwind-theme-builder.md) — скилл · 3200 установок
- [frontend-tailwind-best-practices](https://affpapa.org/nevibecode/skills/frontend-tailwind-best-practices.md) — скилл · 464 установки
- [stitch::react-components](https://affpapa.org/nevibecode/skills/stitchreact-components.md) — скилл · 50400 установок
- [firebase-hosting-basics](https://affpapa.org/nevibecode/skills/firebase-hosting-basics.md) — скилл · 170300 установок

Из того же набора: [patrickjs/awesome-cursorrules](https://affpapa.org/nevibecode/by/patrickjs/awesome-cursorrules.md) — 68 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md