DEV Community

Ketan
Ketan

Posted on

Haunted Feedback Form - Powered by Kiro

#kiro #kiroween #kirodotdev #hookedonkiro

For my Kiroween project, I built a small but spooky interactive page called the Haunted Feedback Form.
It’s a simple one-page application where users submit their name, fear level, and message and receive a creepy, haunted response generated by JavaScript and Kiro-powered logic.

Even though the project is intentionally minimal, it uses Kiro’s ecosystem to structure the codebase, maintain consistency, and generate themed responses.

What Is the Haunted Feedback Form?

The Haunted Feedback Form is:

  • A lightweight HTML/CSS/JS web page
  • A spooky feedback form with animated UI
  • A dynamic response generator that transforms normal user messages into “haunted” messages
  • A playful, Halloween-inspired project demonstrating Kiro-driven development

When a user submits the form, the page reveals a spooky message like:

“Jack… the spirits have received your message. Your fear level awakens something in the shadows.”

How I Used Kiro for This Project

Even though the app is small, Kiro helped organize and structure key parts of the project.

Here is exactly how:

1. Specs — Define the Form Structure

I created a specification file inside:

/.kiro/specs/haunted_form.yaml
Enter fullscreen mode Exit fullscreen mode

This spec includes:

  • Form fields
  • Validation rules
  • Response format
  • How fear levels affect tone
  • Output structure for the haunted message

Kiro used this spec to ensure the UI and JS code stayed consistent with the rules I defined.
This made the project predictable and easy to update.

2. Steering — Keep Everything Spooky

Inside:

/.kiro/steering/spooky_style.md
Enter fullscreen mode Exit fullscreen mode

I added this instruction:

“All generated text and system responses should maintain a spooky, ghostly, haunted tone inspired by Halloween.”

This kept all Kiro-generated wording spooky and thematic, ensuring consistency across the entire project.

3. Agent Hooks — Generate Haunted Messages

This project uses one key hook:

/.kiro/hooks/haunt.js
Enter fullscreen mode Exit fullscreen mode

The hook:

  • Listens for submitted user data
  • Applies spooky transformation rules
  • Generates the final haunted message
  • Returns it back to the UI script

This approach keeps the project small but structured, with clear separation between interface and logic.

Project Structure 

/haunted-feedback-form
  /.kiro
    /specs
      haunted_form.yaml
    /steering
      spooky_style.md
    /hooks
      haunt.js
  /public
    index.html
    style.css
    script.js
  README.md
Enter fullscreen mode Exit fullscreen mode

Core Code Preview

index.html 

<div class="container">
  <h1>Haunted Feedback Form</h1>

  <form id="feedbackForm">
    <input type="text" id="name" placeholder="Your Name" required />

    <input type="number" id="fear" min="1" max="10" placeholder="Fear Level (1–10)" required />

    <textarea id="message" placeholder="Your message to the spirits..." required></textarea>

    <button type="submit">Summon Response</button>
  </form>

  <div id="hauntedResponse" class="hidden"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

Why I Built This Project

I wanted to test how Kiro could support small-scale creative builds.
This project is intentionally simple but demonstrates:

  • How specs define structure
  • How steering ensures tone consistency
  • How hooks isolate logic
  • How even tiny apps benefit from structured workflows

It also shows that projects don’t need to be large Kiro helps even the smallest ideas feel complete and well organized.

Final Thoughts

The Haunted Feedback Form was fun to create and a great way to explore Kiro’s tools.
Even a tiny application can be powered by clean architecture and structured development workflows.

If you want to try something spooky and simple with Kiro, feel free to build your own version of this form!

Top comments (0)