three-pillars-deep-dive.htmlβ’15.8 kB
<!-- Three Pillars Deep Dive Section -->
<section id="three-pillars" class="py-24 bg-slate-900 relative overflow-hidden">
<!-- Background Pattern -->
<div class="absolute inset-0 opacity-5">
<div class="absolute top-0 left-0 w-full h-full" style="background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%239C92AC" fill-opacity="0.1"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<!-- Section Header -->
<div class="text-center mb-20">
<div class="inline-flex items-center px-4 py-2 rounded-full mb-6" style="background-color: rgba(245, 166, 35, 0.2); border: 1px solid rgba(245, 166, 35, 0.3);">
<span class="text-4xl mr-3">π</span>
<span class="text-sm font-medium uppercase tracking-wider">The Intelligent Trinity</span>
</div>
<h2 class="text-4xl md:text-6xl font-bold mb-6">
Three Pillars of <span class="gradient-text">Workflow Excellence</span>
</h2>
<p class="text-xl text-slate-300 max-w-4xl mx-auto">
Each pillar represents a breakthrough in AI workflow management, working in perfect harmony to deliver
measurable business value through 12 specialized MCP tools
</p>
</div>
<!-- Pillar 1: Intelligent Guidance -->
<div class="mb-24">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="order-2 lg:order-1">
<div class="mb-8">
<div class="flex items-center mb-4">
<div class="text-5xl mr-4">π―</div>
<div>
<h3 class="text-3xl font-bold text-blue-400">Pillar 1: Intelligent Guidance</h3>
<p class="text-lg text-slate-400">Transform chaos into structured excellence</p>
</div>
</div>
</div>
<div class="prose prose-invert max-w-none mb-8">
<p class="text-lg text-slate-300 leading-relaxed">
Anubis provides <strong>step-by-step intelligent rules</strong> that transforms your AI agent from a directionless
coder into a structured workflow orchestrator. Every development phase receives contextual guidance,
quality gates, and validation checkpoints.
</p>
</div>
<!-- MCP Tools for Guidance -->
<div class="bg-slate-800/50 rounded-xl p-6 mb-8 border border-blue-500/20">
<h4 class="text-lg font-semibold mb-4 text-blue-400">
<i class="fas fa-tools mr-2"></i>Intelligent Guidance MCP Tools
</h4>
<div class="space-y-3">
<div class="flex items-start space-x-3">
<code class="text-xs bg-blue-900/30 px-2 py-1 rounded text-blue-300">get_workflow_guidance</code>
<span class="text-sm text-slate-300">Role-specific identity and capabilities</span>
</div>
<div class="flex items-start space-x-3">
<code class="text-xs bg-blue-900/30 px-2 py-1 rounded text-blue-300">get_step_guidance</code>
<span class="text-sm text-slate-300">Actionable step-by-step instructions</span>
</div>
<div class="flex items-start space-x-3">
<code class="text-xs bg-blue-900/30 px-2 py-1 rounded text-blue-300">get_next_available_step</code>
<span class="text-sm text-slate-300">Dynamic workflow progression</span>
</div>
</div>
</div>
<!-- Key Benefits -->
<div class="grid grid-cols-2 gap-4">
<div class="bg-blue-900/10 rounded-lg p-4 border border-blue-500/20">
<div class="text-3xl font-bold text-blue-400 mb-1">30-50%</div>
<div class="text-sm text-slate-400">Faster Development</div>
</div>
<div class="bg-blue-900/10 rounded-lg p-4 border border-blue-500/20">
<div class="text-3xl font-bold text-blue-400 mb-1">40-60%</div>
<div class="text-sm text-slate-400">Fewer Defects</div>
</div>
</div>
</div>
<div class="order-1 lg:order-2">
<!-- Code Example -->
<div class="code-block p-6">
<div class="text-sm text-slate-400 mb-3">Example: Getting Intelligent Guidance</div>
<pre class="text-sm"><code class="language-javascript">// Agent requests guidance
const guidance = await get_step_guidance({
roleId: 'senior-developer',
taskId: 123
});
// Anubis responds with intelligent rules
{
"stepInfo": {
"name": "Implement Authentication",
"description": "JWT-based auth system"
},
"approachGuidance": [
"1. Create User model with Prisma",
"2. Implement bcrypt password hashing",
"3. Generate JWT tokens",
"4. Add auth middleware"
],
"qualityChecklist": [
"β SOLID principles applied",
"β 80%+ test coverage",
"β Security best practices",
"β Error handling complete"
]
}</code></pre>
</div>
</div>
</div>
</div>
<!-- Pillar 2: Seamless Transitions -->
<div class="mb-24">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div>
<!-- Code Example -->
<div class="code-block p-6">
<div class="text-sm text-slate-400 mb-3">Example: Perfect Context Preservation</div>
<pre class="text-sm"><code class="language-javascript">// Friday: Architect completes design
await execute_transition({
transitionId: 'architect-to-developer',
taskId: 123,
handoffMessage: "JWT auth design complete"
});
// Monday: Developer picks up seamlessly
const context = await get_execution_context({
taskId: 123
});
// All context preserved!
{
"currentRole": "senior-developer",
"decisions": [
"JWT for stateless auth",
"PostgreSQL for user storage",
"Bcrypt for passwords"
],
"completedSteps": ["requirements", "design"],
"nextSteps": ["implementation"],
"projectContext": { ... }
}</code></pre>
</div>
</div>
<div>
<div class="mb-8">
<div class="flex items-center mb-4">
<div class="text-5xl mr-4">π</div>
<div>
<h3 class="text-3xl font-bold text-green-400">Pillar 2: Seamless Transitions</h3>
<p class="text-lg text-slate-400">Never lose context, ever</p>
</div>
</div>
</div>
<div class="prose prose-invert max-w-none mb-8">
<p class="text-lg text-slate-300 leading-relaxed">
Anubis maintains <strong>perfect context preservation</strong> across role switches and sessions.
Every decision, rationale, and implementation detail flows seamlessly between specialized AI roles,
enabling true collaborative workflows.
</p>
</div>
<!-- MCP Tools for Transitions -->
<div class="bg-slate-800/50 rounded-xl p-6 mb-8 border border-green-500/20">
<h4 class="text-lg font-semibold mb-4 text-green-400">
<i class="fas fa-exchange-alt mr-2"></i>Transition Management MCP Tools
</h4>
<div class="space-y-3">
<div class="flex items-start space-x-3">
<code class="text-xs bg-green-900/30 px-2 py-1 rounded text-green-300">get_role_transitions</code>
<span class="text-sm text-slate-300">Available transitions with recommendations</span>
</div>
<div class="flex items-start space-x-3">
<code class="text-xs bg-green-900/30 px-2 py-1 rounded text-green-300">validate_transition</code>
<span class="text-sm text-slate-300">Pre-flight checks before handoff</span>
</div>
<div class="flex items-start space-x-3">
<code class="text-xs bg-green-900/30 px-2 py-1 rounded text-green-300">execute_transition</code>
<span class="text-sm text-slate-300">Seamless role handoffs</span>
</div>
<div class="flex items-start space-x-3">
<code class="text-xs bg-green-900/30 px-2 py-1 rounded text-green-300">workflow_execution_operations</code>
<span class="text-sm text-slate-300">Complete execution state management</span>
</div>
</div>
</div>
<!-- Key Benefits -->
<div class="grid grid-cols-2 gap-4">
<div class="bg-green-900/10 rounded-lg p-4 border border-green-500/20">
<div class="text-3xl font-bold text-green-400 mb-1">100%</div>
<div class="text-sm text-slate-400">Context Retention</div>
</div>
<div class="bg-green-900/10 rounded-lg p-4 border border-green-500/20">
<div class="text-3xl font-bold text-green-400 mb-1">5 Roles</div>
<div class="text-sm text-slate-400">Specialized Expertise</div>
</div>
</div>
</div>
</div>
</div>
<!-- Pillar 3: Beautiful Reports -->
<div class="mb-12">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<div class="order-2 lg:order-1">
<div class="mb-8">
<div class="flex items-center mb-4">
<div class="text-5xl mr-4">π</div>
<div>
<h3 class="text-3xl font-bold text-purple-400">Pillar 3: Beautiful Reports</h3>
<p class="text-lg text-slate-400">Analytics that tell your story</p>
</div>
</div>
</div>
<div class="prose prose-invert max-w-none mb-8">
<p class="text-lg text-slate-300 leading-relaxed">
Anubis generates <strong>stunning interactive dashboards</strong> that transform raw workflow data
into visual stories. Stakeholders finally understand what AI agents are building with beautiful
Chart.js visualizations and mobile-responsive designs.
</p>
</div>
<!-- MCP Tools for Reporting -->
<div class="bg-slate-800/50 rounded-xl p-6 mb-8 border border-purple-500/20">
<h4 class="text-lg font-semibold mb-4 text-purple-400">
<i class="fas fa-chart-line mr-2"></i>Reporting & Analytics MCP Tools
</h4>
<div class="space-y-3">
<div class="flex items-start space-x-3">
<code class="text-xs bg-purple-900/30 px-2 py-1 rounded text-purple-300">generate_workflow_report</code>
<span class="text-sm text-slate-300">Interactive HTML dashboards</span>
</div>
<div class="flex items-start space-x-3">
<code class="text-xs bg-purple-900/30 px-2 py-1 rounded text-purple-300">get_report_status</code>
<span class="text-sm text-slate-300">Async report generation tracking</span>
</div>
</div>
</div>
<!-- Report Types -->
<div class="bg-slate-800/50 rounded-xl p-6 mb-8 border border-purple-500/20">
<h4 class="text-sm font-semibold mb-3 text-purple-400 uppercase">Available Report Types</h4>
<div class="grid grid-cols-2 gap-3 text-sm">
<div class="text-slate-300">π Interactive Dashboard</div>
<div class="text-slate-300">π Task Details</div>
<div class="text-slate-300">π Delegation Flows</div>
<div class="text-slate-300">π Workflow Analytics</div>
<div class="text-slate-300">π― Role Performance</div>
<div class="text-slate-300">π Summary Reports</div>
</div>
</div>
<!-- Key Benefits -->
<div class="grid grid-cols-2 gap-4">
<div class="bg-purple-900/10 rounded-lg p-4 border border-purple-500/20">
<div class="text-3xl font-bold text-purple-400 mb-1">5x</div>
<div class="text-sm text-slate-400">Better Visibility</div>
</div>
<div class="bg-purple-900/10 rounded-lg p-4 border border-purple-500/20">
<div class="text-3xl font-bold text-purple-400 mb-1">Mobile</div>
<div class="text-sm text-slate-400">Responsive Design</div>
</div>
</div>
</div>
<div class="order-1 lg:order-2">
<!-- Report Preview -->
<div class="relative group">
<div class="absolute inset-0 bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl blur-xl opacity-20 group-hover:opacity-30 transition-opacity"></div>
<div class="relative bg-slate-800 rounded-xl p-4 border border-purple-500/30">
<div class="flex items-center justify-between mb-4">
<div class="flex space-x-2">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
</div>
<span class="text-xs text-slate-500">workflow-report.html</span>
</div>
<div class="space-y-3">
<div class="bg-slate-900/50 rounded p-3">
<div class="text-sm font-semibold text-purple-400 mb-2">Task Progress Overview</div>
<div class="h-32 bg-gradient-to-r from-purple-500/20 to-pink-500/20 rounded flex items-center justify-center">
<i class="fas fa-chart-pie text-4xl text-purple-400/50"></i>
</div>
</div>
<div class="grid grid-cols-3 gap-2">
<div class="bg-slate-900/50 rounded p-2 text-center">
<div class="text-xs text-slate-500">Completed</div>
<div class="text-lg font-bold text-green-400">85%</div>
</div>
<div class="bg-slate-900/50 rounded p-2 text-center">
<div class="text-xs text-slate-500">Avg Time</div>
<div class="text-lg font-bold text-blue-400">2.4h</div>
</div>
<div class="bg-slate-900/50 rounded p-2 text-center">
<div class="text-xs text-slate-500">Quality</div>
<div class="text-lg font-bold text-purple-400">A+</div>
</div>
</div>
</div>
</div>
</div>
<p class="text-center text-sm text-slate-500 mt-4">
<i class="fas fa-info-circle mr-1"></i>
Interactive reports with real-time filtering and drill-down capabilities
</p>
</div>
</div>
</div>
<!-- Bottom Integration Message -->
<div class="mt-20 text-center">
<div class="inline-flex items-center px-6 py-3 rounded-full mb-6" style="background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(168, 85, 247, 0.1)); border: 1px solid rgba(245, 166, 35, 0.3);">
<i class="fas fa-infinity mr-3 text-honey-amber"></i>
<span class="font-semibold">The Three Pillars Work in Perfect Harmony</span>
</div>
<p class="text-lg text-slate-300 max-w-3xl mx-auto">
Intelligent guidance creates structured workflows β Seamless transitions preserve all context β
Beautiful reports showcase the results. It's not just tools, it's a complete transformation.
</p>
</div>
</div>
</section>