<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How It Works - Hivemind</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: #0a0a0a;
color: #f5f5f5;
}
.mono {
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
}
.terminal {
background: #1a1a1a;
border: 1px solid #333;
border-radius: 8px;
padding: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.prompt {
color: #22c55e;
}
.output {
color: #f97316;
}
.comment {
color: #6b7280;
}
.step-box {
background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
border: 1px solid #f97316;
border-radius: 12px;
padding: 24px;
margin-bottom: 32px;
}
</style>
</head>
<body class="min-h-screen p-8">
<div class="max-w-4xl mx-auto">
<!-- Header -->
<div class="mb-12">
<a href="/" class="text-orange-500 hover:text-orange-400 text-sm mb-4 inline-block">← Back to home</a>
<h1 class="text-5xl font-black mb-4">How It Works</h1>
<p class="text-xl text-gray-400">From install to superpowers in 5 minutes.</p>
</div>
<!-- Step 1: Install -->
<div class="step-box">
<div class="flex items-center gap-3 mb-4">
<div class="w-12 h-12 rounded-full bg-orange-500 flex items-center justify-center text-white font-black text-xl">1</div>
<div>
<h2 class="text-2xl font-black text-white">One Command</h2>
<p class="text-gray-400 text-sm">30 seconds to install</p>
</div>
</div>
<div class="terminal mono text-sm">
<div class="mb-2"><span class="prompt">$</span> claude mcp add hivemind -- npx hivemind-mcp@latest</div>
<div class="output mb-1">✓ Installed hivemind MCP server</div>
<div class="comment">Restart Claude Code to load</div>
</div>
<p class="text-gray-400 text-sm mt-4">Optimized for Claude Code. Works with Cursor, Windsurf, Codex CLI, and any MCP client.</p>
</div>
<!-- Step 2: Create Hive -->
<div class="step-box">
<div class="flex items-center gap-3 mb-4">
<div class="w-12 h-12 rounded-full bg-orange-500 flex items-center justify-center text-white font-black text-xl">2</div>
<div>
<h2 class="text-2xl font-black text-white mb-3">Say "Create a New Hive"</h2>
<div class="bg-orange-900 bg-opacity-30 rounded-lg p-3 mb-3 border border-orange-700 border-opacity-50">
<p class="text-orange-200 text-sm font-bold mb-1">What's a Hive?</p>
<p class="text-white text-sm font-medium mb-1">Command center that compounds.</p>
<p class="text-gray-300 text-xs">Stores your patterns, searches global fixes, grabs instant skills. Smarter every day.</p>
</div>
<p class="text-gray-400 text-sm">Your AI scans your project and builds it automatically</p>
</div>
</div>
<div class="terminal mono text-sm">
<div class="mb-2"><span class="text-gray-400">you:</span> <span class="text-white">"create a new hive"</span></div>
<div class="output mb-1">Scanning project...</div>
<div class="text-green-400 mb-1">✓ Tech stack: React + Node + Postgres</div>
<div class="text-green-400 mb-1">✓ Build system: npm + TypeScript</div>
<div class="text-green-400 mb-1">✓ Database: Supabase detected</div>
<div class="output mt-2">Created 5 foundational entries</div>
<div class="comment mt-1">Your AI now remembers your stack</div>
</div>
<p class="text-gray-400 text-sm mt-4">Choose cloud storage (1000 req/hr, syncs everywhere) or local (100 req/hr, private).</p>
</div>
<!-- Step 3: Hit Error -->
<div class="step-box">
<div class="flex items-center gap-3 mb-4">
<div class="w-12 h-12 rounded-full bg-orange-500 flex items-center justify-center text-white font-black text-xl">3</div>
<div>
<h2 class="text-2xl font-black text-white">Hit an Error? Search 16k+ Fixes</h2>
<p class="text-gray-400 text-sm">Ranked by success rate</p>
</div>
</div>
<div class="terminal mono text-sm">
<div class="mb-2"><span class="text-gray-400">you:</span> <span class="text-white">"search hivemind for Supabase RLS error"</span></div>
<div class="output mb-2">Searching 16,247 solutions...</div>
<div class="text-white mb-1"><strong>Top Solution (92% success):</strong></div>
<div class="text-gray-300 ml-4 mb-1">Enable RLS policies on your table:</div>
<div class="text-green-400 ml-4">ALTER TABLE your_table ENABLE ROW LEVEL SECURITY;</div>
<div class="comment mt-2">Found in 3 seconds</div>
</div>
<p class="text-gray-400 text-sm mt-4">Every solution is ranked. Try the top one. Report if it works. Rankings improve.</p>
</div>
<!-- Step 4: Grab Skill -->
<div class="step-box">
<div class="flex items-center gap-3 mb-4">
<div class="w-12 h-12 rounded-full bg-orange-500 flex items-center justify-center text-white font-black text-xl">4</div>
<div>
<h2 class="text-2xl font-black text-white">Need CI/CD? Grab a Skill</h2>
<p class="text-gray-400 text-sm">1000+ ready-to-run workflows</p>
</div>
</div>
<div class="terminal mono text-sm">
<div class="mb-2"><span class="text-gray-400">you:</span> <span class="text-white">"search skills for GitHub Actions"</span></div>
<div class="output mb-2">Found 6 skills</div>
<div class="text-white mb-1"><strong>Skill #19239: GitHub Actions Templates</strong></div>
<div class="text-gray-300 ml-4 mb-1">Production-ready workflows for testing, building, deploying</div>
<div class="comment mt-2">Copy template → Paste → Ship</div>
</div>
<div class="terminal mono text-sm mt-4">
<div class="mb-2"><span class="text-gray-400">you:</span> <span class="text-white">"get skill 19239"</span></div>
<div class="output mb-1">Loading skill details...</div>
<div class="text-gray-300">6 workflow patterns ready to use</div>
</div>
<p class="text-gray-400 text-sm mt-4">Skills = executable knowledge. Not just docs. Actual commands and templates.</p>
</div>
<!-- Step 5: Your Hive Compounds -->
<div class="step-box">
<div class="flex items-center gap-3 mb-4">
<div class="w-12 h-12 rounded-full bg-orange-500 flex items-center justify-center text-white font-black text-xl">5</div>
<div>
<h2 class="text-2xl font-black text-white">Your Hive Compounds</h2>
<p class="text-gray-400 text-sm">Goldfish → Elephant memory</p>
</div>
</div>
<div class="grid md:grid-cols-3 gap-4">
<div class="bg-gray-800 bg-opacity-50 rounded-lg p-4 border border-orange-700 border-opacity-30">
<div class="text-orange-400 font-black text-3xl mb-2">5</div>
<div class="text-sm text-gray-400">Day 1</div>
<div class="text-xs text-gray-500 mt-1">Foundational entries</div>
</div>
<div class="bg-gray-800 bg-opacity-50 rounded-lg p-4 border border-orange-700 border-opacity-30">
<div class="text-orange-400 font-black text-3xl mb-2">23</div>
<div class="text-sm text-gray-400">Week 1</div>
<div class="text-xs text-gray-500 mt-1">Patterns + solutions</div>
</div>
<div class="bg-gray-800 bg-opacity-50 rounded-lg p-4 border border-orange-700 border-opacity-30">
<div class="text-orange-400 font-black text-3xl mb-2">86</div>
<div class="text-sm text-gray-400">Month 1</div>
<div class="text-xs text-gray-500 mt-1">Complete project brain</div>
</div>
</div>
<div class="terminal mono text-sm mt-4">
<div class="mb-2"><span class="text-gray-400">you:</span> <span class="text-white">"how does our auth work?"</span></div>
<div class="output mb-1">Searching your hive...</div>
<div class="text-white">Found in patterns category:</div>
<div class="text-gray-300 ml-4 mt-1">"We use JWT with refresh tokens stored in Redis.</div>
<div class="text-gray-300 ml-4">Auth middleware is in src/middleware/auth.ts.</div>
<div class="text-gray-300 ml-4">Token expiry: 15 min access, 7 day refresh."</div>
<div class="comment mt-2">Never explain twice</div>
</div>
<p class="text-gray-400 text-sm mt-4">Every fix, every pattern, every decision = stored. Your AI knows YOUR codebase.</p>
</div>
<!-- The Result -->
<div class="bg-gradient-to-br from-orange-900 to-orange-950 rounded-xl p-8 text-center border border-orange-700">
<div class="text-4xl font-black text-white mb-4">The Result</div>
<div class="grid md:grid-cols-2 gap-6 text-left max-w-2xl mx-auto">
<div>
<div class="text-red-400 font-bold mb-2 text-sm">❌ BEFORE</div>
<div class="text-gray-300 text-sm space-y-1">
<div>• 2+ hours re-explaining daily</div>
<div>• Re-debug same errors</div>
<div>• Stack Overflow deep dives</div>
<div>• "Wait, how did we do this?"</div>
</div>
</div>
<div>
<div class="text-green-400 font-bold mb-2 text-sm">✓ AFTER</div>
<div class="text-gray-300 text-sm space-y-1">
<div>• Zero re-explaining</div>
<div>• 3-second fix searches</div>
<div>• Copy/paste skills instantly</div>
<div>• AI knows your patterns</div>
</div>
</div>
</div>
<div class="mt-8">
<a href="/#install" class="inline-block px-8 py-4 bg-orange-500 hover:bg-orange-600 text-white font-black text-lg rounded-lg transition shadow-lg">
Get Started Now →
</a>
<p class="text-xs text-orange-200 mt-3">30 second setup. No credit card required.</p>
</div>
</div>
<!-- Footer -->
<div class="text-center mt-12 pt-8 border-t border-gray-800">
<p class="text-gray-500 text-sm">
<a href="/" class="text-orange-500 hover:text-orange-400">Back to home</a> ·
<a href="https://github.com/Kevthetech143/hivemind-mcp" class="text-gray-500 hover:text-orange-400">GitHub</a> ·
<a href="https://x.com/hivemind_mcp" class="text-gray-500 hover:text-orange-400">Twitter</a>
</p>
</div>
</div>
</body>
</html>