Source profileQuality 68/100

nexu-io/open-design/design-templates/sprite-animation/SKILL.md

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 h

Source repository stars: 82,073
Declared platforms: 0
Static risk flags: 0
Last source update: 2026-07-28
Source checked: 2026-07-28

Decision Compatibility Install Workflow Permissions Evidence Source

Decision brief

What it does—and where it fits

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.

Best for

Use when the brief asks for a "sprite animation", "pixel-art video", "8-bit explainer", "history of X explainer", "kinetic typography h

Not for

Tasks that require unconfirmed production actions or broad system permissions.
Environments where the pinned source and install steps cannot be inspected.

Compatibility matrix

Platform support, with evidence labels

Platform	Status	Evidence	What to check
Codex	Not declared	No explicit evidence	Portability before use
Claude Code	Not declared	No explicit evidence	Portability before use
Cursor	Not declared	No explicit evidence	Portability before use
Gemini CLI	Not declared	No explicit evidence	Portability before use

Open the compatibility checker

Installation

Inspect first. Install second.

The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.

Source-detected install commandSource

npx skills add https://github.com/nexu-io/open-design --skill "design-templates/sprite-animation"

Safe inspection promptEditorial

Inspect the Agent Skill "sprite-animation" from https://github.com/nexu-io/open-design/blob/89d6d4ef21baf80f871595abdf6f7de6e941dd44/design-templates/sprite-animation/SKILL.md at commit 89d6d4ef21baf80f871595abdf6f7de6e941dd44. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.

Workflow

What the source asks the agent to do

01
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…
Read the active DESIGN.md (injected above). Pick the loudest serifPick the topic from the brief (e.g. "Nintendo · 1889 — Hanafuda").Stage — full-bleed cream / off-white background (f5efe2) with a
02
Output contract
One sentence before the artifact, nothing after.
One sentence before the artifact, nothing after.

Permission review

Static risk signals and limitations

No configured static risk pattern was detected

This is not proof of safety. Runtime behavior, indirect dependencies, and hidden external systems are outside the static scan.

Evidence record

Why each signal appears

EvidenceSourceComputedTestedEditorial

Signal	Value	Evidence type	Meaning
Quality score	68/100	Computed	Documentation, specificity, maintenance, and trust rules
Repository stars	82,073	Source	Repository attention, not individual Skill quality
Compatibility	0 platforms	Source	Declared in the catalog source record
Usage guide	automated source guide	Editorial	Generated or reviewed according to the visible evidence level

Pinned source

Provenance and original SKILL.md

Repository: nexu-io/open-design
Skill path: design-templates/sprite-animation/SKILL.md
Commit: 89d6d4ef21baf80f871595abdf6f7de6e941dd44
License: Apache-2.0
Collected: 2026-07-28
Default branch: main

View the original SKILL.md

Sprite Animation Skill

Workflow

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.
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.
Stage — full-bleed cream / off-white background (#f5efe2) with a subtle paper grain. Keep margins generous; this is one beat of a video.
Top bar — small mono row:
- Left: title slug ("名次の/番組" or "EP. 01 / NINTENDO")
- Right: progress dots ("01 / 12") and a "REC" stamp
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" every loop.
- Pixel sprite card: a 96×128 pixel-art card or character (use an inline SVG with crisp shape-rendering: crispEdges rectangles, or a box-shadow pixel grid). Subtle bobbing animation (±4px, 1.6s).
- Kinetic kana: 1–2 Japanese / kanji characters that fade-and-slide in sync with the bob (e.g. "花" — hana — flower).
- Tick ribbon: bottom of the stage, a tape/ribbon with year ticks (1889 · 1907 · 1949 · 1977 · 1985 · 2006 · 2017) sliding left at a slow constant speed.
Caption block — small mono caption explaining the trivia: "Nintendo started as a Hanafuda playing-card maker in Kyoto, 1889. Mario didn't show up for another ninety-six years."
Write a single HTML document:
- <!doctype html> through </html>, 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 reads as a single frame from a video.
- data-od-id on stage, year, sprite, caption, and tick ribbon.
Self-check:
- The page is one cohesive scene, not a collage. The eye lands on the year first, then the sprite, then the caption.
- 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 <artifact> 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.

Alternatives

Compare before choosing

Computed 997

event4u-app/agent-config

design-review

Use when the user says "review the design", "check the UI", or wants a comprehensive UI/UX review. Uses a 7-phase methodology covering interaction, responsiveness, accessibility, and more.

Computed 9831,966

K-Dense-AI/scientific-agent-skills

dask

Distributed computing for larger-than-RAM pandas/NumPy workflows. Use when you need to scale existing pandas/NumPy code beyond memory or across clusters. Best for parallel file processing, distributed ML, integration with existing pandas code. For out-of-core analytics on single machine use vaex; for in-memory speed use polars.

Computed 9831,966

K-Dense-AI/scientific-agent-skills

medchem

Medicinal chemistry filters for compound triage. Apply drug-likeness rules (Lipinski, Veber, CNS), structural alert catalogs (PAINS, NIBR, ChEMBL), complexity metrics, and the medchem query language for library filtering.

Computed 9831,966

K-Dense-AI/scientific-agent-skills

neurokit2

Use NeuroKit2 to build or audit reproducible research workflows for physiological time-series preprocessing, event/interval analysis, multimodal alignment, variability, and complexity. Trigger when code imports neurokit2 or needs its current APIs, schemas, and method-aware validation—not for diagnosis or device validation.