S.Gromov
e77e7dfcf1
- Удалён shiki (9.5→0 МБ), создан regex-токенизатор для html/css/xml - CLI переведён с аргументов на конфиг-файл svg-sprites.config.ts - Превью переработано: React-приложение вместо инлайн HTML - Добавлен футер с названием пакета и ссылкой на репозиторий - Исправлена загрузка dev-data.js для Vite 8 - Футер прижат к низу, содержимое центрировано
7.2 KiB
7.2 KiB
Стайлгайд — Разработка
Правила и стандарты разработки на Next.js и TypeScript.
Как работать
- Изучи обязательные правила (таблица ниже) — они действуют при любой задаче.
- Найди задачу в таблицах триггеров → открой триггер.
- Триггер укажет какие прикладные разделы прочитать и какие шаги выполнить.
- Перед каждой подзадачей возвращайся к триггерам — проверяй, нет ли готового.
- Если триггера нет — ищи прикладной раздел по области задачи.
Обязательные правила
Прочитай эти разделы до начала работы. Соблюдай при написании любого кода.
| Раздел | Файл | Что внутри |
|---|---|---|
| Структура проекта | 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 | Расширения, настройки редактора, сниппеты |