Building 'Ghost in the Code' with Kiro: A Kiroween Hackathon Journey
A hackathon build log for a kid-friendly coding game made with Kiro, the agentic IDE. What steering documents, agent hooks, and spec-driven development actually felt like in practice, and where the hybrid of specs and vibe-coding worked best.
Ghost in the Code is a small web game where kids help a friendly ghost fix "haunted" code, with each bug teaching a real concept like loops or conditionals. The more interesting story is how it got built: this was a Kiroween hackathon entry, and I used it to build muscle memory with Kiro (the agentic IDE on Anthropic's Claude Agent SDK) ahead of a bigger competition. The post is a practical write-up of what worked with the tool.
The stack is Vite, React, and TypeScript on the front end, AWS CDK in TypeScript for infra, Node 20 Lambdas, and Polly for narration. Three things shaped the workflow. A roughly 50-line .kiro/steering/project-context.md file spelled out the project, the stack, the philosophy, and the TypeScript rules, which cut way down on repeating the same corrections. Four agent hooks ran on save: tests, ESLint, build check, and CDK synth validation, so mistakes surfaced in seconds. And the build itself was split: days 1 to 2 were spec-driven (11 requirements, 42 tasks) for the game engine and infrastructure, then days 3 to 4 switched to vibe-coding for animation, styling, voice, and accessibility polish.
Key takeaways
- A short, specific steering doc pays for itself fast: explicit constraints and "done" criteria stop the agent re-making wrong assumptions
- Spec the foundation, vibe-code the features: structured planning for what must be right, loose iteration for polish; mini-spec a vibe-coded feature once it gets complex
- Automate validation early: save-time hooks for tests, lint, and infra checks keep velocity up because nothing rots quietly
- Don't over-engineer a hackathon project: MCP servers went unused because the built-ins covered the scope
Who this is for
Developers curious about Kiro or spec-driven / agentic development who want a concrete account rather than a feature list. Useful if you're deciding how much upfront structure an AI-assisted build actually needs. Some React, TypeScript, and CDK familiarity helps.
The full journey, with the steering doc breakdown and the hook setup, is on DEV.to.