Building Vibery Kits: How Claude Code Manages 3 Sub-Projects
A deep dive into building a template ecosystem with Claude Code. Real git commits, actual architecture decisions, and the tools we built along the way.
TL;DR
Built a monorepo with 3 sub-projects: cli/ (7 commits, remote template fetching), website/ (34 commits, Astro + Vue Islands), and templates/ (341 source files). Claude Code orchestrates everything via hooks, sync scripts, and plan-driven development.
The Multi-Project Architecture
Vibery Kits isn't a single codebase—it's three interconnected projects that need to stay in sync:
vibe-templates/
├── templates/ # 341 source files (single source of truth)
│ ├── agents/ # 192 markdown files
│ ├── skills/ # 37 folders with SKILL.md + assets
│ ├── commands/ # 35 markdown files
│ └── ...
├── cli/ # npm package (vibery)
│ ├── templates/ # ← synced copy
│ └── registry.json # ← generated metadata
├── website/ # Astro 5 + Vue Islands
│ ├── public/templates/ # ← synced copy
│ ├── public/skills/ # ← generated ZIP files
│ └── src/data/templates.json # ← generated with content
└── scripts/
└── sync-all.js # The glue that keeps everything aligned
One npm run sync command copies templates, generates registries, creates skill ZIPs, and keeps all three projects in sync.
How Claude Code Orchestrates This
The .claude/ folder contains the automation that makes multi-project development manageable:
session-init.cjs
Fires on every session start. Auto-detects:
- • Project type (monorepo, single-repo, library)
- • Package manager (npm, pnpm, yarn, bun)
- • Framework (astro, next, vue, react, etc.)
- • Active plan resolution from branch name or session state
Plan-Driven Development
Every major feature gets a plan folder:
├── plan.md
├── phase-01-core-infrastructure.md
├── phase-02-ui-components.md
├── phase-03-integration-polish.md
└── phase-04-testing-validation.md
reports/ for Progress Tracking
Completion reports with metrics: test coverage (96.87%), bundle size changes (-4KB), performance benchmarks (<50ms p95 latency).
Real Git History: What We Actually Built
website/ — 34 commits
53e0609 Initial commit - Vibery Kits Website edb6add Configure Pages with D1 binding for API routes 59656b6 Add 21 skills from claudekit-skills and ui-ux-pro-max 3d17232 Remote registry integration + download links 5a7c9f1 [phase-01] Core search infrastructure with MiniSearch 7003626 [phase-02] SearchBar UI enhancements 1492d4e [phase-03] Accessibility, empty state, mobile polish a7d22c7 Implement truly global Cmd+K search modal 32e7fa4 Fix robots.txt sitemap URL and zip download for skills cli/ — 7 commits
42345a0 Initial commit: Vibery CLI v1.0.0 1b756a7 Add 16 skills from anthropics/skills 8356c3a Phase 1 complete - Dynamic Template Distribution 5379f1a Phase 2 - Remote template fetching from GitHub Releases 2fd0817 Bump version to 1.1.1 Feature Deep Dives
MiniSearch Implementation
Replaced Fuse.js with MiniSearch. The decision was documented in a brainstorm report, then executed across 3 phases with completion reports.
Config: Field boosting (name: 3x, tags: 2x, category: 1.5x), fuzzy tolerance 0.2-0.3, max 8 results, unified template + stack search.
Remote Template Fetching (CLI)
CLI v1.1.1 added remote fetching from GitHub Releases. Templates try bundled first, fallback to remote.
✓ Installed agent: nextjs-pro (from bundled)
✓ Installed skill: ui-ux-pro-max (from remote)
Skill ZIP Generation
Skills are multi-file bundles (SKILL.md + assets). The sync script auto-generates downloadable ZIPs:
• Scans templates/skills/{skill-name}/
• Creates website/public/skills/{skill-name}.zip
• Sets downloadUrl in templates.json
D1 Database for Usage Tracking
Cloudflare D1 tracks template downloads via API routes:
/api/track — Record template download/api/stats — Get download counts/api/kit-stats — Kit-specific analyticsThe Glue: sync-all.js
One script keeps all three projects aligned. Here's what it does:
$ npm run sync Syncing templates... Copying to cli/templates/ Copying to website/public/templates/ Preparing website/public/skills/ ✓ agents: 192 ✓ commands: 35 ✓ mcps: 24 ✓ hooks: 19 ✓ settings: 8 ✓ skills: 37 ✓ CLI: cli/templates/ + registry.json ✓ Website: website/public/templates/ + templates.json ✓ Skills: website/public/skills/*.zip (37 files) Total: 315 templates
The sync script generates different outputs for different consumers: CLI gets metadata-only registry.json, website gets full content in templates.json for search and preview.
What We Learned
1. Single source of truth matters
templates/ is the only place content lives. Everything else is generated. No sync drift.
2. Plan-driven development catches issues early
MiniSearch was 3 phases with documented success criteria. Phase 1 report showed 96.87% test coverage before moving to Phase 2.
3. Session hooks reduce context switching
session-init.cjs auto-detects project type and active plan. No manual "where was I?" on session resume.
4. Offline-first CLI is a feature
Bundled templates mean zero network calls for basic installs. Remote fetching is fallback, not requirement.
5. Measure before and after
MiniSearch decision was backed by bundle size comparison (12KB → 8KB) and latency benchmarks (p95 <30ms). Not vibes.
By The Numbers
Try It
# Install a template
# Install a skill (multi-file bundle)
# Search with Cmd+K on the website
Built with Claude Code
Hooks, plans, reports, and multi-project sync—all orchestrated through .claude/ configuration.
Templates curated from MIT-licensed community repos. All sources credited.