refactor: заменить shiki на самописный highlighter и обновить архитектуру

- Удалён shiki (9.5→0 МБ), создан regex-токенизатор для html/css/xml
- CLI переведён с аргументов на конфиг-файл svg-sprites.config.ts
- Превью переработано: React-приложение вместо инлайн HTML
- Добавлен футер с названием пакета и ссылкой на репозиторий
- Исправлена загрузка dev-data.js для Vite 8
- Футер прижат к низу, содержимое центрировано
This commit is contained in:
2026-04-22 16:54:35 +03:00
parent aad1c97f50
commit e77e7dfcf1
154 changed files with 9083 additions and 516 deletions

View File

@@ -0,0 +1,35 @@
---
title: Добавить API-запрос
---
# Добавить API-запрос
Инструкция по добавлению запроса к серверу: создание клиента, хука, обработка ответа.
## Прочитай перед началом
- applied/api.md — правила API-слоя: клиенты, эндпоинты, обработка ошибок
- basics/typing.md — типизация запросов и ответов
## Шаги
1. Определи подход:
- Клиентские данные → SWR / хук
- Серверные данные → серверный компонент (RSC)
2. Опиши типы запроса и ответа.
3. Создай или расширь API-клиент (→ applied/api.md).
4. Создай хук для использования в компоненте (→ triggers/develop/create-hook.md).
## Смежные триггеры
- triggers/develop/create-hook.md — хук для запроса
- triggers/develop/create-component.md — компонент, использующий данные
## Проверь себя
- [ ] Типы запроса и ответа описаны
- [ ] Хук для использования в компоненте создан
- [ ] Обработка ошибок реализована

View File

@@ -0,0 +1,24 @@
---
title: Добавить зависимость
---
# Добавить зависимость
Инструкция по добавлению новой npm-зависимости в проект. Проверь допустимость перед установкой.
## Прочитай перед началом
- basics/tech-stack.md — разрешённый стек, допустимые библиотеки
## Шаги
1. Проверь, что библиотека не дублирует уже используемую (→ basics/tech-stack.md).
2. Проверь, что библиотека входит в разрешённый список или обоснуй необходимость.
3. Установи как `dependency` или `devDependency` в зависимости от назначения.
## Проверь себя
- [ ] Библиотека не дублирует уже используемую
- [ ] Библиотека входит в разрешённый список (→ basics/tech-stack.md)

View File

@@ -0,0 +1,28 @@
---
title: Подключить шрифт
---
# Подключить шрифт
Инструкция по подключению и настройке шрифта в проекте.
## Прочитай перед началом
- applied/fonts.md — правила подключения шрифтов: форматы, загрузка, CSS-переменные
## Шаги
1. Подготовь файлы шрифта (woff2).
2. Подключи шрифт по правилам (→ applied/fonts.md).
3. Зарегистрируй CSS-переменную для шрифта.
## Смежные триггеры
- triggers/develop/style-component.md — использование шрифта в стилях
## Проверь себя
- [ ] Файл шрифта в формате woff2
- [ ] CSS-переменная для шрифта зарегистрирована

View File

@@ -0,0 +1,29 @@
---
title: Добавить иконку
---
# Добавить иконку
Инструкция по добавлению SVG-иконки в проект через спрайт-систему.
## Прочитай перед началом
- applied/svg-sprites.md — правила SVG-спрайтов: структура, именование, использование
## Шаги
1. Подготовь SVG-файл: убери лишние атрибуты, оптимизируй.
2. Добавь SVG в спрайт по правилам (→ applied/svg-sprites.md).
3. Используй иконку в компоненте через компонент-обёртку.
## Смежные триггеры
- triggers/develop/create-component.md — если нужен компонент-обёртка для иконки
- triggers/develop/style-component.md — стилизация иконки (размер, цвет)
## Проверь себя
- [ ] SVG оптимизирован — убраны лишние атрибуты
- [ ] Иконка добавлена в спрайт по правилам (→ applied/svg-sprites.md)

View File

@@ -0,0 +1,30 @@
---
title: Добавить изображение
---
# Добавить изображение
Инструкция по добавлению и использованию растровых изображений в проекте.
## Прочитай перед началом
- applied/images-sprites.md — правила работы с изображениями: оптимизация, форматы, подключение
## Шаги
1. Определи тип изображения:
- Статическое (логотип, декор) → `public/`
- Динамическое (контентное) → URL из API
2. Оптимизируй изображение (формат, размер, сжатие).
3. Подключи в компоненте по правилам (→ applied/images-sprites.md).
## Смежные триггеры
- triggers/develop/create-component.md — если нужен компонент-обёртка для изображения
## Проверь себя
- [ ] Изображение оптимизировано (формат, размер, сжатие)
- [ ] Подключено по правилам (→ applied/images-sprites.md)

View File

@@ -0,0 +1,28 @@
---
title: Добавить перевод
---
# Добавить перевод
Инструкция по добавлению локализации: создание ключей перевода и подключение в компоненте.
## Прочитай перед началом
- applied/localization.md — правила локализации: namespace, ключи, форматирование
## Шаги
1. Определи namespace для переводов (→ applied/localization.md).
2. Добавь ключи перевода в файлы локализации.
3. Подключи переводы в компоненте (→ applied/localization.md).
## Смежные триггеры
- triggers/develop/create-component.md — если компонент ещё не создан
## Проверь себя
- [ ] Ключи перевода добавлены в файлы локализации
- [ ] Namespace определён (→ applied/localization.md)

View File

@@ -0,0 +1,33 @@
---
title: Добавить серверные данные
---
# Добавить серверные данные
Инструкция по получению данных в серверных компонентах (RSC) Next.js.
## Прочитай перед началом
- applied/page-level.md — серверные компоненты в App Router
- applied/api.md — API-клиенты
## Шаги
1. Определи где получать данные:
- В `page.tsx` / `layout.tsx` → серверный fetch
- В клиентском компоненте → SWR (→ triggers/develop/add-api-request.md)
2. Создай или расширь серверный API-клиент.
3. Получи данные в серверном компоненте и передай через пропсы.
## Смежные триггеры
- triggers/develop/add-api-request.md — клиентские запросы (SWR)
- triggers/develop/create-page.md — серверный fetch в page.tsx
## Проверь себя
- [ ] Определён тип: серверный fetch или клиентский SWR
- [ ] Типы запроса и ответа описаны
- [ ] Данные передаются через пропсы, не через глобальное состояние

View File

@@ -0,0 +1,27 @@
---
title: Добавить видео
---
# Добавить видео
Инструкция по встраиванию видео в проект.
## Прочитай перед началом
- applied/video.md — правила работы с видео: форматы, плеер, оптимизация
## Шаги
1. Определи тип видео:
- Локальное → `public/`
- Внешнее (YouTube, Vimeo) → embed
2. Подключи видео по правилам (→ applied/video.md).
## Смежные триггеры
- triggers/develop/create-component.md — если нужен компонент-обёртка для видео
## Проверь себя
- [ ] Видео подключено по правилам (→ applied/video.md)

View File

@@ -0,0 +1,31 @@
---
title: Подключить стор к компоненту
---
# Подключить стор к компоненту
Инструкция по подключению стора к React-компоненту.
## Прочитай перед началом
- applied/stores.md — правила сторов: подписка, селекторы
## Шаги
1. Определи нужен ли стор:
- Локальное состояние → `useState` / `useReducer`
- Глобальное состояние → стор
2. Если стор не существует — создай его (→ triggers/develop/create-store.md).
3. Подключи стор в компоненте через селектор (→ applied/stores.md).
## Смежные триггеры
- triggers/develop/create-store.md — создание нового стора
- triggers/develop/create-hook.md — хук-обёртка над стором
## Проверь себя
- [ ] Используется селектор, а не подписка на весь стор
- [ ] Выбор локальное/глобальное состояние обоснован

View File

@@ -0,0 +1,38 @@
---
title: Создать компонент
---
# Создать компонент
Инструкция по созданию React-компонента в проекте. Определи слой, сгенерируй из шаблона, реализуй по правилам.
## Прочитай перед началом
- applied/components.md — правила компонентов: структура файлов, пропсы, документирование
- basics/naming.md — именование файла и экспортов
## Шаги
1. Определи слой компонента по его назначению (→ basics/architecture.md):
- `ui/` — переиспользуемый UI без бизнес-логики
- `business/` — бизнес-домен с логикой и UI
- `widgets/` — составной блок, не привязанный к домену
- `screens/{name}/parts/` — локальный блок одной страницы
2. Сгенерируй модуль из шаблона (→ triggers/develop/generate-module.md).
3. Реализуй компонент по правилам (→ applied/components.md).
4. Если нужны стили — см. triggers/develop/style-component.md.
## Смежные триггеры
- triggers/develop/style-component.md — стилизация компонента
- triggers/develop/add-icon.md — добавление иконки в компонент
- triggers/develop/generate-module.md — генерация из шаблона
## Проверь себя
- [ ] Компонент создан из шаблона, не вручную
- [ ] Файл и экспорт именованы по конвенции (→ basics/naming.md)
- [ ] Пропсы типизированы (→ basics/typing.md)

View File

@@ -0,0 +1,34 @@
---
title: Создать сущность
---
# Создать сущность
Инструкция по созданию бизнес-модуля на слое `business/`. Сущность — бизнес-домен с UI-представлением и моделью данных.
## Прочитай перед началом
- basics/architecture.md — слои и зависимости
- applied/components.md — правила компонентов
## Шаги
1. Сгенерируй модуль из шаблона `business` (→ triggers/develop/generate-module.md).
2. Определи модель данных — типы в `types/`.
3. Реализуй UI-компонент сущности.
4. Настрой публичный API — экспорт через `index.ts`.
## Смежные триггеры
- triggers/develop/create-component.md — UI-компонент сущности
- triggers/develop/create-store.md — стор для сущности
- triggers/develop/generate-module.md — генерация из шаблона
## Проверь себя
- [ ] Модуль создан из шаблона `business`
- [ ] Модель данных определена — типы в `types/`
- [ ] Публичный API настроен — экспорт через `index.ts`

View File

@@ -0,0 +1,37 @@
---
title: Создать фичу
---
# Создать фичу
Инструкция по созданию бизнес-модуля на слое `business/`. Фича — самодостаточный блок с бизнес-логикой и UI.
## Прочитай перед началом
- basics/architecture.md — слои и зависимости
- applied/components.md — правила компонентов
## Шаги
1. Сгенерируй модуль из шаблона `business` (→ triggers/develop/generate-module.md).
2. Реализуй компонент фичи (→ applied/components.md).
3. Если нужен стор — создай в `stores/` (→ triggers/develop/create-store.md).
4. Если нужны хуки — создай в `hooks/` (→ triggers/develop/create-hook.md).
5. Настрой публичный API — экспорт через `index.ts`.
## Смежные триггеры
- triggers/develop/create-component.md — компонент внутри фичи
- triggers/develop/create-store.md — стор для фичи
- triggers/develop/create-hook.md — хук для фичи
- triggers/develop/generate-module.md — генерация из шаблона
## Проверь себя
- [ ] Модуль создан из шаблона `business`
- [ ] Публичный API настроен — экспорт через `index.ts`
- [ ] Cross-domain зависимости реализованы через фабрику (→ basics/architecture.md)

View File

@@ -0,0 +1,36 @@
---
title: Создать хук
---
# Создать хук
Инструкция по созданию кастомного React-хука. Определи где он живёт, реализуй по правилам.
## Прочитай перед началом
- applied/hooks.md — правила хуков
- basics/naming.md — именование (префикс `use`)
- basics/typing.md — типизация параметров и возврата
## Шаги
1. Определи область хука:
- Утилитарный (не привязан к бизнес-логике) → `shared/hooks/`
- Привязан к фиче/сущности → `model/` внутри модуля
2. Создай файл с именем `use-{name}.ts`.
3. Реализуй хук по правилам (→ applied/hooks.md).
4. Экспортируй через публичный API модуля.
## Смежные триггеры
- triggers/develop/create-component.md — если хук используется в новом компоненте
- triggers/develop/connect-store.md — если хук подключает стор
## Проверь себя
- [ ] Имя начинается с `use` (→ basics/naming.md)
- [ ] Параметры и возвращаемое значение типизированы
- [ ] Хук экспортирован через публичный API модуля

View File

@@ -0,0 +1,34 @@
---
title: Создать layout
---
# Создать layout
Инструкция по созданию layout.tsx в Next.js App Router.
## Прочитай перед началом
- applied/page-level.md — правила layout.tsx: провайдеры, metadata, вёрстка
- applied/project-structure.md — структура `src/app/`
## Шаги
1. Определи уровень layout:
- Корневой (`src/app/layout.tsx`) — провайдеры, глобальные стили, metadata
- Вложенный (`src/app/{route}/layout.tsx`) — layout для группы страниц
2. Создай `layout.tsx` в нужном маршруте.
3. Вёрстку layout-обёрток вынеси в слой `layouts/` (→ applied/page-level.md).
4. Layout содержит только провайдеры и вызов layout-компонента — не вёрстку.
## Смежные триггеры
- triggers/develop/create-page.md — страницы внутри layout
- triggers/develop/create-component.md — layout-компонент в `layouts/`
## Проверь себя
- [ ] Вёрстка вынесена в layout-компонент в `layouts/`
- [ ] layout.tsx содержит только провайдеры и вызов layout-компонента

View File

@@ -0,0 +1,36 @@
---
title: Создать страницу
---
# Создать страницу
Инструкция по добавлению нового route в Next.js проект. Страница — это экран + page.tsx.
## Прочитай перед началом
- applied/page-level.md — правила файлов роутинга: page.tsx, layout.tsx, metadata
- applied/project-structure.md — где располагаются файлы
## Шаги
1. Сгенерируй экран из шаблона `screen` в `src/screens/` (→ triggers/develop/generate-module.md).
2. Заполни экран логикой и стилями.
3. Создай `page.tsx` в нужном маршруте `src/app/`.
- page.tsx тонкий: только `metadata` и рендер экрана
- Никакой логики, стилей и хуков в page.tsx
4. Добавь `metadata` с `title` (→ applied/page-level.md).
## Смежные триггеры
- triggers/develop/generate-module.md — генерация экрана из шаблона
- triggers/develop/create-layout.md — если нужен новый layout для маршрута
- triggers/develop/create-component.md — компоненты внутри экрана
## Проверь себя
- [ ] Экран создан из шаблона `screen` в `src/screens/`
- [ ] page.tsx тонкий — только metadata и рендер экрана
- [ ] metadata содержит title и description

View File

@@ -0,0 +1,52 @@
---
title: Создать проект
scope: applied
keywords: [создать проект, новый проект, tiged, шаблон проекта, init]
when: "Создание нового Next.js проекта из шаблона"
---
# Создать проект
Инструкция по созданию нового Next.js проекта из готового шаблона. Проект готов к разработке сразу после установки зависимостей.
## Прочитай перед началом
- basics/getting-started.md — знакомство со стеком и особенностями проекта
- applied/project-structure.md — структура папок и файлов
## Шаги
1. Создай проект из шаблона:
```bash
npx tiged git@gromlab.ru:templates/nextjs.git my-app
cd my-app
npm install
```
2. Ознакомься со структурой проекта (→ applied/project-structure.md).
3. Настрой VS Code (→ triggers/develop/setup-vscode.md).
## Что входит в шаблон
- Next.js + TypeScript (App Router)
- Mantine UI + PostCSS Modules
- Biome (линтинг и форматирование)
- Zustand, SWR
- Структура SLM Design (`screens/`, `layouts/`, `widgets/`, `business/`, `infrastructure/`, `ui/`, `shared/`)
- Шаблоны генерации (`.templates/`)
- Конфигурация VS Code (`.vscode/`)
- CSS-токены (цвета, отступы, радиусы, медиа)
- Open Graph метаданные
## Смежные триггеры
- triggers/develop/setup-vscode.md — настройка редактора
- triggers/develop/create-page.md — добавление первой страницы
## Проверь себя
- [ ] Проект создан из шаблона через `npx tiged`
- [ ] Зависимости установлены
- [ ] VS Code настроен (→ triggers/develop/setup-vscode.md)

View File

@@ -0,0 +1,36 @@
---
title: Создать стор
---
# Создать стор
Инструкция по созданию стора для управления состоянием. Определи область, сгенерируй из шаблона.
## Прочитай перед началом
- applied/stores.md — правила сторов
- basics/naming.md — именование
- basics/typing.md — типизация состояния и экшенов
## Шаги
1. Определи область стора:
- Глобальный → `shared/model/`
- Привязан к фиче/сущности → `model/` внутри модуля
2. Сгенерируй из шаблона `store` (→ triggers/develop/generate-module.md).
3. Реализуй стор по правилам (→ applied/stores.md).
4. Экспортируй через публичный API модуля.
## Смежные триггеры
- triggers/develop/connect-store.md — подключение стора к компоненту
- triggers/develop/generate-module.md — генерация из шаблона
## Проверь себя
- [ ] Стор создан из шаблона `store`
- [ ] Состояние и экшены типизированы
- [ ] Стор экспортирован через публичный API модуля

View File

@@ -0,0 +1,32 @@
---
title: Создать виджет
---
# Создать виджет
Инструкция по созданию модуля на слое `widgets/`. Виджет — композиция фичей и сущностей.
## Прочитай перед началом
- basics/architecture.md — слои и зависимости
- applied/components.md — правила компонентов
## Шаги
1. Сгенерируй модуль из шаблона `widget` (→ triggers/develop/generate-module.md).
2. Скомпонуй виджет из существующих фичей и сущностей.
3. Настрой публичный API — экспорт через `index.ts`.
## Смежные триггеры
- triggers/develop/create-feature.md — если нужна новая фича для виджета
- triggers/develop/create-component.md — UI-компоненты внутри виджета
- triggers/develop/generate-module.md — генерация из шаблона
## Проверь себя
- [ ] Виджет создан из шаблона `widget`
- [ ] Композиция из существующих фичей/сущностей, не дублирует логику
- [ ] Публичный API настроен — экспорт через `index.ts`

View File

@@ -0,0 +1,36 @@
---
title: Сгенерировать модуль из шаблона
---
# Сгенерировать модуль из шаблона
Инструкция по генерации модуля из шаблонов `.templates/`. Ручное создание файловой структуры запрещено.
## Прочитай перед началом
- applied/templates-generation.md — шаблоны, синтаксис, инструменты генерации
## Шаги
1. Определи тип модуля и шаблон (→ applied/templates-generation.md):
- Компонент → `component`
- Бизнес-модуль → `business`
- Виджет → `widget`
- Layout → `layout`
- Экран → `screen`
- Стор → `store`
2. Запусти генерацию (→ applied/templates-generation.md).
3. Если подходящего шаблона нет — сначала создай шаблон, затем генерируй.
## Смежные триггеры
- triggers/develop/create-component.md — после генерации компонента
- triggers/develop/create-feature.md — после генерации бизнес-модуля
- triggers/develop/create-store.md — после генерации стора
## Проверь себя
- [ ] Модуль создан из шаблона, не вручную
- [ ] Выбран правильный шаблон для типа модуля (→ applied/templates-generation.md)

View File

@@ -0,0 +1,24 @@
---
title: Настроить VS Code
---
# Настроить VS Code
Инструкция по настройке VS Code для работы с проектом.
## Прочитай перед началом
- applied/vscode.md — настройки, расширения, сниппеты
## Шаги
1. Установи рекомендованные расширения (→ applied/vscode.md).
2. Проверь настройки `.vscode/settings.json`.
3. Настрой сниппеты при необходимости.
## Проверь себя
- [ ] Рекомендованные расширения установлены
- [ ] Настройки `.vscode/settings.json` проверены

View File

@@ -0,0 +1,35 @@
---
title: Стилизовать компонент
---
# Стилизовать компонент
Инструкция по выбору подхода к стилизации и написанию стилей для компонента.
## Прочитай перед началом
- applied/styles.md — правила CSS: PostCSS Modules, токены, медиа-запросы
## Шаги
1. Определи подход (→ applied/styles.md):
- Mantine-компонент → используй пропсы Mantine, не пиши CSS
- CSS-токены достаточно → используй токены
- Нужна кастомная стилизация → PostCSS Modules
2. Создай файл стилей `{component-name}.module.css` рядом с компонентом.
3. Напиши стили по правилам (→ applied/styles.md).
4. Подключи стили в компоненте через `cl()`.
## Смежные триггеры
- triggers/develop/create-component.md — если компонент ещё не создан
- triggers/develop/add-icon.md — если нужна иконка в компоненте
## Проверь себя
- [ ] Приоритет стилизации соблюдён: Mantine → токены → PostCSS Modules
- [ ] Нет инлайн-стилей и магических значений
- [ ] Файл стилей именован `{component-name}.module.css`