UI-библиотека
Библиотека компонентов
Интерфейс скила собирается из готовых блоков. Карточки, переключатели, галереи и формы — прямо в чате. Каждый блок — это data-атрибут: разметили в drawer.html, виджет собрал компонент сам.
Компонентов
карточки, выбор, ввод, медиа
Событий
на хосте дроера
Строк CSS
только Tailwind и data-атрибуты
Наблюдатель
MutationObserver ловит динамику
Компоненты из коробки
Разметили — виджет собрал. Компоненты объявляются data-атрибутами и обрабатываются через MutationObserver: работают и в статичной разметке, и при создании из JS. Пользовательские события приходят на хост дроера.
Карточки
Вертикальная с фото сверху или горизонтальная в стиле app-store: заголовок, текст, круглая или скруглённая иконка.
data-card · data-card-horizontalРадио-переключатель
Пилюля с анимированным маркером на N опций. Блокируется классом radio-switch--disabled.
data-radio-switchСетка выбора
Кликабельные ячейки в 2–3 колонки: метка, значение, подпись. Одна активная за раз.
data-select-gridСписок выбора
Строки с заголовком и описанием — для взаимоисключающего варианта в одну колонку.
data-select-listАвтоподсказка
Поле с выпадающими подсказками через suggest-прокси бэкенда. Список в потоке — толкает контент вниз.
data-suggest-inputИнпут и таблица
Готовые классы поля ввода и Tailwind-сетка результатов — gap создаёт визуальные разделители.
input-wrapper · input-fieldЭмодзи-оценка
Три анимированных смайла — плохо, нормально, отлично. Для быстрой обратной связи и отзывов.
data-emoji-rateКнопки действий
Ссылка с авто-иконкой бренда (Telegram, WhatsApp, звонок) или callback с иконкой из набора Heroicons.
data-actionГалерея
Сетка превью с лайтбоксом Fancybox. Ссылки — прямые или через ассеты бандла {{asset:…}}.
data-galleryСписок деталей
Карточка-итог: строки «метка → значение» с разделителями. Для подтверждения заявки перед отправкой.
data-detail-listЗагрузка файлов
Дропзона для фото и видео с заливкой в объектное хранилище по presigned-URL.
data-file-uploadСогласовано в системе
Стили изолированы в Shadow DOM. Пишете только Tailwind, цвет бренда приходит утилитами skill-primary, а высоты полей и переключателей заранее подогнаны друг под друга.
Утилит skill-primary
text, bg, ring, border, fill
Высота контролов
ввод и выбор согласованы
Лимит ассета
PNG, JPG, WebP, SVG, GIF
Файлов в бандле
заливка в хранилище сама
Компоненты в деле
Из тех же блоков собраны готовые скилы. Квиз, enricher, калькулятор, форма отзыва — каждый берёт компоненты из библиотеки и работает прямо в чате.
Скилы живут в песочнице
Два пути к скилу
Визуальный кретор — путь без кода. А компоненты и формат .skill — готовая спецификация для модели: даёте её LLM, и она собирает интерактивный скил под задачу.
Собирайте дроер из компонентов в визуальном конструкторе — перетаскиванием, без единой строки кода.
Фразы из манифеста превращаются в эмбеддинги — роутер находит скил по смыслу запроса и добавляет его в промпт.
LLM генерирует ACTION с именем скила и параметрами — виджет загружает бандл и рендерит карточки и дроер.
Вопросы разработчиков
Data-атрибутом в drawer.html: <div data-radio-switch data-options="…">. Виджет обрабатывает его через MutationObserver — работает и при статичной разметке, и при создании из JS.
Соберите свой скил
От файла до вызова. Библиотека, формат .skill и скил-кретор доступны на бесплатном тарифе — без карты.
Расскажите, что нужно
Проекты по типам растут год к году
MVP, редизайн, AI и поддержка — накопительно
Профиль студии по ключевым осям
Скорость, качество, прозрачность, инженерия
Ресёрч, дизайн и разработка идут внахлёст
Параллельные потоки — не водопад