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