How to use the sprite-animation agent skill (install and examples)

What an agent skill is and what this one makes the agent do

An agent skill is a folder with a SKILL.md file that tells an AI agent how to handle a certain kind of task. When your request matches the skill, the agent follows its workflow instead of improvising.

This skill is for pixel-style or 8-bit explainers. The agent builds a single HTML page with a cream background, a large year in the lower-left, an animated pixel-art sprite (for example a Hanafuda card, mushroom or 8-bit console), kinetic Japanese or English display type, and a tick ribbon of years sliding left. Every animation is CSS keyframes that loop, with no JavaScript, so the page can be screen-recorded into a short vertical video. The skill also reads the active DESIGN.md file for colours and fonts.

• Output: one HTML document with inline CSS
• Motion: at least three independent looping CSS animations
• Palette: cream background, one accent red and ink, per the skill's rules

Install the sprite-animation skill

Download the ZIP for this skill from this page and unzip it. The folder contains example.html and SKILL.md. You can install it in one of two places.

For personal use across projects, unzip it into ~/.claude/skills/. For a single project, unzip it into that project's .claude/skills/ folder. If you use the Claude apps instead, open Settings, go to Capabilities, and upload the skill under Skills.

• Personal: ~/.claude/skills/
• Single project: the project's .claude/skills/ folder
• Claude apps: Settings → Capabilities → Skills, then upload

Prepare a DESIGN.md file before you start

The skill requires a DESIGN.md design system file for the target project. The agent reads it for colours, typography, layout and components, and picks the serif token for the year, a sans for headlines and a mono token for labels.

Without a DESIGN.md file the skill has nothing to draw its colours and fonts from, so add one to your project before asking for an animation.

How to trigger the skill with natural requests

You do not need a special command. Describe the kind of piece you want and use words the skill recognises, such as sprite animation, pixel art animation, 8-bit explainer, retro animation, kinetic typography, history explainer or Nintendo style. Chinese triggers such as 精灵图 and 像素动画 are also listed.

Name the topic, the year and the trivia you want. The skill needs a year, a one-line headline, an animated subject and a short caption, so include or ask for all four.

• Create a sprite animation introducing trivia about a brand's history, using a pixel mascot and animated text.
• Make an 8-bit explainer about a company founded in 1889, with a Hanafuda accent and a short caption.
• Build a retro history explainer frame for a vertical video, using the colours and fonts in DESIGN.md.

Review and record the output

Open the generated HTML in a browser to view it. The stage uses a fixed 16:9 canvas, letterboxed, so the loop reads as one frame when you record it. Use a screen recorder to capture the video.

Check the page against the skill's self-check: the year should catch the eye first, then the sprite, then the caption, and the palette should stay restrained. Replace any trivia you have not verified before publishing.

Safety notes: scripts and network

This skill does not run scripts and does not use the network. It produces HTML and CSS only, and loads no external assets. Its output is a static looping scene with no JavaScript logic, so it is not suited to interactive or data-driven animation.

The sample trivia is written into the template, and the agent is not told to check sources. Verify every fact yourself before publishing.

Tips for better results

Give a clear topic and year, and ask for a single beat rather than a full video. The skill is built for one frame of an educational motion video.

Keep your DESIGN.md current, since colours and fonts come from it. If the palette drifts from the skill's cream, red and ink rules, ask the agent to restore them.

• Specify the sprite you want, such as a Hanafuda card, mushroom or 8-bit console
• Ask for Japanese or English display text explicitly
• Keep captions short, in mono type, to suit a vertical video