HexForge: The Spooky Coding Education Game for the Kiroween

#kiro #hookedonkiro #kirodotdev

🎃 HexForge: Spec-Driven Development with Kiro AI

We just finished submitting HexForge: The Spooky Coding Education Game for the Kiroween Hackathon (Category: Costume Contest - Haunting UI). While the game itself is fun—offering 10 JavaScript challenges in a haunted, animated environment—the real story is how we achieved a ~95% reduction in development time by strictly using Kiro’s full suite of AI-powered development tools.

We didn't just use it for "vibe coding"; we ran a formal Spec-Driven Development (SDD) process from start to finish. Our successful submission showcases how to integrate Kiro's advanced features for a truly structured, high-quality build.

HexForge: Game Overview

HexForge combines JavaScript learning with a sleek, atmospheric dark theme.

The Goal: Players solve 10 diverse JavaScript coding challenges (from syntax errors to advanced array methods) inside an integrated Monaco Editor.
Gamification: Players earn XP, level up through themed ranks (like 'Cryptogoblin'), customize their Kiro ghost wizard avatar, and climb the leaderboard.
Design: The UI is dark, atmospheric, and highly animated, leveraging a custom Halloween color palette and Framer Motion for smooth effects.
Tech Stack: React (via Preact), TypeScript (strict mode), Zustand, Tailwind CSS, Framer Motion, and Vitest for testing.

1. Spec-Driven Development: The Blueprint

The most critical step was adopting SDD. We replaced ad-hoc feature requests with a formal specification defined in our .kiro/specs directory.

Requirements & Design: We wrote 16 EARS-compliant requirements and a detailed design document defining the architecture, data models, and 26 correctness properties.
The SDD Advantage: Kiro used these formal documents to guide its output for every major component. This front-loaded planning effort saved us from frequent backtracking and eliminated scope creep, ultimately reducing our overall development time by ~40%.
Testable Code: Kiro directly translated the design document's correctness properties (e.g., Property 1: State persistence round-trip) into property-based tests using fast-check and Vitest. This gave us an unprecedented level of confidence in the code's stability.

2. Steering Documents: Enforcing Quality & Design

To ensure every generated component was consistent with our design, we created two critical steering files that Kiro consulted before generating any code:

.kiro/steering/ui.md: This file enforced a custom Halloween color palette (Deep Void, Pumpkin Orange, Ectoplasm Purple), smooth Framer Motion animations (min 0.5s duration), and required WCAG AA contrast compliance. This resulted in a consistent, polished Haunting UI.
.kiro/steering/code.md: This mandated functional React components, strict TypeScript compliance (zero any types), and the use of Zustand for state management. This process reduced refactoring by ~60% by ensuring high-quality, maintainable code from the start.

3. Agent Hooks: Automating the Repetitive Workflow

We leveraged an Agent Hook to automate our quest scaffolding process, allowing us to focus on challenge design instead of boilerplate code.

Workflow: The hook watches the src/data/quests/*.json directory.
Action: When a new quest JSON file is added, the hook automatically generates the corresponding test file template, ensuring every quest has a test scaffold ready to go.
Impact: This automation streamlined the content creation pipeline, demonstrating a powerful use of Kiro for continuous workflow integration.

Conclusion

HexForge is a powerful case study in AI-augmented, structured development. By integrating Kiro’s specs, steering, and hooks, we transformed a complex idea into a high-quality product in a fraction of the time, proving that Kiro is a foundational tool for next-generation developer workflows.

Project Links: