sprite-animation
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 "复古动画".
Profile →npx skills add nexu-io/open-design --skill sprite-animation --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 1. **Read the active DESIGN.md** (injected above). Pick the loudest serif token for the year, a sturdy sans for headlines, and a mono token for timeline / index labels. 2. **Pick the topic** from the brief (e.g. "Nintendo · 1889 — Hanafuda"). You always need: a year, a one-line headline, an animated subject (a pixel sprite — character, object, or icon), and a short caption. 3. **Stage** — full-bleed cream / off-white background (`#f5efe2`) with a subtle paper grain. Keep margins generous; this is one beat of a video. 4. **Top bar** — small mono row: - Left: title slug ("名次の/番組" or "EP. 01 / NINTENDO") - Right: progress dots ("01 / 12") and a "REC" stamp 5. **Subject animations** — at least three independent looping animations on the page: - **Big year**: the headline year (e.g. "1889年") fills the lower-left, in a serif display weight. It has a subtle vertical glitch / scanline animation (clip-path keyframes), and a 1-frame "pop"
- Workflow
- Output contract
What does the sprite-animation skill do?
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 "复古动画".
How do I install it?
Run `npx skills add nexu-io/open-design --skill sprite-animation --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From nexu-io/open-design, a repository with 83,577 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.