index.html•26 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pair-Role MCP Server - Smart Role Assignment for Development Teams</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.role-card {
transition: all 0.3s ease;
}
.role-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.category-badge {
transition: all 0.2s ease;
}
.category-badge:hover {
transform: scale(1.05);
}
.feature-icon {
transition: all 0.3s ease;
}
.feature-icon:hover {
transform: rotate(10deg) scale(1.1);
}
.code-block {
background-color: #1e1e1e;
color: #d4d4d4;
border-radius: 8px;
padding: 16px;
font-family: 'Consolas', 'Monaco', monospace;
overflow-x: auto;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.hero-animation {
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0% { transform: translatey(0px); }
50% { transform: translatey(-20px); }
100% { transform: translatey(0px); }
}
</style>
</head>
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="bg-white shadow-lg sticky top-0 z-50">
<div class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center">
<i class="fas fa-users-cog text-3xl text-purple-600 mr-3"></i>
<h1 class="text-2xl font-bold text-gray-800">Pair-Role MCP Server</h1>
</div>
<div class="flex space-x-6">
<a href="#features" class="text-gray-700 hover:text-purple-600 transition">Features</a>
<a href="#roles" class="text-gray-700 hover:text-purple-600 transition">Roles</a>
<a href="#usage" class="text-gray-700 hover:text-purple-600 transition">Usage</a>
<a href="#installation" class="text-gray-700 hover:text-purple-600 transition">Installation</a>
<a href="https://github.com/hongsw/claude-agents-power-mcp-server" class="text-gray-700 hover:text-purple-600 transition">
<i class="fab fa-github text-2xl"></i>
</a>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="gradient-bg text-white py-20">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0">
<h2 class="text-4xl md:text-5xl font-bold mb-6">
🎯 Smart Role Assignment for Development Teams
</h2>
<p class="text-xl mb-8 text-purple-100">
An intelligent MCP server that analyzes your project and recommends the perfect team composition from 100+ professional roles across all company departments.
</p>
<div class="flex space-x-4">
<a href="#installation" class="bg-white text-purple-700 px-8 py-3 rounded-lg font-bold hover:bg-purple-100 transition">
Get Started
</a>
<a href="https://github.com/hongsw/claude-agents-power-mcp-server" class="border-2 border-white text-white px-8 py-3 rounded-lg font-bold hover:bg-white hover:text-purple-700 transition">
View on GitHub
</a>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<div class="hero-animation">
<div class="bg-white bg-opacity-20 backdrop-blur-lg rounded-lg p-8 shadow-2xl">
<div class="text-center mb-4">
<i class="fas fa-project-diagram text-6xl mb-4"></i>
<h3 class="text-2xl font-bold">AI-Powered Team Builder</h3>
</div>
<div class="space-y-2">
<div class="bg-white bg-opacity-20 rounded px-4 py-2">
<i class="fas fa-check-circle mr-2"></i> Analyze Project
</div>
<div class="bg-white bg-opacity-20 rounded px-4 py-2">
<i class="fas fa-users mr-2"></i> Recommend Roles
</div>
<div class="bg-white bg-opacity-20 rounded px-4 py-2">
<i class="fas fa-download mr-2"></i> Install Agents
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="py-12 bg-white">
<div class="container mx-auto px-6">
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
<div class="p-6">
<div class="text-4xl font-bold text-purple-600">100+</div>
<div class="text-gray-600 mt-2">Professional Roles</div>
</div>
<div class="p-6">
<div class="text-4xl font-bold text-purple-600">8</div>
<div class="text-gray-600 mt-2">Departments</div>
</div>
<div class="p-6">
<div class="text-4xl font-bold text-purple-600">2</div>
<div class="text-gray-600 mt-2">Languages</div>
</div>
<div class="p-6">
<div class="text-4xl font-bold text-purple-600">∞</div>
<div class="text-gray-600 mt-2">Team Combinations</div>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="py-20 bg-gray-50">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-16">
🌟 Key Features
</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white rounded-lg shadow-lg p-8 text-center role-card">
<div class="feature-icon inline-block mb-4">
<i class="fas fa-search text-5xl text-purple-600"></i>
</div>
<h3 class="text-xl font-bold mb-4">Intelligent Project Analysis</h3>
<p class="text-gray-600">
Automatically detects project type, frameworks, and complexity to provide smart role recommendations based on your tech stack.
</p>
</div>
<div class="bg-white rounded-lg shadow-lg p-8 text-center role-card">
<div class="feature-icon inline-block mb-4">
<i class="fas fa-users text-5xl text-purple-600"></i>
</div>
<h3 class="text-xl font-bold mb-4">100+ Professional Roles</h3>
<p class="text-gray-600">
Comprehensive coverage across Technology, Data, Product, Marketing, Operations, Finance, HR, and Executive roles.
</p>
</div>
<div class="bg-white rounded-lg shadow-lg p-8 text-center role-card">
<div class="feature-icon inline-block mb-4">
<i class="fas fa-globe text-5xl text-purple-600"></i>
</div>
<h3 class="text-xl font-bold mb-4">Multi-Language Support</h3>
<p class="text-gray-600">
Available in English and Korean, supporting global standards and local business contexts.
</p>
</div>
</div>
</div>
</section>
<!-- Roles Section -->
<section id="roles" class="py-20 bg-white">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-16">
📋 Available Roles by Department
</h2>
<!-- Department Tabs -->
<div class="flex flex-wrap justify-center mb-8 gap-2">
<button onclick="showDepartment('tech')" class="category-badge bg-purple-600 text-white px-4 py-2 rounded-full text-sm font-semibold">
🔧 Technology (20)
</button>
<button onclick="showDepartment('data')" class="category-badge bg-blue-600 text-white px-4 py-2 rounded-full text-sm font-semibold">
📊 Data & Analytics (15)
</button>
<button onclick="showDepartment('product')" class="category-badge bg-pink-600 text-white px-4 py-2 rounded-full text-sm font-semibold">
🎨 Product & Design (10)
</button>
<button onclick="showDepartment('marketing')" class="category-badge bg-green-600 text-white px-4 py-2 rounded-full text-sm font-semibold">
📈 Marketing & Sales (10)
</button>
<button onclick="showDepartment('operations')" class="category-badge bg-yellow-600 text-white px-4 py-2 rounded-full text-sm font-semibold">
⚙️ Operations (15)
</button>
<button onclick="showDepartment('finance')" class="category-badge bg-red-600 text-white px-4 py-2 rounded-full text-sm font-semibold">
💰 Finance (10)
</button>
<button onclick="showDepartment('hr')" class="category-badge bg-indigo-600 text-white px-4 py-2 rounded-full text-sm font-semibold">
👥 HR (10)
</button>
<button onclick="showDepartment('executive')" class="category-badge bg-gray-800 text-white px-4 py-2 rounded-full text-sm font-semibold">
🏢 Executive (10)
</button>
</div>
<!-- Department Content -->
<div id="tech" class="tab-content active">
<div class="grid md:grid-cols-3 gap-6">
<div class="role-card bg-gray-50 p-6 rounded-lg">
<h4 class="font-bold text-lg mb-2">Software Engineer</h4>
<p class="text-gray-600 text-sm mb-3">Full-stack development, system design</p>
<div class="flex flex-wrap gap-2">
<span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs">Bash</span>
<span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs">Read</span>
<span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs">Write</span>
<span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs">Edit</span>
</div>
</div>
<div class="role-card bg-gray-50 p-6 rounded-lg">
<h4 class="font-bold text-lg mb-2">Frontend Developer</h4>
<p class="text-gray-600 text-sm mb-3">React, Vue, Angular, UI/UX</p>
<div class="flex flex-wrap gap-2">
<span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs">Read</span>
<span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs">Write</span>
<span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs">Edit</span>
<span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs">Bash</span>
</div>
</div>
<div class="role-card bg-gray-50 p-6 rounded-lg">
<h4 class="font-bold text-lg mb-2">Backend Developer</h4>
<p class="text-gray-600 text-sm mb-3">APIs, databases, server architecture</p>
<div class="flex flex-wrap gap-2">
<span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs">Bash</span>
<span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs">Read</span>
<span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs">Write</span>
<span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs">Edit</span>
</div>
</div>
<!-- More roles... -->
</div>
<p class="text-center mt-6 text-gray-600">
+ 17 more technology roles including DevOps, Security, Cloud, Mobile, QA, and more!
</p>
</div>
<div id="data" class="tab-content">
<div class="grid md:grid-cols-3 gap-6">
<div class="role-card bg-gray-50 p-6 rounded-lg">
<h4 class="font-bold text-lg mb-2">Data Scientist</h4>
<p class="text-gray-600 text-sm mb-3">ML modeling, statistical analysis</p>
<div class="flex flex-wrap gap-2">
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">Bash</span>
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">Read</span>
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">Write</span>
</div>
</div>
<div class="role-card bg-gray-50 p-6 rounded-lg">
<h4 class="font-bold text-lg mb-2">Data Analyst</h4>
<p class="text-gray-600 text-sm mb-3">Business insights, reporting</p>
<div class="flex flex-wrap gap-2">
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">Read</span>
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">Write</span>
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">Bash</span>
</div>
</div>
<div class="role-card bg-gray-50 p-6 rounded-lg">
<h4 class="font-bold text-lg mb-2">Business Intelligence Analyst</h4>
<p class="text-gray-600 text-sm mb-3">Dashboards, BI tools</p>
<div class="flex flex-wrap gap-2">
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">Read</span>
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">Write</span>
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">Bash</span>
</div>
</div>
</div>
<p class="text-center mt-6 text-gray-600">
+ 12 more data & analytics roles including Analytics Engineer, Marketing Analyst, and more!
</p>
</div>
<div id="product" class="tab-content">
<div class="grid md:grid-cols-3 gap-6">
<div class="role-card bg-gray-50 p-6 rounded-lg">
<h4 class="font-bold text-lg mb-2">Product Manager</h4>
<p class="text-gray-600 text-sm mb-3">Product strategy, roadmap</p>
<div class="flex flex-wrap gap-2">
<span class="bg-pink-100 text-pink-800 px-2 py-1 rounded text-xs">Read</span>
<span class="bg-pink-100 text-pink-800 px-2 py-1 rounded text-xs">Write</span>
</div>
</div>
<div class="role-card bg-gray-50 p-6 rounded-lg">
<h4 class="font-bold text-lg mb-2">UX Designer</h4>
<p class="text-gray-600 text-sm mb-3">User research, wireframes</p>
<div class="flex flex-wrap gap-2">
<span class="bg-pink-100 text-pink-800 px-2 py-1 rounded text-xs">Read</span>
<span class="bg-pink-100 text-pink-800 px-2 py-1 rounded text-xs">Write</span>
</div>
</div>
<div class="role-card bg-gray-50 p-6 rounded-lg">
<h4 class="font-bold text-lg mb-2">UI Designer</h4>
<p class="text-gray-600 text-sm mb-3">Visual design, prototypes</p>
<div class="flex flex-wrap gap-2">
<span class="bg-pink-100 text-pink-800 px-2 py-1 rounded text-xs">Read</span>
<span class="bg-pink-100 text-pink-800 px-2 py-1 rounded text-xs">Write</span>
</div>
</div>
</div>
<p class="text-center mt-6 text-gray-600">
+ 7 more product & design roles including Product Designer, UX Researcher, and more!
</p>
</div>
<!-- Other department tabs... -->
</div>
</section>
<!-- Usage Examples Section -->
<section id="usage" class="py-20 bg-gray-50">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-16">
🎯 Usage Examples
</h2>
<div class="grid md:grid-cols-3 gap-8">
<!-- Startup Example -->
<div class="bg-white rounded-lg shadow-lg p-8">
<div class="text-2xl mb-4">🚀</div>
<h3 class="text-xl font-bold mb-4">Startup MVP Development</h3>
<div class="code-block mb-4">
<pre><code># Analyze project
mcp__pair-role__analyze-project
# Install startup team
mcp__pair-role__install-agents [
"product-manager",
"frontend-developer",
"backend-developer",
"growth-marketing-manager"
]</code></pre>
</div>
<p class="text-gray-600">Perfect for building your minimum viable product with a lean team.</p>
</div>
<!-- Enterprise Example -->
<div class="bg-white rounded-lg shadow-lg p-8">
<div class="text-2xl mb-4">🏢</div>
<h3 class="text-xl font-bold mb-4">Enterprise Application</h3>
<div class="code-block mb-4">
<pre><code># Get enterprise recommendations
mcp__pair-role__recommend-by-keywords [
"enterprise", "security",
"scalability", "compliance"
]
# Install enterprise team
mcp__pair-role__install-agents [
"solution-architect",
"security-engineer",
"devops-engineer",
"compliance-manager"
]</code></pre>
</div>
<p class="text-gray-600">Build secure, scalable enterprise solutions with the right expertise.</p>
</div>
<!-- Data Platform Example -->
<div class="bg-white rounded-lg shadow-lg p-8">
<div class="text-2xl mb-4">📊</div>
<h3 class="text-xl font-bold mb-4">Data Platform</h3>
<div class="code-block mb-4">
<pre><code># Search data roles
mcp__pair-role__search-agents \
"data analytics machine learning"
# Install data team
mcp__pair-role__install-agents [
"data-scientist",
"data-engineer",
"machine-learning-engineer",
"analytics-engineer"
]</code></pre>
</div>
<p class="text-gray-600">Create powerful data platforms with specialized data professionals.</p>
</div>
</div>
</div>
</section>
<!-- Installation Section -->
<section id="installation" class="py-20 bg-white">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-16">
⚡ Quick Installation
</h2>
<div class="max-w-3xl mx-auto">
<div class="mb-8">
<h3 class="text-xl font-bold mb-4">1. Clone and Build</h3>
<div class="code-block">
<pre><code>git clone https://github.com/hongsw/claude-agents-power-mcp-server.git
cd claude-agents-power-mcp-server
npm install
npm run build</code></pre>
</div>
</div>
<div class="mb-8">
<h3 class="text-xl font-bold mb-4">2. Configure MCP</h3>
<p class="text-gray-600 mb-4">Add to your <code class="bg-gray-200 px-2 py-1 rounded">~/.config/claude/mcp_servers.json</code>:</p>
<div class="code-block">
<pre><code>{
"mcpServers": {
"pair-role": {
"command": "node",
"args": ["/path/to/claude-agents-power-mcp-server/dist/index.js"],
"cwd": "/path/to/your/project",
"env": {}
}
}
}</code></pre>
</div>
</div>
<div>
<h3 class="text-xl font-bold mb-4">3. Start Using</h3>
<p class="text-gray-600 mb-4">Restart Claude Code and start building your perfect team!</p>
<div class="code-block">
<pre><code># Analyze your project
mcp__pair-role__analyze-project
# Get recommendations
mcp__pair-role__recommend-by-keywords ["your", "tech", "stack"]
# Install agents
mcp__pair-role__install-agents ["selected", "roles"]</code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="gradient-bg text-white py-20">
<div class="container mx-auto px-6 text-center">
<h2 class="text-3xl font-bold mb-6">
Ready to Build Your Perfect Team?
</h2>
<p class="text-xl mb-8 text-purple-100">
Start using Pair-Role MCP Server today and revolutionize how you build development teams.
</p>
<div class="flex justify-center space-x-4">
<a href="https://github.com/hongsw/claude-agents-power-mcp-server" class="bg-white text-purple-700 px-8 py-3 rounded-lg font-bold hover:bg-purple-100 transition">
<i class="fab fa-github mr-2"></i> View on GitHub
</a>
<a href="https://github.com/hongsw/claude-agents-power-mcp-server/issues" class="border-2 border-white text-white px-8 py-3 rounded-lg font-bold hover:bg-white hover:text-purple-700 transition">
<i class="fas fa-comment mr-2"></i> Get Support
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-8">
<div class="container mx-auto px-6 text-center">
<p class="mb-4">
Made with ❤️ for the Claude Code community
</p>
<div class="flex justify-center space-x-6">
<a href="https://github.com/hongsw/claude-agents-power-mcp-server" class="hover:text-purple-400 transition">
<i class="fab fa-github text-2xl"></i>
</a>
<a href="https://miri.dev" class="hover:text-purple-400 transition">
<i class="fas fa-globe text-2xl"></i>
</a>
<a href="https://discord.gg/claudecode" class="hover:text-purple-400 transition">
<i class="fab fa-discord text-2xl"></i>
</a>
</div>
<p class="mt-4 text-gray-400">
© 2024 Pair-Role MCP Server. MIT License.
</p>
</div>
</footer>
<script>
function showDepartment(dept) {
// Hide all tabs
const tabs = document.querySelectorAll('.tab-content');
tabs.forEach(tab => tab.classList.remove('active'));
// Show selected tab
document.getElementById(dept).classList.add('active');
// Update button styles
const buttons = document.querySelectorAll('.category-badge');
buttons.forEach(button => {
button.style.opacity = '0.7';
});
event.target.style.opacity = '1';
}
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
</body>
</html>