From a Single File to a Full Chrome Extension Using Kiro

Source: Dev.to

Introduction

There have been an increasing variety of coding agents recently, each becoming more integrated and comprehensive. I’ve been lucky enough to try a few both in my free time and as part of an implementation task at work to integrate these agents into development workflows.

I remember trying CrewAI, a multi‑agent AI system, and hacking together our own coding agent. It did well enough, but it wasn’t what CrewAI was meant for. Then Codex arrived and performed the same tasks with fewer errors and better context awareness. The learning experience was valuable because it reads your codebase and prepares itself with the right context.

Later I saw on Devpost a hackathon for one of the newest coding agents: Kiro.

What Is Kiro?

Plainly, Kiro is an AI‑powered Integrated Development Environment. Unlike Codex, it comes with a full coding environment and purpose‑specific features, including:

• Agent hooks – automation that runs after a trigger you set (e.g., update test files whenever relevant files change).
• Steering docs – generated documentation that gives both Kiro and you a better understanding of the project structure, especially useful for legacy codebases.

Instead of reading the docs yourself, you can simply ask Kiro about the codebase. Thanks to the steering docs, it can answer questions more accurately, such as “How are real‑time messages handled?” or “Where are the socket listeners placed?”.

Spec‑Driven Development

A key differentiator for Kiro is Spec‑Driven Development. Most coding agents follow a simple “prompt → code” workflow, but Kiro also offers a more thorough alternative.

In spec mode, Kiro:

1. Thinks through your request(s) and creates a spec folder.
2. Generates relevant specification documents for review before any code is written.
3. Lists thorough testing that will be executed automatically.
4. Allows you to start tasks from tasks.md once you’re satisfied with the spec.
5. Fixes any errors found during testing.

What I Built

I had been losing focus, plagued by short attention spans and constant distraction from social media. After watching a video on dopamine detox, I realized my brain was accustomed to frequent high‑dopamine rewards (e.g., Reddit scrolling, Shorts), which dampened my ability to enjoy sustained, low‑intensity work.

The solution suggested a rigid work → reward system with gamification. This inspired the core idea for my project.

A Chrome Extension that Combines Productivity with Fun

I created “Soulful Sessions,” a Halloween‑themed Chrome extension that merges the work‑then‑reward principle with gamification.

Core Concept: Soul Collecting

You play as the Soul Shepherd, a benevolent grim‑reaper‑like character who collects souls and guides them to a better place. Your stats include:

• Spirit – attack power
• Soulflow – passive resource generation rate
• Harmony – critical‑chance equivalent

There are two gameplay modes:

1. Idle – generates “Soul Embers” (the main currency) passively based on your stats.
2. Bosses – confront “Stubborn Souls” (bosses) that resist moving on. Each boss has a unique name, backstory, and Soul Resolve (HP).

Focus Sessions

You defeat Stubborn Souls by completing Focus Sessions:

• During a session, discouraged sites (e.g., facebook.com) trigger a warning and reduce rewards if visited.
• Blocked sites (e.g., youtube.com) redirect to a special page, preventing distraction entirely.

After the session, you receive rewards based on performance:

• Soul Embers – used for upgrades and cosmetics.
• Soul Insight – XP for leveling up.

Break Mode (Reward Phase)

In Break Mode you can:

• Spend Soul Embers to upgrade skills (costs increase exponentially).
• Purchase cosmetics such as Themes and Sprites (unlockable skins for the Soul Shepherd).
• Allocate skill points earned from leveling up.

That’s the core of the extension, built entirely with Kiro’s spec‑driven workflow.