`src/content/posts/2026-03-23-six-agents-one-feature.md`

108 lines

---
title: "6 AI Agents Built an E-Commerce Feature in 12 Minutes — Here's the Playbook"
description: "One founder, six parallel AI agents, and a production e-commerce feature shipped from zero to deployed. The playbook for small business owners who want to move fast."
date: 2026-03-23
tags: ["ai-agents", "parallel-development", "claude-code", "e-commerce", "automation"]
---

I run a real business. No dev team. No six-figure engineering budget. Just me and Claude Code. Last night I shipped a production feature — a Recently Viewed product carousel — using six AI agents running in parallel. From blank file to live on the store: twelve minutes.

## Watch the Video

[**Subscribe to @AgentAbrams on YouTube**](https://youtube.com/@AgentAbrams) for new videos every week.

Here's exactly how it worked.

## The Problem

Every e-commerce store needs a "Recently Viewed" section. Customers browse five products, leave, come back, and can't find the one they liked. It's a solved UX problem — but implementing it properly means touching five different layers of the stack: client-side storage, UI rendering, cart integration, SEO markup, and theme templates. That's a full sprint for a small team.

I didn't have a sprint. I had a Sunday night.

## The Playbook: Break It Into Stories, Not Files

The first insight: don't think in files, think in **user stories**. Each story is small enough for one AI agent to own completely. Here's how I decomposed the feature:

| Agent | Story | What It Built |
|-------|-------|---------------|
| 1 | Design reference | Generated a React component mockup to establish the visual direction |
| 2 | Data layer | localStorage tracker — captures product views, deduplicates, caps at 20 |
| 3 | Carousel UI | Horizontal slider with next/back arrows, responsive breakpoints |
| 4 | Quick-add modal | One-click "Add Sample to Cart" via AJAX cart API |
| 5 | Template + SEO | Server-side snippet with JSON-LD ItemList structured data |
| 6 | Integration guide | Theme settings schema, placement instructions, rollback plan |

A seventh agent ran validation after the others finished — syntax checking, accessibility audit, and a standalone test page.

## Why Parallel Matters

Agents 2 and 3 have no dependency on each other. The data layer writes to localStorage; the carousel reads from localStorage. They agree on a contract (`dw_recently_viewed` key, JSON array with `handle`, `title`, `featuredImage`, `price`) and build independently.

Same with agents 4 and 5. The modal needs the carousel's card click event. The template needs the modal's HTML structure. But both can be built from the *spec* without waiting for the other agent's code.

This is the real unlock: **parallel agents that share a spec, not a codebase**. Each agent reads the PRD, builds its piece, and a validation agent catches the integration gaps at the end.

## The 4 Bugs That Prove Cross-Agent Validation Works

The test agent (Agent 7) caught four integration bugs between files built by different agents:

1. **Arrow button IDs didn't match** — CSS used `rv-btn-left`, JS expected `rv-arrow-left`. Different agents, different naming intuitions.
2. **Header class mismatch** — Template used `rv-header`, CSS defined `rv-section__header`. BEM naming was in the spec but each agent interpreted it slightly differently.
3. **Missing DOM wrapper** — The "Add to Cart" button needed a `<span>` wrapper for JS state updates. Agent 4 wrote the JS expecting it; Agent 3 built the button HTML without it.
4. **Dead CSS class** — Agent 3 referenced `rv-modal__btn--primary` in HTML, but Agent 4 never defined it in CSS. Zero visual impact but dead weight.

None of these were logic bugs. They were *interface* bugs — the exact kind that happen when two engineers build in parallel without constant communication. The test agent found all four in one pass.

## What Actually Shipped

The final feature:

- **localStorage tracker**: 119 lines of vanilla JS. Captures product views on page load, deduplicates, caps at 20 items, zero dependencies.
- **Carousel**: 344 lines of JS. Horizontal scroll with smooth CSS snap, SVG arrow navigation. Responsive: 4 cards mobile, 6 tablet, 8 desktop.
- **Quick-add modal**: Click any card, see the product large, one button adds the sample variant to cart via AJAX. Loading spinner, success state, error handling.
- **SEO markup**: JSON-LD `ItemList` schema so search engines understand product relationships even on non-product pages.
- **496 lines of CSS**: BEM naming, CSS custom properties prefixed `--rv-` to prevent theme conflicts, lazy-loaded images, accessible ARIA attributes.

Total asset size: under 15KB. Zero external dependencies. Deployed to the live theme via the Theme Asset API — no manual file upload.

## The Pattern for Small Business Owners

Here's the playbook distilled:

1. **Decompose features into user stories**, not technical tasks. Each story should be completable by one agent without needing another agent's output.
2. **Define the contracts first**. What data format does localStorage use? What CSS class names? What DOM element IDs? Write this in the PRD before any agent starts.
3. **Run agents in parallel** on stories that don't have data dependencies. Design + data layer can build simultaneously. UI + template can build simultaneously.
4. **Always run a validation agent last**. It catches the interface bugs that parallel work inevitably creates. In our case: 4 bugs in 7 files built by 6 agents. That's a good ratio.
5. **Deploy via API, not manual upload**. If you're still copying files through a web dashboard, you're leaving speed on the table.

## The Bigger Point

This isn't a demo. This is a production e-commerce feature serving real customers right now. It has SEO markup, accessibility attributes, error handling, and responsive breakpoints. It was built in twelve minutes by one person orchestrating AI agents.

A year ago, this was a two-week ticket on a sprint board. Six months ago, it was a day of focused coding. Now it's a Sunday night side task.

Small business owners: you can ship features that used to require a team. The economics of software engineering have changed. The question isn't whether AI can build your features — it's whether you have the playbook to orchestrate it.

## Let's Connect

I build AI-powered automation for real businesses — not demos, not prototypes, production systems that run 24/7.

If you're a **founder, entrepreneur, or small business owner** looking to automate operations with AI, let's talk:

- [**@agentabrams on YouTube**](https://youtube.com/@AgentAbrams) — walkthroughs and demos
- [**@agentabrams on X**](https://x.com/agentabrams) — DMs open
- [**@agentabrams on Bluesky**](https://bsky.app/profile/agentabrams.bsky.social) — follow along
- [**goodquestion.ai**](https://goodquestion.ai) — you're here

**Advisory & Board Opportunities:** I'm actively looking to join boards where AI automation can drive real business value. If your company is exploring AI-driven operations, data pipelines, or autonomous agent systems — I'd love to contribute as a board member or advisor. Reach out on any platform above.

---
*Built with [Claude Code](https://claude.ai). Shipped in production. Every day. This is what one founder + AI looks like.*