# Cursor Designer Arch

> Use when initializing a project, choosing Vue/React, setting up Nuxt + Nuxt UI or Next.js, looking up latest stable versions, defining directory structure, making architectural decisions, or scaffolding docs templates.

- Skill: `igrlebed/cursor-designer-arch` (Agent Skill)
- Install (CLI): `npx skillmds@latest add igrlebed/cursor-designer-arch`
- Raw SKILL.md: https://api.skillmd.com/api/skills/igrlebed/cursor-designer-arch/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: igrlebed (https://skillmd.com/u/igrlebed)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/igrlebed/cursor-designer-arch

---


# Architecture Rules

## Язык документации
Вся документация в `/docs/` (`ARCHITECTURE.md`, `CHANGELOG.md`, `HANDOVER.md`) пишется **на русском языке**. Имена файлов, путей, API-эндпоинтов и идентификаторов в коде — как в проекте (латиница).

## Stack selection (обязательно при init)

Перед scaffold нового проекта спроси и зафиксируй ответ:

1. **Framework:** `vue` (Nuxt + Nuxt UI) | `react` (Next.js App Router)
2. **UI kit (только React):** `shadcn` (дефолт) | `primereact`
3. **Vue:** UI kit всегда **Nuxt UI** (`@nuxt/ui`). Не спрашивать альтернативы. Не ставить другие Vue UI-библиотеки.

Запиши в `docs/ARCHITECTURE.md` секцию **Стек** (шаблон ниже), **включая точные версии**. Дальше агент не меняет стек без явной просьбы пользователя.

### Детект существующего проекта
Если проект уже есть — не спрашивай меню. Порядок: ARCHITECTURE → `package.json` → configs → импорты UI. При неоднозначности — один уточняющий вопрос.

## Latest stable versions (обязательно до install)

Перед любым `npx nuxi`, `create-next-app`, `npm install` фреймворка или UI-kit на **новом** проекте:

1. Запроси **latest stable** (dist-tag `latest`, без alpha/beta/rc):
   ```bash
   npm view nuxt version
   npm view @nuxt/ui version
   npm view next version
   ```
2. Сверь с официальными docs, если major выглядит неожиданно.
3. Ставь **только эти** версии. Не копируй номера из этого скилла, из памяти модели или из старого проекта.
4. Зафиксируй resolved versions в секции **Стек**.

Не апгрейдить существующий проект до latest без явной просьбы.

## ARCHITECTURE.md — секция Стек (шаблон)

```markdown
## Стек
- **Framework:** Nuxt x.y.z | Next.js x.y.z (App Router)
- **Language:** TypeScript
- **UI kit:** Nuxt UI x.y.z | shadcn/ui | PrimeReact x.y.z
- **State:** Pinia | Zustand / React context | …
- **Docs:** `/docs/` на русском
- **Версии сняты:** `npm view … version` на YYYY-MM-DD
```

## ARCHITECTURE.md Contents
Must include:
- Stack and versions (секция выше)
- Directory structure and conventions
- State management approach
- API layer design
- Routing structure
- Component hierarchy
- Design system tokens location
- Build and deployment notes

Keep concise. Update only when architecture changes. Текст разделов — на русском.

## Scaffold по стеку

### Vue (Nuxt + Nuxt UI)
- Latest stable Nuxt, TypeScript, `<script setup lang="ts">`
- UI: **только `@nuxt/ui`** (module + Tailwind per current Nuxt UI docs)
- Nuxt UI = база всего визуала: Button, Input, Form, Table, Modal, Toast, DatePicker и т.д.
- Структура: `/docs/`, `/mocks/`, `components/`, `composables/`, `app/` (Nuxt 4 layout)

### React (Next.js App Router)
- Latest stable Next.js App Router, TypeScript
- UI:
  - **shadcn/ui** → Tailwind + `components/ui` (копируемые компоненты)
  - **PrimeReact** → `primereact` + theme
- Структура: `/docs/`, `/mocks/`, `app/`, `components/`, `lib/` или `hooks/`

Не смешивать Vue- и React-пакеты в одном проекте.

## CHANGELOG.md Format
```markdown
## YYYY-MM-DD — Краткое название изменения
- **Что**: Что сделано (фича, рефакторинг, секция, анимация)
- **Зачем**: Зачем (гипотеза, тест, требование дизайна)
- **Файлы**: Затронутые файлы
- **Mock**: Какие данные замоканы и реальный эндпоинт
- **Техдолг / Заметки**: Временные решения, что передать разработчикам
- **Блокеры**: Блокирующие проблемы (если есть)
```
Логировать только крупные изменения: фичи, рефакторинги, контракты API, обновления дизайн-системы, роутинг, auth, адаптивные переписывания, вынос компонентов, сборка/деплой.
Не логировать: мелкие визуальные правки, микро-подгонки, однострочные CSS-твики.