Mmcp.market

sprite-animation skill

by nexu-io·nexu-io/open-design·98k stars·Apache-2.0

A pixel / sprite-style animated explainer slide — full-bleed cream stage, bold display year, animated pixel-art mascot (e.g. Hanafuda card, mushroom, or 8-bit console), kinetic Japanese display type, ticking timeline ribbon. Reads like a single frame of an educational motion video — looping CSS keyframes, no JS, ready to be screen-recorded into a vertical video. Use when the brief asks for a "sprite animation", "pixel-art video", "8-bit explainer", "history of X explainer", "kinetic typography history", "Nintendo-style", "精灵图动画", "像素动画", or "复古动画".

A100/100content scan

Is the sprite-animation skill safe?

Clean: nothing in its files matched our rules. We read 2 files in the folder on 2026-09-28.

No findings.

Install the sprite-animation skill

A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description. 

git clone --depth 1 https://github.com/nexu-io/open-design.git /tmp/open-design
mkdir -p ~/.claude/skills
cp -r /tmp/open-design/design-templates/sprite-animation ~/.claude/skills/sprite-animation
available in every project

In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub

The instructions your agent would load

SKILL.md as published, without the frontmatter. Read it on GitHub

Sprite Animation Skill

Produce a single animated frame of an educational explainer — the kind you might screen-record into a vertical video. Pixel-art mascots, big year display, looping CSS animations, kinetic Japanese / English display type.

Workflow

token for the year, a sturdy sans for headlines, and a mono token for timeline / index labels.

  1. Read the active DESIGN.md (injected above). Pick the loudest serif

You always need: a year, a one-line headline, an animated subject (a pixel sprite — character, object, or icon), and a short caption.

  1. Pick the topic from the brief (e.g. "Nintendo · 1889 — Hanafuda").

subtle paper grain. Keep margins generous; this is one beat of a video.

  1. Stage — full-bleed cream / off-white background (#f5efe2) with a
  1. Top bar — small mono row:
  • Left: title slug ("名次の/番組" or "EP. 01 / NINTENDO")
  • Right: progress dots ("01 / 12") and a "REC" stamp

on the page:

  1. Subject animations — at least three independent looping animations

in a serif display weight. It has a subtle vertical glitch / scanline animation (clip-path keyframes), and a 1-frame "pop" every loop.

  • Big year: the headline year (e.g. "1889年") fills the lower-left,

inline SVG with crisp shape-rendering: crispEdges rectangles, or a box-shadow pixel grid). Subtle bobbing animation (±4px, 1.6s).

  • Pixel sprite card: a 96×128 pixel-art card or character (use an

in sync with the bob (e.g. "花" — hana — flower).

  • Kinetic kana: 1–2 Japanese / kanji characters that fade-and-slide

(1889 · 1907 · 1949 · 1977 · 1985 · 2006 · 2017) sliding left at a slow constant speed.

  • Tick ribbon: bottom of the stage, a tape/ribbon with year ticks

"Nintendo started as a Hanafuda playing-card maker in Kyoto, 1889. Mario didn't show up for another ninety-six years."

  1. Caption block — small mono caption explaining the trivia:
  1. Write a single HTML document:

reads as a single frame from a video.

  • <!doctype html> through , CSS inline, no external JS.
  • All animations use @keyframes + animation: ... infinite.
  • Stage uses a fixed canvas ratio (e.g. 16:9 letterboxed) so the loop
  • data-od-id on stage, year, sprite, caption, and tick ribbon.
  1. Self-check:

year first, then the sprite, then the caption.

  • The page is one cohesive scene, not a collage. The eye lands on the
  • At least 3 independent looping animations are visible.
  • The color palette is restrained (cream + a single accent red + ink).
  • No external assets — all sprites are inline SVG or CSS.

Output contract

Emit between tags:

<artifact identifier="sprite-anim-slug" type="text/html" title="Sprite animation — Title">
<!doctype html>
<html>...</html>
</artifact>

One sentence before the artifact, nothing after.

More skills from nexu-io/open-design

  • Aarticle-magazineHuashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.
  • Aaudio-jingleAudio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
  • Aaudio-jingleAudio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
  • Ablog-postA long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
  • Ablog-postA long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
  • Abuild-testRun the project's build / typecheck / lint / test commands and emit the build.passing + tests.passing signals devloop convergence reads.
  • Acard-twitterTwitter quote or data card designed to pair with a post.
  • Acard-xiaohongshuXiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.
  • Aclinical-case-reportStructured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
  • Aclinical-case-reportStructured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
  • Acode-importRead an existing repository's structure into the project cwd as a normalised snapshot the agent can analyse without re-walking the tree on every turn.
  • Acodex-interactive-capability-mapTurn a long-form article, thread, memo, or product narrative into a compact clickable capability map with a workflow loop, use-case matrix, and responsive detail panel.

All agent skills → · MCP servers