AIKraft/AI/Войти
AIKraft/Skills/Генератор anywidget

Генератор anywidget

Generate anywidget components for marimo notebooks.

marimo-team official Другое

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

Генерирует компоненты anywidget для ноутбуков marimo, используя ванильный JavaScript в поле _esm и CSS в поле _css. Обеспечивает корректное отображение виджета через обёртку mo.ui.anywidget и управление состоянием через traitlets.

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

  • Создание простых интерактивных виджетов, таких как счётчик, с минимальным кодом.
  • Разработка сложных виджетов с обильной логикой JavaScript или CSS, требующих выноса кода во внешние файлы.
  • Обеспечение кросс-темного оформления (light/dark mode) для интерфейсов виджетов.
  • Интеграция пользовательских виджетов в среду marimo для визуализации данных.

Как работает

  1. Определить класс, наследующийся от anywidget.AnyWidget, с полями _esm (JavaScript) и _css (стили).
  2. В _esm реализовать функцию render({ model, el }), используя model.get/set для чтения и записи значений и model.on для подписки на изменения.
  3. В _css добавить минимальные стили, обеспечивающие корректное отображение в светлой и тёмной темах через @media (prefers-color-scheme: dark).
  4. Для сложной логики вынести код JS и CSS во внешние файлы, используя pathlib для указания путей относительно проекта.
  5. Обернуть экземпляр виджета в mo.ui.anywidget() для отображения в ноутбуке marimo.
  6. Доступ к значениям виджета получать через свойство .value, которое возвращает словарь.

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

Создай простой виджет-счётчик на anywidget для marimo с ванильным JavaScript.
Разработай anywidget с обильной логикой, вынеся JS и CSS во внешние файлы, с поддержкой тёмной темы.
Напиши код для отображения anywidget в marimo, где пользователь может изменять числовое значение через интерфейс.

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

  • Библиотеки anywidget и marimo
  • Среда выполнения Python с поддержкой traitlets

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

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

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

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