# Стайлгайд — Разработка

Правила и стандарты разработки на Next.js и TypeScript.

## Как работать

1. **Изучи обязательные правила** (таблица ниже) — они действуют при любой задаче.
2. Найди задачу в таблицах триггеров → открой триггер.
3. Триггер укажет какие прикладные разделы прочитать и какие шаги выполнить.
4. Перед каждой подзадачей возвращайся к триггерам — проверяй, нет ли готового.
5. Если триггера нет — ищи прикладной раздел по области задачи.

---

## Обязательные правила

Прочитай эти разделы **до начала работы**. Соблюдай при написании любого кода.

| Раздел | Файл | Что внутри |
|--------|------|------------|
| Структура проекта | applied/project-structure.md | Организация папок и файлов |
| Архитектура | basics/architecture.md | SLM Design: слои, модули, сегменты |
| Стиль кода | basics/code-style.md | Форматирование, импорты, отступы |
| Именование | basics/naming.md | Имена файлов, переменных, событий |
| Типизация | basics/typing.md | type vs interface, generic, any/unknown |
| Документирование | basics/documentation.md | JSDoc для функций, компонентов, типов |
| Технологии | basics/tech-stack.md | Допустимые библиотеки и зависимости |

---

## Прикладные разделы

Справочник по областям. Читай тот раздел, который относится к текущей задаче.

| Область | Файл | Когда читать |
|---------|------|--------------|
| Компоненты | applied/components.md | Создание или редактирование React-компонентов |
| Стили | applied/styles.md | CSS Modules, PostCSS, переменные, медиа-запросы |
| Файлы роутинга | applied/page-level.md | page.tsx, layout.tsx, error.tsx, not-found.tsx |
| Шаблоны и генерация | applied/templates-generation.md | Генерация кода из шаблонов |
| Настройка VS Code | applied/vscode.md | Расширения, settings.json, сниппеты |
| SVG-спрайты | applied/svg-sprites.md | Работа с SVG-иконками и спрайтами |
| Хуки | applied/hooks.md | Создание и использование кастомных хуков *(в разработке)* |
| Сторы | applied/stores.md | Глобальное состояние, Zustand *(в разработке)* |
| API | applied/api.md | Запросы, клиенты, обработка ответов *(в разработке)* |
| Локализация | applied/localization.md | i18next, переводы *(в разработке)* |
| Изображения | applied/images-sprites.md | Подключение и оптимизация изображений *(в разработке)* |
| Шрифты | applied/fonts.md | Подключение и настройка шрифтов *(в разработке)* |
| Видео | applied/video.md | Встраивание видео *(в разработке)* |

---

## Триггеры

Пошаговые инструкции. Найди задачу → открой триггер → выполняй по шагам.

### Создание

| Задача | Триггер | Описание |
|--------|---------|----------|
| Создать компонент | triggers/develop/create-component.md | Переиспользуемый UI-элемент без бизнес-логики |
| Создать фичу | triggers/develop/create-feature.md | Самодостаточный блок с бизнес-логикой и UI |
| Создать виджет | triggers/develop/create-widget.md | Композиция нескольких фичей и сущностей |
| Создать сущность | triggers/develop/create-entity.md | Бизнес-объект с моделью данных и UI-представлением |
| Создать хук | triggers/develop/create-hook.md | Кастомный React-хук с переиспользуемой логикой |
| Создать стор | triggers/develop/create-store.md | Глобальное или модульное состояние через Zustand |
| Создать страницу | triggers/develop/create-page.md | Новый route в Next.js — экран + page.tsx |
| Создать layout | triggers/develop/create-layout.md | Общая обёртка layout.tsx для группы страниц |
| Создать проект | triggers/develop/create-project.md | Инициализация нового проекта из шаблона |
| Сгенерировать модуль | triggers/develop/generate-module.md | Создание модуля из шаблонов `.templates/` |

### Стилизация и ресурсы

| Задача | Триггер | Описание |
|--------|---------|----------|
| Стилизовать компонент | triggers/develop/style-component.md | Выбор подхода и написание CSS для компонента |
| Добавить иконку | triggers/develop/add-icon.md | SVG-иконка через спрайт-систему |
| Добавить изображение | triggers/develop/add-image.md | Растровое изображение (png, jpg, webp) |
| Добавить видео | triggers/develop/add-video.md | Встраивание видео на страницу |
| Подключить шрифт | triggers/develop/add-font.md | Подключение нового шрифта в проект |

### Данные и состояние

| Задача | Триггер | Описание |
|--------|---------|----------|
| Добавить API-запрос | triggers/develop/add-api-request.md | Клиентский запрос данных через SWR |
| Подключить стор | triggers/develop/connect-store.md | Подключение существующего стора к компоненту |
| Серверные данные (RSC) | triggers/develop/add-server-data.md | Получение данных в серверных компонентах |

### Инфраструктура

| Задача | Триггер | Описание |
|--------|---------|----------|
| Добавить перевод | triggers/develop/add-localization.md | Ключи перевода и подключение i18next |
| Добавить зависимость | triggers/develop/add-dependency.md | Подключение новой npm-библиотеки |
| Настроить VS Code | triggers/develop/setup-vscode.md | Расширения, настройки редактора, сниппеты |