cognitive-core: Skill for Claude Code

Визуальный аудит

Код чист, тесты зелёные, консоль пуста — и страница всё равно сломана. Такие дефекты ловит только рендер и взгляд.

Основа взята у агента CRM (ai-crm), адаптирована под здешний стек: страницы лежат в sandbox/, отдаются FastAPI и закрыты сессией.

Примеры из этого проекта, каждый прошёл мимо чтения кода:

Что видел пользователь	Почему код молчал
Лента открывалась на старом сообщении	render() падал раньше на обращении к переменной из мёртвой зоны — прокрутка вообще не вызывалась, ошибка ушла в проглоченный промис
Поле ввода не росло, Enter не отправлял	тот же обрыв: всё, что настраивалось после падения, молча не выполнялось

Шаг 1. Как открыть страницу под сессией

Браузер инструмента не залогинен, а входить за владельца нельзя. Приём:

1. взять БОЕВУЮ страницу: curl https://mcp.me-ai.ru/ui/room?id=... -o page.html
2. вставить ПЕРЕД её скриптами заглушку fetch с правдоподобными данными
3. поднять python -m http.server и открыть

Данные брать длинные и многочисленные: на трёх коротких строках половина дефектов не воспроизводится.

⚠️ Вкладка инструмента открывается скрытой, а там не выполняются кадровые колбэки (requestAnimationFrame). Проверяя анимацию или отложенную вёрстку, выведи вкладку вперёд скриншотом — иначе решишь, что код мёртв, хотя он просто не вызывался.

Шаг 2. Автоматические детекторы

() => {
  const out = [];
  const vis = e => e.offsetParent !== null || getComputedStyle(e).position === 'fixed';

  // 1. Горизонтальный скролл — и у документа, И у внутренних контейнеров.
  //    Проверять только документ недостаточно: в лентах и таблицах
  //    переполнение живёт внутри, а страница при этом чиста.
  if (document.documentElement.scrollWidth > window.innerWidth + 1)
    out.push(['скролл-вбок', `документ ${document.documentElement.scrollWidth}px при экране ${window.innerWidth}px`]);
  for (const e of document.querySelectorAll('div,section,main,ul,table')) {
    if (!vis(e)) continue;
    const s = getComputedStyle(e);
    if (e.scrollWidth > e.clientWidth + 1 && ['auto','scroll','hidden'].includes(s.overflowX))
      out.push(['скролл-вбок-внутри', `${e.tagName.toLowerCase()}.${e.className} ${e.scrollWidth}>${e.clientWidth}`]);
  }

  // 2. Обрезанный текст
  for (const e of document.querySelectorAll('*')) {
    if (!vis(e) || e.children.length) continue;
    const s = getComputedStyle(e);
    if (e.scrollWidth > e.clientWidth + 1 && s.overflow !== 'visible' && e.textContent.trim())
      out.push(['обрезан-текст', `«${e.textContent.trim().slice(0,40)}»`]);
  }

  // 3. hidden побеждён правилом display — заголовок над пустотой
  for (const e of document.querySelectorAll('[hidden]'))
    if (vis(e)) out.push(['hidden-не-скрыт', `${e.tagName.toLowerCase()}.${e.className}`]);

  // 4. Цели касания меньше 44pt
  for (const e of document.querySelectorAll('button,a,[role=button],input,select')) {
    if (!vis(e)) continue;
    const r = e.getBoundingClientRect();
    if (r.width && (r.width < 44 || r.height < 44))
      out.push(['мелкая-цель', `${Math.round(r.width)}×${Math.round(r.height)} «${(e.textContent||'').trim().slice(0,20)}»`]);
  }

  // 5. Рамка или фон вокруг пустоты
  for (const e of document.querySelectorAll('div,section,aside,ul')) {
    if (!vis(e) || e.textContent.trim() || e.querySelector('img,svg,canvas,input')) continue;
    const s = getComputedStyle(e), r = e.getBoundingClientRect();
    const marked = s.borderWidth !== '0px' || (s.backgroundColor !== 'rgba(0, 0, 0, 0)' && s.backgroundColor !== 'transparent');
    if (marked && r.height > 12) out.push(['пустой-блок', `${e.tagName.toLowerCase()} ${Math.round(r.width)}×${Math.round(r.height)}`]);
  }

  // 6. Необработанные ошибки страницы. Здесь это КРИТИЧНО: обрыв в render()
  //    оставляет страницу внешне целой, а половину поведения — мёртвой.
  out.push(...(window.__auditErrors || []).map(e => ['ошибка-страницы', e]));

  return out;
}