Soulful Sessions

Gamified Pomodoro timer that turns your focus sessions into an RPG adventure. Complete work sessions to level up, defeat bosses with meaningful stories, and unlock cosmetics. Great for dopamine detox!

Comment 1

Inspiration

I was struggling with my attention span and found myself constantly distracted while trying to work. I had actually attempted to restore my focus several times on my on without any structure, but I eventually fell back to the same habit of doom-scrolling and distractions.

Then I watched a great video about dopamine detox - the idea that we're overstimulated by constant rewards and need to separate work from gratification. That's when it realized: what if I could gamify productivity, but flip the script? Instead of getting dopamine hits while working, you'd work in a minimal, distraction-free environment, then get your game rewards during breaks.

I wanted to create something that would help me (and others) actually focus, not just track time. The Soul Shepherd concept came from wanting a calming, meaningful aesthetic rather than aggressive "productivity warrior" vibes. Guiding stubborn souls to peace felt like the perfect metaphor for overcoming procrastination and finding focus.

What it does

Soulful Sessions is a Chrome extension that turns your focus sessions into an RPG adventure:

The Core Loop:

Start a timed focus session and select a task to work on

The Extension Popup

Popup

This is the main UI you'll be interacting with. It has a dropdown of your tasks you've added in the options page (we'll get to that). It lists your Soul Shepherd's level and skills, namely "Spirit" (how much damage you do to the bosses), "Soulflow" (how much "Soul Embers" you earn while idling), and "Harmony" (basically a critical hit chance).

It displays the current Stubborn Soul (boss) you're on and how much "Soul Resolve" (health) they have left.

Finally it has the button you'll click to start your focus session.

The extension hides all game UI - you see only a minimal "stay focused" message

Popup During Focus Session

Blocked Popup UI During Focus Session

I wanted all distractions to be out of reach, so during focus sessions, I opted that you can't even access and play around with the popup UI. A timer will show up instead showing that a focus session is ongoing.

Complete your real work while the extension monitors for distractions.

We'll get to registering which sites you want discouraged or blocked during focus sessions later. But there are two main ways a site can be on your "block list": soft blocks (discouraged) or hard blocks.

Visiting a Discouraged Site During Focus Session

Visiting a Discouraged Site During Focus Session shows a warning

If you visit a site you've put on your "discouraged sites" list during a focus session, you'll get a little warning alert. But this is lenient. You can choose to continue to visit the site, but your rewards will be deducted.

Visiting a Blocked Site During Focus Session

Visiting a Blocked Site During Focus Session redirects user

This is called a hard block. You need to enable strict mode for this and put specific sites in your "blocked list". If you visited one of these sites during a focus mode, you'll be immediately redirected to a special page. Unlike before, you can't ignore this warning; you'll have to end the session early which results in high rewards penalty.

When the session ends, receive rewards: Soul Insight (XP) and Soul Embers (currency)

What You Might See Upon Session End

User Level Up Dialog

If you received enough Soul Insight after a session, you'll get this.

Guided Soul Dialog

If you did enough spirit damage to a boss' resolve, you'll get this.

Enter a timed break where the full game UI unlocks

Popup During Break Period

Popup During Break Period

The popup during the break is pretty similar to the one before, except you'll get to do extra stuff you didn't get to before. That's the point. Work THEN reward. Here you'll be able to spend your hard earned Soul Embers either on skills or cosmetics. You'll also be able to use your skill points to level up skills, assuming you've leveled enough.

Use your rewards to level up, upgrade stats, and defeat "Stubborn Souls" (bosses with meaningful backstories)

See below

In the options page, you can see a "Boss Bestiary" where you can see your progress on the bosses. This is the main motivation for doing focus sessions.

Stubborn Soul Gallery (Boss Bestiary)

Boss gallery

This resides in the options page, where you'll be able to see the full list of bosses -- which ones you've unlocked, which ones you've beaten, etc.

Stubborn Soul Profile

Boss profile

If you click one a Stubborn Soul you've unlocked, you'll see this page. You'll get to see that particular Soul's backstory and two more things you'll have to beat the boss to unlock:

Stubborn Soul's Final Conversation and Resolution

Boss locked content

If you only have this boss unlocked but not defeated, you'll see this locked content. But once you've drained the boss' resolve through focus session, you'll get this:

Boss unlocked content

You'll see a heartwarming conversation between your Soul Shepherd and the Stubborn Soul as it finally accepts moving on. You'll also get their bittersweet resolution.

Key Features:

  • 10 Story-Driven Bosses: Each Stubborn Soul has a backstory about unfinished business and a conversation that unfolds when you defeat them
  • RPG Progression: Level up, earn skill points, upgrade three stats (Spirit, Harmony, Soulflow)
  • Idle Collection: Earn passive currency even when not in sessions

  • Task Management: Organize goals, tasks, and subtasks Task management screen

  • Distraction Handling: Soft warnings for discouraged sites, hard blocking in strict mode

Manage which sites you want discouraged and/or blocked here:

Distraction management

  • Cosmetic Unlocks: 6 themes and 4 character sprites to personalize your experience
  • Statistics Tracking: Monitor streaks, total focus time, and progress Statistics screen

Player card

How we built it

I started with literally nothing but an empty folder and a manifest.json file. After brainstorming the complete game concept, I used Kiro's Spec Mode to document my entire vision for the extension.

The Spec-Driven Development Process

  1. Initial Spec Creation: I described my extension idea to Kiro, which generated a comprehensive spec at .kiro/specs/soul-shepherd-game/ with:

    • requirements.md - 15 user stories with acceptance criteria
    • design.md - Complete architecture, data models, and component designs
    • tasks.md - 42 implementation tasks broken down from requirements

  2. Agent Hook for Automation: I created a git commit hook (.kiro/hooks/task-completion-commit.kiro.hook) that automatically commits code every time a spec task is completed. This gave me a detailed history of the entire build process.

  3. Executing the 42 Tasks: I worked through Kiro's generated task list, letting it implement:

    • Background service worker with game engine
    • State management and persistence
    • Session timers and reward calculations
    • Boss progression system
    • Idle collection mechanics
    • Popup UI with multiple view states
    • Options page with task management
    • Content scripts for site blocking
    • Statistics tracking
    • Cosmetics system

  4. Bug Fixes with Vibe Mode: Of course there were bugs - but I switched to Kiro's Vibe Code Mode to quickly diagnose and fix issues. The combination of structured spec mode for features and flexible vibe mode for iteration was perfect.

A great tip I learned for debugging:

  • Ask Kiro about your problem, where it occurred, what you did before the error happened.
  • If that fails, ask Kiro to place strategic logs around the area of the problem. E.g. "Could you strategically place console logs when I do ."
  • Then copy the logs and give them to Kiro. This will let Kiro solve the problem 99% of the time.

Post-MVP Feature Development

After the initial 42 tasks, I used Kiro to add several features via additional specs:

  • Boss Bestiary (.kiro/specs/boss-bestiary/) - Enhanced boss conversations and resolution stories
  • Player Card (.kiro/specs/player-card/) - Improved stats display and character customization
  • Dev Screen (.kiro/specs/dev-screen/) - A development tool that lets me test all game states without playing through hours of sessions. This was built entirely through spec mode and includes a local server to preview the popup in isolation.

Dev Screen

Design and UI/UX

I captained the creative ship while Kiro handled the engineering. I used Vibe Code Mode extensively for design iteration:

  • Tweaking colors, layouts, and animations
  • Refining the Soul Shepherd character aesthetic
  • Polishing the reward reveal animations
  • Creating the blocked page and warning overlays
  • Implementing the theme system
  • And placing image assets to enhance the overall theme of "Halloween"

Build and Deployment

Kiro also helped me prepare for publishing:

  • Created build.js with esbuild configuration for TypeScript compilation
  • Generated package-extension.js to create a Chrome Web Store-ready zip file
  • Set up proper icon sizes (16x16, 32x32, 48x48, 128x128)
  • Updated manifest with all required permissions and justifications
  • Created comprehensive README with setup instructions

Tech Stack:

  • TypeScript (ES2020, strict mode)
  • Chrome Extension Manifest V3
  • esbuild for bundling
  • Jest + Puppeteer for testing
  • Vanilla JS/CSS (no frameworks - keeping it lightweight)

Challenges we ran into

Let me just say that throughout the development of this extension, I did not much touch and modify the code myself. Even for little tweaks, I let Kiro do the fixing using the Vibe Code mode. I really made it a goal to build up an app from 0 to 100 purely with Kiro. So all the problems listed below will have been fixed by Kiro.

General Bugs: As I went through the full workflow of the whole app, as expected, there were a couple of minor bugs, such as cancelling breaks not actually cancelling them (the break timer still runs even though I had started another focus session). These were fixed quickly enough with Kiro, though.

Site Blocking in Manifest V3: Manifest V3's declarativeNetRequest API is more restrictive than the old webRequest API. I had to carefully ask Kiro to structure blocking rules and handle dynamic updates.

Balancing Game Economy: Getting the reward formulas right took iteration. I wanted progression to feel meaningful but not grindy. Kiro helped me adjust boss resolve values and cosmetic prices multiple times.

Accomplishments that we're proud of

The Design: I'm really proud of how the extension looks and feels. The Soul Shepherd aesthetic is calming and meaningful, not aggressive or gamey. The purple/dark theme with the hooded reaper character creates the perfect vibe.

Letting Kiro Handle Engineering: By using spec mode, I could focus entirely on creativity - the game design, the boss stories, the UI/UX - while Kiro handled all the technical implementation. This division of labor was incredibly productive.

The Boss Stories: Each of the 10 Stubborn Souls has a complete backstory and conversation. They're not just HP bars - they're characters with meaningful narratives about regret, unfinished work, and finding peace.

Dev Screen Tool: Building a development tool using spec mode was meta and incredibly useful. It saved me hours of testing time.

Complete Feature Set: This isn't a prototype - it's a fully functional extension with task management, statistics, cosmetics, strict mode, idle detection, and more. The scope was ambitious and we pulled it off.

What we learned

Spec-Driven Development Works: Breaking down a complex project into requirements → design → tasks made the whole thing manageable. The 42-task breakdown kept me focused and gave clear milestones.

AI as Engineering Partner: Kiro wasn't just autocomplete - it was a true engineering partner. Spec mode for structure, vibe mode for iteration, and the ability to switch between them made development feel collaborative.

Game Design is Hard: Balancing progression, rewards, and difficulty is an art. I iterated on formulas and costs multiple times to get the feel right.

Chrome Extensions are Powerful: Manifest V3 gives you incredible control over the browser. The combination of alarms, idle detection, navigation monitoring, and site blocking enabled the entire game loop.

Dopamine Detox Actually Works: Using my own extension while building it, I noticed I was more focused during sessions and enjoyed the break rewards more because I'd earned them.

What's next for Soulful Sessions

More Bosses: I want to add more Stubborn Souls with deeper stories and branching conversations.

Social Features: Leaderboards, shared goals, or co-op sessions where friends work together to defeat bosses.

Advanced Analytics: Deeper insights into productivity patterns, best focus times, and distraction triggers.

Sound Design: Kiro had added a volume control in the settings for me, which I didn't ask for. And that gave me an idea to add an audible element to Soulful Sessions in the future.

More Cosmetics: Expand the shop with more themes, sprites, and UI customizations.

Publishing Status

I do plan on having this available for everyone officially through the Chrome Webstore. However, I did start this hackathon a little late and, therefore, as I'm writing this, the extension is currently still in review. But hopefully it will get approved soon and I will be able to update the links here to go straight to the extension page.

Because I do genuinely feel this extension helped me get this project finished as quickly as I could (I had 6 days left by the time I put the extension for review). It usually takes me until the deadline before I would actually lock in and finish up hackathon projects. That's how bad distractions were for me.

Extension Pending Review

Built With

Share this project:

Updates