Experimenting with agent mode
Aug 13, 2025
Using GitHub Copilot agent mode to create tools for board games.
GitHub agent mode popped onto my radar recently so I tried it out with some tools I'm making to use with JOTL. JOTL (Jaws of the Lion) is a tactical board game by the makers of Gloomhaven. It's like D&D but all the scenarios are premade and you draw cards instead of rolling dice. My friends and I have almost complete it, and it has been very enjoyable!
I added copilot instructions to include context that I had success with when using Claude previously.
Ignore the contents of the `/dev` directory, these are notes for my purposes only. This app uses Flask to render the site locally. However it is served via GitHub Pages (relevant documents for that are in `/docs`). Think of `/docs` as our production environment, and Flask files as our development environment. Styling on the frontend is handled by `Chota`. Our goal is to keep this app simple and stick to vanilla JS, HTML, and CSS where possible. Avoid introducing frontend frameworks.
Then turned on agent mode in VS Code, and gave it the following prompt:
You are an experienced front-end engineer, and your job is to help me add a new page for the `hatchet` character in our development environment (remember this is just the Flask portion of our files). All of your work should be on a new branch called `hatchet` and you will submit a PR when you are done. The `red-guard` page was created to represent the `modified-red-guard.png` under `/artifacts`. Note that we do not need the following sections in our page that you see in the `original` image (xp notes, personal quest, and gold notes). Create me a page `/templates/hatchet.html` that is structurally the same as `templates/red-guard.html` and have it use the same code and styling found in `static`. However it should be populated with the content found from the `/artifacts/original-hatchet.jpg`. Think about this, and if needed ask me clarifying questions. Otherwise create a branch and get to work. Remember you are an experienced front end engineer and get to work.
Unfortunately the agent wasn't able to access a pivotal file.
I am unable to read the contents of the image file `/artifacts/original-hatchet.jpg` directly.
I attempted to workaround this by getting
a
JSON representation from Claude which the agent then treated as an incorrect source of truth. This was
problematic because the JSON data treated (+0) as (-1) and did not match information in
original-hatchet.jpg
{
"description": "Replace one (-1) card with one (+1) POISON card",
"boxes": 1,
"checked": false
},
{
"description": "Replace one (-1) card with one (+1) WOUND card",
"boxes": 1,
"checked": false
},
{
"description": "Replace one (-1) card with one (+1) IMMOBILIZE card",
"boxes": 1,
"checked": false
}
I gave it one more try to fix it, but eventually just made the changes manually. I was under the impression that I could use either agent mode or GitHub Copilot on the web to create a PR, but that turned out to be unsuccessful for me. It kept getting stuck in loops of asking me to execute "create_branch" tool even though the branch already existed.
Part of me thinks I may have been able to do this quicker had I just made the pages for hatchet myself. But what fun would that be? I'm curious to try it again to see if I can get it to reference the image, I have a feeling that if it had the correct original context then it would have been smoother.
Experimenting with LLMs was a key aspect of this project, I've saved other prompts under the design log section to track them.
Gist of agent session increased legibility - GitHub Copilot & Agent prompts