Building "Spectral Notes": A Haunted Productivity App with Kiro

As a full-time professional with limited hours to code, I needed a way to build a polished, complex app quickly for the Kiroween 2026 Hackathon. I decided to build Spectral Notes for the Costume Contest category—a minimalist note-taking app with a twist: unfinished thoughts become "haunted" after 24 hours, flickering and glowing red until you complete them.

Check out the live app here: Spectral Notes Live App

Here is how Kiro made this possible in just a few hours:

1. Spec-Driven Development: Instead of "vibe coding," I wrote a .kiro/specs document outlining the exact requirements and Framer Motion design for the haunting logic. Kiro generated the React custom hook (useSpectralNotes) and the animated components flawlessly on the first try.

2. Steering Docs: I used .kiro/steering to enforce my Tailwind v4 design system. Kiro knew exactly which spooky colors (bg-surface, text-blood) and animations to use without me re-prompting.

3. Agent Hooks: I configured a Kiro hook to format code on save, keeping the TypeScript clean while I focused on the UI.

Kiro allowed me to focus on the creative vision rather than boilerplate, proving that you don't need weeks to build a production-ready app. Check out the GitHub repo here: Spectral Notes GitHub Repository

This post was written as part of the Kiroween 2026 hackathon.