DEV Community

Anil Kumar
Anil Kumar

Posted on

I Built a Kiro Extension to visualize boring specs Days using kiro IDE

#kiro #javascript #openvsxextension #webdev

The Spark of an Idea

Picture this: It's a regular Tuesday. I'm using Kiro IDE to manage my project specs. I open tasks.md for the hundredth time, and I think...

"These markdown files are so boring. What if they were... SPOOKY?" 🎃

That single thought, combined with Kiro AI's power, led to SpecterFlow—a Kiro extension that transforms boring spec files into an interactive, spooky-themed visual experience with electric Tesla coils, animated cursors, and neon-glowing interfaces.

The kicker? 80% of the code was written by AI in just 3 days!

What is SpecterFlow?

SpecterFlow is a Kiro extension that brings .kiro/specs/ markdown files to life with three themed views:

🪦 The Graveyard (tasks.md)

Your kanban board becomes a graveyard with:

  • Tombstone-shaped cards with stone textures
  • Electric Tesla coil sparks on every card
  • Ghost celebrations when you complete tasks
  • Ectoplasm trails when dragging cards
  • Columns: "Fresh Graves" → "Resurrecting" → "R.I.P."

📜 The Grimoire (requirements.md)

Your requirements become an ancient spellbook with:

  • Parchment textures and mystical runes
  • Wavy text animations (6 different styles!)
  • Split-view: User stories ↔ Acceptance criteria
  • Glowing number badges with pulsing effects
  • Crimson Text font for that ancient book feel

🔮 The Spirit Board (design.md)

Your design docs become an Ouija board with:

  • Mystical navigation sidebar
  • Glowing crystal emojis
  • Electric branches in tree views
  • Smooth scrolling with neon buttons

The AI-Powered Development Journey

Day 1: Spec-Driven Development

I started with Kiro's spec-driven development workflow. I told Kiro:

"I want to build a Kiro extension that visualizes .kiro/specs files with a spooky theme."

Kiro responded by creating:

  1. requirements.md - Complete with EARS patterns and acceptance criteria
  2. design.md - Architecture, components, and correctness properties
  3. tasks.md - 30 detailed implementation tasks

Then Kiro started coding. In Day 1, it generated:

  • Extension activation logic
  • Custom editor providers
  • File system scanner
  • Markdown parsers (event-driven architecture!)
  • Basic webview structure

Lines of code written by Kiro on Day 1: ~800

Day 2: Vibe Coding Magic

This is where it got WILD. I switched to "vibe coding" mode and just... described what I wanted:

Me: "Make it spooky with electric Tesla coil effects!"

Kiro: Generates 500 lines of CSS with:

  • Tesla coil spark animations
  • Lightning bolt SVG animations
  • Plasma orb effects
  • Electric particles
  • Voltage arcs

Me: "Add wavy text animations!"

Kiro: Creates complete animation system with:

  • Wave animation (letters bounce independently)
  • Glitch wave (skew + hue rotation)
  • Floating wave (3D motion)
  • Neon wave (color alternation)
  • Rainbow wave (full spectrum)
  • Liquid wave (morphing borders)

Me: "Custom cursor with particle trails!"

Kiro: Builds optimized JavaScript with:

  • Custom cursor with glowing ring
  • Particle trail system
  • Click explosions (8 particles)
  • Electric sparks
  • GPU acceleration
  • Throttled for 60fps performance

Lines of code written by Kiro on Day 2: ~2,500

Day 3: Polish & Performance

On the final day, I focused on optimization and polish:

Me: "The cursor is lagging. Optimize it!"

Kiro: Refactors with:

  • Throttled trail creation (50ms intervals)
  • Reduced particle counts
  • will-change for GPU acceleration
  • transform instead of left/top
  • Passive event listeners
  • Event delegation

Me: "The fonts don't look good. Choose better ones!"

Kiro: Analyzes options and creates:

  • Intelligent font hierarchy
  • October Twilight for headers
  • Jura for "Ghost in Machine" UI
  • Crimson Text for grimoire
  • Share Tech Mono for code
  • Complete font system with performance optimization

Lines of code written by Kiro on Day 3: ~900

The Numbers

Let's break down what Kiro generated:

  • 3,500+ lines of CSS (animations, effects, layouts)
  • 1,200+ lines of JavaScript (parsers, components, interactions)
  • 17+ particle effect types (sparks, trails, explosions)
  • 6 bright neon colors (carefully selected palette)
  • 5 font families (intelligently chosen)
  • 8 agent hooks (automation workflows)
  • 9 MCP servers (extended capabilities)
  • Complete documentation (guides, READMEs, comments)

Total: ~5,000 lines of production-ready code in 3 days!

The Secret Sauce: How Kiro Did It

1. Spec-Driven Development

Kiro excels at structured development. By creating comprehensive specs first, it had a clear roadmap:

## Requirement 1: Graveyard Kanban Board

**User Story:** As a developer, I want to see my tasks as tombstones...

### Acceptance Criteria

1. WHEN a user opens tasks.md THEN the system SHALL display a kanban board
2. WHEN a task is dragged THEN the system SHALL show an ectoplasm trail
3. WHEN a task is completed THEN the system SHALL trigger ghost celebration
Enter fullscreen mode Exit fullscreen mode

This clarity meant Kiro could generate code that exactly matched requirements.

2. Vibe Coding

For creative features, I used vibe coding:

Me: "Make it feel like a haunted computer terminal from the 80s"
Kiro: *generates Share Tech Mono font, CRT effects, scanlines*

Me: "Add electric sparks like a Tesla coil"
Kiro: *creates complete particle system with physics*
Enter fullscreen mode Exit fullscreen mode

Kiro understood the vibe and translated it into code!

3. Agent Hooks

I set up hooks to automate workflows:

{
    "name": "Compile on Save",
    "trigger": { "type": "onFileSave", "filePattern": "**/*.ts" },
    "action": { "type": "executeCommand", "command": "npm run compile" }
}
Enter fullscreen mode Exit fullscreen mode

Every time I saved a TypeScript file, Kiro auto-compiled it. No manual steps!

4. Steering Docs

I created steering documents to guide Kiro's style:

# JavaScript Patterns

- Use classes instead of @typedef
- Prefer ternary over if-else for assignments
- Use Object lookups instead of switch statements
- Keep functions concise (single responsibility)
Enter fullscreen mode Exit fullscreen mode

This ensured consistent, high-quality code throughout.

5. MCP Servers

I enabled MCP servers for extended capabilities:

  • vscode-extension - Kiro could search Kiro extension APIs
  • npm - Kiro could find and suggest packages
  • fetch - Kiro could get documentation from the web
  • typescript - Kiro could check types in real-time

This gave Kiro superpowers beyond its base knowledge!

The Most Impressive Code Generation

The electric Tesla coil effects were mind-blowing. I said:

"Add electric sparks like a Tesla coil"

Kiro generated:

@keyframes teslaCoil {
    0%,
    100% {
        opacity: 0;
        transform: scale(0.8) translateY(0);
    }
    10% {
        opacity: 1;
        transform: scale(1) translateY(-5px);
    }
    20% {
        opacity: 0;
        transform: scale(0.9) translateY(-10px);
    }
    /* ... continues with perfect timing ... */
}

.electric-spark {
    position: absolute;
    width: 2px;
    height: 20px;
    background: linear-gradient(180deg, #00ffff 0%, #0080ff 50%, transparent 100%);
    box-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #0080ff;
    animation: teslaCoil 1.5s ease-in-out infinite;
}
Enter fullscreen mode Exit fullscreen mode

Plus JavaScript to spawn sparks, manage lifecycle, and optimize performance. All from one sentence!

Performance: The Surprise Win

Here's what shocked me: Kiro didn't just generate code—it generated OPTIMIZED code!

When I mentioned cursor lag, Kiro:

  1. Identified the bottleneck (too many particles)
  2. Implemented throttling (50ms intervals)
  3. Added GPU acceleration (will-change, transform)
  4. Used passive listeners
  5. Implemented event delegation

Result: Smooth 60fps with 17+ particle effects running simultaneously!

Lessons Learned

1. AI Excels at Structured Tasks

Spec-driven development gave Kiro clear requirements. It generated code that exactly matched specs with minimal iteration.

2. Vibe Coding Unlocks Creativity

For creative features, describing the "vibe" worked better than technical specs. Kiro understood "haunted terminal" and "Tesla coil sparks" intuitively.

3. Automation Multiplies Productivity

Agent hooks eliminated repetitive tasks. Auto-compiling, auto-testing, and smart reminders saved hours.

4. Steering Ensures Quality

Custom steering docs meant Kiro generated code in my preferred style consistently.

5. MCP Extends Capabilities

MCP servers gave Kiro access to Kiro APIs, npm packages, and web docs—making it 10x more capable.

The Future of Development

SpecterFlow proves that AI-assisted development isn't just fast—it's transformative.

In 3 days, with 80% AI-generated code, I built:

  • A production-ready Kiro extension
  • 17+ particle effect systems
  • Intelligent font hierarchy
  • Performance-optimized animations
  • Complete documentation
  • Automated workflows

This would have taken weeks without AI!

Try It Yourself!

Want to experience SpecterFlow?

  1. Install from Kiro marketplace
  2. Open a workspace with .kiro/specs/ folder
  3. Open any tasks.md, requirements.md, or design.md
  4. Watch your specs come alive! ⚡👻

Want to build with Kiro?

  1. Try Kiro IDE
  2. Use spec-driven development for structure
  3. Use vibe coding for creativity
  4. Set up agent hooks for automation
  5. Enable MCP servers for superpowers

Conclusion

SpecterFlow started as a silly idea: "What if specs were spooky?"

With Kiro AI, that idea became reality in 3 days. The extension has:

  • Electric Tesla coils ⚡
  • Animated cursors 👻
  • Neon glows 🌟
  • Wavy text 🌊
  • 60fps performance 🚀

And it's 80% AI-generated!

This is the future of software development: humans provide vision, AI provides execution, and together we create magic.

What will YOU build with AI? 🎃⚡👻

Links:

Tags: #AI #Kiro #WebDev #KiroWeen #AIAssistedDevelopment #JavaScript #TypeScript #CSS

Built with 💜 by a human + Kiro AI in 3 days
80% AI-generated, 100% spooky, 1000% awesome!

Top comments (0)