Skip to content

Instantly share code, notes, and snippets.

@asmattic

asmattic/cursor-best-practices-infographic.html

Created June 23, 2025 01:16
Show Gist options
  • Save asmattic/36b93652d444ebcb6513ba838d2937d6 to your computer and use it in GitHub Desktop.
Save asmattic/36b93652d444ebcb6513ba838d2937d6 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
cursor-best-practices-infographic.html
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Augmented Architect: A Cursor Power User's Guide (2025)</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
}
.chart-container {
position: relative;
width: 100%;
max-width: 600px;
margin-left: auto;
margin-right: auto;
height: 300px;
max-height: 400px;
}
@media (min-width: 768px) {
.chart-container {
height: 350px;
}
}
.flow-arrow {
color: #0079FF;
}
.flow-box {
border-color: #004AAD;
background-color: rgba(0, 74, 173, 0.1);
}
.flow-box-highlight {
border-color: #00D2FF;
background-color: rgba(0, 210, 255, 0.1);
}
</style>
</head>
<body class="bg-gray-900 text-gray-200">
<main class="container mx-auto px-4 py-8 md:py-16">
<header class="text-center mb-16 md:mb-24">
<h1 class="text-4xl md:text-6xl font-black text-white leading-tight">The <span class="text-[#00D2FF]">Augmented Architect</span></h1>
<p class="mt-4 text-lg md:text-xl text-gray-400 max-w-3xl mx-auto">A Power User's Guide to Reliable, Large-Scale Development with Cursor in 2025</p>
</header>
<section id="paradox" class="mb-16 md:mb-24">
<h2 class="text-3xl font-bold text-center mb-4 text-white">The Productivity Paradox</h2>
<p class="text-center max-w-2xl mx-auto text-gray-400 mb-12">AI offers unprecedented speed but introduces significant risks. Moving beyond "vibe coding" requires a strategic framework to mitigate threats and ensure quality.</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="bg-gray-800 p-6 rounded-lg shadow-2xl border border-gray-700">
<h3 class="text-xl font-bold text-[#00D2FF]">Security Flaws</h3>
<p class="mt-2 text-gray-400">Models trained on public data replicate common vulnerabilities, introducing them at scale.</p>
<div class="text-4xl font-black text-white mt-4">40%</div>
<p class="text-sm text-gray-500">of AI-generated code may contain security flaws (source: Stanford study).</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg shadow-2xl border border-gray-700">
<h3 class="text-xl font-bold text-[#00D2FF]">Technical Debt</h3>
<p class="mt-2 text-gray-400">AI can favor expediency, duplicating code and violating DRY principles, which complicates maintenance.</p>
<div class="text-4xl font-black text-white mt-4">2x-5x</div>
<p class="text-sm text-gray-500">Faster debt accumulation without proper governance.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg shadow-2xl border border-gray-700">
<h3 class="text-xl font-bold text-[#00D2FF]">Architectural Decay</h3>
<p class="mt-2 text-gray-400">Without guidance, AI violates boundaries, leading to tightly coupled, incoherent systems.</p>
<div class="text-4xl font-black text-white mt-4">High</div>
<p class="text-sm text-gray-500">Risk of creating unmaintainable "spaghetti code".</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg shadow-2xl border border-gray-700">
<h3 class="text-xl font-bold text-[#00D2FF]">Skill Erosion</h3>
<p class="mt-2 text-gray-400">Over-reliance on AI for tasks that are not fully understood can diminish an engineering team's core skills.</p>
<div class="text-4xl font-black text-white mt-4">Long-Term</div>
<p class="text-sm text-gray-500">Organizational risk and dependency on tooling.</p>
</div>
</div>
</section>
<section id="architecture" class="mb-16 md:mb-24">
<h2 class="text-3xl font-bold text-center mb-4 text-white">Pillar 1: Architecting for AI</h2>
<p class="text-center max-w-2xl mx-auto text-gray-400 mb-12">The foundation of reliable AI development is an architecture that provides a naturally bounded context. Vertical Slice Architecture (VSA) is superior to traditional layered models for this purpose.</p>
<div class="bg-gray-800 p-6 rounded-lg shadow-2xl border border-gray-700">
<h3 class="text-xl font-bold text-center mb-4 text-[#00D2FF]">VSA vs. Traditional Layered Architecture</h3>
<p class="text-center text-sm text-gray-400 mb-6">Lower scores are better, indicating reduced complexity and risk for the AI agent.</p>
<div class="chart-container h-80 md:h-96">
<canvas id="architectureChart"></canvas>
</div>
<p class="mt-6 text-sm text-gray-400 text-center">VSA dramatically reduces the context size and risk of unintended edits by co-locating all code for a single feature, making AI prompts simpler and more reliable.</p>
</div>
</section>
<section id="tdd" class="mb-16 md:mb-24">
<h2 class="text-3xl font-bold text-center mb-4 text-white">Pillar 2: Governing with Tests</h2>
<p class="text-center max-w-2xl mx-auto text-gray-400 mb-12">Test-Driven Development (TDD) is reframed as an AI communication protocol. A failing test is an unambiguous, machine-verifiable specification of required behavior, providing clear governance for the AI.</p>
<div class="bg-gray-800 p-6 rounded-lg shadow-2xl border border-gray-700">
<h3 class="text-xl font-bold text-center mb-6 text-[#00D2FF]">The AI-Augmented "Red-Green-Refactor" Cycle</h3>
<div class="flex flex-col md:flex-row items-center justify-around space-y-8 md:space-y-0 md:space-x-8">
<div class="text-center flex flex-col items-center">
<div class="w-24 h-24 rounded-full bg-[#ff4d4d]/20 flex items-center justify-center border-2 border-[#ff4d4d]">
<span class="text-3xl font-black text-white">RED</span>
</div>
<h4 class="mt-4 font-bold text-lg">Craft Specification</h4>
<p class="text-sm max-w-xs text-gray-400 mt-1">Human directs AI to generate test stubs. Human implements one seed test to set the pattern.</p>
</div>
<div class="text-4xl flow-arrow hidden md:block">→</div>
<div class="text-4xl flow-arrow md:hidden">↓</div>
<div class="text-center flex flex-col items-center">
<div class="w-24 h-24 rounded-full bg-[#4dff88]/20 flex items-center justify-center border-2 border-[#4dff88]">
<span class="text-3xl font-black text-white">GREEN</span>
</div>
<h4 class="mt-4 font-bold text-lg">AI Implementation</h4>
<p class="text-sm max-w-xs text-gray-400 mt-1">AI writes the minimum code required to make one specific test pass. Developer iterates through failing tests.</p>
</div>
<div class="text-4xl flow-arrow hidden md:block">→</div>
<div class="text-4xl flow-arrow md:hidden">↓</div>
<div class="text-center flex flex-col items-center">
<div class="w-24 h-24 rounded-full bg-[#00D2FF]/20 flex items-center justify-center border-2 border-[#00D2FF]">
<span class="text-3xl font-black text-white">REFACTOR</span>
</div>
<h4 class="mt-4 font-bold text-lg">AI-Assisted Cleanup</h4>
<p class="text-sm max-w-xs text-gray-400 mt-1">With tests as a safety net, AI refactors code for clarity and performance. Human performs mandatory diff review.</p>
</div>
</div>
</div>
</section>
<section id="control" class="mb-16 md:mb-24">
<h2 class="text-3xl font-bold text-center mb-4 text-white">Pillar 3: Mastering the Control Plane</h2>
<p class="text-center max-w-2xl mx-auto text-gray-400 mb-12">Power users actively engineer the AI's context using rules, stateful workflows, and multi-model strategies to ensure precise and consistent output.</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-gray-800 p-6 rounded-lg shadow-2xl border border-gray-700">
<h3 class="text-xl font-bold text-center mb-4 text-[#00D2FF]">The Autonomous Agent's Brain</h3>
<p class="text-center text-sm text-gray-400 mb-6">A stateful workflow pattern treats the AI as a junior developer with a long-term memory (constitution) and a working memory (dynamic brain).</p>
<div class="chart-container h-80 md:h-96">
<canvas id="agentBrainChart"></canvas>
</div>
</div>
<div class="bg-gray-800 p-6 rounded-lg shadow-2xl border border-gray-700">
<h3 class="text-xl font-bold text-center mb-4 text-[#00D2FF]">Multi-Model Strategy</h3>
<p class="text-center text-sm text-gray-400 mb-6">Use the right "brain" for the right job to optimize for capability, speed, and cost.</p>
<div class="chart-container h-80 md:h-96">
<canvas id="modelStrategyChart"></canvas>
</div>
</div>
</div>
</section>
<section id="playbook" class="mb-16 md:mb-24">
<h2 class="text-3xl font-bold text-center mb-4 text-white">The Augmented Architect's Playbook</h2>
<p class="text-center max-w-3xl mx-auto text-gray-400 mb-12">A synthesized workflow for adding 2FA, demonstrating the integration of architecture, testing, and governance in a real-world scenario.</p>
<div class="space-y-4">
<div class="flow-box border-2 rounded-lg p-4 flex items-center space-x-4">
<div class="text-[#0079FF] text-2xl font-black bg-gray-900 rounded-full w-10 h-10 flex items-center justify-center border-2 border-[#004AAD]">1</div>
<div>
<h4 class="font-bold text-white">Plan & Architect</h4>
<p class="text-sm text-gray-400">Use a high-reasoning model (e.g., Gemini 2.5 Pro) to generate a step-by-step plan within the correct VSA slice.</p>
</div>
</div>
<div class="flex justify-center text-2xl flow-arrow">↓</div>
<div class="flow-box border-2 rounded-lg p-4 flex items-center space-x-4">
<div class="text-[#0079FF] text-2xl font-black bg-gray-900 rounded-full w-10 h-10 flex items-center justify-center border-2 border-[#004AAD]">2</div>
<div>
<h4 class="font-bold text-white">Write Failing Tests (RED)</h4>
<p class="text-sm text-gray-400">Use a high-reasoning model to generate a comprehensive test suite based on the plan.</p>
</div>
</div>
<div class="flex justify-center text-2xl flow-arrow">↓</div>
<div class="flow-box border-2 rounded-lg p-4 flex items-center space-x-4">
<div class="text-[#0079FF] text-2xl font-black bg-gray-900 rounded-full w-10 h-10 flex items-center justify-center border-2 border-[#004AAD]">3</div>
<div>
<h4 class="font-bold text-white">Implement Code (GREEN)</h4>
<p class="text-sm text-gray-400">Switch to a high-speed model (e.g., o4-mini) to write the implementation that makes the tests pass.</p>
</div>
</div>
<div class="flex justify-center text-2xl flow-arrow">↓</div>
<div class="flow-box-highlight border-2 rounded-lg p-4 flex items-center space-x-4">
<div class="text-[#00D2FF] text-2xl font-black bg-gray-900 rounded-full w-10 h-10 flex items-center justify-center border-2 border-[#00D2FF]">4</div>
<div>
<h4 class="font-bold text-white">Verify & Correct (HUMAN OVERSIGHT)</h4>
<p class="text-sm text-gray-400">Perform a mandatory diff review. Find a security flaw (e.g., hard-coded secret) and instruct the AI to fix it, citing the project's security rules.</p>
</div>
</div>
<div class="flex justify-center text-2xl flow-arrow">↓</div>
<div class="flow-box border-2 rounded-lg p-4 flex items-center space-x-4">
<div class="text-[#0079FF] text-2xl font-black bg-gray-900 rounded-full w-10 h-10 flex items-center justify-center border-2 border-[#004AAD]">5</div>
<div>
<h4 class="font-bold text-white">Integrate & Refactor</h4>
<p class="text-sm text-gray-400">Use the terminal agent for database migrations. Use a high-reasoning model to refactor for clarity now that all tests pass.</p>
</div>
</div>
</div>
</section>
<footer class="text-center mt-16 md:mt-24 border-t border-gray-800 pt-8">
<p class="text-lg font-bold text-white">The future is not being replaced by AI. It's commanding it.</p>
<p class="text-gray-500 mt-2 text-sm">Infographic created based on "The Augmented Architect" report. All data and concepts are derived from the source material. No SVG or Mermaid JS was used; all visualizations are rendered via Chart.js on Canvas or structured with HTML/CSS. Color Palette: Brilliant Blues.</p>
</footer>
</main>
<script>
const brilliantBlues = {
deep: '#004AAD',
bright: '#0079FF',
cyan: '#00D2FF',
lightCyan: '#8CFAFF',
text: 'rgba(229, 231, 235, 0.8)',
grid: 'rgba(255, 255, 255, 0.1)'
};
const wrapLabel = (label, maxWidth = 16) => {
if (typeof label !== 'string' || label.length <= maxWidth) {
return label;
}
const words = label.split(' ');
const lines = [];
let currentLine = '';
for (const word of words) {
if ((currentLine + ' ' + word).trim().length > maxWidth) {
lines.push(currentLine.trim());
currentLine = word;
} else {
currentLine = (currentLine + ' ' + word).trim();
}
}
if (currentLine) {
lines.push(currentLine.trim());
}
return lines;
};
const tooltipTitleCallback = (tooltipItems) => {
const item = tooltipItems[0];
let label = item.chart.data.labels[item.dataIndex];
if (Array.isArray(label)) {
return label.join(' ');
} else {
return label;
}
};
const defaultChartOptions = {
maintainAspectRatio: false,
responsive: true,
plugins: {
legend: {
labels: {
color: brilliantBlues.text
}
},
tooltip: {
callbacks: {
title: tooltipTitleCallback
}
}
},
scales: {
y: {
ticks: { color: brilliantBlues.text },
grid: { color: brilliantBlues.grid }
},
x: {
ticks: { color: brilliantBlues.text },
grid: { color: brilliantBlues.grid }
}
}
};
const architectureData = {
labels: ['AI Context Size', 'Risk of Unintended Edits', 'Prompting Complexity', 'Developer Onboarding'].map(l => wrapLabel(l)),
datasets: [{
label: 'Traditional Layered',
data: [9, 8, 8, 7],
backgroundColor: 'rgba(0, 74, 173, 0.7)',
borderColor: brilliantBlues.deep,
borderWidth: 1
}, {
label: 'Vertical Slice (VSA)',
data: [3, 2, 3, 4],
backgroundColor: 'rgba(0, 210, 255, 0.7)',
borderColor: brilliantBlues.cyan,
borderWidth: 1
}]
};
new Chart(document.getElementById('architectureChart'), {
type: 'bar',
data: architectureData,
options: { ...defaultChartOptions, indexAxis: 'y' }
});
const agentBrainData = {
labels: ['Constitution (Long-Term Memory)', 'Dynamic Brain (Working Memory)'],
datasets: [{
data: [40, 60],
backgroundColor: [brilliantBlues.deep, brilliantBlues.cyan],
hoverOffset: 4
}]
};
new Chart(document.getElementById('agentBrainChart'), {
type: 'doughnut',
data: agentBrainData,
options: {
maintainAspectRatio: false,
responsive: true,
plugins: {
legend: {
position: 'bottom',
labels: { color: brilliantBlues.text }
},
tooltip: {
callbacks: {
title: (tooltipItems) => tooltipItems[0].label
}
}
}
}
});
const modelStrategyData = {
labels: ['Reasoning', 'Speed', 'Prose Quality', 'Cost-Effectiveness', 'Creativity'],
datasets: [{
label: 'High-Reasoning (GPT-4.1)',
data: [9, 4, 7, 3, 9],
fill: true,
backgroundColor: 'rgba(0, 74, 173, 0.2)',
borderColor: brilliantBlues.deep,
pointBackgroundColor: brilliantBlues.deep,
}, {
label: 'High-Speed (o4-mini)',
data: [5, 9, 6, 9, 5],
fill: true,
backgroundColor: 'rgba(0, 210, 255, 0.2)',
borderColor: brilliantBlues.cyan,
pointBackgroundColor: brilliantBlues.cyan,
}, {
label: 'Balanced (Claude 3.5)',
data: [7, 7, 9, 7, 8],
fill: true,
backgroundColor: 'rgba(140, 250, 255, 0.2)',
borderColor: brilliantBlues.lightCyan,
pointBackgroundColor: brilliantBlues.lightCyan,
}]
};
new Chart(document.getElementById('modelStrategyChart'), {
type: 'radar',
data: modelStrategyData,
options: {
maintainAspectRatio: false,
responsive: true,
plugins: {
legend: {
position: 'bottom',
labels: { color: brilliantBlues.text }
},
tooltip: {
callbacks: {
title: (tooltipItems) => tooltipItems[0].dataset.label
}
}
},
scales: {
r: {
angleLines: { color: brilliantBlues.grid },
grid: { color: brilliantBlues.grid },
pointLabels: { color: brilliantBlues.text, font: { size: 14 } },
ticks: { backdropColor: '#111827', color: brilliantBlues.text }
}
}
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment