KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #developer-tools #ai-agent #claude-code #codex #typescript #ai-agents #deepseek-harness #mcp #cli #rust

claude-custom-skills-demo

★ 7 Open GitHub ↗

A custom skill to generate and then animate an image via Google's Gemini / Nano Banana and Veo models

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Animated Image Skill for Claude Code

A [Claude Code custom skill](https://code.claude.com/docs/en/skills) that generates images with Google's Gemini image model, then animates them into short videos using Google's Veo video model — all from natural language inside Claude Code.

> **"Use the animated-image skill to create a character profile for a cyberpunk archivist, then animate the most obvious motion."**

## Demo Outputs

#### "The Archivist" — Character Animation

[![The Archivist Demo](https://img.youtube.com/vi/nsnl-RTPL6U/0.jpg)](https://www.youtube.com/watch?v=nsnl-RTPL6U "The Archivist — Character Animation Demo")

#### Minimalist Image → Animation

[![Animated Image Skill Demo](https://img.youtube.com/vi/br81_vMItXs/0.jpg)](https://www.youtube.com/watch?v=br81_vMItXs "Animated Image Skill Demo")

## How It Works

1. You describe what you want in plain language
2. Claude generates a static image via Gemini's image model
3. Claude picks the most obvious motion (or you specify one)
4. The image is animated into a short video via Google's Veo model
5. Both files are saved and captioned

No manual API calls, no boilerplate — just a prompt.

## Quickstart

### Prerequisites

- [Claude Code](https://code.claude.com) installed and authenticated
- A Google API key from [Google AI Studio](https://aistudio.google.com/) with access to Gemini and Veo models

### Install

```bash
# Clone this repo
git clone https://github.com/zackproser/claude-custom-skills-demo.git
cd claude-custom-skills-demo

# Copy the skill to your personal skills directory
SKILL=animated-image
mkdir -p ~/.claude/skills/$SKILL
rsync -a skills/$SKILL/ ~/.claude/skills/$SKILL/

# Install dependencies
cd ~/.claude/skills/$SKILL && npm i

# Configure your API key
cp -n .env.example .env
# Edit .env and set GOOGLE_API_KEY=your_key_here
```

Personal skills in `~/.claude/skills/` are available across all your projects automatically.

### Verify Installation

Start a new Claude Code session (or restart your current one), then:

```
Which skills do you have?
```

Claude should list `animated-image` among its available skills.

## Usage

Invoke the skill naturally or with a slash command:

```
# Natural language (Claude auto-detects the skill)
Generate an image of a wooden ball on a ramp with clean primary colors, then animate it rolling down.

# Slash command
/animated-image a serene mountain lake at sunset
```

### Customizing the Animation

By default, Claude picks the most obvious motion in the scene. You can guide it:

```
Use the animated-image skill to create a campfire in a forest clearing.
For the animation, make the flames dance and sparks float upward.
```

### Output

Generated images and videos are saved to `~/.claude/outputs/` by default. Set `OUTPUT_DIR` in your `.env` to change this.

## Troubleshooting

| Problem | Fix |
|---|---|
| Skill doesn't appear | Restart Claude Code so it discovers new skills |
| Module not found error | Run `cd ~/.claude/skills/animated-image && npm i` |
| API errors | Check that `.env` has a valid `GOOGLE_API_KEY` with Gemini + Veo access |

## Learn More

- [Claude Code Skills Documentation](https://code.claude.com/docs/en/skills)
- [Agent Skills open standard](https://agentskills.io)
- [Google AI Studio](https://aistudio.google.com/) (API keys)

claude-custom-skills-demo

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README