Requiem Records: How Kiro Haunted My Codebase into a Screaming Success

Three days ago, We had a wild idea: build a haunted vinyl diary web app where users record their voice, and the app transforms their words into gothic horror stories. The concept was clear in my mind dark aesthetics, creepy animations, voice-to-story generation but the path to building it? That was the real horror story.

What you're about to read isn't just another "We built an app" story. This is about how an AI-powered IDE didn't just help me code it fundamentally transformed how We think about development. In 72 hours, We went from a rough concept to a fully functional, production-ready web application with features We didn't even know that we needed.

Quick Project Snapshot

Category: It is for the Resurrection category for kiroween competition
Platform: Accessible in Web
Each Room/Screen:

1. Intro Screen
2. Main Hub
3. Recording Room
4. Log Room
5. Story Room
6. Vinyl Room
7. Senance Room Core idea: The idea is recording out voice and turning it in a scary story

The Project: Building Haunted Vinyl Diary for Kiroween

Requiem Record is not just a web app, it is a ritual of memory and fear.
Users step into a gothic, gamified world where their own voice becomes the trigger for horror.

Every whispered confession, fear, or memory is recorded, transcribed in real time, and reborn as a personalized gothic nightmare — written by an AI that turns emotions into chilling folklore.
The app features:

• Voice recording with real-time transcription
• AI-generated scary stories based on your words
• Horror music playlist with 10 atmospheric tracks
• Gothic UI with blood-red text and haunting animations
• Fully responsive design
• Cinematic video transitions

Tech Stack: Vanilla JavaScript, Web Audio API, Speech Recognition API, LocalStorage, CSS3 Animations

Before Kiro: The Ghosts That Haunted My Development Journey

Planning Paralysis

Before Kiro, We lived in a loop of overthinking. We had notebooks overflowing with ideas. UI sketches, feature lists, story logic, audio concepts, yet We were paralyzed when it came time to code. I didn’t know where to begin. Should we start with the UI? The recording engine? Local Storage? Story generation? Every path felt equally important and equally risky. The fear of choosing the “wrong” first step kept me frozen, planning infinitely and building nothing.

Debug Nightmares

Whenever something finally stopped working...and it always did, everything spiraled. A tiny bug meant hours of console.log() breadcrumbs across files, chasing ghosts in spaghetti code. The deeper we dug, the more we forgot our original intention. Debugging didn’t feel like solving problems; it felt like losing ourself inside them.

Feature Creep Curse

The scariest part was how easily excitement became self-destruction. “Maybe we should add this one more feature…” turned into days of derailment. A new animation, a new mood filter, a new diary mechanic, each small idea multiplied into new threads of work. The finish line kept pulling away, and we became trapped in the illusion of progress while the project refused to end.

Where All This Led

We weren't stuck because of lack of passion, we were drowning in it. we were building constantly, but never finishing. we had creativity, but no direction. We weren't fighting the code… We were fighting ourself.

And that’s when Kiro appeared.

Vibe Coding Revolution: How Natural Language Built My App

Here's where things got wild. With Kiro, We could literally describe what we wanted in plain English:

Me: "We need a vinyl room with a playlist of 10 horror songs. Each song should play completely without skipping. Show which track is playing with a pulsing animation."

Kiro: Generates complete implementation with:

• Playlist UI with 10 tracks
• Event delegation for click handling
• Audio playback with proper cleanup
• CSS animations for active track
• Error handling for failed loads

But it wasn't just code generation. Kiro understood context. When we said "the text is blurry," it knew we were talking about the story display and that the blur was coming from a CSS filter on the parent element. It didn't just remove the blur, it moved it to a pseudo-element so the background stayed blurred while the text remained sharp.

The Magic Moment: We said "make the text blood red and clearer" and Kiro:

1. Changed color to #8B0000 (dark blood red)
2. Increased font size for readability
3. Added proper z-index layering
4. Removed the blur filter from text
5. Applied blur only to the background
6. Adjusted font weight for clarity

This wasn't autocomplete. This was understanding.

Spec-Driven Development: From Requirements to Reality

The real revolution for me was Kiro’s spec-driven workflow. Instead of jumping into code and improvising my way through features, Kiro pushed us to think like an engineer first and a coder second. Everything began with a requirements phase rather than an implementation phase, and that one shift alone transformed chaos into clarity.

1. Requirements Phase

Kiro helped us transform vague, emotional ideas into structured and testable requirements using the EARS (Easy Approach to Requirements Syntax) format. What previously felt like a shapeless feature “We want people to record memories” became an actionable specification. For example:

Nothing was ambiguous anymore, every single requirement was clear, measurable, and directly tied to a visible user outcome.

2. Design Phase

Once the requirements were locked in, Kiro generated a complete design document that became the guiding blueprint for the entire project. It included Mermaid-based architecture diagrams that illustrated how each component interacted, well-defined component interfaces with single responsibilities, and data models describing how audio, entries, and transcriptions would persist across the application. The design also specified correctness properties for property-based testing and outlined error-handling strategies before a single feature was coded. For the first time, I never had to stop and ask, “What were we building again?” the design doc always held the answer.

3. Implementation Phase

Kiro then broke the design into 47 actionable tasks, each one small enough to complete confidently but meaningful enough to push the project forward. Tasks were sequenced intelligently and tied to the exact requirement they satisfied. A typical section looked like:

Every task was specific, testable, and positioned in the order that made the most technical sense. Instead of guessing what to do next, We followed a crystal-clear roadmap, and development became smooth, predictable, and deeply satisfying.

Agent Hooks Magic: Automating My Workflow

The feature that completely changed the rhythm of our development was Kiro’s Agent Hooks. They allowed our project to react automatically to our actions, almost like the codebase was alive and working alongside us. We configured hooks so that the moment we saved a file, Kiro would immediately run the tests associated with the component we had just edited. It looked like this:

{
  "trigger": "onFileSave",
  "pattern": "js/*.js",
  "action": "npm test -- {{filename}}"
}

With a single hook, the endless cycle of “wait, did we run the tests?” disappeared. Every save meant instant feedback, no excuses, no forgetfulness, and zero stale bugs left behind.

We then pushed automation even further. Whenever a specification document changed, Kiro would automatically regenerate the task list to reflect the new requirements. In other words, feature updates and planning stayed perfectly synchronized without manual effort:

{
  "trigger": "onFileChange",
  "pattern": ".kiro/specs/*/design.md",
  "action": "regenerate-tasks"
}

Suddenly, the entire workflow became self-maintaining. We never ended up with outdated tasks, forgotten tests, or misaligned specs. Development finally felt like flow instead of management, We could focus on creativity and problem-solving while the system quietly handled discipline and structure in the background.

Steering Documents: Giving Kiro Clear Direction

Steering docs acted like a style guide for our AI development workflow. By defining my standards up-front, Kiro consistently generated clean, predictable, and scalable code—removing the usual tech-debt chaos from the start.

MCP Integration: Unlocking Kiro’s Full Project Awareness

Integrating the @modelcontextprotocol/server-filesystem gave Kiro deep visibility into my entire codebase — not just the file we were working on. This transformed the AI from a code assistant into a full project-aware collaborator.

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "./"]
    }
  }
}

A simple filesystem MCP server connected Kiro to the full project directory.

What Kiro Gained

1. Awareness of full folder and file structure
2. Ability to search and open related files automatically 3.Cross-file refactoring suggestions 4.Detection of naming and logic inconsistencies across modules

Real-World Example

1. When we asked “make the vinyl room buttons work”, 2.Kiro found the UI manager file 3.Located event handlers in app.js 4.Detected a CSS stacking/z-index conflict 5.Updated all three files in one coordinated fix

The Outcome
No more context explaining, copy-pasting code, or hunting through folders Kiro understood the whole project and applied changes precisely where they needed to happen.

Surprising Discoveries

1. Kiro Learns Your Style: After a few iterations, Kiro started matching our coding style without prompting
2. Context is King: The more context we provided, the better the results
3. Specs Are Living Documents: Updating the spec mid-project helped Kiro stay aligned
4. Property-Based Testing is Powerful: Kiro made it accessible; caught bugs we never have found

Recording Screen - Capturing Souls

What it does: Records voice audio with a pulsing red indicator, timer, and back button.

How Kiro helped:

• Microphone Access: Built robust Recording Service with proper error handling for permission denied, no microphone, device in use, etc.

• MediaRecorder API: Implemented browser audio recording with proper blob creation and duration tracking

• UI Feedback: Created pulsing recording indicator, live timer display, and button state changes

• Error Handling: Added extensive logging and user-friendly error messages for debugging recording issues

• Transcription Integration: Connected to Transcription Service for live speech-to-text

Story Screen - The Horror Transformation

What it does: Plays a video, shows a diary, then displays your voice recording transformed into a gothic horror story.

How Kiro helped:

1.Story Generation Service: Created StoryGenerationService with 1,200+ unique story combinations using:

• 15 different spooky locations
• 8 themes with 4 adjectives each
• 10 story styles (diary entry, confession, warning, etc.)
• Transformation Algorithm: Built a system that takes YOUR actual words and transforms them into horror narrative Implemented proper event listeners and timeouts
• **Animation: **Added handwriting-style text animation with paragraph delays

Vinyl Room - The Music Sanctuary

What it does: Plays 10 local horror-themed music tracks with a vinyl record aesthetic and playlist.

How Kiro helped:

• Playlist System: Built dynamic playlist rendering with all 10 local music files from assets folder
• Music Playback: Implemented audio player with track selection, next song button, and now playing display
• Event Delegation: Fixed button click issues by using single event listener instead of multiple handlers

• Error Handling: Added graceful error messages instead of auto-skipping on audio errors
• Volume Control: Set vinyl room volume to 70% for better listening experience

Séance Room - Summoning the Dead

What it does: An interactive ghost summoning experience with 11 unique spirits, probability-based encounters, danger levels, timeout mechanics, and atmospheric effects.

How Kiro helped:

• Ghost Data Structure: Created 11 detailed ghost entities with unique backstories, danger levels (1-10), rarity tiers (Common, Uncommon, Rare, Very Rare), and personalized dialogue
• Probability System: Implemented weighted random selection algorithm that tracks recently summoned ghosts to prevent repetition and ensure variety
• Danger Mechanics: Built dynamic danger level visualization with color-coded bars, heartbeat audio that adjusts speed/volume based on threat level, and progressive vignette effects
• Timeout System: Added 20-second idle timer that triggers scary glitch effects, screen shake, distorted text overlay, and warning messages if user doesn't summon
• State Management: Orchestrated complex state transitions between SEANCE → SUMMONING → GHOST_ENCOUNTER with proper cleanup and media handling

Key Features:

• 11 Unique Ghosts: Each with custom artwork, tragic backstory, and personality
• Weighted Probability: Common (40%), Uncommon (25%), Rare (20%), Very Rare (15%)
• Anti-Repetition: Tracks last 3 summoned ghosts to ensure variety
• Danger Levels:
  • 1-2: Harmless (green) - No effects
  • 3-4: Unsettling (yellow) - Light vignette
  • 5-6: Dangerous (orange) - Heartbeat + medium vignette
  • 7-8: Extremely Dangerous (red) - Fast heartbeat + heavy vignette
  • 9-10: LETHAL (dark red) - Intense heartbeat + extreme vignette
• Atmospheric Audio: Dynamic heartbeat that changes speed/volume based on danger
• Visual Effects: Black vignette, screen shake, glitch animations, transition overlays
• History Reveal: Players can choose to hear each ghost's tragic backstory or decline (triggers red vignette effect)
• Timeout Punishment: Wait too long without summoning and face scary consequences

The Real Victory

Requiem Records isn’t just functional, it’s polished, tested, and production-ready. But the true victory wasn’t the finished product. It was the experience of building it. We enjoyed every step. There were no draining 3 AM debugging sessions, no moments of burnout, and no frustration spirals. Instead, We had meaningful discussions with Kiro about architecture, refined designs through iteration, and focused on creativity rather than wrestling with syntax. It reminded us that this is what development is supposed to feel like.

Final Thoughts

If you’re reading this and haven’t tried Kiro, the best thing you can do is stop reading and start building. I understand the skepticism, I was skeptical too. But here’s the truth: the future of development isn’t about writing more code, it’s about thinking more clearly. Kiro helps you think clearly, and when clarity becomes effortless, the code follows naturally.

Dare to witness the darkness: Deployed
If you’re brave enough… enter my GitHub crypt: Github
Summon the cursed footage here:

🎃 Happy Kiroween! 🎃