BranchesTags

Repository files navigation

⚙️ Claude Code Design Patterns

Design patterns for AI-augmented engineering with Claude Code. Like classic software design patterns, these are reusable approaches that solve common problems when building subagents and skills.

✅ Prerequisites

Before diving in, you should have:

  • Claude Code installed and working — you can run claude and have conversations
  • Basic familiarity with Claude Code — you've used tools, read files, run commands
  • Comfort with Markdown and YAML — the configuration formats used throughout

🧑‍🏫 Using This Repo

Each directory contains a standalone design pattern with its own .claude configuration.

Important: Run Claude Code from within a pattern directory, not this parent directory.

cd knowledge-hooks
claude

You'll find a README.md for each pattern that goes over how it works, how to apply it, further reading, and more. Follow along with the each tutorial, interact with the agents and skills, and get an idea of how they hang together and how you might apply them.

If you find a pattern you'd like to use look for the link to the teach-claude.md for that pattern. Paste a link to the teach-claude.md for the design pattern you want to use and Claude will get your project wired up for it. I suggest you do it on a branch, just in case after applying it the pattern doesn't seem like a great fit or Claude messed something up.

Recommended starting points:

  • Knowledge Hooks — Most self-contained, demonstrates hooks clearly
  • Procedural Skills — Shows how to make agents follow exact procedures

🛠️ The Design Patterns

🪝 Knowledge Hooks

Front-load subagents with knowledge via hooks on invocation. More token-efficient and deterministic than runtime fetching.

→ Knowledge Hooks

📋 Procedural Skills

Trade autonomy for determinism. Skills execute step-by-step using Task tools (TaskCreate, TaskUpdate, TaskList) to enforce execution order.

→ Procedural Skills

🔭 Skill Discovery

Dynamic skill discovery for subagents. Claude Code subagents don't inherit skill manifests from the parent conversation — this pattern solves that efficiently.

→ Skill Discovery

📚 Subagent Skill Creation

Subagents that augment their own abilities by creating skills as they learn. A self-reinforcing system that improves over time.

Caution: Review the skills your subagent creates. Combine with Skill Discovery for growth without token overhead.

→ Subagent Skill Creation

🏆 Attribution

These design patterns are ones I've "discovered." This doesn't mean I'm the first person to think of them — likely not. But I reasoned my way into them independently. I'm happy to add links to other design patterns or variations that others have discovered.

I'm also aware that these patterns resemble well-known design patterns in software engineering. What I find interesting and hopefully helpful to others is applying them specifically to Claude Code and creating reusable examples that others can try out and explore.

About

Design patterns for AI Augmented Engineering

Resources

Readme
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
⚙️ Claude Code Design Patterns
Design patterns for AI-augmented engineering with Claude Code. Like classic software design patterns, these are reusable approaches that solve common problems when building subagents and skills.
✅ Prerequisites
Before diving in, you should have:
  • Claude Code installed and working — you can run claude and have conversations
  • Basic familiarity with Claude Code — you've used tools, read files, run commands
  • Comfort with Markdown and YAML — the configuration formats used throughout
🧑‍🏫 Using This Repo
Each directory contains a standalone design pattern with its own .claude configuration.
Important: Run Claude Code from within a pattern directory, not this parent directory.
cd knowledge-hooks
claude
You'll find a README.md for each pattern that goes over how it works, how to apply it, further reading, and more. Follow along with the each tutorial, interact with the agents and skills, and get an idea of how they hang together and how you might apply them.
If you find a pattern you'd like to use look for the link to the teach-claude.md for that pattern. Paste a link to the teach-claude.md for the design pattern you want to use and Claude will get your project wired up for it. I suggest you do it on a branch, just in case after applying it the pattern doesn't seem like a great fit or Claude messed something up.
Recommended starting points:
  • Knowledge Hooks — Most self-contained, demonstrates hooks clearly
  • Procedural Skills — Shows how to make agents follow exact procedures
🛠️ The Design Patterns
🪝 Knowledge Hooks
Front-load subagents with knowledge via hooks on invocation. More token-efficient and deterministic than runtime fetching.
→ Knowledge Hooks
📋 Procedural Skills
Trade autonomy for determinism. Skills execute step-by-step using Task tools (TaskCreate, TaskUpdate, TaskList) to enforce execution order.
→ Procedural Skills
🔭 Skill Discovery
Dynamic skill discovery for subagents. Claude Code subagents don't inherit skill manifests from the parent conversation — this pattern solves that efficiently.
→ Skill Discovery
📚 Subagent Skill Creation
Subagents that augment their own abilities by creating skills as they learn. A self-reinforcing system that improves over time.
Caution: Review the skills your subagent creates. Combine with Skill Discovery for growth without token overhead.
→ Subagent Skill Creation
🏆 Attribution
These design patterns are ones I've "discovered." This doesn't mean I'm the first person to think of them — likely not. But I reasoned my way into them independently. I'm happy to add links to other design patterns or variations that others have discovered.
I'm also aware that these patterns resemble well-known design patterns in software engineering. What I find interesting and hopefully helpful to others is applying them specifically to Claude Code and creating reusable examples that others can try out and explore.
About
Design patterns for AI Augmented Engineering
Resources
Readme
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
⚙️ Claude Code Design Patterns
Design patterns for AI-augmented engineering with Claude Code. Like classic software design patterns, these are reusable approaches that solve common problems when building subagents and skills.
✅ Prerequisites
Before diving in, you should have:
  • Claude Code installed and working — you can run claude and have conversations
  • Basic familiarity with Claude Code — you've used tools, read files, run commands
  • Comfort with Markdown and YAML — the configuration formats used throughout
🧑‍🏫 Using This Repo
Each directory contains a standalone design pattern with its own .claude configuration.
Important: Run Claude Code from within a pattern directory, not this parent directory.
cd knowledge-hooks
claude
You'll find a README.md for each pattern that goes over how it works, how to apply it, further reading, and more. Follow along with the each tutorial, interact with the agents and skills, and get an idea of how they hang together and how you might apply them.
If you find a pattern you'd like to use look for the link to the teach-claude.md for that pattern. Paste a link to the teach-claude.md for the design pattern you want to use and Claude will get your project wired up for it. I suggest you do it on a branch, just in case after applying it the pattern doesn't seem like a great fit or Claude messed something up.
Recommended starting points:
  • Knowledge Hooks — Most self-contained, demonstrates hooks clearly
  • Procedural Skills — Shows how to make agents follow exact procedures
🛠️ The Design Patterns
🪝 Knowledge Hooks
Front-load subagents with knowledge via hooks on invocation. More token-efficient and deterministic than runtime fetching.
→ Knowledge Hooks
📋 Procedural Skills
Trade autonomy for determinism. Skills execute step-by-step using Task tools (TaskCreate, TaskUpdate, TaskList) to enforce execution order.
→ Procedural Skills
🔭 Skill Discovery
Dynamic skill discovery for subagents. Claude Code subagents don't inherit skill manifests from the parent conversation — this pattern solves that efficiently.
→ Skill Discovery
📚 Subagent Skill Creation
Subagents that augment their own abilities by creating skills as they learn. A self-reinforcing system that improves over time.
Caution: Review the skills your subagent creates. Combine with Skill Discovery for growth without token overhead.
→ Subagent Skill Creation
🏆 Attribution
These design patterns are ones I've "discovered." This doesn't mean I'm the first person to think of them — likely not. But I reasoned my way into them independently. I'm happy to add links to other design patterns or variations that others have discovered.
I'm also aware that these patterns resemble well-known design patterns in software engineering. What I find interesting and hopefully helpful to others is applying them specifically to Claude Code and creating reusable examples that others can try out and explore.
About
Design patterns for AI Augmented Engineering
Resources
Readme
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
⚙️ Claude Code Design Patterns
Design patterns for AI-augmented engineering with Claude Code. Like classic software design patterns, these are reusable approaches that solve common problems when building subagents and skills.
✅ Prerequisites
Before diving in, you should have:
  • Claude Code installed and working — you can run claude and have conversations
  • Basic familiarity with Claude Code — you've used tools, read files, run commands
  • Comfort with Markdown and YAML — the configuration formats used throughout
🧑‍🏫 Using This Repo
Each directory contains a standalone design pattern with its own .claude configuration.
Important: Run Claude Code from within a pattern directory, not this parent directory.
cd knowledge-hooks
claude
You'll find a README.md for each pattern that goes over how it works, how to apply it, further reading, and more. Follow along with the each tutorial, interact with the agents and skills, and get an idea of how they hang together and how you might apply them.
If you find a pattern you'd like to use look for the link to the teach-claude.md for that pattern. Paste a link to the teach-claude.md for the design pattern you want to use and Claude will get your project wired up for it. I suggest you do it on a branch, just in case after applying it the pattern doesn't seem like a great fit or Claude messed something up.
Recommended starting points:
  • Knowledge Hooks — Most self-contained, demonstrates hooks clearly
  • Procedural Skills — Shows how to make agents follow exact procedures
🛠️ The Design Patterns
🪝 Knowledge Hooks
Front-load subagents with knowledge via hooks on invocation. More token-efficient and deterministic than runtime fetching.
→ Knowledge Hooks
📋 Procedural Skills
Trade autonomy for determinism. Skills execute step-by-step using Task tools (TaskCreate, TaskUpdate, TaskList) to enforce execution order.
→ Procedural Skills
🔭 Skill Discovery
Dynamic skill discovery for subagents. Claude Code subagents don't inherit skill manifests from the parent conversation — this pattern solves that efficiently.
→ Skill Discovery
📚 Subagent Skill Creation
Subagents that augment their own abilities by creating skills as they learn. A self-reinforcing system that improves over time.
Caution: Review the skills your subagent creates. Combine with Skill Discovery for growth without token overhead.
→ Subagent Skill Creation
🏆 Attribution
These design patterns are ones I've "discovered." This doesn't mean I'm the first person to think of them — likely not. But I reasoned my way into them independently. I'm happy to add links to other design patterns or variations that others have discovered.
I'm also aware that these patterns resemble well-known design patterns in software engineering. What I find interesting and hopefully helpful to others is applying them specifically to Claude Code and creating reusable examples that others can try out and explore.
About
Design patterns for AI Augmented Engineering
Resources
Readme
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
⚙️ Claude Code Design Patterns
Design patterns for AI-augmented engineering with Claude Code. Like classic software design patterns, these are reusable approaches that solve common problems when building subagents and skills.
✅ Prerequisites
Before diving in, you should have:
  • Claude Code installed and working — you can run claude and have conversations
  • Basic familiarity with Claude Code — you've used tools, read files, run commands
  • Comfort with Markdown and YAML — the configuration formats used throughout
🧑‍🏫 Using This Repo
Each directory contains a standalone design pattern with its own .claude configuration.
Important: Run Claude Code from within a pattern directory, not this parent directory.
cd knowledge-hooks
claude
You'll find a README.md for each pattern that goes over how it works, how to apply it, further reading, and more. Follow along with the each tutorial, interact with the agents and skills, and get an idea of how they hang together and how you might apply them.
If you find a pattern you'd like to use look for the link to the teach-claude.md for that pattern. Paste a link to the teach-claude.md for the design pattern you want to use and Claude will get your project wired up for it. I suggest you do it on a branch, just in case after applying it the pattern doesn't seem like a great fit or Claude messed something up.
Recommended starting points:
  • Knowledge Hooks — Most self-contained, demonstrates hooks clearly
  • Procedural Skills — Shows how to make agents follow exact procedures
🛠️ The Design Patterns
🪝 Knowledge Hooks
Front-load subagents with knowledge via hooks on invocation. More token-efficient and deterministic than runtime fetching.
→ Knowledge Hooks
📋 Procedural Skills
Trade autonomy for determinism. Skills execute step-by-step using Task tools (TaskCreate, TaskUpdate, TaskList) to enforce execution order.
→ Procedural Skills
🔭 Skill Discovery
Dynamic skill discovery for subagents. Claude Code subagents don't inherit skill manifests from the parent conversation — this pattern solves that efficiently.
→ Skill Discovery
📚 Subagent Skill Creation
Subagents that augment their own abilities by creating skills as they learn. A self-reinforcing system that improves over time.
Caution: Review the skills your subagent creates. Combine with Skill Discovery for growth without token overhead.
→ Subagent Skill Creation
🏆 Attribution
These design patterns are ones I've "discovered." This doesn't mean I'm the first person to think of them — likely not. But I reasoned my way into them independently. I'm happy to add links to other design patterns or variations that others have discovered.
I'm also aware that these patterns resemble well-known design patterns in software engineering. What I find interesting and hopefully helpful to others is applying them specifically to Claude Code and creating reusable examples that others can try out and explore.
About
Design patterns for AI Augmented Engineering
Resources
Readme
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
⚙️ Claude Code Design Patterns
Design patterns for AI-augmented engineering with Claude Code. Like classic software design patterns, these are reusable approaches that solve common problems when building subagents and skills.
✅ Prerequisites
Before diving in, you should have:
  • Claude Code installed and working — you can run claude and have conversations
  • Basic familiarity with Claude Code — you've used tools, read files, run commands
  • Comfort with Markdown and YAML — the configuration formats used throughout
🧑‍🏫 Using This Repo
Each directory contains a standalone design pattern with its own .claude configuration.
Important: Run Claude Code from within a pattern directory, not this parent directory.
cd knowledge-hooks
claude
You'll find a README.md for each pattern that goes over how it works, how to apply it, further reading, and more. Follow along with the each tutorial, interact with the agents and skills, and get an idea of how they hang together and how you might apply them.
If you find a pattern you'd like to use look for the link to the teach-claude.md for that pattern. Paste a link to the teach-claude.md for the design pattern you want to use and Claude will get your project wired up for it. I suggest you do it on a branch, just in case after applying it the pattern doesn't seem like a great fit or Claude messed something up.
Recommended starting points:
  • Knowledge Hooks — Most self-contained, demonstrates hooks clearly
  • Procedural Skills — Shows how to make agents follow exact procedures
🛠️ The Design Patterns
🪝 Knowledge Hooks
Front-load subagents with knowledge via hooks on invocation. More token-efficient and deterministic than runtime fetching.
→ Knowledge Hooks
📋 Procedural Skills
Trade autonomy for determinism. Skills execute step-by-step using Task tools (TaskCreate, TaskUpdate, TaskList) to enforce execution order.
→ Procedural Skills
🔭 Skill Discovery
Dynamic skill discovery for subagents. Claude Code subagents don't inherit skill manifests from the parent conversation — this pattern solves that efficiently.
→ Skill Discovery
📚 Subagent Skill Creation
Subagents that augment their own abilities by creating skills as they learn. A self-reinforcing system that improves over time.
Caution: Review the skills your subagent creates. Combine with Skill Discovery for growth without token overhead.
→ Subagent Skill Creation
🏆 Attribution
These design patterns are ones I've "discovered." This doesn't mean I'm the first person to think of them — likely not. But I reasoned my way into them independently. I'm happy to add links to other design patterns or variations that others have discovered.
I'm also aware that these patterns resemble well-known design patterns in software engineering. What I find interesting and hopefully helpful to others is applying them specifically to Claude Code and creating reusable examples that others can try out and explore.
About
Design patterns for AI Augmented Engineering
Resources
Readme
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
⚙️ Claude Code Design Patterns
Design patterns for AI-augmented engineering with Claude Code. Like classic software design patterns, these are reusable approaches that solve common problems when building subagents and skills.
✅ Prerequisites
Before diving in, you should have:
  • Claude Code installed and working — you can run claude and have conversations
  • Basic familiarity with Claude Code — you've used tools, read files, run commands
  • Comfort with Markdown and YAML — the configuration formats used throughout
🧑‍🏫 Using This Repo
Each directory contains a standalone design pattern with its own .claude configuration.
Important: Run Claude Code from within a pattern directory, not this parent directory.
cd knowledge-hooks
claude
You'll find a README.md for each pattern that goes over how it works, how to apply it, further reading, and more. Follow along with the each tutorial, interact with the agents and skills, and get an idea of how they hang together and how you might apply them.
If you find a pattern you'd like to use look for the link to the teach-claude.md for that pattern. Paste a link to the teach-claude.md for the design pattern you want to use and Claude will get your project wired up for it. I suggest you do it on a branch, just in case after applying it the pattern doesn't seem like a great fit or Claude messed something up.
Recommended starting points:
  • Knowledge Hooks — Most self-contained, demonstrates hooks clearly
  • Procedural Skills — Shows how to make agents follow exact procedures
🛠️ The Design Patterns
🪝 Knowledge Hooks
Front-load subagents with knowledge via hooks on invocation. More token-efficient and deterministic than runtime fetching.
→ Knowledge Hooks
📋 Procedural Skills
Trade autonomy for determinism. Skills execute step-by-step using Task tools (TaskCreate, TaskUpdate, TaskList) to enforce execution order.
→ Procedural Skills
🔭 Skill Discovery
Dynamic skill discovery for subagents. Claude Code subagents don't inherit skill manifests from the parent conversation — this pattern solves that efficiently.
→ Skill Discovery
📚 Subagent Skill Creation
Subagents that augment their own abilities by creating skills as they learn. A self-reinforcing system that improves over time.
Caution: Review the skills your subagent creates. Combine with Skill Discovery for growth without token overhead.
→ Subagent Skill Creation
🏆 Attribution
These design patterns are ones I've "discovered." This doesn't mean I'm the first person to think of them — likely not. But I reasoned my way into them independently. I'm happy to add links to other design patterns or variations that others have discovered.
I'm also aware that these patterns resemble well-known design patterns in software engineering. What I find interesting and hopefully helpful to others is applying them specifically to Claude Code and creating reusable examples that others can try out and explore.
About
Design patterns for AI Augmented Engineering
Resources
Readme
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
⚙️ Claude Code Design Patterns
Design patterns for AI-augmented engineering with Claude Code. Like classic software design patterns, these are reusable approaches that solve common problems when building subagents and skills.
✅ Prerequisites
Before diving in, you should have:
  • Claude Code installed and working — you can run claude and have conversations
  • Basic familiarity with Claude Code — you've used tools, read files, run commands
  • Comfort with Markdown and YAML — the configuration formats used throughout
🧑‍🏫 Using This Repo
Each directory contains a standalone design pattern with its own .claude configuration.
Important: Run Claude Code from within a pattern directory, not this parent directory.
cd knowledge-hooks
claude
You'll find a README.md for each pattern that goes over how it works, how to apply it, further reading, and more. Follow along with the each tutorial, interact with the agents and skills, and get an idea of how they hang together and how you might apply them.
If you find a pattern you'd like to use look for the link to the teach-claude.md for that pattern. Paste a link to the teach-claude.md for the design pattern you want to use and Claude will get your project wired up for it. I suggest you do it on a branch, just in case after applying it the pattern doesn't seem like a great fit or Claude messed something up.
Recommended starting points:
  • Knowledge Hooks — Most self-contained, demonstrates hooks clearly
  • Procedural Skills — Shows how to make agents follow exact procedures
🛠️ The Design Patterns
🪝 Knowledge Hooks
Front-load subagents with knowledge via hooks on invocation. More token-efficient and deterministic than runtime fetching.
→ Knowledge Hooks
📋 Procedural Skills
Trade autonomy for determinism. Skills execute step-by-step using Task tools (TaskCreate, TaskUpdate, TaskList) to enforce execution order.
→ Procedural Skills
🔭 Skill Discovery
Dynamic skill discovery for subagents. Claude Code subagents don't inherit skill manifests from the parent conversation — this pattern solves that efficiently.
→ Skill Discovery
📚 Subagent Skill Creation
Subagents that augment their own abilities by creating skills as they learn. A self-reinforcing system that improves over time.
Caution: Review the skills your subagent creates. Combine with Skill Discovery for growth without token overhead.
→ Subagent Skill Creation
🏆 Attribution
These design patterns are ones I've "discovered." This doesn't mean I'm the first person to think of them — likely not. But I reasoned my way into them independently. I'm happy to add links to other design patterns or variations that others have discovered.
I'm also aware that these patterns resemble well-known design patterns in software engineering. What I find interesting and hopefully helpful to others is applying them specifically to Claude Code and creating reusable examples that others can try out and explore.
About
Design patterns for AI Augmented Engineering
Resources
Readme
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages