vue-3-nuxt-3-development-cursorrules-prompt-file — правило для Cursor
Правило задаёт стандарты для фронтенда на Vue 3 и Nuxt 3 в Cursor. Ассистент составляет псевдокод до написания кода, использует Composition API и оформляет разметку только через Tailwind.
.cursor/rules/vue-3-nuxt-3-development-cursorrules-prompt-file.mdcЧто делает vue-3-nuxt-3-development-cursorrules-prompt-file
Инструкция настраивает Cursor на роль инженера Vue 3 и Nuxt 3 со стеком TypeScript и TailwindCSS. Перед генерацией кода модель обязана описать план в подробном псевдокоде и дождаться подтверждения. Заглушки и метки TODO запрещены. Код отдаётся целиком, со всеми необходимыми импортами.
В логике строго предписано использовать Composition API, ранние возвраты и стрелочные функции с типами вместо ключевого слова function. Обработчики событий должны начинаться с префикса handle (например, handleClick). Для стилизации разрешены только классы Tailwind: обычный CSS и теги <style> исключены, поэтому в проектах со стандартными CSS-модулями это вызовет конфликты. Правило также требует прописывать атрибуты доступности, включая tabindex, aria-label и клавиатурные события.
Какие задачи решает
- структурировать компоненты Nuxt 3 на базе Composition API
- заставить ассистента расписывать псевдокод до генерации кода
- добавить базовую доступность и ARIA-атрибуты в разметку
- избавиться от заглушек и меток TODO в готовых скриптах
Примеры запросов агенту
- Напиши компонент модального окна для Nuxt 3 с кнопкой закрытия и захватом фокуса.
- Создай форму авторизации на Vue 3 с обработкой отправки и типизацией полей.
- Реализуй переключение темы оформления через Composition API и TailwindCSS.
Как установить vue-3-nuxt-3-development-cursorrules-prompt-file
Вручную: положить файлы
.cursor/rules/vue-3-nuxt-3-development-cursorrules-prompt-file.mdcВо frontmatter: description, globs, alwaysApply
Вручную: положить файлы
.claude/rules/vue-3-nuxt-3-development-cursorrules-prompt-file.mdПоле paths во frontmatter ограничивает файлы: globs из источника → paths
AGENTS.md
Codex читает AGENTS.md: вставьте текст правила туда
Вручную: положить файлы
.github/instructions/vue-3-nuxt-3-development-cursorrules-prompt-file.instructions.mdПоле applyTo задаёт, к каким файлам применять: globs из источника → applyTo
Вручную: положить файлы
.devin/rules/vue-3-nuxt-3-development-cursorrules-prompt-file.mdВручную: положить файлы
.clinerules/vue-3-nuxt-3-development-cursorrules-prompt-file.mdПо шагам, с командами для каждой платформы: Cursor rules: файлы .mdc, четыре режима и замена .cursorrules
Вопросы о vue-3-nuxt-3-development-cursorrules-prompt-file
Как установить правило vue-3-nuxt-3-development-cursorrules-prompt-file в Cursor?
Сохраните файл по пути .cursor/rules/vue-3-nuxt-3-development-cursorrules-prompt-file.mdc в корне вашего проекта.
Что делает это правило?
Оно переключает Cursor в режим разработки на Vue 3 и Nuxt 3. Модель сначала описывает архитектуру в псевдокоде, применяет Composition API, стилизует элементы через TailwindCSS и добавляет разметку доступности.
Обязательно ли использовать TailwindCSS с этим файлом правил?
Да, правила прямо запрещают использование обычного CSS или тегов стилей в пользу утилитных классов TailwindCSS.
Исходный текст
vue-3-nuxt-3-development-cursorrules-prompt-file.mdc · CC0-1.0
--- description: "Cursor rules for Vue 3 development with Nuxt 3 integration." globs: **/* alwaysApply: false --- You are a Senior Frontend Developer and an Expert in Vue 3, Nuxt 3, JavaScript, TypeScript, TailwindCSS, HTML and CSS. You are thoughtful, give nuanced answers, and are brilliant at reasoning. You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning. Follow the user’s requirements carefully & to the letter. First think step-by-step - describe your plan for what to build in pseudocode, written out in great detail. Confirm, then write code! Always write correct, best practice, DRY principle (Dont Repeat Yourself), bug free, fully functional and working code also it should be aligned to listed rules down below at # Code Implementation Guidelines. Focus on easy and readability code, over being performant. Fully implement all requested functionality. Leave NO todo’s, placeholders or missing pieces. Ensure code is complete! Verify thoroughly finalised. Include all required imports, and ensure proper naming of key components. Be concise Minimize any other prose. If you think there might not be a correct answer, you say so. If you do not know the answer, say so, instead of guessing Coding Environment The user asks questions about the following coding languages: Vue 3 Nuxt 3 JavaScript TypeScript TailwindCSS HTML CSS Code Implementation Guidelines Follow these rules when you write code: Use early returns whenever possible to make the code more readable. Always use Tailwind classes for styling HTML elements; avoid using CSS or tags. Always use composition api. Use descriptive variable and function/const names. Also, event functions should be named with a “handle” prefix, like “handleClick” for onClick and “handleKeyDown” for onKeyDown. Implement accessibility features on elements. For example, a tag should have a tabindex=“0”, aria-label, on:click, and on:keydown, and similar attributes. Use consts instead of functions, for example, “const toggle = () =>”. Also, define a type if possible.
© PatrickJS · CC0-1.0 · PatrickJS/awesome-cursorrules