SVG Character Animator

Generate production-quality SVG character animations — state machines that morph between N SVG states (2–10) with per-state idle motion (breathing, blinking, swaying). Use whenever the user wants to animate a character or mascot between poses/emotions, morph icons/illustrations between forms, build interactive SVG state machines, or add ambient idle motion to vector graphics. Triggers include character/mascot animation, SVG path interpolation, character emotion transitions, icon toggles with animation, multi-state vector animations, or "make this SVG come alive." Also use when the user referen

31 stars 1 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add molauu/svg-character-animator --skill svg-character-animator

Manual install

git clone --depth 1 https://github.com/molauu/svg-character-animator.git /tmp/svg-character-animator
mkdir -p ~/.claude/skills
cp -r /tmp/svg-character-animator/. ~/.claude/skills/svg-character-animator

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# SVG Character Animator

Generate runnable React components that animate between N SVG states (2–10) with a state-machine model, layered motion presets, and per-state idle animations.

This skill exists because the gap between a naive "morph" (jank, polygon artifacts, broken stroke caps, dead-feeling characters) and production-quality animation is huge — and the path to production quality is *not* "pick the right morph library." It's an architecture: per-path strategy detection, path normalization, transform-attribute interpolation, idle blending, and bottom-center pivot defaults. The skill encodes that architecture.

## The most important insight

**Most "morph" tasks aren't morph tasks.** They're transform tasks dressed up. When you compare two SVG states of the same character, the eyes, nose, hands, and buttons usually have the same shape structure — they've just moved or rotated. Forcing those through a morph library (flubber, KUTE, Anime.js) destroys their bezier curves by polygon-sampling them.

The right approach is **per-path strategy detection**: analyze each shared path at init time and route it to one of two strategies — TRANSFORM if its command structure is consistent across states, MORPH otherwise. A real morph library is only needed when paths have genuinely different topology, which after path normalization is rare.

## The two strategies

For each shared path id across states, the skill picks one of two strategies:

Read the full skill on GitHub

Details

Skill name: svg-character-animator
Repository: molauu/svg-character-animator
License: MIT
Repo updated: 19 August 2026

FAQ

What does the SVG Character Animator skill do?

How do I install the SVG Character Animator skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add molauu/svg-character-animator --skill svg-character-animator. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is SVG Character Animator popular?

It lives in molauu/svg-character-animator, which has 31 GitHub stars and 1 forks.

Related skills

Figma to Swiftui

daetojemax/figma-to-swiftui-skill

Implement or update iOS SwiftUI UI from Figma designs; also use for implementation plans, token mapping, or asset export for that UI.

Frontend & Design

Impeccable Lite

ilindaniel/impeccable-lite

Design, build, redesign, critique, audit, and refine frontend interfaces with strong visual direction and production-ready UX. Use for websites, landing pages, dashboards, application UI, components, forms, onboarding, empty states, responsive behavior, accessibility, typography, color, layout, motion, UX copy, or when an interface feels generic, bland, cluttered, inconsistent, or unfinished. Do not use for backend-only or non-UI tasks.

Frontend & Design

Stark

f0d010c/stark

Use for UI/UX design, product flows, frontend or native interface design, design audits, design translation, asset planning, motion direction, design tokens, or distinctive non-generic apps and websites. Covers web and React, Windows and WinUI/Mica, Apple and SwiftUI, Android and Jetpack Compose/Material, cross-platform UI, and token export. Route to the focused skill, then load only the references required for the selected surface and failure mode.

Frontend & Design

Copy Thief

thalesholleben/copy-thief

Escreve e revisa copy persuasiva de alta conversão para páginas de vendas (landing pages), advertoriais/pre-sell e VSLs, com foco em tráfego frio vindo de Ads (Meta e Google) para produtos e serviços digitais. Use quando o pedido envolver: escrever ou revisar uma página de vendas, landing page, sales letter, carta de vendas, copy de oferta, VSL, advertorial, pré-venda, headline, CTA, ou "vender no tráfego frio". O workflow é sempre diagnóstico → estrutura aprovada pelo usuário → copy. Idioma de saída padrão: PT-BR (mercado brasileiro).

Frontend & Design

Dejank

gbasin/dejank

Detect and diagnose visual jank in React UIs. Covers two modes -- static analysis of code patterns that cause flicker, layout shift, and flash of intermediate state (for pre-merge review or preventive sweeps), and runtime investigation of specific visual symptoms (flicker, blink, jump, stutter, remount churn, scroll reset, post-paint correction). Use when the user mentions jank, something feeling off, flashing, blinking, layout shifting, full repaints, or wants a render stability audit.

Frontend & Design

Home Icon Motion

youwenjiujiu/home-icon-motion

Generate, package, and integrate the polished cinematic Home/house navigation icon motion as standalone HTML/video or as an inline Web Component with React and Vue wrappers. Use when Codex is asked to animate a Home icon, house icon, homepage navigation control, active Home tab, or integrate the established construct-and-illuminate Home treatment into an existing frontend. Do not use for Delete, Search, or other icon meanings.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.