@nitra/cursor 1.0.9 → 1.0.11

package/mdc/vue.mdc

@@ -0,0 +1,191 @@
+---
+description: Vue
+alwaysApply: true
+version: '1.1'
+---
+
+# Vue 3 (Composition API)
+
+# Vue 3 Composition API — правила для .cursorrules
+
+## Найкращі практики Vue 3 Composition API
+
+```javascript
+const vue3CompositionApiBestPractices = [
+  'Використовуй функцію setup() для логіки компонента',
+  'Реалізуй computed properties через computed()',
+  'Використовуй watch і watchEffect для side effects',
+  'Підключай lifecycle hooks: onMounted, onUpdated тощо',
+  'Використовуй provide/inject для dependency injection'
+]
+```
+
+## Структура папок
+
+```javascript
+const folderStructure = `
+src/
+  components/
+  composables/
+  views/
+  router/
+  store/
+  assets/
+  App.vue
+  main.js
+`
+```
+
+### Найменування файлів
+
+- **SFC:** імена файлів компонентів у **PascalCase** (`MyWidget.vue`).
+- **Інші JS-модулі:** узгоджено **kebab-case** (`date-utils.js`).
+
+### Модулі та архітектура
+
+- **ES modules** (`import`/`export`), один модуль — одна відповідальність, уникай **circular dependencies**.
+- **Composition** замість успадкування; логіку для повторного використання винось у **composables** (замість зайвих HOC, де це доречно).
+- **SFC** для template + script + style; за потреби розділяй presentational і container-компоненти (UI vs дані/оркестрація).
+
+### Code splitting
+
+- **Route-based:** lazy-імпорти в маршрутах (`() => import('...')`) і async components.
+
+## Додаткові вказівки
+
+```javascript
+const additionalInstructions = `
+1. Використовуй JavaScript
+2. Коректно оголошуй props і emits
+3. За потреби використовуй компонент Teleport у Vue 3
+4. Застосовуй Suspense для async components
+5. Реалізуй належний error handling
+6. Дотримуйся Vue 3 style guide і naming conventions
+7. Використовуй Vite для швидкої розробки та збірки
+`
+```
+
+### Детальні вказівки
+
+1. **Vue router**: Завжди використовуй Vue router для маршрутизації в проекті версії 5 та його file-based routing.
+2. **Компонент Teleport**: Використовуй Teleport у Vue 3, коли потрібно рендерити поза поточною ієрархією DOM.
+3. **Suspense для async components**: Застосовуй Suspense для асинхронних компонентів і кращого UX.
+4. **Error handling**: Реалізуй глобальний error handling механізмами Vue 3, щоб коректно перехоплювати та обробляти помилки.
+5. **Style guide і naming**: Дотримуйся офіційного Vue 3 style guide і naming conventions для узгодженості кодової бази.
+6. **Vue macros**: Використовуй Vue macros для більш ефективного розробки компонентів.
+7. **Vue Reactivity Transform**: Використовуй Vue Reactivity Transform для змінних в компонентах.
+
+### Патерни та антипатерни
+
+- **provide/inject** — для глибоко вкладених залежностей; **renderless**-компоненти / **slots** — коли логіку відділяєш від розмітки.
+- **HTTP:** окремі модулі **services** або **composables** для API; **async/await**.
+- **Події:** батько–дитина через **emits**; для не пов’язаних гілок — **store** / **provide-inject**, уникай глобального **event bus** у новому коді.
+- Не мутуй **props** напряму — оновлення через подію вгору або v-model.
+- Обмежуй зайве в глобальному стані; локальний стан у компоненті — за замовчуванням.
+- Уникай прямої роботи з **DOM**, якщо достатньо реактивного шаблону та ref.
+- **Magic numbers/strings** винось у константи; **computed** тримай простими, важкі обчислення — у функції або утиліти.
+
+### State management
+
+- **Single source of truth** для спільних даних: у нових проєктах на Vue 3 **Pinia** (модульні stores, actions)
+- Похідний стан — через обчислення в store або **computed** у компонентах, без «тихих» побічних ефектів у getters.
+
+### Обробка помилок (додатково)
+
+- **try/catch** навколо async-операцій; зрозумілі повідомлення для користувача; логування на сервіс моніторингу за потреби.
+- **Error boundary**-підхід у Vue — через окремі компоненти-обгортки та `onErrorCaptured` / глобальні хендлери залежно від архітектури.
+
+### Продуктивність
+
+- **v-for** — стабільні унікальні **`:key`**; не плутай **v-if** (умовний mount) і **v-show** (перемикання visibility).
+- Важкі **computed** / **watch** — не робити зайвої роботи; **debounce/throttle** для частих подій.
+- **v-once** для статичного вмісту; уникай глибоко вкладених дерев без потреби.
+- Після ручних **addEventListener** / підписок — прибирай у **onUnmounted**.
+
+### Безпека
+
+- Не довіряй **v-html** без санітизації; для форм/API — **CSRF**-захист за потреби; валідація **на сервері** обов’язкова.
+
+### Тестування
+
+- **Unit / component:** **Vue Test Utils**; з **Vite** зручно **Vitest**.
+- **E2E:** **Playwright** змістовні сценарії користувацьких потоків.
+
+### Інструменти (узгоджено з Vite і цим правилом)
+
+- Якість коду: **ESLint** + **eslint-plugin-vue**; форматування — **oxfmt**, див. `js-format.mdc`.
+- Збірка та dev-сервер — **Vite**
+- **Vue Devtools** для дебагу; продакшен-збірка — **`vite build`**, оптимізація асетів і кешування на рівні деплою / CDN.
+
+### CI/CD
+
+- У pipeline: **install**, **lint**, **test**, **vite build**; артефакти з продакшен-режиму.
+
+### Приклад
+
+```javascript
+// Приклад Vue 3 компонента з Composition API
+import { computed, onMounted } from 'vue'
+
+export default {
+  setup() {
+    const count = $ref(0)
+    const doubleCount = computed(() => count * 2)
+
+    onMounted(() => {
+      console.log('Компонент змонтовано')
+    })
+
+    return {
+      count,
+      doubleCount
+    }
+  }
+}
+```
+
+в файлі .vscode/extensions.json є налаштування для Vue:
+
+```json title=".vscode/extensions.json"
+{
+  "recommendations": ["Vue.volar"]
+}
+```
+
+мінімальний повний `package.json` для Vite + Vue + `vue-macros` (версії підлаштуй під проєкт):
+
+```json title="package.json"
+{
+  "name": "my-vue-app",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "vite": "^8.0.0",
+    "@vitejs/plugin-vue": "^6.0.0",
+    "vue-macros": "^3.1.2"
+  }
+}
+```
+
+```javascript title="vite.config.js"
+import Vue from '@vitejs/plugin-vue'
+import VueMacros from 'vue-macros/vite'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [
+    VueMacros({
+      plugins: {
+        vue: Vue()
+      }
+    })
+  ]
+})
+```
+
+### Висновок
+
+Дотримуючись цих практик і правил, можна будувати масштабовані, підтримувані та ефективні застосунки на Vue 3 з Composition API. Завжди звіряйся з офіційною документацією Vue 3 щодо оновлень і нових можливостей.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nitra/cursor",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "CLI для завантаження cursor-правил Nitra у локальний репозиторій",
   "keywords": [
     "cli",