DEV Community: Sukhjit Singh

How Kiro Transformed the Way I Build: From Code to Vibes

Sukhjit Singh — Thu, 04 Dec 2025 21:06:24 +0000

When I started building Ghostly Tales, a minimal, atmospheric ghost-story generator with a cinematic horror UI, I expected the biggest challenge to be the visuals. Horror is all about vibe, pacing, and subtle cues — and bringing that into code usually means hours of tweaking borders, animations, lighting, and interactions.

This time, though, everything changed.

I had Kiro.

And for the first time, I felt like I wasn’t coding alone — I was coding with a creative partner.

The Shift: From Writing Code → Describing Feelings

What surprised me most was how natural it felt to collaborate with Kiro.
I didn’t have to explain implementation details. I didn’t have to plan out the CSS or animation layers.

Instead, I described intentions:

“Make the border feel alive.”
“Give this component a haunted glow.”
“I want this UI to feel like it’s breathing.”
“Make the storytelling container cinematic and quiet.”

Kiro didn’t just understand the words — it understood the tone.
It generated structured, meaningful code that matched the emotional aesthetic I had in my head.

This wasn’t prompt engineering.

This was vibe coding.

And it changed everything.

Building Ghostly Tales With Kiro

Ghostly Tales is a tiny project built in a single day, but it feels like something bigger because its personality shines through. A supernatural typing animation reveals stories one character at a time. A distorted, glowing frame makes the UI feel alive. The whole experience is eerie, minimal, and oddly beautiful.

Kiro helped me accelerate the parts that typically slow me down:

1. Complex UI Layers

The ghostly card wrapper — a component with turbulence filters, glow layers, overlays, and distortions — came together in minutes with Kiro’s help.
It handled:

animated SVG turbulence filters
layered masking and glows
border distortion logic
performance-safe structuring

This would’ve taken hours (or more) to handcraft.

2. Animation Logic

Kiro helped refine the typing animation, which reveals stories at an adjustable pace with a flickering cursor. It suggested improvements for:

batching character updates
preventing jank on long stories
separating cursor timing from text rendering

The result?
An animation that feels eerily alive — with clean, maintainable code.

3. Faster UI Iteration

Every time I wanted to try a new glow intensity, radius, or turbulence amount, I didn’t have to manually adjust 20 values. I simply told Kiro:

“Make the orange glow feel warmer and more cinematic.”

And it regenerated the component with a new, balanced palette — no copy-pasting, no juggling hex codes.

Agent Hooks: Reducing the Repetitive

I also experimented with Kiro’s agent hooks to automate repetitive workflow tasks:

UI regeneration hooks that updated component variants while retaining structural consistency
Prompt-validation hooks to ensure story inputs were always valid

These small automations saved countless micro-decisions and kept the flow uninterrupted.

Spec-Driven Development Meets Vibe Coding

Before writing the first line of code, I created a short spec describing:

UI hierarchy
component boundaries
animation states
styling philosophy (“haunted minimalism”)
input/output schema for the story generator

Kiro used this as a north star, ensuring consistency across every iteration and regeneration.

Spec-driven development gave the project structure.
Vibe coding gave it soul.

And together, they allowed me to build faster and more creatively than ever before.

How Kiro Changed My Development Mindset

Using Kiro didn’t just accelerate development — it changed the way I start projects.

Before Kiro:
I’d open a blank file, sketch the architecture, fight with styling, and chip away until something resembled my idea.

After Kiro:
I begin with intention. Mood. Emotion. Aesthetic.
And Kiro helps me grow that into code.

Development feels less like constructing and more like co-creating.

That’s the magic.

Looking Ahead

Ghostly Tales is just a small example, but it revealed something huge:
Kiro unlocks a style of building that blends creativity with engineering in a way traditional coding doesn’t.

I’m excited to explore:

automated design-to-code workflows
style-driven UI engines
project scaffolding through vibes and specs
agent-driven animation systems

Kiro didn’t just change my workflow.

It changed my starting point.

And once you experience that shift, you don’t want to build any other way.

Building PDF Editor

Sukhjit Singh — Sat, 06 Sep 2025 17:14:26 +0000

Introduction

In today's digital-first world, PDF documents remain the standard for sharing and preserving formatted content across platforms. However, the tools for working with PDFs often fall into two categories: powerful but complex desktop applications or limited online utilities with privacy concerns. Our team set out to bridge this gap by creating a comprehensive, browser-based PDF editor that prioritizes user privacy, performance, and accessibility.

The Challenge

PDF manipulation has traditionally been challenging in web environments. The complexities of the PDF specification, performance limitations of JavaScript, and user expectations set by desktop applications created a high bar for success. We wanted to build a solution that would:

Process PDFs entirely client-side to ensure document privacy
Provide a responsive, intuitive interface across devices
Support core PDF operations (editing, converting, merging) without compromise
Deliver performance comparable to native applications

Our Solution: Architecture Overview

We built our PDF Editor using a modern tech stack centered around Next.js 15 and React 19, leveraging the latest advancements in web technology:

Frontend Framework: Next.js 15 with React 19
PDF Processing: pdf-lib and PDF.js for client-side document manipulation
UI Components: Custom components built with Radix UI primitives and Tailwind CSS
State Management: React Context API for application state
File Handling: react-dropzone for intuitive file uploading

The application's architecture emphasizes client-side processing, ensuring that user documents never leave their browser. This approach eliminates privacy concerns while providing immediate feedback during document operations.

Key Features

PDF Editing

Our editor provides intuitive tools for modifying PDF documents:

Text addition with customizable fonts, sizes, and colors
Shape and annotation tools for highlighting and emphasizing content
Smart layout preservation that respects the original document structure

The editing interface uses canvas-based rendering through PDF.js, with a custom overlay system for manipulating PDF elements without altering the underlying document until changes are committed.

PDF Conversion

The conversion module addresses two common needs:

PDF to Image: Users can extract pages as high-quality images in various formats, with controls for resolution and quality settings.
Image to PDF: Multiple images can be combined into a single PDF with options for page size, orientation, and layout.

Both conversion processes run entirely in the browser using a combination of Canvas APIs and the pdf-lib library, ensuring privacy while maintaining quality.

PDF Merging

Our merge functionality allows users to:

Combine multiple PDFs into a single document
Select specific pages from source documents
Rearrange pages through an intuitive drag-and-drop interface
Preview the final document before downloading

This feature leverages pdf-lib's document manipulation capabilities, with careful memory management to handle large documents efficiently.

Technical Deep Dive

Client-Side PDF Processing

One of our biggest technical challenges was implementing robust PDF manipulation entirely in the browser. We approached this by:

Using Web Workers to move processing off the main thread
Implementing progressive rendering for large documents
Creating a custom buffering system to manage memory usage
Leveraging typed arrays and binary data for efficient document handling

The result is a system that can handle documents hundreds of pages long without significant performance degradation.

Modern UI Implementation

Our interface is built on Radix UI primitives, providing accessibility and consistent behavior across browsers. We extended these components with:

Custom animations for smooth transitions between states
Responsive layouts that adapt to different screen sizes
Keyboard shortcuts for power users
Dark mode support through CSS variables and next-themes

Progressive Web App Capabilities

The application is designed as a Progressive Web App (PWA), offering:

Offline functionality for previously opened documents
Installation on desktop and mobile devices
File system integration where supported by the browser
Responsive design that works across devices

Performance Optimizations

Performance was a critical consideration throughout development. Key optimizations include:

Code splitting: Dynamic imports to load features on demand
Web Workers: Processing PDF operations in background threads
Memory management: Careful resource allocation and cleanup
Rendering optimizations: Canvas reuse and lazy loading of document pages

These techniques allow our application to maintain responsive performance even when working with large, complex documents.

Future Directions

As we continue to develop our PDF Editor, several exciting enhancements are on the roadmap:

AI-assisted editing: Intelligent content recognition and manipulation
Collaborative editing: Real-time document collaboration
Enhanced form handling: Creation and filling of interactive forms
Advanced security features: Password protection and document encryption

Conclusion

Building a feature-rich PDF editor that runs entirely in the browser presented significant technical challenges, but the result is a powerful tool that respects user privacy while delivering desktop-class functionality. By leveraging modern web technologies and careful performance optimization, we've created an application that makes PDF manipulation accessible to everyone, anywhere.

We invite you to experience the future of browser-based document editing. The project is open source and available on GitHub, where we welcome contributions and feedback from the community.