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

vue-3-nuxt-3-development-cursorrules-prompt-file — правило для Cursor

Правило задаёт стандарты для фронтенда на Vue 3 и Nuxt 3 в Cursor. Ассистент составляет псевдокод до написания кода, использует Composition API и оформляет разметку только через Tailwind.

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

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

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

Похожие правила 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звёзд репо

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

Весь набор →
webassembly-z80-cellular-automata-cursorrules-prom Правило для Cursor, которое ведёт агента при добавлении сетки регионов в симуляцию клеточных автоматов на Z80 и WebAssembly. ★ 41 024звёзд репо web-app-optimization-cursorrules-prompt-file Набор инструкций для Cursor по разработке веб-приложений на Svelte 5 и SvelteKit с акцентом на производительность и руны. ★ 41 024звёзд репо vue3-composition-api-cursorrules-prompt-file Правило задаёт рекомендации для разработки на Vue 3 с Composition API: от реактивного состояния до структуры проекта. Пригодится, чтобы Cursor учитывал эти практики при работе с файлами. ★ 41 024звёзд репо vue Правило для Cursor задаёт агенту стиль работы с Vue: Composition API, Pinia, типизация и маршрутизация. Пригодится, когда в проекте уже есть .vue и .ts. ★ 41 024звёзд репо vue-pinia-cursorrules-prompt-file Задаёт стандарты работы с Pinia и TypeScript во Vue 3: разделение состояния, синтаксис setup-хранилищ, типизацию, SSR и правила персистентности. ★ 41 024звёзд репо vue-claude-stack Правило задаёт стиль генерации кода для Vue 3 и Nuxt 3: Composition API, TypeScript и Pinia. Пригодится, чтобы направлять агента по единым правилам проекта. ★ 41 024звёзд репо vue-3-nuxt-3-typescript-cursorrules-prompt-file Правило для Cursor задаёт агенту стиль кода на Vue 3 и Nuxt 3: Composition API, TypeScript-интерфейсы, конвенции Nuxt. Пригодится, когда проект уже на этом стеке и не хочется каждый раз объяснять структуру. ★ 41 024звёзд репо vscode-extension-dev-typescript-cursorrules-prompt-file Задаёт рекомендации для разработки расширений VS Code на TypeScript: от структуры проекта и манифеста до тестов и обработки ошибок. ★ 41 024звёзд репо

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

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