How to use the Sprite Animation skill: pixel explainer frames

What does the Sprite Animation skill make the agent do?

When the skill is active, the agent builds one animated explainer frame, not a multi-slide deck. The layout is a full-bleed cream stage with a large display number, a central pixel-art mascot drawn in SVG or pure CSS, kinetic Chinese or Japanese display text, and a timeline ribbon along the bottom that keeps scrolling.

All motion is written as CSS @keyframes that loop without JavaScript. The palette is a fixed retro set of red, cream and dark green. The result is a self-contained web page.

• Full-bleed cream background
• Bold display year or number
• Central pixel-art mascot
• Kinetic Chinese or Japanese display text
• Looping scrolling timeline ribbon at the bottom

How do you install the Sprite Animation skill?

Download the sprite-animation ZIP from this page. Unzip it into one of two locations: your personal skills folder at ~/.claude/skills/, or a project-level .claude/skills/ folder inside the project you are working in. A personal install is available to all your projects; a project install applies only to that project.

If you use the Claude apps instead, open Settings, go to Capabilities, and upload the skill under Skills.

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

What files come with the skill?

The package contains two files. SKILL.md holds the instructions the agent follows, including the layout and design rules. example.html is an example of the kind of animated page the skill produces, so you can open it in a browser and see the expected look before you use the skill.

• SKILL.md: the instructions and design rules
• example.html: a sample animated page to view in a browser

How do you trigger the skill with a natural request?

You do not need a special command. Describe what you want as an educational or marketing animated frame, and mention the retro or pixel style. The skill's description is about pixel art, kinetic type and looping CSS frames for explainers, so requests that name those ideas are the most likely to match.

Include the topic, the big number or year you want featured, and any Chinese or Japanese text you want as display type. Specify whether the frame is portrait or landscape if it matters, since the skill notes that both work.

• Name the topic and the big number or year to feature
• Say 'pixel' or '8-bit' or 'retro' to match the style
• Ask for a looping animated explainer frame
• Give the display text if you have a specific Chinese or Japanese phrase

What does a good request look like?

Clear requests give the agent the content it needs. Here is an example of the kind of prompt that fits the skill. Adjust the topic, number and text to your own project.

• Example: Make a retro 8-bit explainer frame about how solar panels store energy, with a large display number 2030 and a pixel mascot in the centre.
• Example: Create a looping pixel-style animated post announcing our product launch, with kinetic Japanese display text and a scrolling timeline ribbon at the bottom.

What do you need to view and export the result?

The output is an HTML page, so you need a web browser to view the animation. The skill's animation loops with CSS alone, so no scripts run in the page. To turn the animation into a video file, you need screen-recording software and must record the browser window yourself. The skill does not export video directly.

• A web browser to view the animated HTML page
• Screen-recording software if you want a video file
• The skill does not run scripts and does not use the network

What are the safety notes?

According to the skill's listing, it runs no scripts and uses no network access. It is a set of written instructions and a sample HTML file. Because it does not run code, the main thing to review is the generated HTML page itself before sharing it, as you would with any web content.

• Runs scripts: no
• Uses network: no
• Review the generated page before publishing it

What tips help you get better results?

Open example.html first to match your expectations. Keep text short, because the layout is built around one big number and one display phrase. If you need a different palette or a formal print layout, pick a different tool, since this template uses a fixed retro palette.

• Open example.html before your first request
• Keep display text short so it fits the kinetic layout
• Use a screen recorder to capture the loop as video
• Expect a fixed red, cream and dark green palette