🏔️ 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 everySKILL.mdis well-formed (theskills validbadge 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 thetilemap-data-format. Render it headless withexamples/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+ adescriptionthat 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.
No comments yet
Be the first to share your take.