{"id":"0a3d9056-502e-4500-8e2f-e875aee65e6c","shortId":"u8nEZc","kind":"skill","title":"sprite-animation","tagline":"A pixel / sprite-style animated explainer slide — full-bleed cream stage,\nbold display year, animated pixel-art mascot (e.g. Hanafuda card, mushroom,\nor 8-bit console), kinetic Japanese display type, ticking timeline ribbon.\nReads like a single frame of an educational motion vide","description":"# Sprite Animation Skill\n\nProduce a single animated frame of an educational explainer — the kind you\nmight screen-record into a vertical video. Pixel-art mascots, big year\ndisplay, looping CSS animations, kinetic Japanese / English display type.\n\n## Workflow\n\n1. **Read the active DESIGN.md** (injected above). Pick the loudest serif\n token for the year, a sturdy sans for headlines, and a mono token for\n timeline / index labels.\n2. **Pick the topic** from the brief (e.g. \"Nintendo · 1889 — Hanafuda\").\n You always need: a year, a one-line headline, an animated subject (a\n pixel sprite — character, object, or icon), and a short caption.\n3. **Stage** — full-bleed cream / off-white background (`#f5efe2`) with a\n subtle paper grain. Keep margins generous; this is one beat of a video.\n4. **Top bar** — small mono row:\n - Left: title slug (\"名次の/番組\" or \"EP. 01 / NINTENDO\")\n - Right: progress dots (\"01 / 12\") and a \"REC\" stamp\n5. **Subject animations** — at least three independent looping animations\n on the page:\n - **Big year**: the headline year (e.g. \"1889年\") fills the lower-left,\n in a serif display weight. It has a subtle vertical glitch / scanline\n animation (clip-path keyframes), and a 1-frame \"pop\" every loop.\n - **Pixel sprite card**: a 96×128 pixel-art card or character (use an\n inline SVG with crisp `shape-rendering: crispEdges` rectangles, or a\n `box-shadow` pixel grid). Subtle bobbing animation (±4px, 1.6s).\n - **Kinetic kana**: 1–2 Japanese / kanji characters that fade-and-slide\n in sync with the bob (e.g. \"花\" — *hana* — flower).\n - **Tick ribbon**: bottom of the stage, a tape/ribbon with year ticks\n (1889 · 1907 · 1949 · 1977 · 1985 · 2006 · 2017) sliding left at a\n slow constant speed.\n6. **Caption block** — small mono caption explaining the trivia:\n \"Nintendo started as a Hanafuda playing-card maker in Kyoto, 1889.\n Mario didn't show up for another ninety-six years.\"\n7. **Write** a single HTML document:\n - `` through ``, CSS inline, no external JS.\n - All animations use `@keyframes` + `animation: ... infinite`.\n - Stage uses a fixed canvas ratio (e.g. 16:9 letterboxed) so the loop\n reads as a single frame from a video.\n - `data-od-id` on stage, year, sprite, caption, and tick ribbon.\n8. **Self-check**:\n - The page is one cohesive scene, not a collage. The eye lands on the\n year first, then the sprite, then the caption.\n - At least 3 independent looping animations are visible.\n - The color palette is restrained (cream + a single accent red + ink).\n - No external assets — all sprites are inline SVG or CSS.\n\n## Output contract\n\nEmit between `` tags:\n\n```\n\n\n...\n\n```\n\nOne sentence before the artifact, nothing after.","tags":["sprite","animation","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design"],"capabilities":["skill","source-nexu-io","skill-sprite-animation","topic-agent-skills","topic-ai-agents","topic-ai-design","topic-byok","topic-claude","topic-claude-code-for-design","topic-claude-design","topic-coding-agents","topic-design-systems","topic-design-tools","topic-desktop-app","topic-figma-alternative"],"categories":["open-design"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/nexu-io/open-design/sprite-animation","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add nexu-io/open-design","source_repo":"https://github.com/nexu-io/open-design","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 36607 github stars · SKILL.md body (2,905 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-11T06:52:26.957Z","embedding":null,"createdAt":"2026-05-01T18:52:34.053Z","updatedAt":"2026-05-11T06:52:26.957Z","lastSeenAt":"2026-05-11T06:52:26.957Z","tsv":"'01':191,196 '1':89,245,288 '1.6':284 '12':197 '128':255 '16':389 '1889':126,318,352 '1889年':220 '1907':319 '1949':320 '1977':321 '1985':322 '2':117,289 '2006':323 '2017':324 '3':152,443 '4':178 '4px':283 '5':202 '6':332 '7':364 '8':30,415 '9':390 '96':254 'accent':457 'activ':92 'alway':129 'anim':3,9,20,51,56,82,139,204,210,238,282,377,380,446 'anoth':359 'art':23,75,258 'artifact':479 'asset':462 'background':161 'bar':180 'beat':174 'big':77,214 'bit':31 'bleed':14,156 'block':334 'bob':281,302 'bold':17 'bottom':309 'box':276 'box-shadow':275 'brief':123 'canva':386 'caption':151,333,337,411,440 'card':27,252,259,348 'charact':144,261,292 'check':418 'clip':240 'clip-path':239 'cohes':423 'collag':427 'color':450 'consol':32 'constant':330 'contract':471 'cream':15,157,454 'crisp':267 'crispedg':271 'css':81,371,469 'data':404 'data-od-id':403 'design.md':93 'didn':354 'display':18,35,79,86,229 'document':369 'dot':195 'e.g':25,124,219,303,388 'educ':47,60 'emit':472 'english':85 'ep':190 'everi':248 'explain':10,61,338 'extern':374,461 'eye':429 'f5efe2':162 'fade':295 'fade-and-slid':294 'fill':221 'first':434 'fix':385 'flower':306 'frame':44,57,246,399 'full':13,155 'full-ble':12,154 'generous':170 'glitch':236 'grain':167 'grid':279 'hana':305 'hanafuda':26,127,345 'headlin':108,137,217 'html':368 'icon':147 'id':406 'independ':208,444 'index':115 'infinit':381 'inject':94 'ink':459 'inlin':264,372,466 'japanes':34,84,290 'js':375 'kana':287 'kanji':291 'keep':168 'keyfram':242,379 'kind':63 'kinet':33,83,286 'kyoto':351 'label':116 'land':430 'least':206,442 'left':184,225,326 'letterbox':391 'like':41 'line':136 'loop':80,209,249,394,445 'loudest':98 'lower':224 'lower-left':223 'maker':349 'margin':169 'mario':353 'mascot':24,76 'might':65 'mono':111,182,336 'motion':48 'mushroom':28 'need':130 'nineti':361 'ninety-six':360 'nintendo':125,192,341 'noth':480 'object':145 'od':405 'off-whit':158 'one':135,173,422,475 'one-lin':134 'output':470 'page':213,420 'palett':451 'paper':166 'path':241 'pick':96,118 'pixel':5,22,74,142,250,257,278 'pixel-art':21,73,256 'play':347 'playing-card':346 'pop':247 'produc':53 'progress':194 'ratio':387 'read':40,90,395 'rec':200 'record':68 'rectangl':272 'red':458 'render':270 'restrain':453 'ribbon':39,308,414 'right':193 'row':183 'san':106 'scanlin':237 'scene':424 'screen':67 'screen-record':66 'self':417 'self-check':416 'sentenc':476 'serif':99,228 'shadow':277 'shape':269 'shape-rend':268 'short':150 'show':356 'singl':43,55,367,398,456 'six':362 'skill':52 'skill-sprite-animation' 'slide':11,297,325 'slow':329 'slug':186 'small':181,335 'source-nexu-io' 'speed':331 'sprite':2,7,50,143,251,410,437,464 'sprite-anim':1 'sprite-styl':6 'stage':16,153,312,382,408 'stamp':201 'start':342 'sturdi':105 'style':8 'subject':140,203 'subtl':165,234,280 'svg':265,467 'sync':299 'tag':474 'tape/ribbon':314 'three':207 'tick':37,307,317,413 'timelin':38,114 'titl':185 'token':100,112 'top':179 'topic':120 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-design' 'topic-byok' 'topic-claude' 'topic-claude-code-for-design' 'topic-claude-design' 'topic-coding-agents' 'topic-design-systems' 'topic-design-tools' 'topic-desktop-app' 'topic-figma-alternative' 'trivia':340 'type':36,87 'use':262,378,383 'vertic':71,235 'vide':49 'video':72,177,402 'visibl':448 'weight':230 'white':160 'workflow':88 'write':365 'year':19,78,103,132,215,218,316,363,409,433 '名次の':187 '番組':188 '花':304","prices":[{"id":"9e8885a1-6e3f-4643-842a-3f2bc1caf649","listingId":"0a3d9056-502e-4500-8e2f-e875aee65e6c","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"nexu-io","category":"open-design","install_from":"skills.sh"},"createdAt":"2026-05-01T18:52:34.053Z"}],"sources":[{"listingId":"0a3d9056-502e-4500-8e2f-e875aee65e6c","source":"github","sourceId":"nexu-io/open-design/sprite-animation","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/sprite-animation","isPrimary":false,"firstSeenAt":"2026-05-01T18:52:34.053Z","lastSeenAt":"2026-05-11T06:52:26.957Z"},{"listingId":"0a3d9056-502e-4500-8e2f-e875aee65e6c","source":"skills_sh","sourceId":"nexu-io/open-design/sprite-animation","sourceUrl":"https://skills.sh/nexu-io/open-design/sprite-animation","isPrimary":true,"firstSeenAt":"2026-05-07T20:42:46.968Z","lastSeenAt":"2026-05-07T22:41:47.588Z"}],"details":{"listingId":"0a3d9056-502e-4500-8e2f-e875aee65e6c","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"sprite-animation","github":{"repo":"nexu-io/open-design","stars":36607,"topics":["agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design","coding-agents","design-systems","design-tools","desktop-app","figma-alternative","generative-ai","hermes-agent","local-first","nextjs","no-code","prototyping","ui-generator","vibe-coding"],"license":"apache-2.0","html_url":"https://github.com/nexu-io/open-design","pushed_at":"2026-05-11T06:48:43Z","description":"🎨 Local-first, open-source alternative to Anthropic's Claude Design. ⚡ 19 Skills · ✨ 71 brand-grade Design Systems 🖼 Generate web · desktop · mobile prototypes · slides · images · videos · HyperFrames 📦 Sandboxed preview · HTML/PDF/PPTX/MP4 export 🤖 Runs on Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen / Copilot / Hermes / Kimi CLI.","skill_md_sha":"5c51a1f683dd2fd763fb82915f58a05b800335f8","skill_md_path":"skills/sprite-animation/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/sprite-animation"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"sprite-animation","description":"A pixel / sprite-style animated explainer slide — full-bleed cream stage,\nbold display year, animated pixel-art mascot (e.g. Hanafuda card, mushroom,\nor 8-bit console), kinetic Japanese display type, ticking timeline ribbon.\nReads like a single frame of an educational motion video — looping CSS\nkeyframes, no JS, ready to be screen-recorded into a vertical video.\nUse when the brief asks for a \"sprite animation\", \"pixel-art video\",\n\"8-bit explainer\", \"history of X explainer\", \"kinetic typography history\",\n\"Nintendo-style\", \"精灵图动画\", \"像素动画\", or \"复古动画\"."},"skills_sh_url":"https://skills.sh/nexu-io/open-design/sprite-animation"},"updatedAt":"2026-05-11T06:52:26.957Z"}}