AIKraft/AI/Войти
AIKraft/Skills/generative-ui

generative-ui

Создаёт интерактивные HTML/SVG-виджеты через show_widget в claude.ai: графики, диаграммы, макеты и инструменты с элементами управления. Применяется при запросах визуализировать, показать или нарисовать данные.

himself65 official Разработка ★ 3.4k

Что делает навык

Навык генерирует интерактивные HTML/SVG-виджеты (графики, диаграммы, макеты) через встроенный инструмент show_widget в claude.ai. Он обеспечивает визуализацию данных и сложных концепций в соответствии с дизайн-системой Anthropic Imagine.

Когда применять

  • Визуализация финансовых показателей, доходов или статистики с помощью графиков Chart.js
  • Создание структурных диаграмм, архитектурных схем и блок-схем (flowcharts) в SVG
  • Построение интерактивных объяснителей (explainers) с ползунками и живыми расчетами
  • Сравнение опций или параметров через интерактивные сетки и карточки

Как работает

  1. Определите тип визуализации на основе глагола запроса (например, SVG для диаграмм, HTML для графиков или интерактивных элементов)
  2. Сформируйте код виджета в строгом порядке: <style> → HTML/SVG контент → <script>, используя CSS-переменные для адаптации к светлой/темной теме
  3. Вызовите инструмент show_widget, передав код в параметре widget_code и snake_case название в title
  4. После рендеринга кратко объясните пользователю, что показывает виджет, как им управлять и какой ключевой вывод следует из данных

Примеры запросов агенту

Покажи, как работает сложный процент, с помощью интерактивного графика, где можно менять ставку
Нарисуй структурную диаграмму архитектуры микросервисов
Сравни три варианта инвестиций в виде интерактивной сетки с расчетом доходности

Что понадобится

  • Доступ к инструменту show_widget в claude.ai
  • Разрешение загрузки внешних ресурсов только с cdnjs.cloudflare.com, cdn.jsdelivr.net, unpkg.com, esm.sh

Описание составлено по SKILL.md навыка, сверено 07.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «generative-ui» из репозитория: # https://github.com/himself65/finance-skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r generative-ui/ ~/.claude/skills/generative-ui/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.