VibeKit — Vibe-Coder-Optimized Library Idea

The Idea

A library/starter kit that implements the patterns from the Vibe Coding series — event bus, routing, idempotent init, typed returns — behind a simple API, with AI tool contracts built in so that Claude Code, Cursor, and other AI tools generate code that uses these patterns by default, without the vibe coder needing to know they exist.

The CTA from the articles: “I’m building a library that makes this the default. Subscribe to get early access / follow the build.”

Validation — Why This Is Real

The problem is proven:

95% of AI integration failures are integration gaps (MIT, ServicePath 2026)
AI generates tight-coupled code by default — the path of least resistance
Vibe coders hit this wall universally after the first 2–3 features

The building blocks already exist in this repo:

Pattern	Article	Existing lib
Event bus	Vibe Coding Part 7	`appkit-core` — already has mitt
Router + deterministic routing	LLM deterministic article	`backendkit` — ComputeRouter + DataRouter
Provider-agnostic AI calls	LLM cost article	`ai-bridge` — 8 providers, failover, key rotation
Composable use* API	—	`extkit`, `frontend-framework` — use* wrappers
NLP contracts / code reuse	—	`darjs` + `dar-nlp` — find/reuse before writing

This is not a greenfield idea. It’s a packaging and API-surface problem on top of existing work.

The distribution is already there:

Vibe Coding series articles = content marketing to the exact audience
Each article ends with a CTA pointing to the library
The subscribe modal architecture (ahmedbouchefra2) is a real-world demo of the pattern

What Makes It “Vibe-Coder Optimized”

Normal libraries are built for developers who read docs. This one is built for people who describe intent to AI.

Three layers:

Layer 1 — Simple API (what the vibe coder sees)

// install: npm create vibekit-app
import { on, emit, createRoute } from 'vibekit'

// Event bus in one line
on('user:subscribed', ({ email, page }) => unlockBook(page))
emit('user:subscribed', { email: '[email protected]', page: '/book1' })

// Deterministic routing in one line
const route = createRoute({
  'order_lookup':   (ctx) => db.getOrder(ctx.id),
  'date_calc':      (ctx) => addDays(ctx.date, ctx.days),
  '_default':       (ctx) => ai.complete(ctx.query)
})

Layer 2 — AI Tool Contracts (what Claude Code sees)

A VIBEKIT.md file in every project that documents:

All events in the app + what they carry
All routes + what they handle
All modules + their window globals

This is the CLAUDE.md for the library. AI reads it and generates correct code the first time.

# VibeKit Contract — this project

## Events
- `user:subscribed` — { email, page, timestamp } — fired by subscribe-modal.js
- `book:unlocked` — { bookId, userId } — fired by book-gate.js

## Routes  
- order_lookup → db.getOrder(id)
- _default → ai.complete(query)

## Modules
- SubscribeModal — window.SubscribeModal.show(trigger)
- BookGate — window.BookGate.unlock(bookId)

Layer 3 — Claude Code Skills

Pre-built skills that AI tools can invoke:

/vibekit add-event user:subscribed → generates emit + listener stubs
/vibekit add-route order_lookup → generates deterministic handler + fallback
/vibekit audit → lists all events, finds listeners with no emitter, emitters with no listener

What to Build (Phases)

Phase 0 — Validate with existing content (now)

Add CTA to Vibe Coding articles: “I’m building this. Subscribe to follow the build.”
Set up a waitlist page on ahmedbouchefra2 or techiediaries
Write “Part 9: The Library I’m Building So You Never Hit This Wall Again”

Phase 1 — Core package (`vibekit-core`)

Thin wrapper over appkit-core’s mitt + signals
on(event, handler), emit(event, data), off(event, handler)
createRoute(handlers) — deterministic router with _default fallback
TypeScript types for event map (optional, vibe coders don’t need it but devs do)
Zero dependencies beyond appkit-core

Phase 2 — VIBEKIT.md generator (`vibekit-contracts`)

CLI: vibekit init — scans codebase for emit( calls, generates VIBEKIT.md
CLI: vibekit audit — finds orphaned events (emit with no listener, listener with no emit)
This is the ab guard pattern generalized

Phase 3 — Claude Code skill pack (`vibekit-skills`)

/vibekit add-event skill
/vibekit add-route skill
/vibekit audit skill
CLAUDE.md snippet to drop into any project

Phase 4 — Starter template (`create-vibekit-app`)

npm create vibekit-app my-project
Includes: vibekit-core, VIBEKIT.md starter, CLAUDE.md with rules, example event + route

Where It Fits in the Existing Ecosystem

appkit-core (mitt + signals + xstate)
       ↓ wraps
vibekit-core (simple API for vibe coders)
       ↓ introspects
vibekit-contracts (VIBEKIT.md generator + audit)
       ↓ informs
vibekit-skills (Claude Code skills that use VIBEKIT.md)

darjs stays as the power-user framework. vibekit is the on-ramp — simpler, opinionated, for people who describe intent to AI and need the AI to generate correct code.

The CTA for Articles

Short version (end of Vibe Coding articles):

“The patterns in this article work even better when the library handles them automatically. I’m building VibeKit — a starter kit that bakes these patterns in with Claude Code skills so AI generates event-driven code by default. [Follow the build / subscribe for early access]”

Open Questions Before Starting

Package name: vibekit vs vibejs vs something else? Check npm availability.
Is appkit-core publish-ready or does it need cleanup first?
Should the skills be Claude Code skills (.claude/skills/) or MCP tools, or both?
Where does the waitlist live — ahmedbouchefra2 or a standalone landing page?