loktar00

Sprite Stack Tutorial Sequence — Design skill for Claude Code

Design community

Create a single self-contained HTML file using only HTML, CSS, and JavaScript.

How to install Sprite Stack Tutorial Sequence

Installs to ~/.claude/skills/loktar00-sprite-stacking-sprite-stack-tutorial-sequence/SKILL.md

Terminal

mkdir -p ~/.claude/skills/loktar00-sprite-stacking-sprite-stack-tutorial-sequence && curl -fsSL https://raw.githubusercontent.com/loktar00/sprite-stacking/HEAD/prompts/sprite-stack-tutorial-sequence.md -o ~/.claude/skills/loktar00-sprite-stacking-sprite-stack-tutorial-sequence/SKILL.md

Restart Claude Code, or start a new session, for it to be picked up.

What Sprite Stack Tutorial Sequence does

Create a single self-contained HTML file using only HTML, CSS, and JavaScript. No build tools or external assets. Use a full-screen 2D canvas.

THE PIECE: a SPRITE-STACKING tutorial, the pseudo-3D pixel-art technique where an object is a STACK of 2D cross-section sprites: each slice is a small pixel-art image of one horizontal layer of the object, the slices are drawn bottom to top with a fixed vertical offset of 1 pixel per layer, and every slice is rotated by the SAME angle about the SAME pivo

Alternatives in Design

Canvas Design — Create beautiful visual art in PNG and PDF documents using design philosophy 94.1k ★
Figma — Fetch design context, screenshots, and assets from Figma for implementation 14.6k ★
Canvas — Open, create, or update a visual canvas — add images, text, PDFs, wiki pages, and banana-generated assets to O 3.3k ★