code-ai-installer 1.5.6 → 2.1.0

package/domains/content/.agents/skills/platform-visual-specs/SKILL.md

@@ -0,0 +1,356 @@
+---
+name: platform-visual-specs
+description: Полный справочник визуальных спецификаций — фото, видео, рекламные форматы, safe zones, accessibility, dark mode
+---
+# Platform Visual Specs — Спецификации визуалов по платформам
+
+> **Дата актуализации:** 2026-Q1. Платформы регулярно меняют спецификации — при сомнениях проверять актуальные данные через веб-поиск.
+
+## Когда использовать
+- При **подготовке визуального контента** для конкретной платформы.
+- При **создании `$visual-brief`** — указать точные размеры и ограничения.
+- При **`$image-prompt-engineering`** — выбрать ratio для AI-генерации.
+- При **`$platform-compliance`** — технические спеки для проверки.
+- При **кросс-постинге** — адаптация размеров под другую платформу.
+
+## Вход
+
+| Поле | Обязательно | Описание |
+|------|:-----------:|----------|
+| Платформа | ✅ | Где будет опубликовано |
+| Тип контента | ✅ | Пост / Stories / Reels / Carousel / видео / обложка / реклама |
+| Organic / Paid | ✅ | Рекламные форматы имеют отдельные требования |
+| Текст на изображении | ⬚ | Если да — учесть правило 20% для рекламы и safe zones |
+
+## Справочник спецификаций
+
+### Instagram
+
+#### Фото / статичные
+
+| Тип | Размер (px) | Ratio | Макс. файл | Формат | Safe zone |
+|-----|------------|-------|-----------|--------|-----------|
+| Feed Square | 1080×1080 | 1:1 | 30MB | JPG/PNG | 50px от краёв |
+| Feed Portrait | 1080×1350 | 4:5 | 30MB | JPG/PNG | 50px от краёв |
+| Feed Landscape | 1080×566 | 1.91:1 | 30MB | JPG/PNG | 50px от краёв |
+| Carousel (до 10 слайдов) | 1080×1080 или 1080×1350 | 1:1 или 4:5 | 30MB/слайд | JPG/PNG | Единый ratio для всех слайдов |
+| Stories | 1080×1920 | 9:16 | 30MB | JPG/PNG | 250px сверху, 320px снизу (UI элементы) |
+| Reels Cover | 1080×1920 | 9:16 | — | JPG/PNG | Центральная зона 1080×1080 видна в сетке |
+| Profile Photo | 320×320 | 1:1 | — | JPG/PNG | Круговая обрезка |
+| Highlights Cover | 161×161 | 1:1 | — | JPG/PNG | Круговая обрезка |
+
+#### Видео
+
+| Тип | Разрешение | Ratio | Длительность | Макс. файл | Codec | FPS |
+|-----|-----------|-------|-------------|-----------|-------|-----|
+| Reels | 1080×1920 | 9:16 | 15-90 сек (рекомендуется ≤ 60) | 4GB | H.264 | 30 |
+| Stories Video | 1080×1920 | 9:16 | ≤ 15 сек/слайд | 4GB | H.264 | 30 |
+| Feed Video | 1080×1080 или 1080×1350 | 1:1 или 4:5 | ≤ 60 мин | 4GB | H.264 | 30 |
+
+#### Реклама (Paid)
+
+| Тип | Размер | Ratio | Текст на изображении | Особенности |
+|-----|--------|-------|---------------------|-------------|
+| Feed Ad | 1080×1080 | 1:1 | ≤ 20% (рекомендация, не блокирует) | Caption: 125 символов primary text |
+| Stories Ad | 1080×1920 | 9:16 | ≤ 20% | CTA кнопка внизу — safe zone 320px |
+| Carousel Ad | 1080×1080 | 1:1 | ≤ 20% | 2-10 карточек |
+
+---
+
+### TikTok
+
+#### Видео
+
+| Тип | Разрешение | Ratio | Длительность | Макс. файл | Codec | FPS |
+|-----|-----------|-------|-------------|-----------|-------|-----|
+| Video | 1080×1920 | 9:16 | 15 сек — 10 мин | 287MB (iOS) / 72MB (Android) | H.264 | 30 |
+| Photo Carousel | 1080×1920 | 9:16 | — | — | JPG/PNG | ≤ 35 фото |
+
+| Safe zone | Описание |
+|-----------|----------|
+| Верх | 150px — username и описание |
+| Низ | 270px — caption, музыка, кнопки |
+| Право | 100px — иконки (like, comment, share) |
+
+---
+
+### YouTube
+
+| Тип | Размер (px) | Ratio | Макс. файл | Формат |
+|-----|------------|-------|-----------|--------|
+| Thumbnail | 1280×720 | 16:9 | 2MB | JPG/PNG |
+| Video (рекомендуемое) | 1920×1080 | 16:9 | 256GB / 12 часов | MP4 (H.264) |
+| Shorts | 1080×1920 | 9:16 | — | MP4, ≤ 60 сек |
+| Channel Banner | 2560×1440 | — | 6MB | JPG/PNG |
+| Channel Avatar | 800×800 | 1:1 | — | JPG/PNG |
+| End Screen | 1920×1080 | 16:9 | — | Элементы в последние 5-20 сек |
+
+| Видео спеки | Рекомендация |
+|-------------|-------------|
+| Codec | H.264 |
+| Audio | AAC, 48kHz |
+| FPS | 24-60 (30 стандарт) |
+| Bitrate | 8 Mbps (1080p), 35-45 Mbps (4K) |
+
+| Safe zone (Thumbnail) | Описание |
+|----------------------|----------|
+| Правый нижний угол | Длительность видео перекрывает ~100×30px |
+| Текст | Крупный (≥ 60px), читаемый на мобильном |
+
+---
+
+### LinkedIn
+
+| Тип | Размер (px) | Ratio | Макс. файл | Формат |
+|-----|------------|-------|-----------|--------|
+| Post Image | 1200×627 | 1.91:1 | 10MB | JPG/PNG |
+| Post Square | 1080×1080 | 1:1 | 10MB | JPG/PNG |
+| Post Vertical | 627×1200 | 1:2 | 10MB | JPG/PNG |
+| Carousel (PDF) | 1080×1080 или 1920×1080 | 1:1 или 16:9 | 100MB | PDF, ≤ 300 стр |
+| Article Cover | 1920×1080 | 16:9 | — | JPG/PNG |
+| Profile Photo | 400×400 | 1:1 | 8MB | JPG/PNG |
+| Banner | 1584×396 | 4:1 | 8MB | JPG/PNG |
+
+| Видео | Спеки |
+|-------|-------|
+| Разрешение | 256×144 — 4096×2304 |
+| Длительность | 3 сек — 10 мин |
+| Макс. файл | 5GB |
+| Codec | H.264, AAC |
+| FPS | 30 |
+
+---
+
+### Telegram
+
+| Тип | Размер (px) | Макс. файл | Формат | Особенности |
+|-----|------------|-----------|--------|-------------|
+| Фото в посте | рекомендуется 800×400+ | 5MB (сжатие) / 20MB (как файл) | JPG/PNG | Горизонтальные лучше в превью |
+| Фото-альбом | — | 5MB/фото | JPG/PNG | ≤ 10 фото |
+| Avatar канала | 640×640 | — | JPG/PNG | Круговая обрезка |
+| GIF | — | 10MB | GIF/MP4 | — |
+| Видео | — | 2GB | MP4 | H.264, AAC |
+| Video Note (кружок) | 384×384 | — | MP4 | Круговое, ≤ 60 сек |
+| Стикеры | 512×512 | — | WebP/TGS/WebM | — |
+
+---
+
+### Twitter / X
+
+| Тип | Размер (px) | Ratio | Макс. файл | Формат |
+|-----|------------|-------|-----------|--------|
+| In-stream Image | 1600×900 | 16:9 | 5MB | JPG/PNG/GIF |
+| Card Image | 800×418 | 1.91:1 | — | JPG/PNG |
+| Profile Photo | 400×400 | 1:1 | 2MB | JPG/PNG |
+| Header | 1500×500 | 3:1 | 5MB | JPG/PNG |
+
+| Видео | Спеки |
+|-------|-------|
+| Разрешение | 1920×1200 макс |
+| Длительность | ≤ 2:20 (бесплатно), ≤ 60 мин (Premium) |
+| Макс. файл | 512MB |
+| FPS | 30-60 |
+
+---
+
+### Facebook
+
+| Тип | Размер (px) | Ratio | Макс. файл | Формат |
+|-----|------------|-------|-----------|--------|
+| Post Image | 1200×630 | 1.91:1 | 30MB | JPG/PNG |
+| Post Square | 1080×1080 | 1:1 | 30MB | JPG/PNG |
+| Stories | 1080×1920 | 9:16 | 30MB | JPG/PNG |
+| Cover Photo | 820×312 | 2.63:1 | — | JPG/PNG |
+| Profile Photo | 170×170 | 1:1 | — | JPG/PNG |
+| Event Cover | 1200×628 | 1.91:1 | — | JPG/PNG |
+
+| Реклама (Paid) | Текст на изображении |
+|---------------|---------------------|
+| Feed Ad | ≤ 20% текста (рекомендация, влияет на delivery) |
+| Stories Ad | ≤ 20%, safe zone 250px сверху/320px снизу |
+
+---
+
+### Pinterest
+
+| Тип | Размер (px) | Ratio | Макс. файл | Формат |
+|-----|------------|-------|-----------|--------|
+| Standard Pin | 1000×1500 | 2:3 | 20MB | JPG/PNG |
+| Long Pin | 1000×2100 | 1:2.1 | 20MB | JPG/PNG |
+| Square Pin | 1000×1000 | 1:1 | 20MB | JPG/PNG |
+| Video Pin | 1080×1920 | 9:16, 1:1, 2:3 | 2GB | MP4, MOV |
+| Profile Photo | 165×165 | 1:1 | — | JPG/PNG |
+
+---
+
+### Web / OG
+
+| Тип | Размер (px) | Ratio | Формат | Особенности |
+|-----|------------|-------|--------|-------------|
+| OG Image | 1200×630 | 1.91:1 | JPG/PNG | Превью при шаринге ссылки |
+| Favicon | 32×32 / 192×192 | 1:1 | ICO/PNG | Браузерная вкладка |
+| Blog Hero | 1200×600+ | 2:1 | JPG/PNG/WebP | Рекомендуется WebP для скорости |
+
+## Accessibility и Dark Mode
+
+### Accessibility
+
+| Требование | Описание | Как проверить |
+|-----------|----------|---------------|
+| **Alt-текст** | Описание изображения для screen readers | Заполнить при публикации (все платформы поддерживают) |
+| **Контраст текста** | Коэффициент контраста ≥ 4.5:1 (AA) для текста на изображении | Инструменты: WebAIM Contrast Checker, Figma plugins |
+| **Размер текста** | Текст на изображении ≥ 16px (читаем на мобильном) | Визуальная проверка на телефоне |
+| **Не только цветом** | Информация не должна передаваться только цветом | Иконки, паттерны, подписи дополняют цвет |
+
+### Dark Mode
+
+| Элемент | Проблема | Решение |
+|---------|---------|---------|
+| Логотип на белом фоне | На тёмном фоне — белый прямоугольник | Использовать прозрачный фон (PNG) или тёмную версию лого |
+| Светлые изображения | Слепят в тёмной теме | Добавить тонкую рамку (1px border) или мягкий drop shadow |
+| Текст на изображении | Белый текст на светлом изображении не виден в light mode (и наоборот) | Добавлять подложку / overlay под текст |
+| Инфографика | Цвета могут сливаться с тёмным фоном | Проверять preview в обоих режимах |
+
+## Протокол
+
+### Шаг 1 — Определение контекста
+1. Определить платформу.
+2. Определить тип контента (пост / видео / stories / carousel / реклама).
+3. Определить organic / paid.
+
+### Шаг 2 — Выбор спецификаций
+1. Найти спеки в справочнике по платформе и типу.
+2. Зафиксировать: размер, ratio, формат, макс. файл, safe zone.
+3. Если видео — добавить: codec, FPS, bitrate, длительность.
+4. Если реклама — проверить рекламные спеки (правило 20% текста, CTA-зоны).
+
+### Шаг 3 — Safe zone проверка
+1. Убедиться, что ключевой контент (текст, лицо, лого) не попадает в safe zone.
+2. Для Reels/Stories — учесть UI элементы платформы.
+3. Для YouTube thumbnail — учесть перекрытие длительности.
+
+### Шаг 4 — Accessibility и Dark Mode
+1. Проверить контраст текста (≥ 4.5:1).
+2. Подготовить alt-текст.
+3. Проверить визуал в dark mode (если применимо).
+
+### Шаг 5 — Кросс-платформенные адаптации
+Если контент для нескольких платформ — подготовить размеры для каждой:
+
+| Платформа | Рекомендуемый формат для AI-генерации | MJ параметр |
+|-----------|--------------------------------------|-------------|
+| Instagram Feed | 1080×1350 (4:5) | `--ar 4:5` |
+| Instagram Stories/Reels | 1080×1920 (9:16) | `--ar 9:16` |
+| LinkedIn | 1200×627 (1.91:1) | `--ar 191:100` |
+| YouTube Thumbnail | 1280×720 (16:9) | `--ar 16:9` |
+| Telegram | 800×400 (2:1) | `--ar 2:1` |
+| Pinterest | 1000×1500 (2:3) | `--ar 2:3` |
+| OG Image | 1200×630 (1.91:1) | `--ar 191:100` |
+
+## Валидация (Quality Gate)
+
+Спецификации считаются корректно применёнными если:
+
+- [ ] Размер визуала соответствует спекам платформы
+- [ ] Ratio правильный
+- [ ] Формат файла поддерживается
+- [ ] Вес файла в лимите
+- [ ] Safe zone учтён (ключевой контент не обрезается UI)
+- [ ] Текст на изображении читаем (≥ 16px, контраст ≥ 4.5:1)
+- [ ] Alt-текст подготовлен
+- [ ] Dark mode проверен (если применимо)
+- [ ] Рекламные ограничения учтены (если paid)
+
+## Handoff
+
+| Потребитель | Как использует |
+|-------------|---------------|
+| `$visual-brief` | Размеры и ограничения для конкретного визуала |
+| `$image-prompt-engineering` | Ratio для AI-генерации (MJ `--ar` параметр) |
+| `$platform-compliance` | Технические спеки для compliance-проверки |
+| `$content-release-gate` | Проверка размеров в финальном чеклисте |
+| Visual Concept (агент) | Технические требования для создания визуала |
+
+## Интеграция с другими скилами
+
+| Скил | Взаимодействие |
+|------|----------------|
+| `$visual-brief` | **Потребитель:** размеры → visual brief |
+| `$image-prompt-engineering` | **Потребитель:** ratio → промпт |
+| `$platform-strategy` | **Источник:** платформы → какие спеки нужны |
+| `$platform-compliance` | **Комплемент:** visual specs = размеры, compliance = правила |
+| `$brand-guidelines` | **Источник:** стиль, но этот скил даёт технические размеры |
+| `$moodboard` | **Потребитель:** спеки информируют визуальный стиль |
+
+## Anti-patterns
+
+| Ошибка | Почему плохо | Как правильно |
+|--------|-------------|---------------|
+| Один размер для всех платформ | Обрезается, растягивается, выглядит непрофессионально | Свой размер для каждой платформы |
+| Игнорирование safe zone | Текст скрыт под UI платформы | Проверять safe zone для каждого формата |
+| Текст мелкий (< 16px) | Нечитаем на мобильном — 60%+ трафика | Минимум 16px, лучше 24px+ |
+| Не проверен dark mode | Лого/текст сливается с фоном | Проверять в обоих режимах |
+| Тяжёлые файлы | Медленная загрузка, отклонение платформой | Оптимизировать: WebP для веба, сжатие для соцсетей |
+| Спеки 2023 года | Платформы обновили требования | Проверять актуальность, следить за обновлениями |
+| Рекламные спеки для organic | Правило 20% текста — для рекламы, не для organic | Разделять organic и paid |
+| Нет alt-текста | Недоступно для screen readers, хуже SEO | Всегда добавлять alt-текст |
+
+## Шаблон вывода
+
+```
+### Спецификации визуалов — [Задача / Контент]
+
+**Платформа:** [платформа]
+**Тип контента:** [пост / stories / reels / carousel / видео / реклама]
+**Organic / Paid:** [тип]
+
+---
+
+#### Выбранные спецификации
+
+| Параметр | Значение |
+|----------|----------|
+| Размер | [W×H px] |
+| Ratio | [ratio] |
+| Формат | [JPG/PNG/MP4/WebP] |
+| Макс. файл | [N MB] |
+| Codec (видео) | [H.264 / N/A] |
+| FPS (видео) | [30 / N/A] |
+| Длительность (видео) | [секунды / N/A] |
+
+#### Safe Zone
+
+| Зона | Отступ | Что перекрывается |
+|------|--------|-------------------|
+| Верх | [N px] | [username, время, UI] |
+| Низ | [N px] | [caption, кнопки, CTA] |
+| Право | [N px] | [иконки like/share] |
+| Лево | [N px] | [—] |
+
+#### Accessibility
+
+| Параметр | Статус | Значение |
+|----------|--------|----------|
+| Alt-текст | ✅/❌ | [текст] |
+| Контраст текста | ✅/❌ | [ratio:1] |
+| Читаемость на мобильном | ✅/❌ | [размер шрифта] |
+| Dark mode | ✅/❌ | [проверен / не проверен] |
+
+#### Рекламные ограничения (если paid)
+
+| Ограничение | Статус |
+|------------|--------|
+| Текст ≤ 20% | ✅/❌/N/A |
+| CTA safe zone | ✅/❌/N/A |
+
+---
+
+#### Кросс-платформенные размеры (если нужны адаптации)
+
+| Платформа | Размер | Ratio | MJ параметр |
+|-----------|--------|-------|-------------|
+| [платформа 1] | [W×H] | [ratio] | [--ar X:Y] |
+| [платформа 2] | [W×H] | [ratio] | [--ar X:Y] |
+
+**→ Следующий шаг:** передать в `$visual-brief` / `$image-prompt-engineering` / Visual Concept
+```

package/domains/content/.agents/skills/platform-visual-specs/agents/claude.json

@@ -0,0 +1,10 @@
+{
+  "name": "platform-visual-specs",
+  "display_name": "Спецификации визуалов",
+  "description": "Полный справочник визуальных спецификаций — фото, видео, рекламные форматы, safe zones, accessibility, dark mode",
+  "default_prompt": "Используй $platform-visual-specs, когда задача относится к навыку \"Спецификации визуалов\".",
+  "triggers": ["platform-visual-specs", "Спецификации визуалов", "Полный справочник визуальных спецификаций — фото, видео, рекламные форматы, safe zones, accessibility, dark mode"],
+  "capabilities": ["platform-visual-specs"],
+  "tools": [],
+  "implicit_invocation": true
+}

package/domains/content/.agents/skills/platform-visual-specs/agents/copilot.json

@@ -0,0 +1,10 @@
+{
+  "name": "platform-visual-specs",
+  "display_name": "Спецификации визуалов",
+  "description": "Полный справочник визуальных спецификаций — фото, видео, рекламные форматы, safe zones, accessibility, dark mode",
+  "default_prompt": "Используй $platform-visual-specs, когда задача относится к навыку \"Спецификации визуалов\".",
+  "triggers": ["platform-visual-specs", "Спецификации визуалов", "Полный справочник визуальных спецификаций — фото, видео, рекламные форматы, safe zones, accessibility, dark mode"],
+  "capabilities": ["platform-visual-specs"],
+  "tools": [],
+  "implicit_invocation": true
+}

package/domains/content/.agents/skills/platform-visual-specs/agents/gemini.json

@@ -0,0 +1,10 @@
+{
+  "name": "platform-visual-specs",
+  "display_name": "Спецификации визуалов",
+  "description": "Полный справочник визуальных спецификаций — фото, видео, рекламные форматы, safe zones, accessibility, dark mode",
+  "default_prompt": "Используй $platform-visual-specs, когда задача относится к навыку \"Спецификации визуалов\".",
+  "triggers": ["platform-visual-specs", "Спецификации визуалов", "Полный справочник визуальных спецификаций — фото, видео, рекламные форматы, safe zones, accessibility, dark mode"],
+  "capabilities": ["platform-visual-specs"],
+  "tools": [],
+  "implicit_invocation": true
+}

package/domains/content/.agents/skills/platform-visual-specs/agents/openai.yaml

@@ -0,0 +1,8 @@
+interface:
+  display_name: "Спецификации визуалов"
+  short_description: "Технические спецификации визуалов по платформам: размеры, форматы, ограничения"
+  default_prompt: "Используй $platform-visual-specs, когда задача относится к навыку \"Спецификации визуалов\"."
+dependencies:
+  tools: []
+policy:
+  allow_implicit_invocation: true

package/domains/content/.agents/skills/platform-visual-specs/agents/qwen.json

@@ -0,0 +1,10 @@
+{
+  "name": "platform-visual-specs",
+  "display_name": "Спецификации визуалов",
+  "description": "Полный справочник визуальных спецификаций — фото, видео, рекламные форматы, safe zones, accessibility, dark mode",
+  "default_prompt": "Используй $platform-visual-specs, когда задача относится к навыку \"Спецификации визуалов\".",
+  "triggers": ["platform-visual-specs", "Спецификации визуалов", "Полный справочник визуальных спецификаций — фото, видео, рекламные форматы, safe zones, accessibility, dark mode"],
+  "capabilities": ["platform-visual-specs"],
+  "tools": [],
+  "implicit_invocation": true
+}

package/domains/content/.agents/skills/platform-visual-specs/agents/skill.yaml

@@ -0,0 +1,20 @@
+version: 1
+name: "platform-visual-specs"
+display_name: "Спецификации визуалов"
+description: "Полный справочник визуальных спецификаций — фото, видео, рекламные форматы, safe zones, accessibility, dark mode"
+default_prompt: "Используй $platform-visual-specs, когда задача относится к навыку \"Спецификации визуалов\"."
+triggers:
+  - "platform-visual-specs"
+  - "Спецификации визуалов"
+  - "Полный справочник визуальных спецификаций — фото, видео, рекламные форматы, safe zones, accessibility, dark mode"
+capabilities:
+  - "platform-visual-specs"
+tools: []
+invocation:
+  explicit: true
+  implicit: true
+localization:
+  default_locale: "ru"
+  available_locales:
+    - "ru"
+    - "en"