### Правила реализации Vue-компонентов (Style Guide Vue.js)

- **Script Setup**: Используй строго `<script setup lang="ts">`.
- **Именование**: Названия компонентов должны состоять из нескольких слов, соответствовать их пути в проекте и быть в PascalCase.
- **CSS**: Название корневого CSS-класса компонента должно совпадать с его названием (в формате kebab-case).
- **Типизация**: Обязательные интерфейсы для Props (`defineProps<{...}>()`) и Emits (`defineEmits<{...}>()`).
- **Списки (v-for)**: Всегда используй уникальный `:key`. Избегай использования индекса массива в качестве ключа.
- **Директивы**: Никогда не используй `v-if` на том же элементе, что и `v-for`.
- **Реактивность**: Используй `ref` для данных. Сложную логику вычисляй через `computed`.
- **Логика**: ВСЯ логика должна быть вынесена в Composables. Компонент должен содержать только вызов composable и шаблон.
- **Шаблоны**: Максимально чистый HTML. Никаких вызовов функций, вычислений или инлайн-стилей. Если нужна сложная логика — разделяй на подкомпоненты.
- **Props**: Односторонний поток данных. Никогда не мутируй входящие пропсы.
- **События**: Названия событий — строго в kebab-case.
- **A11y**: Используй семантический HTML и ARIA-атрибуты.
- **Атомарность**: Компоненты должны быть минимальными и выполнять только одну функцию. Избегай универсальных компонентов («швейцарских ножей»).
- **Стили UI**: Изменение стилей готовых UI-компонентов библиотеки строго запрещено. Это табу.
- **Чистота**: Пиши декларативно, избегай "воды", экономь токены.
