svg-animations — скилл для Claude Code: что делает и как установить
Инструктирует ассистента создавать векторную графику и анимировать векторные элементы через CSS и SMIL. Пригодится для сборки иконок, лоадеров и логотипов.
npx skills add supermemoryai/skills --skill svg-animations -a claude-codeЧто делает svg-animations
Скилл даёт ассистенту правила вёрстки векторной графики вручную без лишнего кода. Он раскладывает работу с холстом через viewBox, базовые фигуры и команды контура <path>, включая кривые Безье и дуги. Модели объясняется синтаксис градиентов, фильтров размытия и масок обрезки.
Внутри собраны два подхода к динамике: стили CSS и встроенные теги SMIL. Через CSS реализуются эффекты прорисовки линий свойствами stroke-dasharray и stroke-dashoffset, а также трансформация контуров. Встроенная разметка <animate> и <animateMotion> спасает, когда вектор вставляется через тег <img> или фоном: там внешние скрипты не исполняются.
Морфинг контуров через CSS требует строгой структуры данных. Обе кривые обязаны содержать одинаковое количество и одинаковый тип команд, иначе браузер не сможет интерполировать кадры.
Какие задачи решает
- нарисовать анимированный спиннер загрузки на чистом SVG
- анимировать контур логотипа эффектом постепенной прорисовки
- перенести траекторию движения объекта в SMIL-тег
<animateMotion> - настроить морфинг векторных форм через CSS-свойство
d
Примеры запросов агенту
- Сделай бесконечный SVG-спиннер загрузки с пульсацией через CSS
- Нарисуй векторную иконку галочки и добавь эффект рисования линии
- Создай иконку сердца с плавной анимацией изменения формы при наведении
Как установить svg-animations
1Через Skills CLI (Vercel)
npx skills add supermemoryai/skills --skill svg-animations -a claude-code2Вручную: положить файлы
~/.claude/skills/svg-animations/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/svg-animations/
1Через Skills CLI (Vercel)
npx skills add supermemoryai/skills --skill svg-animations -a codex2Вручную: положить файлы
.agents/skills/svg-animations/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add supermemoryai/skills --skill svg-animations -a cursor2Вручную: положить файлы
.cursor/skills/svg-animations/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install supermemoryai/skills svg-animations2Вручную: положить файлы
.github/skills/svg-animations/SKILL.md1Через Skills CLI (Vercel)
npx skills add supermemoryai/skills --skill svg-animations -a gemini-cli2Командой платформы
gemini skills install https://github.com/supermemoryai/skills --path svg-animationsВручную: положить файлы
.devin/skills/svg-animations/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add supermemoryai/skills --skill svg-animations -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора3
Похожие
Рядом в теме «Фронтенд и UI»
Всё по теме «Фронтенд и UI» →Вопросы о svg-animations
Как установить svg-animations в Claude Code?
Выполните в терминале команду npx skills add supermemoryai/skills --skill svg-animations -a claude-code. Файл навыка сохранится в конфигурацию окружения.
Зачем нужен скилл svg-animations?
Он направляет нейросеть при ручном создании векторных иллюстраций, эффектов движения и адаптивных иконок. Это позволяет получать чистую разметку с CSS- или SMIL-анимациями без внешних библиотек.
Когда вместо CSS-анимаций следует использовать SMIL?
Теги <animate> и <animateTransform> нужны, если файл выводится через тег <img> либо как CSS background-image. В таких случаях внешние стили и JavaScript заблокированы браузером.
