Скилл для разработки виджета (для ChatGPT)

Ниже готовый шаблон, который можно копировать в чат с ChatGPT и получать готовый скрипт виджета под MixSlide Widget Runtime v2.

Что ввести перед запуском скила

1. Кратко опишите идею виджета (1–3 абзаца).
2. Опишите поведение в редакторе:
   • есть ли редактируемый текст,
   • нужно ли масштабирование по размеру блока,
   • есть ли control points.
3. Список управляемых пользовательских параметров (кроме обязательных width, height):
   • тексты/цвета/числа/кнопки/градиенты и т.д.
4. Ограничения:
   • поддерживаемые браузеры,
   • минимальный/максимальный сложность,
   • важные UX-ограничения.

Шаблон запроса (копируйте целиком)

Ты — инженер MixSlide widget-runtime.

Сгенерируй готовый widget-код под Runtime v2 для MixSlide.

Требования:
1) Используй строго одну функцию `function Widget()`.
2) `useParams` должен быть только один.
3) Язык v2: только разрешённые возможности и лимиты (нет var, no spread, no new, no eval/fetch/fetch и т.п.).
4) Возвращай только валидный TSX/JS код функции Widget (без markdown, без комментариев вне кода).
5) Код должен компилироваться и выполняться в текущем runtime.
6) Подставляй типовые параметры:
   - если есть текстовое содержимое — добавь параметр `text: { type: "text", default: "..." }`;
   - если есть цветовое выделение — добавь параметры `fill` и/или `stroke` как `colorGradient`;
   - если есть шрифтовые настройки — добавь `font: { type: "font" }` и применяй `fontFamily/fontSize/fontWeight/fontVariationSettings/fontFeatureSettings`;
   - если есть изображение/иконка — добавь `media` или `image` с безопасным fallback.
7) Если виджет редактируется на холсте, укажи это через `editable="text"` на подходящем DOM-элементе.
8) Если есть сложные вычисления (path/геометрия/текст->path) — вынеси в `useBlockMemo` и поставь корректный массив зависимостей.
9) Если нужен контрол точек формы, добавь `useControlPoints()` и используй возвращённые точки безопасно.
10) Для кривых/масштабов не забывай корректно обрабатывать `style` и `fill/stroke` с `isGradient(...)`.
11) В конце добавь короткую секцию:
   - список параметров,
   - что именно делает виджет,
   - какие есть ограничения runtime.

Исходные данные:
- Идея: {{IDEA}}
- Поведение: {{BEHAVIOR}}
- Параметры пользователя (если есть): {{USER_PARAMS}}
- Ограничения: {{CONSTRAINTS}}

Выведи ответ в формате:
1) Код (function Widget ...).
2) Таблица параметров (name, type, default, bounds/links, title).
3) Мини-чек лист для автора перед сохранением.

Рекомендуемое применение

• Скопируй шаблон, подставь IDEA, BEHAVIOR, USER_PARAMS, CONSTRAINTS.
• Получи на выходе:
  • готовый код виджета;
  • список параметров для панели;
  • минимальный чек-лист.
• Сразу вставь код в редактор, проверь через compile-логику и прогон по FAQ.

Пример быстрой вводной от пользователя

IDEA: Кнопка "Запуск акции", меняет яркость и пульсирует при hover.
BEHAVIOR: Размер адаптивный, текст редактируемый двойным кликом, есть выбор цвета фона и обводки.
USER_PARAMS: нужно задать colorGradient для фона и stroke, текст label, время пульсации (0..5), кнопка обновления.
CONSTRAINTS: не использовать тень у mobile, безопасный вывод, без сложных SVG-фильтров.

![Пример итогового ответа скила] []