DEV Community

Cover image for The Digital Exorcism App with Kiro: Security Learning Through Haunted Codebase (Part 1)
Ooi Yee Fei
Ooi Yee Fei

Posted on

The Digital Exorcism App with Kiro: Security Learning Through Haunted Codebase (Part 1)

#kiro

Building The Digital Exorcism: Teaching Security Through Haunted Code (Part 1)

Note: Part 1 of 2 - My journey building a security game with Kiro

When I was exploring ideas for Kiroween, I had this wild thought: what if learning security could feel less like reading a textbook and more like... well, performing an exorcism on haunted code?

The Spark: Security Education Sucks (Usually)

I personally find security learning boring. You read about SQL injection, mentally note "never hardcode secrets," then immediately forget it all when racing to ship features.

The concept hit me at 3 AM (as all good/terrible ideas do): build something that shows the pain of bad code through interactive gameplay. A 'damned' codebase 'possessed by OWASP demons' seemed to reflect how we view critical security issues. Fix the vulnerabilities to perform the exorcism. Watch your corrupted dashboard heal in real-time. With Kiro as your exorcist guide, helping you banish demons with witty, spooky commentary.

Problem: I'd never built anything like this before. I'm not a game designer. I haven't built game applications. But I gave Kiro a try to see how far I could get.

My Learning / Building Journey

Discovery #1: Specs Are Actually Good (Who Knew?)

Instead of diving into code (my usual "move fast and break things" approach), Kiro walked me through creating a proper spec. Turns out, specs aren't bureaucracy - they're clarity.

Requirements with EARS Syntax

Kiro introduced me to EARS patterns. Each requirement became crystal clear:

"WHEN a user fixes a security vulnerability THEN the system SHALL reduce the corruption level by 33%"

No "it should probably do something like..." Just clear, testable requirements. We defined 9 user stories covering game flow, vulnerability detection, corruption tracking, and educational content.

Design with Correctness Properties

Here's where it got interesting. Kiro pushed me to define correctness properties - universal rules that should always hold:

"Property 1: For any vulnerability fix, corruption level decreases by exactly 33%"

This was new to me. Property-based testing forces you to think rigorously about your code. It's like unit tests, but for grown-ups.

Tasks: The Roadmap

Kiro broke the design into 15 concrete steps. Having this roadmap meant I never got lost. I always knew what to build next.

Lesson learned: Specs provide structure. Structure prevents chaos. Chaos is bad (usually).

Discovery #2: Steering Documents Are AI Training Data

Steering documents = instructions that teach Kiro how to behave. I created 4 layers:

Layer 1: Personality 

"Let me consult the spirits... *waves hands mysteriously*"
"This code has more holes than Swiss cheese at a mouse convention."
"🎉 Exorcism complete! *chants in Latin*"
Enter fullscreen mode Exit fullscreen mode

Layer 2: Game Commands 

When user says "start the game":
1. Ask difficulty (easy/hard)
2. Run start-game hook
3. Provide next steps
Enter fullscreen mode Exit fullscreen mode

Layer 3: Security Knowledge 

When you see dangerouslySetInnerHTML:
- Remove it, replace with {variable}
- Explain XSS with fun analogies
- Share real breach examples (British Airways: $230M)
Enter fullscreen mode Exit fullscreen mode

Layer 4: Educational Content

Bite-sized lessons with memorable analogies:

  • Hardcoded secrets = "Writing your bank PIN on your forehead"
  • XSS = "Inviting vampires into your home"
  • eval() = "Giving strangers your car AND house keys"

The magic: Once these were in place, Kiro became a digital exorcist with attitude. Not just an AI assistant - a character.

Discovery #3: Agent Hooks = Automation Superpowers

I wanted the game to reset automatically. Enter: agent hooks.

The Game Starter

start-game.cjs that:

  • Resets 3 vulnerable files
  • Sets corruption to 100%
  • Initializes game state
  • Starts dev server

Triggered when users say "start the game". One command, everything happens.

The Corruption Scanner

measure-corruption.cjs that scans for vulnerabilities in real-time:

const PATTERNS = {
  xss: { regex: /dangerouslySetInnerHTML/gi, weight: 33 },
  hardcodedSecret: { regex: /sk-[a-zA-Z0-9]{20,}/gi, weight: 33 },
  codeInjection: { regex: /eval\s*\(/gi, weight: 34 }
};
Enter fullscreen mode Exit fullscreen mode

Runs after every fix. Instant feedback. Users see corruption drop immediately.

Lesson learned: Automate the boring stuff. Focus on the fun stuff.

Discovery #4: MCP Tools Are Magic

MCP (Model Context Protocol) was new to me. Then I built custom tools and my mind exploded.

Tool 1: Corruption Sensor 

get_corruption_level() {
  return `
💀 CORRUPTION SENSOR READING 💀
Status: CRITICAL - The codebase is DAMNED!
Corruption: 100%
Active Demons: 3
  `;
}
Enter fullscreen mode Exit fullscreen mode

Tool 2: OWASP Knowledge Base

Returns all OWASP Top 10 with descriptions on demand.

Tool 3: Vulnerability Deep-Dive

Explains specific vulnerabilities with examples and prevention tips.

Now Kiro could check corruption, teach OWASP concepts, and guide fixes through natural conversation. No clunky commands. Just "What's the corruption level?" and boom.

Lesson learned: MCP turns Kiro from generic assistant into domain expert.

Making It Feel Haunted

Technical stuff aside, I wanted this to feel right.

Visual Corruption: CSS filters that intensify with corruption - blur, contrast shifts, color distortion. At 100%, the screen looks cursed.

Audio: Eerie ambient music that gets more intense. Séance overlay with candles and pentagrams at high corruption. Over the top? Yes. Fun? Absolutely.

Glitch Effects: Text that glitches. Numbers that flicker. A corruption meter that pulses ominously.

Goal: Make users uncomfortable with bad code, relieved when they fix it. Emotional feedback loops = powerful learning.

Easy vs. Hard Mode

Easy Mode: All 3 vulnerabilities visible with hints and file locations. Perfect for learning.

Hard Mode: Vulnerabilities hidden. Hunt them down detective-style. For brave souls.

Different users, different needs. Why not both?

The First Playthrough: It Works!

After a week of building:

  1. Said "start the game" to Kiro
  2. Corruption set to 100%, dashboard looked haunted
  3. Asked Kiro to fix XSS vulnerability
  4. Kiro removed dangerouslySetInnerHTML, explained why it's dangerous, shared British Airways breach story ($230M fine!)
  5. Corruption dropped to 67%, UI started healing
  6. Repeated for other vulnerabilities
  7. At 0%, UI transformed to peaceful, clean design
  8. Victory music!

It felt magical. The combination of Kiro's personality, visual feedback, and educational content made security fun.

The "Aha!" Moments

  1. Specs provide clarity - No more getting lost
  2. Steering shapes AI - More context = better performance
  3. Hooks enable automation - Automate boring, focus on fun
  4. MCP extends capabilities - Turn Kiro into domain expert
  5. Emotion drives learning - Feeling impact > being told

But There Was a Problem...

After showing it to friends, I realized:

"This is awesome! But... after I play once, I know exactly what to fix. How can we make this better?"

Zero replayability. Once you knew the 3 vulnerabilities, the magic was gone.

I needed dynamic generation. Every session should be unique.

And that's where things got really interesting... I realized it's not as simple as just generating random vulnerabilities each time. There are many more components to handle for proper gameplay.

Continue to Part 2: Building Infinite Replayability with Dynamic Generation

Where I discover a tricky bug, build a template system, add AWS security integration, and achieve many more possible combinations.

Top comments (0)