К основному содержанию
скилл CX Codex

makepad-2.0-vector — скилл для Claude Code

Скилл учит ИИ писать векторную графику и анимации для виджета Vector в Makepad 2.0. Пригодится при сборке иконок, градиентов и эффектов интерфейса на Rust.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-vector -a claude-code
Открыть на GitHub

Что делает makepad-2.0-vector

Скилл даёт правила вёрстки векторных фигур внутри Makepad 2.0 с синтаксисом Splash. В отличие от компонента Svg, загружающего внешние файлы ресурсов, виджет Vector задаёт пути Path, базовые формы вроде Circle или Rect, а также фильтры теней прямо в коде.

Фигуры используют SVG-атрибуты вроде stroke и fill, поэтому типичные виджетные свойства draw_bg.* на них вообще не сработают. Анимация Tween подставляется прямо внутрь значений свойств: цвета, смещения или прозрачности.

Зацикливание анимации требует строго логического loop_: true или числового счётчика повторений: текстовая строка ломает бесконечный цикл. Инструкция рассчитана на ветку разработки makepad-widgets.

Какие задачи решает

  • верстать векторные иконки в кодовой базе Makepad
  • настраивать линейные и радиальные градиенты без внешних SVG
  • анимировать параметры фигур через свойство Tween
  • группировать элементы с трансформациями и фильтрами теней

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

  • Собери иконку корзины через Vector и Path для темы оформления Makepad
  • Сделай пульсирующий индикатор загрузки с кругом и анимацией Tween
  • Добавь в виджет векторную фигуру с линейным градиентом от красного к синему

Как установить makepad-2.0-vector

1Через Skills CLI (Vercel)

npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-vector -a claude-code

2Вручную: положить файлы

~/.claude/skills/makepad-2.0-vector/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/makepad-2.0-vector/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о makepad-2.0-vector

Как установить makepad-2.0-vector в Claude Code?

Выполните в терминале команду npx skills add ZhangHanDong/makepad-skills --skill makepad-2.0-vector -a claude-code.

Что делает makepad-2.0-vector?

Он передаёт ИИ точный синтаксис виджета Vector фреймворка Makepad 2.0 для описания шейпов, градиентов и свойств переходов.

Почему для заливки и обводки нельзя использовать draw_bg?

Фигуры внутри Vector обрабатывают только SVG-параметры fill, stroke и stroke_width. Попытка задать draw_bg.fill_color или draw_bg.stroke_width игнорируется движком.

Похожие скиллы

Все скиллы по теме «Фронтенд и UI» →
frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. CX Codex +1 678 700установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. 986 201установок hyperframes heygen-com Скилл задаёт агенту правила рендера HTML-кода в видео через HyperFrames. Помогает собирать проморолики, эксплейнеры и титры прямо в коде проекта. CX Codex +1 1 200 000установок hyperframes-cli heygen-com Управляет проектами HyperFrames через терминал: собирает таймлайн, проверяет контраст кадров, запускает предпросмотр и рендерит видео локально или в облаке. CX Codex +1 1 300 000установок webapp-testing официальный anthropics Скилл запускает проверки локальных веб-приложений через Playwright: помогает отлаживать UI, делать скриншоты и смотреть логи браузера. 186 758установок

Из того же набора14

makepad-2.0-widgets Подсказывает агенту, какие виджеты есть в Makepad 2.0 и как их правильно писать в Splash. Пригодится, когда верстаешь интерфейс и не помнишь свойства. CX Codex +1 ★ 751звёзд репо makepad-2.0-troubleshooting Скилл для разбора типичных ошибок Makepad 2.0 и языка Splash: невидимый интерфейс, пропавший текст, сломанный горячий перезапуск. Пригодится, когда UI собрался, но выглядит не так, как ждёшь. CX Codex +1 ★ 751звёзд репо makepad-2.0-theme Скилл для работы с темой Makepad 2.0: переменные theme.*, переключение тёмного и светлого режимов, цвета, шрифты и отступы в Splash. CX Codex +1 ★ 751звёзд репо makepad-2.0-splash Подсказывает агенту синтаксис скриптового языка Splash для Makepad 2.0. Помогает писать UI-компоненты внутри Rust, настраивать реактивный рендеринг и избегать багов вёрстки. CX Codex +1 ★ 751звёзд репо makepad-2.0-shaders Скилл помогает писать шейдеры для Makepad 2.0: от SDF-фигур и эффектов до переопределения отрисовки виджетов. Пригодится, когда агент работает с GPU-кодом Makepad. CX Codex +1 ★ 751звёзд репо makepad-2.0-performance Скилл для оптимизации и отладки Makepad 2.0: разбирает батчинг отрисовки, сборку мусора Splash VM и кэширование текстур. CX Codex +1 ★ 751звёзд репо makepad-2.0-migration Скилл помогает переписать Rust-интерфейсы на фреймворке Makepad с версии 1.x на 2.0. Пригодится при адаптации старого синтаксиса DSL к скриптовому движку. CX Codex +1 ★ 751звёзд репо makepad-2.0-layout Скилл помогает агенту задавать размеры виджетов и располагать их в интерфейсах Makepad 2.0. Пригодится, когда нужно сверстать экран или разобраться, почему контейнер не виден. CX Codex +1 ★ 751звёзд репо

Спонсоры проекта

Компании, которые помогают держать аналитику открытой