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 "复古动画".

Quality

89%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Quality

Content

78%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is a tight, concrete workflow with specific specs and a self-check, well-organized into clear sections. The main gaps are mild intro redundancy and the absence of an explicit retry feedback loop and a complete HTML example.

Suggestions

Drop the restated intro paragraph ("Pixel-art mascots, big year display, looping CSS animations...") since the frontmatter description already covers it.

Add an explicit fix-and-retry step to the self-check (e.g. "If any check fails, revise the markup/animations and re-verify before emitting the artifact").

Include a minimal complete HTML skeleton (doctype, inline <style> with one @keyframes loop, data-od-id attributes) so the output contract is copy-paste ready.

Dimension	Reasoning	Score
Conciseness	The body is lean and assumes Claude's competence with concrete specs throughout, but the opening paragraph ("Pixel-art mascots, big year display, looping CSS animations, kinetic Japanese / English display type") partially restates the frontmatter description and could be trimmed.	4 / 5
Actionability	Gives concrete, executable specs (color #f5efe2, 96×128 sprite, ±4px/1.6s bob, clip-path keyframes, box-shadow pixel grid, shape-rendering: crispEdges, artifact tag format) but stops short of a complete copy-paste HTML example, leaving minor gaps.	4 / 5
Workflow Clarity	An 8-step numbered sequence with an explicit self-check checklist (eye-landing order, ≥3 looping animations, restrained palette, no external assets) provides clear checkpoints; however it lacks an explicit fix-and-retry feedback loop, so it sits just below the top anchor.	4 / 5
Progressive Disclosure	A compact single-purpose skill with no external references needed and well-organized sections (Workflow, Output contract, Self-check); no bundle files exist to reference, satisfying the simple-skill exception.	5 / 5
	Total	17 / 20 Passed

Description

100%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

The description is specific, complete, and distinctive, naming concrete artifact elements and technique constraints alongside a comprehensive bilingual trigger clause in third-person voice. It is among the strongest examples for this skill type.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete composition elements ("full-bleed cream stage, bold display year, animated pixel-art mascot", "kinetic Japanese display type, ticking timeline ribbon") and concrete technique constraints ("looping CSS keyframes, no JS"), giving comprehensive coverage of what the artifact contains.	5 / 5
Completeness	Explicitly answers both what ("pixel / sprite-style animated explainer slide") and when ("Use when the brief asks for a ...") with concrete trigger phrases.	5 / 5
Trigger Term Quality	Provides comprehensive natural trigger phrases including synonyms and bilingual variants ("sprite animation", "pixel-art video", "8-bit explainer", "kinetic typography history", "Nintendo-style", "精灵图动画", "像素动画", "复古动画") that users would naturally say.	5 / 5
Distinctiveness Conflict Risk	Occupies a clear niche (pixel/sprite animated explainer for vertical video) with highly specific triggers, making conflict with other skills minimal.	5 / 5
	Total	20 / 20 Passed

Validation

93%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

Criteria	Description	Result
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	15 / 16 Passed

Repository: nexu-io/open-design
Path: design-templates/sprite-animation/SKILL.md
Commit: 1a7a23d

Reviewed: about 6 hours ago

Table of Contents

Discovery Implementation Validation

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.