Spine Animation

Create Spine 2D skeletal animations from pre-existing character assets (separated body-part PNGs, atlas spritesheet, or a full character image). Use this skill whenever the user wants to animate a 2D character, create Spine JSON from existing art assets, rig a character with bones, build walk/idle/run/attack animations, produce an interactive Spine Web Player preview, or generate Spine-compatible export files (.json + .atlas + .png). Also trigger when the user mentions "Spine animation", "2D rigging", "skeletal animation", "bone animation", "cutout animation", "animate this character", "make t

616 stars 87 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)
npx skills add GenielabsOpenSource/spine-animation-ai --skill spine-animation
Manual install
git clone --depth 1 https://github.com/GenielabsOpenSource/spine-animation-ai.git /tmp/spine-animation-ai
mkdir -p ~/.claude/skills
cp -r /tmp/spine-animation-ai/. ~/.claude/skills/spine-animation

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

From the SKILL.md

# Spine Animation Skill

Turn pre-existing 2D character assets into fully animated, interactive Spine animations.

## Step 0: Set Up Scripts

This skill includes Python scripts that do the heavy lifting. Claude MUST write them to disk
before use. Each script is embedded below — Claude should save them to `/home/claude/spine-scripts/`
at the start of every session.

```bash
mkdir -p /home/claude/spine-scripts
pip install opencv-python Pillow numpy google-generativeai --break-system-packages -q
```

### Embedded Scripts

The following scripts are auto-injected from the repository's `scripts/` directory.
**Claude: read these carefully, then write each one to `/home/claude/spine-scripts/`**
before running the pipeline.

<details>
<summary>📄 <code>scripts/split_character.py</code> (231 lines)</summary>
Read the full skill on GitHub

Details

Skill name
spine-animation
Repository
GenielabsOpenSource/spine-animation-ai
Repo updated
26 August 2026

FAQ

What does the Spine Animation skill do?

Create Spine 2D skeletal animations from pre-existing character assets (separated body-part PNGs, atlas spritesheet, or a full character image). Use this skill whenever the user wants to animate a 2D character, create Spine JSON from existing art assets, rig a character with bones, build walk/idle/run/attack animations, produce an interactive Spine Web Player preview, or generate Spine-compatible export files (.json + .atlas + .png). Also trigger when the user mentions "Spine animation", "2D rigging", "skeletal animation", "bone animation", "cutout animation", "animate this character", "make t

How do I install the Spine Animation skill?

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

Is Spine Animation popular?

It lives in GenielabsOpenSource/spine-animation-ai, which has 616 GitHub stars and 87 forks.

Related skills

SVG Diagram

640

bybit-exchange/svg-diagram

SVG diagramming conventions blending a technical look with CJK-friendly typography. Use when creating flowcharts, architecture diagrams, and similar SVG figures. For one-shot generation, prefer invoking it from a subagent so the main context does not have to carry this skill plus the SVG XML; for multi-round tweaking, use it directly in the main context.

Frontend & Design44

Qiaomu Design

666

joeseesun/qiaomu-design

为页面、组件和产品界面提供设计诊断、四方向可视化预览、设计系统编译、实现与视觉 QA， 也创作与修改微信公众号封面、B站封面、YouTube 缩略图、小绿书配图和小红书封面，按平台检查裁切与可读性。 在用户要求从零设计、重设计、优化 UI/UX、审查界面、建立设计系统、参考某种风格， 或创作公众号封面、设计公号头图、修改微信文章封面、制作 B站封面、YouTube 封面、小绿书配图、小红书配图时使用； 不用于只改业务逻辑、纯文案润色或与界面无关的普通编码。默认由当前 Codex 直接执行， 只有用户在当前任务明确点名 K3 时才调用外部模型。

Frontend & Design50

Draw UI

524

oil-oil/draw-ui

设计 App、后台、游戏界面和完整网站落地页，生成 UI 设计稿；按需把设计稿或截图还原为 HTML/CSS、现有前端项目或微信小程序。用户要求页面设计、完整落地页、截图还原或小程序高保真时使用。不用于普通插画、海报、故事板、纯图片编辑或无设计任务的业务代码修改。

Frontend & Design77

Better Design

545

marvkr/better-design

Build, improve, and review production interfaces with the Better Design MCP. Use for frontend design, UI, UX, interactions, flows, forms, navigation, components, styling, design systems, accessibility, responsive layouts, motion, React Native, Expo, Shopify, Three.js, and product video work, especially when creating, redesigning, polishing, or reviewing an interface.

Frontend & DesignIn 1 list32

Product Launch Motion

398

AbubakrChan/product-launch-motion

Use when asked to make a launch video, product film, motion design piece, UI motion reel, Dribbble-style UI animation or animated brand/logo sting — anything rendered to MP4 from HTML with a cursor, morphing UI, springs, beat-synced music and SFX. Carries Chan's full creative direction (one shape never cut, blur content swaps, springs, real data, logo slams, no creative limits) and the proven build/render pipeline (pure seek(t), closed-form springs, Playwright subframes, ffmpeg tmix, numpy beat grid).

Frontend & DesignIn 1 list55

Color Expert

629

meodai/skill.color-expert

Use when working with color naming, color theory, color spaces, color definitions, or any task involving color knowledge - palettes, ramps, gradients, conversions, accessibility, perceptual matching, pigment mixing, print-vs-screen color, CSS color syntax, or historical color terminology. Use this skill whenever the user is choosing, comparing, generating, naming, converting, or explaining colors, even if they do not explicitly ask for "color theory.

Frontend & DesignIn 1 list39

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