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

Source: Dev.to

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.

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 workflow and asked:

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

Kiro responded by creating:

• requirements.md – complete with EARS patterns and acceptance criteria
• design.md – architecture, components, and correctness properties
• tasks.md – 30 detailed implementation tasks

Kiro then generated the initial code:

• 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

Switching to “vibe coding” mode, I 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 SVGs, plasma orbs, electric particles, and voltage arcs.

Me: “Add wavy text animations!”
Kiro: Creates a full animation system (wave, glitch wave, floating wave, neon wave, rainbow wave, liquid wave).

Me: “Custom cursor with particle trails!”
Kiro: Builds optimized JavaScript for a glowing cursor, particle trails, click explosions, GPU‑accelerated rendering, throttled for 60 fps.

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

Day 3 – Polish & Performance

Focused on optimization and polish:

Me: “The cursor is lagging. Optimize it!”
Kiro: Refactors with throttled trail creation, reduced particle counts, will-change for GPU acceleration, transform instead of left/top, passive event listeners, and event delegation.

Me: “The fonts don’t look good. Choose better ones!”
Kiro: Analyzes options and creates an intelligent font hierarchy (October Twilight for headers, Jura for UI, Crimson Text for the grimoire, Share Tech Mono for code).

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

The Numbers

• 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

This clarity let Kiro 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*

Kiro understood the vibe and translated it into code.

3. Agent Hooks

Hooks automate workflows:

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

Every time I saved a TypeScript file, Kiro auto‑compiled it.

4. Steering Docs

Steering documents 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)

This ensured consistent, high‑quality code throughout.

5. MCP Servers

Enabled MCP servers for extended capabilities:

• vscode‑extension – search Kiro extension APIs
• npm – find and suggest packages
• fetch – retrieve documentation from the web
• typescript – check types in real‑time

These 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 the following CSS:

@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;
}

Kiro also produced JavaScript to spawn sparks, manage their lifecycle, and optimize performance—all from a single sentence.

Performance: The Surprise Win

When I mentioned cursor lag, Kiro:

• Identified the bottleneck (excessive particles)
• Implemented throttling (50 ms intervals)
• Reduced particle counts and used will-change for GPU acceleration
• Switched to transform‑based movement instead of left/top
• Added passive event listeners and event delegation

The result was a smooth, 60 fps experience with no noticeable lag.