From pet-platformer
Turn a packaged Codex pet (the output of hatch-pet - pet.json + spritesheet.webp) into a playable, customizable side-scrolling platformer that ships as a self-contained static site. Use when the user wants to build a game from a pet sprite, theme or customize a pet game, generate themed game art around a Codex pet, or deploy a shareable pet game. The pet's fixed 8x9 atlas drives the player character; the output is a static bundle (index.html + game.js + styles.css + assets) with no backend, deployable to Netlify or any static host.
How this skill is triggered — by the user, by Claude, or both
Slash command
/pet-platformer:pet-platformerThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Build a side-scrolling platformer ("Crystal Run") around a Codex pet and ship it
Build a side-scrolling platformer ("Crystal Run") around a Codex pet and ship it as a self-contained static site — no build step, no backend.
The pet's fixed 8x9 / 192x208 sprite atlas drives the player character; rows map
to states (idle, run-left/right, wave, jump, fail, wait). The generated output is
just index.html, game.js, styles.css, and an assets/ folder, with all
paths relative — so it runs from any static file server and deploys cleanly.
This skill consumes the output of hatch-pet. Atlas geometry and the pet
package layout are defined in references/codex-pet-contract.md; the row-to-state
map the engine encodes is in references/animation-rows.md. Don't re-derive
them - they are the source of truth.
A pet, located one of three ways:
--pet <id> -> ${CODEX_HOME:-$HOME/.codex}/pets/<id>/--pet-dir <folder> -> any folder with pet.json + a spritesheet--petdex <slug> -> pulled live from the PetDex
gallery by slug (downloads pet.json + spritesheet via the PetDex manifest API
and caches them under ${CODEX_HOME:-$HOME/.codex}/petdex-cache/<slug>/)List local pets, or browse the PetDex gallery for a slug:
ls "${CODEX_HOME:-$HOME/.codex}/pets/" # local pets
# or browse https://petdex.crafter.run/ and pass the slug to --petdex
OPENAI_API_KEY, or a Codex API-key
login) and curl.netlify-cli and netlify login.SKILL_DIR="<this skill's dir>" # e.g. ./skills/pet-platformer
Read pet.json and inspect the spritesheet so the world matches the character.
Confirm the important levers with the user instead of silently picking defaults:
Write the choices to game-config.json (schema: references/game-config.md;
starter: templates/game-config.example.json). All fields are optional.
Only if the user wants custom art. Each generated file is optional; anything not generated falls back to procedural pixel art. This step is skippable entirely.
python3 "$SKILL_DIR/scripts/generate_assets.py" \
--pet <id> \
--config /path/to/game-config.json \
--out /path/to/generated-assets \
--keys background,collectible,walker
Preview prompts first without spending tokens:
python3 "$SKILL_DIR/scripts/generate_assets.py" \
--pet <id> --config /path/to/game-config.json \
--out /tmp/generated-assets --dry-run
Asset keys: background, collectible, super, walker, flyer, spiker, tile, goal.
Inspect the PNGs before building and regenerate anything that misses.
python3 "$SKILL_DIR/scripts/build_game.py" \
--pet <id> \
--config /path/to/game-config.json \
--output-dir /path/to/<pet-id>-site
The output is a flat static bundle:
<pet-id>-site/
index.html
game.js
styles.css
assets/<pet-id>/spritesheet.webp (+ any generated art)
Swap --pet <id> for --petdex <slug> to build straight from the PetDex
gallery. Pass --assets-dir <dir> to wire in generated art (or drop the
<key>.png files under <output>/assets/ before building). Use --force to
overwrite a non-empty output directory.
cd /path/to/<pet-id>-site
python3 -m http.server 8000
# open http://localhost:8000/
Verify the pet animates and controls correctly, the theme/labels are right, and any generated assets appear.
The bundle is self-contained, so deploy it directly:
"$SKILL_DIR/scripts/deploy_netlify.sh" \
--dir /path/to/<pet-id>-site \
--name <pet-id>
First run creates https://<pet-id>.netlify.app and pushes a production deploy;
re-run with --site <site-id> (or NETLIFY_SITE_ID) to redeploy the same site.
The bundle also deploys to any other static host (GitHub Pages, etc.) unchanged.
Left/right or A/D move. Up, W, or Space jumps. Hold jump for height.
R restarts the current life.
Stomp walkers and flyers from above. Spikers cannot be stomped unless boosted. Collect enough collectibles to open the portal. Touch controls appear on coarse-pointer devices.
templates/game.js - the platformer runtimetemplates/styles.css - the game chrometemplates/index.html.tmpl - the static game page templatescripts/build_game.py - assembles the static sitescripts/generate_assets.py - generates themed artscripts/deploy_netlify.sh - one-command Netlify deployreferences/animation-rows.md, references/codex-pet-contract.md - pet atlas contractreferences/game-config.md - config schemaProvides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
npx claudepluginhub shmulc8/codex-pet-platformer --plugin pet-platformer