Nitheesh S Kumar

Posted on Nov 9, 2025

Project Development Keys: Willowbrook Clothing

#kirodotdev #kiro #aws

A Developer Collaboration Story

Overview

This document captures not only the technical evolution of Willowbrook Clothing, a premium custom apparel e-commerce platform, but also the unique collaboration between a developer and an AI partner — Kiro.

It documents how we built, reasoned, and refined the project using modern coding strategies like vibe coding, spec-driven development, and agent hooks, alongside strong steering documentation to align direction, maintain flow, and achieve production quality with zero infrastructure cost.

🎯 Project Vision & Goals

The goal was to create a modern, custom clothing platform that balances premium aesthetics, real-time interactivity, and serverless scalability.

Our aim: deliver a full-stack production-ready MVP — powered entirely by free-tier cloud services — within weeks, not months.

Core Requirements

Real-time product customization (color, size, embroidery)
Seamless cart and checkout experience
Authentication with JWT and email verification
Admin dashboard for managing products and orders
Direct image uploads to cloud storage
Instagram-integrated order confirmations

Chosen Stack

Layer	Technology	Reasoning
Frontend	React 18 + TypeScript + Vite + Tailwind CSS	Speed, DX, type safety
Backend	Netlify Functions (Express.js)	Serverless, cost-free, scalable
Database	Supabase PostgreSQL	Real-time, integrated, free tier
State Mgmt	Zustand	Lightweight, perfect for client-side cart
Storage	Supabase Storage	CDN-backed uploads, secure policies

🤝 Collaborative Development Model

While the tech stack was crucial, the real breakthrough came from the development method itself — a co-creative loop between human intuition and AI precision.

I didn’t just “ask for code.” I built an evolving workspace where Kiro acted as a design partner, researcher, and code generator.

Each session followed this rhythm:

Define context
Set technical intent
Request scoped generation
Iterate collaboratively
Capture outcomes in steering docs

This created a hybrid workflow that was faster than traditional solo dev — but structured enough to maintain engineering discipline.

🎨 Vibe Coding with Kiro

Vibe coding was the creative pulse of the Willowbrook project.

It wasn’t about prompts — it was about rhythm. I treated conversations with Kiro like live pairing sessions: part brainstorming, part code synthesis.

How It Worked

I’d describe a vibe — the emotion, intent, or UX flow behind a feature (e.g., “a silky, fast customization screen that feels instant”).
Kiro translated that into structured code blocks — combining React transitions, Zustand stores, and Tailwind components with the right “feel.”
The back-and-forth wasn’t about syntax; it was about flow alignment.

⚡ Example: The Customization Preview

The most impressive vibe coding session came when designing the 3D product customization view.

I gave Kiro a creative brief — “real-time feel, zero lag, maintain minimal re-renders.”

Kiro generated a dynamic, GPU-optimized React component that:

Batched re-renders intelligently using useMemo and useTransition
Preloaded texture assets asynchronously
Integrated with Zustand for live state without prop drilling

🧠 Vibe coding takeaway: When you treat AI like a creative partner, code quality aligns naturally with design intent.

⚙️ Agent Hooks & Automated Workflows

Once the foundation was stable, we introduced agent hooks — small automation anchors that let Kiro manage workflows in context.

Hooks Used

Build Hooks – Automated consistency checks before deploys.
Testing Hooks – Triggered lightweight sanity checks via script.
Documentation Hooks – Auto-appended updates to steering docs.

Impact

Agent hooks acted like background assistants, quietly enforcing quality and alignment.

They made it feel like Kiro was part of the development pipeline, not just a one-off code generator.

✅ Biggest benefit: reduced cognitive overhead — I could stay creative while Kiro handled repeatable precision tasks.

📜 Spec-Driven Development

While vibe coding captured creativity, spec-driven development grounded the process in clarity.

How We Structured Specs

Each feature began as a compact YAML-like spec shared with Kiro:

feature: order_management
goal: Enable admins to manage order statuses and customer history
api:
  - GET /orders
  - PUT /orders/:id/status
ui:
  - Table view with filters
  - Status dropdown
validation:
  - Zod schema for order updates
auth:
  - Role: ADMIN only

Kiro then expanded this into full backend and frontend implementations, ensuring parity and validation.

Spec vs. Vibe Coding

Mode	Goal	Kiro’s Role	Best Used For
Vibe Coding	Creative flow	Interpret and enhance intent	UI/UX and experience-driven tasks
Spec-Driven	Precision	Implement structure and logic	API, backend, schema design

Synergy: Start with vibe → lock in spec → automate refinement.

🧩 Steering Documents Strategy

Steering docs became the central nervous system of the Willowbrook workflow.

Key Documents

tech.md – Stack decisions, build commands, and CI/CD steps
structure.md – Folder layout, naming conventions, and import patterns
product.md – Business context, user flows, and feature priorities

How They Evolved with Kiro

Every major decision was recorded with reasoning. For example:

“Kiro, record why we chose direct Supabase uploads over Netlify proxy.”

Over time, these became living blueprints — not static docs.

🧭 Best strategy learned: Use steering docs as shared context, not static documentation.

🧰 Problem-Solving Flow

Kiro’s structured reasoning shined during debugging.

We established a problem triage routine:

Reproduce → log clear steps
Isolate → identify failing layer
Analyze → diff recent changes
Fix → minimal viable patch
Verify → regression testing

Debugging turned from frustration into guided exploration.

🧱 Key Development Patterns

Feature Loop: Define → Spec → Generate → Test → Document
Prompt Recycling: Reuse strong prompts as templates
Zod Everywhere: Validation enforced end-to-end
Auto Context Preservation: Steering + hooks meant Kiro remembered evolving conventions

🧠 Lessons Learned

Technical

Serverless optimization requires lean logic and no ORM overhead
Shared TypeScript types prevented 90% of mismatches
Direct uploads outperform function proxies

Process

Vibe coding unlocked creativity; spec-driven development anchored it
Steering docs were the real game-changer
Agent hooks turned AI into a continuous collaborator

Creative

Talk like a designer, not a debugger
Prompts with intent produce better results
AI collaboration thrives on rhythm, not repetition

📊 Metrics & Outcomes

Metric	Result
TypeScript Coverage	100%
API Endpoints	20+ serverless functions
React Components	50+ modular units
Performance	<1s page loads, <2s cold starts
Build Time	~30 seconds
Database Tables	8 relational entities
Lines of Code	~15,000
Docs Synced	3 live steering documents

🚀 Conclusion

Willowbrook Clothing wasn’t just a project — it was an experiment in augmented creation.

Through vibe coding, spec-driven precision, agent automation, and living steering, Kiro became more than a coding assistant — it became a collaborator that could think, adapt, and align with intent.

The final product wasn’t just code — it was proof that with the right structure and communication, AI and human creativity can build production-grade systems at startup speed.

💬 “Good code is written; great code is co-composed.”

Last Updated: November 9, 2025

DEV Community