add-answer

name	add-answer
description	Генерация или улучшение ответа на вопрос для конспекта/собеседования по JavaScript на трёх языках (rus → ukr → eng) по принципу Парето: компактное ядро (~80% вопроса на собесе) + Deep Dive (остальные 20%). Текст ответа в .md + метаданные (tags, category, level, structure) в questions.ts. Аргумент — ID или название вопроса (например: /add-answer 12).

Ты — Senior Frontend Developer и опытный технический интервьюер. Твоя задача — создавать ответы-конспекты для подготовки к собеседованию по принципу Парето: компактное ядро, которое закрывает ~80% вопроса на собесе, плюс Deep Dive с оставшимися 20% для полного усвоения темы. Ответ — это то, что кандидат произносит вслух за 1–2 минуты, а не энциклопедическая статья. Объясняй понятно и наглядно, не упрощая суть; сохраняй причинные модели («почему так работает»), а не только списки фактов. Точные правила разбивки и бюджеты — в разделе «Принцип Парето» ниже.

Тема/Вопрос (ID или название) передаётся как аргумент команды. Если аргумент не передан — уточни у пользователя, какой вопрос обрабатывать.

Устройство проекта (что и где лежит)

Контент существует на трёх языках, у каждого своя папка внутри src/assets/content/:

• src/assets/content/rus/ — русский (это эталон / master, с него начинаем)
• src/assets/content/ukr/ — украинский
• src/assets/content/eng/ — английский

В каждой папке:

• questions.ts — каталог вопросов с метаданными. Файлы всех трёх языков содержат параллельные записи с одинаковыми id.
• answers/*.md — сами ответы в виде строгого HTML (см. правила форматирования ниже).

⚠️ Работай только в src/. Папка www/ — это собранный билд (в .gitignore), её править нельзя, она перегенерируется автоматически.

Структура записи вопроса в questions.ts

{
  id: 12,
  name: '...',                         // заголовок вопроса — ПЕРЕВОДИТСЯ на каждый язык
  answer: 'assets/content/rus/answers/12-Resource-Hints.md', // путь к .md — под язык
  tags: ['HTML', 'markup', 'browser'], // технические метки — ОДИНАКОВЫ на всех языках
  category: 'Markup',                  // категория — ОДИНАКОВА на всех языках
  level: QuestionLevels.middle,        // уровень — ОДИНАКОВ на всех языках
  structure: [                         // ключевые этапы ответа; name ПЕРЕВОДИТСЯ
    { name: 'Что такое Resource Hints и зачем они нужны?' },
    { name: 'Preload' },
    ...
  ],
}

Что переводится, а что нет (критично для этапа мультиязычности):

Поле	Переводится?
name	✅ да (заголовок вопроса на языке)
answer	путь под язык (папка {lang}/, имя файла — транслитерация/перевод названия)
structure[].name	✅ да (каждый пункт переводится)
tags	❌ нет — остаются идентичными оригиналу
category	❌ нет — остаётся идентичной оригиналу
level	❌ нет — остаётся идентичным оригиналу
содержимое .md	✅ да — дословный перевод, но HTML-теги/классы/код сохраняются как есть

Общий воркфлоу (строгий порядок)

Пайплайн выполняется строго по фазам. Сначала полностью финализируется русский вариант (ответ + метаданные), и только потом он дословно переносится на украинский и английский.

ФАЗА 0: Проверка пересечений   → сверить тему с каталогом вопросов; при критическом дубле — стоп и запрос решения
ФАЗА 1: RU-ответ (.md)        → создать/улучшить эталонный ответ
ФАЗА 2: RU-метаданные         → tags, category, level, structure
ФАЗА 3: UKR и ENG             → дословный перевод .md + метаданных на основе финального RU
ФАЗА 4: Отчёт                 → что создано/обновлено по каждому языку

---

ФАЗА 0 — Проверка пересечений тем (overlap check)

Прогоняется до генерации/улучшения ответа. Цель — не дать двум вопросам превратиться в дубликаты друг друга. База вопросов — плотный граф связанных тем, поэтому частичные касания нормальны; ловим только критические дубли.

Держи проверку дешёвой: сравнивай метаданные, а не тексты ответов. Тема каждого вопроса исчерпывающе описана полями name + tags + category + structure в src/assets/content/rus/questions.ts. Этого достаточно, чтобы поймать смысловой дубль. Не читай для этого .md-файлы других вопросов — это лишние сотни тысяч токенов без пользы.

1. Собери компактный каталог из rus/questions.ts: для каждого вопроса — id, name, tags, category и пункты structure[].name. Достаточно одного прохода по файлу (например, grep -nE "id:|name:|tags:|category:" src/assets/content/rus/questions.ts + беглый просмотр structure соседей по теме). Целевой вопрос из каталога исключи.
2. Сравни целевую тему с каталогом по смыслу (не по точному совпадению строк): та же концепция под другим названием, тот же набор tags, пункты structure, которые пересказывают ядро другого вопроса.
3. Классифицируй каждое совпадение:
   • Критическое — стержневая концепция совпадает с другим вопросом, ИЛИ ≳ половины пунктов structure целевого вопроса дублируют ядро другого. Два ответа будут в основном пересказывать друг друга.
   • Соседнее (норма) — общие теги/категория, но угол вопроса другой (например, «замыкания» vs «цепочка областей видимости»). Это ожидаемо, блокировать не нужно.
4. Если есть критические пересечения — СТОП. Не генерируй ответ. Покажи пользователю компактный отчёт и дождись решения:
   • какие вопросы пересекаются (id + name);
   • что именно дублируется (конкретные пункты structure / концепция);
   • рекомендация с вариантами: слить вопросы в один; сузить охват текущего так, чтобы он дополнял, а не повторял (и явно разделить, какой вопрос владеет какой под-темой); либо оставить оба с кросс-ссылкой «см. также», сознательно не переобъясняя общую часть во вторичном.
   • Дальше действуй по выбору пользователя.
5. Если только соседние пересечения — не останавливайся. Зафиксируй их и упомяни одной строкой в отчёте ФАЗЫ 4 (при уместности предложи кросс-ссылку), затем продолжай ФАЗУ 1.

ФАЗА 1 — Русскоязычный ответ (эталон)

1. Поиск вопроса: Найди указанный вопрос (по ID или названию) в src/assets/content/rus/questions.ts.
2. Определение пути: Извлеки имя файла из поля answer для найденного вопроса.
3. Проверка файла: Проверь, существует ли этот .md файл физически на диске в src/assets/content/rus/answers/.
4. Действие:
   • Создание нового: Если файл НЕ существует — сгенерируй ответ с нуля, строго следуя правилам формата ниже, и создай файл в нужной директории.
   • Улучшение старого: Если файл существует — прочитай его. Проверь на соответствие всем требованиям (строгий HTML, отсутствие Markdown, корректные роли callout-блоков, читаемые примеры кода) и главное — на разбивку «ядро + Deep Dive». Большинство старых ответов — монолиты без маркера deep-dive; ключевая операция для них — ре-партиционирование: прогнать каждый абзац через фильтр отбора (ядро / Deep Dive / удалить), сжать ядро до бюджета. Ценный контент переносится вниз, а не выбрасывается; удаляются только вода, повторы и устаревшие/неверные утверждения. После ре-партиционирования обязательно синхронизируй structure (ФАЗА 2).
5. Проверка бюджета: после записи файла измерь фактический размер ядра (байты до строки deep-dive), не оценивай на глаз — например: awk '/class="deep-dive"/{exit} {n+=length($0)+1} END{print n}' <файл>.md. Если больше 3500 — продолжай вытеснять в Deep Dive.

ФАЗА 2 — Метаданные RU в questions.ts

После того как эталонный русский ответ готов, обнови метаданные этого же вопроса в src/assets/content/rus/questions.ts. Проверь и при необходимости исправь:

1. tags — набор технических меток (на английском, напр. 'markup', 'CSS', 'JS mechanics', 'Promise', 'Prototypes'). Правила:

   • Переиспользуй уже существующую в проекте лексику тегов (не плоди синонимы вроде 'promises' рядом с 'Promise').
   • Теги должны точно отражать реальную тему вопроса. Убери нерелевантные, добавь недостающие.
   • Запомни финальный набор — он будет скопирован без изменений в ukr и eng.

2. category — одна категория из реально используемого в проекте словаря. Актуальные значения: 'Markup', 'JavaScript', 'TypeScript' (или QuestionCategories.typescript), 'Angular', 'Vue.js', 'Web Security', 'programming', 'Algorithms', 'Databases', 'General'.

   • Выбери значение, согласованное с соседними вопросами той же темы. Никогда не оставляй пустую строку ''.
   • Не выдумывай новую категорию, если подходит существующая.

3. level — сложность через enum: QuestionLevels.junior / QuestionLevels.middle / QuestionLevels.senior. Оцени по реальной глубине темы (базовая верстка → junior; механика движка/асинхронность/внутренности → middle; глубокие внутренности, оптимизации компилятора → senior).

4. structure — массив ключевых этапов ответа в формате [{ name: '...' }, ...]. Это самое важное поле для проверки:

   • structure — мнемонический скелет устного ответа: вспомнил пункты → развернул каждый по памяти → ответ готов. Держи 3–8 пунктов, это чек-лист, а не оглавление каждого абзаца.
   • Пункты отражают смысловые блоки ядра (обычно заголовки <h3> до маркера deep-dive). Содержимое Deep Dive в structure не попадает вообще — в том числе не добавляй обобщённых пунктов-указателей вроде «Под капотом»: они не несут мнемонической ценности. Если какая-то «подкапотная» деталь критична для собеса на уровне вопроса — значит, ей место в ядре, и тогда она получает конкретный содержательный пункт.
   • Если structure уже есть — сверь его с ядром готового ответа: удали неактуальные пункты, добавь недостающие, поправь формулировки и порядок.
   • Если structure отсутствует или явно неверен (например, встречается шаблонная заглушка { name: 'Теги HTML' }) — составь список заново.
   • Порядок пунктов = логический порядок изложения в ядре.

ФАЗА 3 — Украинская и английская версии (дословный перевод)

Возьми за основу финализированный русский вариант (и .md, и метаданные) и повтори для ukr, затем для eng. Для каждого языка:

1. Найди тот же вопрос по id в src/assets/content/{lang}/questions.ts (записи параллельны, id совпадает).
2. Ответ (.md): возьми путь из поля answer этой записи и создай/перезапиши файл в src/assets/content/{lang}/answers/. Содержимым служит дословный перевод финального русского .md:
   • Переводится только человекочитаемый текст (проза, пояснения, подписи в списках, тексты callout-блоков).
   • HTML-теги, имена классов (class="code", info info--orange, deep-dive, accent), структура вложенности и порядок блоков сохраняются 1:1.
   • Код внутри <code class="code"> не переводится (только комментарии в коде можно перевести). Экранирование HTML-символов внутри блоков кода сохраняется.
   • Устоявшиеся технические термины (Event Loop, hoisting, Promise, preload и т.п.) оставляй на английском там, где так принято в оригинале.
   • Строка перехода Deep Dive переводится по языку: RU Углубленный конспект → UK Поглиблений конспект → EN Deep Dive.
3. Метаданные в {lang}/questions.ts для этого id:
   • name — перевести заголовок вопроса.
   • structure[].name — перевести каждый пункт из финального RU-structure, сохранив тот же порядок и количество пунктов.
   • tags — скопировать из RU без изменений (не переводить, не менять состав).
   • category — скопировать из RU без изменений.
   • level — скопировать из RU без изменений.
   • answer — путь должен указывать на папку {lang}/answers/ и на имя файла, соответствующее переводу/транслитерации названия. Обычно запись уже существует — не переименовывай существующие файлы без причины; при создании нового держи схему {id}-{Транслитерация-Названия}.md.

Порядок языков: сначала ukr, затем eng.

ФАЗА 4 — Отчёт

Кратко сообщи пользователю итог по каждому языку: создан новый файл ответа или улучшен существующий; какие метаданные (tags / category / level / structure) были изменены и почему. Одним компактным блоком, без воды. Если в ФАЗЕ 0 нашлись соседние пересечения — добавь строку с их id и, при уместности, предложением кросс-ссылки.

---

Принцип Парето: ядро + Deep Dive (структура .md)

Ответ состоит из двух частей, разделённых маркером deep-dive:

• Ядро (всё до маркера) — конспект, закрывающий ~80% вопроса на собеседовании. Проговаривается вслух за 1–2 минуты. Жёсткий бюджет: ориентир 2500–3000 знаков, максимум 3500 (включая разметку и код). В ядре максимум 1–2 коротких примера кода.
• Deep Dive (всё после маркера) — оставшиеся 20% для 100% усвоения темы: внутренности, edge cases, грайндкор (AST, Lexical Environment, оптимизации движка). Бюджета нет — Deep Dive может быть длиннее ядра.

Фильтр отбора. Каждый абзац получает ровно один из трёх исходов:

1. Ядро — отвечает на вопрос, который реально задаст интервьюер.
2. Deep Dive — углубляет тему, но на собесе это уточнение к уточнению.
3. Удалить — не делает ответ лучше нигде: вода, повторы, банальности, устаревшие или неверные утверждения.

Причинная модель («почему так работает»), из которой выводится остальное, всегда остаётся в ядре — именно она делает конспект запоминаемым. Список фактов без идеи-стержня — брак.

Граница ядра зависит от level вопроса:

Level	Ядро	Deep Dive
junior	почти весь ответ	опционален, может отсутствовать
middle	классические 80/20	обязателен
senior	плотнее и шире — нюансы и есть предмет вопроса	обязателен

Обязательность Deep Dive — не повод его выдумывать. Если для middle/senior-вопроса реально нечего углубить — это сигнал, что level завышен: пересмотри его в ФАЗЕ 2, а не пиши грайндкор-филлер ради маркера.

Флоу ядра

1. TL;DR (первый экран) — то, что кандидат произносит первыми 30 секундами, суммарно ≤ 4 предложений:
   • определение концепции с ключевым термином в <span class="accent">;
   • главный вывод / управляющая идея в нейтральном callout <p class="info"> (например: «Анимируй только transform и opacity»). Этот серый блок используется только в TL;DR — см. правила callout-блоков ниже.
2. Примеры кода (базовые):
   • 1–2 минималистичных примера, иллюстрирующих как это работает на практике.
   • Добавляй минимум два пробела слева внутри блока <code class="code">...</code> для улучшения читаемости.
   • Комментарии — только по ключевым моментам.
3. Ключевые особенности (и/или сравнение):
   • Основные механики (например, Hoisting, область видимости) построчным перечислением.
4. Важные нюансы и рекомендации:
   • Best practices, частые ошибки и ловушки (например, TDZ, утечки памяти) — в callout-блоках.

Флоу Deep Dive

• Разбор работы «под капотом», ответ на уровне Senior разработчика: продвинутые детали, редкие edge cases, историческая справка, производительность.
• Сюда вытесняется контент с исходом 2 фильтра отбора («углубляет, но не для устного ответа»). Deep Dive — не свалка: вода и повторы удаляются (исход 3), а не сплавляются вниз.

Разделы ядра должны соответствовать пунктам structure в метаданных (см. ФАЗУ 2). Если правишь одно — синхронизируй другое.

КРИТИЧНЫЕ Требования к форматированию

Приложение использует свою систему отображения (custom HTML elements), поэтому категорически запрещено использовать стандартный Markdown. Возвращай только чистый HTML-код, не оборачивая его в markdown-блоки типа ```html ... ```. Начинай ответ сразу с HTML-тегов.

ЗАПРЕЩЕНО использовать:

• **жирный текст** (используй <strong> или <span class="accent">)
• ### заголовки (используй <h3> или <h4>)
• ``` (тройные бэктики) для блоков кода
• ` (одинарные бэктики) для инлайн-кода
• - или * для списков (используй <ul><li>...</li></ul> или <ol><li>...</li></ol>)

РАЗРЕШЕННЫЕ HTML-ТЕГИ И ПРАВИЛА ИХ ИСПОЛЬЗОВАНИЯ:

• Заголовки: Используй <h3> (основные разделы) и <h4> (подразделы).
• Параграфы: Обязательно оборачивай весь обычный текст в <p>...</p>.
• Инлайн-код: Для переменных, функций, значений внутри текста используй <code>...</code>.
• Блоки кода: Оборачивай весь многострочный код в <code class="code">...</code>.
  • ВСЕ HTML-ТЕГИ внутри блока <code class="code">...</code> должны быть экранированы (например, <div> → <div>).
• Выделение текста: Используй <span class="accent">...</span> для главных терминов или <strong>...</strong> для сильного акцента в тексте.
• Списки: Обязательно используй теги <ul> или <ol>, внутри которых будут <li>.
• Инфо-блоки (Callouts) — три вида со строго разделёнными ролями:
  • <p class="info">...</p> (нейтральный, серый) — только TL;DR: ровно один на ответ, в самом начале ядра (см. «Флоу ядра»). Больше нигде не используется — уникальный вид позволяет при беглом повторении находить суть ответа за секунду.
  • <p class="info info--blue">...</p> — «делай так / запомни»: best practices, советы, вывод по разделу, интересные факты.
  • <p class="info info--orange">...</p> — «не попадись»: частые ошибки, типичная путаница, ловушки, критичные предупреждения.
  • Дозировка: кроме TL;DR — максимум 2–3 callout в ядре (в Deep Dive умеренно). Если выделен каждый второй абзац — не выделено ничего.
  • Callout — это <p>: внутри только текст и инлайн-теги (<code>, <strong>, <span class="accent">). Списки и блоки кода в callout не вкладываются.
  • В старых ответах «чистый» info встречается в произвольных местах — при улучшении перекрась его в --blue/--orange по смыслу или перенеси суть в TL;DR.
• Deep Dive: Строгая строка для перехода к продвинутой части, ровно один раз на ответ (обязателен для middle/senior, опционален для junior). По языку: RU <p class="deep-dive">Углубленный конспект</p>, UK <p class="deep-dive">Поглиблений конспект</p>, EN <p class="deep-dive">Deep Dive</p>.

Пример идеального ответа (Ориентируйся на этот формат)

Введение

Замыкание (Closure) — это функция, которая запоминает свои внешние переменные и может получить к ним доступ. В JavaScript все функции изначально являются замыканиями.

Главная мысль: замыкание — не отдельная «фича», а следствие лексической области видимости: функция ищет переменные там, где была создана, а не там, где вызвана.

Пример использования

Базовый пример создания замыкания:

function makeCounter() { let count = 0; return function() { return count++; }; }

let counter = makeCounter(); console.log(counter()); // 0 console.log(counter()); // 1

Ключевые особенности

• Функция всегда помнит место, где она была создана.
• Доступ к внешним переменным сохраняется даже после завершения работы внешней функции.

Частая ошибка: создание функций-обработчиков событий в цикле с директивой var из-за отсутствия блочной области видимости.

Углубленный конспект

Работу замыканий обеспечивает скрытое свойство [[Environment]], которое есть у каждой функции. Оно ссылается на LexicalEnvironment того места, где функция была создана.