Isometric Game Skills

🏔️ Isometric Game Agent Skills

Production-grade AI agent skills for building isometric games — from AI-generated art to the rendering engine.

The missing toolkit that teaches AI coding agents how senior game artists and engine programmers actually build isometric worlds: seamless tiles, depth-sorted sprites, grid math, and the whole asset pipeline.

Quick Start · Live Demo · The Skills · Gallery · How Skills Work · Contributing · Roadmap

---

Why this exists

AI coding agents are great at React and terrible at isometric games. They generate tiles that do not align, sprites in 5 different styles, characters that render behind walls, and renderers that drop to 12fps. Not because the models are weak — because nobody wrote down how an experienced isometric dev actually works.

This repo is that knowledge, encoded as SKILL.md files an agent can load on demand. Point Claude Code, Cursor, or Codex at it and your agent suddenly builds isometric worlds like it has shipped three of them.

New here? Start with the meta-skill using-isometric-skills — it routes any incoming task to the right workflow.

🚀 Quick Start

git clone https://github.com/0xheycat/isometric-game-skills.git

Then wire it into your agent (pick your tool):

Tool	How to install
Claude Code	Copy any skills/<name>/ folder into .claude/skills/ in your project.
Cursor	See docs/cursor-setup.md — add the skill body to project rules.
Codex / other	Paste the relevant SKILL.md into your agent's context or skills folder.

Full walkthrough: docs/getting-started.md.

🎮 Live Demo

▶️ Play it live in your browser — hosted on GitHub Pages, no install. Drag to pan, scroll to zoom, toggle 🖼️ Sprites.

A single-file, dependency-free Canvas2D isometric renderer lives in demo/ — proof these skills are real, not theory. Procedural terrain, depth-sorted objects, tile picking, and a pan/zoom camera, all in one HTML file.

python3 -m http.server 8080   # then open http://localhost:8080/demo/

It directly exercises six skills: isometric-grid-math, canvas2d-isometric-renderer, depth-sorting-occlusion, tilemap-data-format, tile-picking-interaction, and camera-pan-zoom-controls. See demo/README.md.

Want the same world with painterly sprites instead of flat blocks? Swap in assets from the generation skills + spritesheet-atlas-packing.

🗺️ How it all fits together

These aren't 20 loose tips — they chain into one pipeline that takes an agent from an empty folder to a playable isometric scene. Proof, not theory.

• 🎯 GOAL.md — the measurable Definition of Done. When every box is checked, the goal is achieved.
• 🏗️ docs/build-a-game.md — the capstone walkthrough that runs all 20 skills in order, with an acceptance test per phase.
• ✅ scripts/validate_skills.py — CI-enforced check that every SKILL.md is well-formed (the skills valid badge above). Machine-readable index: skills.json.
• 🧮 engine/iso.js — the canonical 2:1 iso math (grid↔screen, picking, depth sort) with passing unit tests (engine/iso.test.mjs, run in CI). The math is tested, not asserted.
• 🗂️ examples/sample-map.json — a hand-authored map in the tilemap-data-format. Render it headless with examples/render-map.mjs → sample-map.svg (drawn by the tested engine, no browser).

🧩 The Skill Collection

21 skills covering the full isometric game pipeline, grouped by phase. Run them in order, or load just the one you need.

🧭 Meta

Skill	What it does
using-isometric-skills	Router — maps any task to the right skill, in the right order.

🎨 Art Foundations

Skill	What it does
comfyui-lowvram-setup	Reproducible SDXL setup that never OOMs on a 12GB GPU.
isometric-art-direction	Lock ONE style sheet so 200 assets look like one game.

🖼️ Asset Generation (AI)

Skill	What it does
seamless-isometric-terrain ⭐	Flagship — ground tiles that tile seamlessly with no edge seams.
isometric-object-sprites	Trees, rocks, props — isolated, consistent, drop-in ready.
isometric-building-sprites	Houses & barns with correct footprint and occlusion.
isometric-character-sprites	8-direction characters with a fixed feet-anchor.
animated-sprite-generation	Seamless looping water, fire, windmills as frame strips.

🧰 Asset Processing

Skill	What it does
transparent-cutout-cleanup	Clean alpha edges, no halo or fringe.
spritesheet-atlas-packing	Pack sprites into one atlas + JSON map.
autotiling-transitions	Bitmask edge/corner blending between terrains.

⚙️ Engine & Rendering

Skill	What it does
isometric-grid-math	Exact grid <-> screen transforms (and the inverse).
canvas2d-isometric-renderer	The core render loop: tiles, then sorted objects.
depth-sorting-occlusion	Correct draw order for tall and multi-tile objects.
tilemap-data-format	Layered, versionable JSON map format.
godot4-isometric-tilemap	Godot 4 native iso: TileMapLayer + Y-sort done right.

🕹️ Gameplay Systems

Skill	What it does
isometric-pathfinding	A* on the walkable layer with proper iso neighbors.
camera-pan-zoom-controls	Pan, zoom-to-cursor, and bounds clamping.
tile-picking-interaction	Turn a mouse position into the correct tile.

🚀 Polish & Ship

Skill	What it does
canvas-performance-optimization	Profile, cull, batch — hold a steady 60fps.
asset-pipeline-automation	One command: clean -> pack -> validate.

🖼️ Gallery

Real output from following these skills (Hay Day-style painterly isometric):

Seamless terrain	Object sprites	Building sprites

8-direction character	Autotiling transitions	Animated frames

📐 How Skills Work

Each skill is a single SKILL.md with YAML frontmatter and a fixed anatomy designed to stop an agent from cutting corners:

• Frontmatter — name + a description that starts with "Use when…" so agents auto-select it.
• Process — numbered, non-negotiable steps (process, not prose).
• Rationalizations — the excuses an agent makes, paired with the reality, so it cannot talk itself out of doing the work.
• Red Flags — stop conditions that mean you are about to ship something broken.
• Verification — a checklist; you are not done until every box is checked.

Read the full spec in docs/skill-anatomy.md.

🤝 Contributing

PRs welcome — new skills, fixes, and screenshots all help. Read CONTRIBUTING.md and use the new-skill issue template to propose one. Every skill must follow the anatomy and ship with a verification checklist.

🗺️ Roadmap

• Core 20 skills (art -> engine -> gameplay -> ship)
• Godot 4 engine reference pack (godot4-isometric-tilemap) — Phaser / Unity next
• Downloadable starter tile set (CC0)
• Web playground to preview tile sets
• Video walkthroughs per skill

⭐ Star this repo

If this saved you a weekend of fighting your agent, star it — it helps other game devs find it.

📈 Star History

📄 License

MIT — see LICENSE. Use it in commercial games, fork it, remix it.

---

Keywords

_{isometric-game-skills · isometric · game-development · gamedev · ai-agents · agent-skills · claude-code · cursor · comfyui · sdxl · sprite-generation · tilemap · autotiling · canvas2d · pathfinding · depth-sorting · godot · game-art · asset-pipeline · procedural-generation · 2d-games}