Better Typography для проверки типографики интерфейсов
Better Typography помогает AI-агенту проверить, как сайт отображает текст. Скилл подсказывает, где искать причины обрезанных подписей и скачущих цифр в счётчике.
Какие проблемы ищет Better Typography
Якуб Крехел опубликовал Better Typography в своём сборнике скиллов для работы с интерфейсами. UI Skills показывает инструкции и команду установки в каталоге, а исходники и справочники лежат в репозитории Крехела под лицензией MIT. Репозиторий автора · Лицензия
Скилл предлагает сверить начертания в CSS с теми, что действительно загружены через `@font-face`. Для заголовков и основного текста инструкции задают шкалу размеров. Для многострочных блоков они предлагают проверить межстрочный интервал. Если ширина цены меняется при обновлении, агент может предложить `font-variant-numeric: tabular-nums`. Эта настройка делает цифры одинаковыми по ширине, если шрифт поддерживает табличные цифры. Инструкции скилла
Для длинных абзацев Крехел задаёт ориентир в 60–75 знаков на строку. Заголовки на две строки скилл предлагает выравнивать по длине с помощью `text-wrap: balance`. В узкой карточке с длинным названием у обрезанного текста должен оставаться способ прочитать полную версию. Правила подходят и для обычного CSS, и для проекта на Tailwind. В справочнике скилла есть соответствия между свойствами и классами. Правила типографики
Как установить скилл и запустить проверку
Для запуска установщика нужен Node.js. В документации Skills CLI указан минимум 22.20. По умолчанию скилл подключается к текущему проекту. Чтобы сделать его доступным в других проектах, добавьте флаг `-g`. Документация Skills CLI
В терминале из папки проекта выполните `npx skills add https://github.com/jakubkrehel/skills --skill better-typography` и выберите своего агента в установщике. Команда из карточки UI Skills подключает один скилл. Для Claude Code README также описывает установку всей коллекции через плагин `interfaces@interfaces`. Установка в UI Skills · Плагин в README
После установки попросите агента применить `better-typography` к конкретному экрану. Например, поручите проверить карточки каталога с длинными названиями, переносы в описаниях и цифры в ценах. Укажите, нужны ли правки или только отчёт. Инструкции задают формат отчёта с приоритетом, путём к файлу, предлагаемой правкой и объяснением того, как проблема сказывается на читателе. Формат проверки
Что видно в коде и что требует браузера
По исходникам агент может сравнить объявленные размеры и начертания, проверить настройки межстрочного интервала и найти места, где текст принудительно обрезается. Реальные переносы и обрезку инструкции предлагают проверять в браузере на текстах из проекта, меняя ширину окна. Если провести проверку не удалось, агент должен отметить её как непроверенную. Правила проверки
По правилам скилла обрезка текста при ширине окна 320 пикселей или масштабе 200% получает высокий приоритет. При проверке карточек каталога полезно брать названия из самого каталога. Короткая заглушка может поместиться там, где настоящее название займёт три строки и потеряет последние слова. Если агент нашёл проблему, по отчёту должно быть понятно, с каким текстом и при какой ширине её можно воспроизвести. Правила проверки
Для формы на iPhone есть отдельная проверка. Если текст в поле ввода меньше 16 пикселей, Safari может увеличить страницу при фокусе. В инструкции есть вариант с увеличением размера текста поля до 16 пикселей на мобильных экранах. Правило для полей ввода
Для семантики заголовков и проверки доступности у Крехела есть `better-accessibility`. Измерение контраста входит в задачи `better-colors`. Оба скилла доступны в той же коллекции. Состав коллекции