Skip to content

Instantly share code, notes, and snippets.

@vivekhaldar

vivekhaldar/claude-code-primitives-slides.html

Created January 12, 2026 16:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save vivekhaldar/e0830c624164357208d86cb169cb145b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save vivekhaldar/e0830c624164357208d86cb169cb145b to your computer and use it in GitHub Desktop.
Download ZIP
Claude Code Primitives: Skills, Commands & Subagents - A Pedagogical Guide
Raw
claude-code-primitives-slides.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Claude Code Primitives — Skills, Commands & Subagents</title>
<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=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root {
--bg: #faf9f7;
--bg-subtle: #f5f3f0;
--text: #1a1a1a;
--text-muted: #6b6b6b;
--text-subtle: #999;
/* Primitive colors */
--command-primary: #b8860b;
--command-bg: #fef9e7;
--command-border: #e6d5a8;
--skill-primary: #0d7377;
--skill-bg: #e8f6f6;
--skill-border: #a8d8d8;
--agent-primary: #6b46c1;
--agent-bg: #f3effc;
--agent-border: #c9b8e8;
--accent: #c44536;
--font-display: 'Fraunces', Georgia, serif;
--font-body: 'DM Sans', -apple-system, sans-serif;
--font-mono: 'DM Mono', 'SF Mono', monospace;
--slide-transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
overflow: hidden;
}
body {
font-family: var(--font-body);
background: var(--bg);
color: var(--text);
line-height: 1.6;
}
/* Grain overlay */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.03;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
z-index: 9999;
}
/* Layout with sidebar */
.layout {
display: flex;
height: 100%;
}
/* Sidebar TOC */
.sidebar {
width: 280px;
min-width: 280px;
height: 100%;
background: white;
border-right: 1px solid var(--bg-subtle);
padding: 2rem 0;
display: flex;
flex-direction: column;
z-index: 100;
}
.sidebar-header {
padding: 0 1.5rem 1.5rem;
border-bottom: 1px solid var(--bg-subtle);
margin-bottom: 1rem;
}
.sidebar-header h3 {
font-family: var(--font-display);
font-size: 1.1rem;
font-weight: 500;
margin-bottom: 0.25rem;
}
.sidebar-header span {
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--text-subtle);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.toc {
list-style: none;
flex: 1;
overflow-y: auto;
padding: 0 0.75rem;
}
.toc-item {
position: relative;
margin-bottom: 2px;
}
.toc-item a {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.6rem 0.75rem;
text-decoration: none;
color: var(--text-muted);
font-size: 0.85rem;
border-radius: 6px;
transition: all 0.2s ease;
line-height: 1.4;
}
.toc-item a:hover {
background: var(--bg-subtle);
color: var(--text);
}
.toc-item.active a {
background: var(--text);
color: white;
}
.toc-item.completed a {
color: var(--text);
}
.toc-number {
font-family: var(--font-mono);
font-size: 0.7rem;
min-width: 1.5rem;
height: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-subtle);
border-radius: 4px;
flex-shrink: 0;
margin-top: 1px;
}
.toc-item.active .toc-number {
background: rgba(255,255,255,0.2);
color: white;
}
.toc-item.completed .toc-number {
background: var(--text);
color: white;
}
.toc-title {
flex: 1;
}
/* Progress in sidebar */
.sidebar-progress {
padding: 1rem 1.5rem;
border-top: 1px solid var(--bg-subtle);
margin-top: auto;
}
.sidebar-progress-bar {
height: 4px;
background: var(--bg-subtle);
border-radius: 2px;
overflow: hidden;
}
.sidebar-progress-fill {
height: 100%;
background: var(--text);
transition: width 0.3s ease;
}
.sidebar-progress-text {
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--text-subtle);
margin-top: 0.5rem;
text-align: center;
}
/* Slide container */
.slides-container {
position: relative;
flex: 1;
height: 100%;
overflow: hidden;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 4rem 6rem;
opacity: 0;
visibility: hidden;
transform: translateX(30px);
transition: opacity var(--slide-transition), transform var(--slide-transition), visibility var(--slide-transition);
}
.slide.active {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
.slide.prev {
transform: translateX(-30px);
}
/* Typography */
h1 {
font-family: var(--font-display);
font-weight: 500;
font-size: 4rem;
line-height: 1.1;
letter-spacing: -0.02em;
margin-bottom: 1.5rem;
}
h2 {
font-family: var(--font-display);
font-weight: 500;
font-size: 2.75rem;
line-height: 1.2;
letter-spacing: -0.01em;
margin-bottom: 2rem;
}
h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(--text);
}
p {
font-size: 1.25rem;
color: var(--text-muted);
max-width: 42rem;
}
.subtitle {
font-size: 1.5rem;
color: var(--text-muted);
font-weight: 400;
}
.eyebrow {
font-family: var(--font-mono);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--text-subtle);
margin-bottom: 0.75rem;
}
/* Source citations */
.slide-sources {
position: absolute;
bottom: 2rem;
left: 6rem;
right: 6rem;
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
}
.slide-sources a {
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--text-subtle);
text-decoration: none;
display: flex;
align-items: center;
gap: 0.35rem;
transition: color 0.2s ease;
}
.slide-sources a:hover {
color: var(--text);
}
.slide-sources a::before {
content: '↗';
font-size: 0.8em;
}
code {
font-family: var(--font-mono);
font-size: 0.9em;
background: var(--bg-subtle);
padding: 0.15em 0.4em;
border-radius: 4px;
}
/* Title slide special */
.slide-title {
text-align: center;
justify-content: center;
align-items: center;
}
.slide-title h1 {
font-size: 4.5rem;
font-weight: 400;
margin-bottom: 1rem;
}
.slide-title .version-badge {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.85rem;
background: var(--text);
color: var(--bg);
padding: 0.4em 1em;
border-radius: 100px;
margin-top: 2rem;
}
/* Primitive cards */
.primitives-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-top: 2rem;
}
.primitive-card {
padding: 2rem;
border-radius: 12px;
border: 1px solid;
}
.primitive-card.command {
background: var(--command-bg);
border-color: var(--command-border);
}
.primitive-card.command h3 {
color: var(--command-primary);
}
.primitive-card.skill {
background: var(--skill-bg);
border-color: var(--skill-border);
}
.primitive-card.skill h3 {
color: var(--skill-primary);
}
.primitive-card.agent {
background: var(--agent-bg);
border-color: var(--agent-border);
}
.primitive-card.agent h3 {
color: var(--agent-primary);
}
.primitive-card p {
font-size: 1rem;
margin-top: 0.5rem;
}
.primitive-card .location {
font-family: var(--font-mono);
font-size: 0.8rem;
color: var(--text-subtle);
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid currentColor;
opacity: 0.3;
}
/* Deep dive slides */
.deep-dive {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 4rem;
align-items: start;
}
.deep-dive-content h2 {
margin-bottom: 1rem;
}
.deep-dive-content p {
margin-bottom: 1.5rem;
}
.feature-list {
list-style: none;
margin-top: 1.5rem;
}
.feature-list li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 1rem;
font-size: 1.1rem;
}
.feature-list li::before {
content: '→';
color: var(--text-subtle);
flex-shrink: 0;
}
.code-block {
background: #1e1e1e;
color: #d4d4d4;
padding: 1.5rem;
border-radius: 8px;
font-family: var(--font-mono);
font-size: 0.85rem;
line-height: 1.7;
overflow-x: auto;
white-space: pre;
}
.code-block .comment {
color: #6a9955;
}
.code-block .key {
color: #9cdcfe;
}
.code-block .string {
color: #ce9178;
}
.code-block .heading {
color: #569cd6;
}
/* Convergence slide */
.convergence-table {
width: 100%;
border-collapse: collapse;
margin-top: 2rem;
font-size: 0.95rem;
}
.convergence-table th {
text-align: left;
padding: 1rem;
font-weight: 600;
border-bottom: 2px solid var(--text);
}
.convergence-table td {
padding: 1rem;
border-bottom: 1px solid var(--bg-subtle);
vertical-align: top;
}
.convergence-table tr:last-child td {
border-bottom: none;
}
.convergence-table .check {
color: #22c55e;
font-weight: 600;
}
.convergence-table .cross {
color: var(--text-subtle);
}
.convergence-table .new {
background: #fef3c7;
color: #92400e;
font-size: 0.7rem;
padding: 0.2em 0.5em;
border-radius: 4px;
font-weight: 600;
margin-left: 0.5rem;
}
/* Decision tree */
.decision-tree {
background: var(--bg-subtle);
border-radius: 12px;
padding: 2.5rem;
margin-top: 1.5rem;
}
.tree-node {
display: flex;
flex-direction: column;
align-items: center;
}
.tree-question {
background: white;
border: 2px solid var(--text);
border-radius: 8px;
padding: 1rem 1.5rem;
font-weight: 500;
text-align: center;
max-width: 500px;
}
.tree-branches {
display: flex;
justify-content: center;
gap: 4rem;
margin-top: 1.5rem;
position: relative;
}
.tree-branches::before {
content: '';
position: absolute;
top: -1.5rem;
left: 50%;
width: 1px;
height: 1.5rem;
background: var(--text-subtle);
}
.tree-branch {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.tree-branch::before {
content: '';
position: absolute;
top: -1.5rem;
width: 100%;
height: 1px;
background: var(--text-subtle);
}
.tree-branch::after {
content: '';
position: absolute;
top: -1.5rem;
left: 50%;
width: 1px;
height: 1.5rem;
background: var(--text-subtle);
}
.tree-label {
font-family: var(--font-mono);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-subtle);
margin-bottom: 0.5rem;
}
.tree-result {
padding: 0.75rem 1.25rem;
border-radius: 6px;
font-weight: 600;
font-size: 0.9rem;
}
.tree-result.command {
background: var(--command-bg);
color: var(--command-primary);
border: 1px solid var(--command-border);
}
.tree-result.skill {
background: var(--skill-bg);
color: var(--skill-primary);
border: 1px solid var(--skill-border);
}
.tree-result.agent {
background: var(--agent-bg);
color: var(--agent-primary);
border: 1px solid var(--agent-border);
}
/* Mental model composition */
.composition-diagram {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-top: 2rem;
}
.composition-row {
display: grid;
grid-template-columns: 140px 1fr 1fr 1fr;
gap: 1rem;
align-items: center;
}
.composition-label {
font-family: var(--font-mono);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-subtle);
text-align: right;
}
.composition-box {
padding: 1rem 1.25rem;
border-radius: 8px;
font-size: 0.95rem;
}
.composition-box.command {
background: var(--command-bg);
border: 1px solid var(--command-border);
}
.composition-box.skill {
background: var(--skill-bg);
border: 1px solid var(--skill-border);
}
.composition-box.agent {
background: var(--agent-bg);
border: 1px solid var(--agent-border);
}
.composition-box strong {
display: block;
margin-bottom: 0.25rem;
}
.composition-box small {
color: var(--text-muted);
font-size: 0.85rem;
}
.composition-arrow {
display: flex;
justify-content: center;
color: var(--text-subtle);
font-size: 1.5rem;
}
.composition-note {
grid-column: 2 / -1;
font-size: 0.9rem;
color: var(--text-muted);
font-style: italic;
padding: 0.75rem 1rem;
background: white;
border-radius: 6px;
border-left: 3px solid var(--skill-primary);
}
/* Quick reference table */
.quick-ref {
width: 100%;
margin-top: 1.5rem;
border-collapse: collapse;
font-size: 0.9rem;
}
.quick-ref th {
text-align: left;
padding: 0.75rem 1rem;
font-weight: 600;
background: var(--bg-subtle);
border-bottom: 1px solid var(--text-subtle);
}
.quick-ref td {
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--bg-subtle);
vertical-align: top;
}
.quick-ref tr:hover td {
background: var(--bg-subtle);
}
/* Progress bar */
.progress {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: var(--bg-subtle);
z-index: 1000;
}
.progress-bar {
height: 100%;
background: var(--text);
transition: width 0.3s ease;
}
/* Navigation */
.nav {
position: fixed;
bottom: 2rem;
right: 2rem;
display: flex;
gap: 0.5rem;
z-index: 1000;
}
.nav button {
width: 48px;
height: 48px;
border: 1px solid var(--text-subtle);
background: white;
border-radius: 50%;
cursor: pointer;
font-size: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.nav button:hover {
background: var(--text);
color: white;
border-color: var(--text);
}
.nav button:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.nav button:disabled:hover {
background: white;
color: var(--text);
}
/* Slide counter */
.slide-counter {
position: fixed;
bottom: 2.25rem;
left: 2rem;
font-family: var(--font-mono);
font-size: 0.85rem;
color: var(--text-subtle);
z-index: 1000;
}
/* Keyboard hint */
.keyboard-hint {
position: fixed;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--text-subtle);
opacity: 0.5;
z-index: 1000;
}
.keyboard-hint kbd {
display: inline-block;
padding: 0.2em 0.5em;
background: var(--bg-subtle);
border: 1px solid var(--text-subtle);
border-radius: 4px;
margin: 0 0.2em;
}
/* Two column layout */
.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
margin-top: 2rem;
}
/* Highlight box */
.highlight-box {
background: white;
border: 2px solid var(--text);
border-radius: 8px;
padding: 1.5rem;
margin-top: 1.5rem;
}
.highlight-box h4 {
font-family: var(--font-display);
font-size: 1.1rem;
margin-bottom: 0.75rem;
}
.highlight-box p {
font-size: 1rem;
}
/* Version changes */
.changes-list {
list-style: none;
margin-top: 1.5rem;
}
.changes-list li {
padding: 1rem 1.25rem;
background: white;
border-radius: 8px;
margin-bottom: 0.75rem;
border-left: 4px solid var(--accent);
font-size: 1rem;
}
.changes-list li strong {
display: block;
margin-bottom: 0.25rem;
}
.changes-list li span {
color: var(--text-muted);
font-size: 0.9rem;
}
/* Key insight */
.key-insight {
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
color: white;
padding: 2rem;
border-radius: 12px;
margin-top: 2rem;
}
.key-insight h3 {
color: white;
font-size: 1rem;
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.1em;
opacity: 0.7;
margin-bottom: 1rem;
}
.key-insight p {
color: white;
font-size: 1.35rem;
font-family: var(--font-display);
line-height: 1.5;
max-width: none;
}
/* Mental Model Box - prominent dark panel */
.mental-model-box {
background: linear-gradient(145deg, #1e1e1e 0%, #2a2a2a 100%);
color: #e5e5e5;
padding: 2.5rem 3rem;
border-radius: 12px;
font-family: var(--font-mono);
font-size: 0.9rem;
line-height: 1.8;
}
.mental-model-box .section {
margin-bottom: 2rem;
}
.mental-model-box .section:last-child {
margin-bottom: 0;
}
.mental-model-box .section-title {
color: white;
font-size: 0.95rem;
font-weight: 600;
margin-bottom: 0.75rem;
letter-spacing: 0.05em;
}
.mental-model-box .section-title.skill-color {
color: #5eead4;
}
.mental-model-box .section-title.agent-color {
color: #c4b5fd;
}
.mental-model-box .section-title.composition-color {
color: #fbbf24;
}
.mental-model-box ul {
list-style: none;
margin: 0;
padding: 0;
}
.mental-model-box li {
position: relative;
padding-left: 1.25rem;
margin-bottom: 0.4rem;
color: #a3a3a3;
}
.mental-model-box li::before {
content: '•';
position: absolute;
left: 0;
color: #525252;
}
.mental-model-box .composition-item {
margin-bottom: 0.75rem;
}
.mental-model-box .composition-item code {
background: rgba(255,255,255,0.1);
color: #fbbf24;
padding: 0.1em 0.4em;
border-radius: 3px;
font-size: 0.85em;
}
.mental-model-box .composition-arrow {
color: #525252;
margin-left: 0.5rem;
}
.mental-model-box .composition-result {
color: #a3a3a3;
display: block;
padding-left: 1.25rem;
margin-top: 0.25rem;
}
/* Composition Cheatsheet */
.cheatsheet {
background: linear-gradient(145deg, #1e1e1e 0%, #2a2a2a 100%);
border-radius: 12px;
padding: 2rem;
font-family: var(--font-mono);
font-size: 0.85rem;
color: #e5e5e5;
}
.cheatsheet-top {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid #404040;
margin-bottom: 1.5rem;
}
.cheatsheet-col {
display: flex;
flex-direction: column;
gap: 1rem;
}
.cheatsheet-col-header {
font-weight: 600;
letter-spacing: 0.05em;
}
.cheatsheet-col-header.command-color { color: #fbbf24; }
.cheatsheet-col-header.skill-color { color: #5eead4; }
.cheatsheet-col-header.agent-color { color: #c4b5fd; }
.cheatsheet-col-desc {
color: #a3a3a3;
font-size: 0.8rem;
line-height: 1.5;
}
.cheatsheet-file-box {
background: #2d2d2d;
border: 1px solid #404040;
border-radius: 6px;
padding: 0.75rem 1rem;
font-size: 0.8rem;
line-height: 1.6;
}
.cheatsheet-file-box.command { border-left: 3px solid #fbbf24; }
.cheatsheet-file-box.skill { border-left: 3px solid #5eead4; }
.cheatsheet-file-box.agent { border-left: 3px solid #c4b5fd; }
.cheatsheet-file-box .filename {
color: #737373;
margin-bottom: 0.25rem;
}
.cheatsheet-arrow-section {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 0;
color: #737373;
font-size: 0.8rem;
}
.cheatsheet-arrow {
color: #5eead4;
font-size: 1.25rem;
}
.cheatsheet-bottom {
border-top: 1px solid #404040;
padding-top: 1.5rem;
}
.cheatsheet-section-title {
color: #fbbf24;
font-weight: 600;
letter-spacing: 0.05em;
margin-bottom: 1rem;
}
.cheatsheet-modes {
background: #2d2d2d;
border-radius: 6px;
padding: 1.25rem 1.5rem;
line-height: 1.8;
}
.cheatsheet-modes .mode-default {
color: #a3a3a3;
margin-bottom: 1rem;
}
.cheatsheet-modes .mode-fork {
color: #5eead4;
margin-bottom: 0.5rem;
}
.cheatsheet-modes .mode-agents {
padding-left: 1.5rem;
color: #a3a3a3;
}
.cheatsheet-modes .mode-agents .agent-type {
color: #e5e5e5;
}
.cheatsheet-modes .mode-agents .agent-desc {
color: #737373;
margin-left: 0.5rem;
}
.cheatsheet-modes .mode-tools {
margin-top: 1rem;
color: #a3a3a3;
}
.cheatsheet-modes .mode-tools code {
background: rgba(94, 234, 212, 0.15);
color: #5eead4;
padding: 0.1em 0.4em;
border-radius: 3px;
}
.cheatsheet-modes .mode-tools .tools-desc {
color: #737373;
margin-left: 0.5rem;
}
/* Takeaway slide */
.takeaways {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-top: 2rem;
}
.takeaway {
text-align: center;
padding: 2rem;
}
.takeaway-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.takeaway h4 {
font-family: var(--font-display);
font-size: 1.25rem;
margin-bottom: 0.75rem;
}
.takeaway p {
font-size: 1rem;
max-width: none;
}
/* Flow diagram */
.flow-diagram {
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
margin-top: 2rem;
flex-wrap: wrap;
}
.flow-box {
padding: 1rem 1.5rem;
border-radius: 8px;
font-weight: 500;
text-align: center;
}
.flow-arrow {
font-size: 1.5rem;
color: var(--text-subtle);
}
/* Compact tree for skill config */
.config-tree {
display: flex;
flex-direction: column;
gap: 1rem;
}
.config-row {
display: flex;
align-items: center;
gap: 1rem;
}
.config-question {
background: white;
padding: 0.75rem 1rem;
border-radius: 6px;
font-size: 0.9rem;
min-width: 280px;
}
.config-options {
display: flex;
gap: 0.75rem;
}
.config-option {
padding: 0.5rem 1rem;
border-radius: 4px;
font-family: var(--font-mono);
font-size: 0.8rem;
}
.config-option.yes {
background: #dcfce7;
color: #166534;
}
.config-option.no {
background: #fee2e2;
color: #991b1b;
}
.config-result {
font-family: var(--font-mono);
font-size: 0.85rem;
color: var(--skill-primary);
}
</style>
</head>
<body>
<div class="layout">
<!-- Sidebar TOC -->
<aside class="sidebar">
<div class="sidebar-header">
<h3>Contents</h3>
<span>16 slides</span>
</div>
<ul class="toc">
<li class="toc-item active" data-toc="1">
<a href="#" onclick="goToSlide(0); return false;">
<span class="toc-number">1</span>
<span class="toc-title">Introduction</span>
</a>
</li>
<li class="toc-item" data-toc="2">
<a href="#" onclick="goToSlide(1); return false;">
<span class="toc-number">2</span>
<span class="toc-title">Three Primitives</span>
</a>
</li>
<li class="toc-item" data-toc="3">
<a href="#" onclick="goToSlide(2); return false;">
<span class="toc-number">3</span>
<span class="toc-title">Slash Commands</span>
</a>
</li>
<li class="toc-item" data-toc="4">
<a href="#" onclick="goToSlide(3); return false;">
<span class="toc-number">4</span>
<span class="toc-title">Skills</span>
</a>
</li>
<li class="toc-item" data-toc="5">
<a href="#" onclick="goToSlide(4); return false;">
<span class="toc-number">5</span>
<span class="toc-title">Subagents</span>
</a>
</li>
<li class="toc-item" data-toc="6">
<a href="#" onclick="goToSlide(5); return false;">
<span class="toc-number">6</span>
<span class="toc-title">The Convergence</span>
</a>
</li>
<li class="toc-item" data-toc="7">
<a href="#" onclick="goToSlide(6); return false;">
<span class="toc-number">7</span>
<span class="toc-title">Capabilities Comparison</span>
</a>
</li>
<li class="toc-item" data-toc="8">
<a href="#" onclick="goToSlide(7); return false;">
<span class="toc-number">8</span>
<span class="toc-title">Decision Tree</span>
</a>
</li>
<li class="toc-item" data-toc="9">
<a href="#" onclick="goToSlide(8); return false;">
<span class="toc-number">9</span>
<span class="toc-title">Skill Configuration</span>
</a>
</li>
<li class="toc-item" data-toc="10">
<a href="#" onclick="goToSlide(9); return false;">
<span class="toc-number">10</span>
<span class="toc-title">The Mental Model</span>
</a>
</li>
<li class="toc-item" data-toc="11">
<a href="#" onclick="goToSlide(10); return false;">
<span class="toc-number">11</span>
<span class="toc-title">Composition Cheatsheet</span>
</a>
</li>
<li class="toc-item" data-toc="12">
<a href="#" onclick="goToSlide(11); return false;">
<span class="toc-number">12</span>
<span class="toc-title">Quick Reference</span>
</a>
</li>
<li class="toc-item" data-toc="13">
<a href="#" onclick="goToSlide(12); return false;">
<span class="toc-number">13</span>
<span class="toc-title">Summary</span>
</a>
</li>
<li class="toc-item" data-toc="14">
<a href="#" onclick="goToSlide(13); return false;">
<span class="toc-number">14</span>
<span class="toc-title">A Simpler Model?</span>
</a>
</li>
<li class="toc-item" data-toc="15">
<a href="#" onclick="goToSlide(14); return false;">
<span class="toc-number">15</span>
<span class="toc-title">The Unified Proposal</span>
</a>
</li>
<li class="toc-item" data-toc="16">
<a href="#" onclick="goToSlide(15); return false;">
<span class="toc-number">16</span>
<span class="toc-title">What Gets Subsumed</span>
</a>
</li>
</ul>
<div class="sidebar-progress">
<div class="sidebar-progress-bar">
<div class="sidebar-progress-fill" style="width: 8.33%"></div>
</div>
<div class="sidebar-progress-text">1 of 12</div>
</div>
</aside>
<!-- Main content -->
<div class="slides-container">
<!-- Slide 1: Title -->
<div class="slide slide-title active" data-slide="1">
<p class="eyebrow">A Pedagogical Guide</p>
<h1>Skills, Commands<br>& Subagents</h1>
<p class="subtitle">Understanding Claude Code's Three Primitives</p>
<span class="version-badge">Updated for Claude Code 2.1.0</span>
</div>
<!-- Slide 2: The Three Primitives -->
<div class="slide" data-slide="2">
<p class="eyebrow">The Foundation</p>
<h2>Three Primitives, Three Purposes</h2>
<p>Claude Code gives you three ways to extend its capabilities. Each serves a distinct role.</p>
<div class="primitives-grid">
<div class="primitive-card command">
<h3>Slash Commands</h3>
<p>Simple prompts you invoke explicitly. Think of them as keyboard shortcuts for common requests.</p>
<div class="location">.claude/commands/</div>
</div>
<div class="primitive-card skill">
<h3>Skills</h3>
<p>Portable knowledge that Claude discovers automatically based on what you're asking.</p>
<div class="location">.claude/skills/</div>
</div>
<div class="primitive-card agent">
<h3>Subagents</h3>
<p>Specialized workers that Claude delegates to. They have their own context and judgment.</p>
<div class="location">.claude/agents/</div>
</div>
</div>
<div class="slide-sources">
<a href="https://code.claude.com/docs/en/slash-commands" target="_blank">Slash Commands Docs</a>
<a href="https://code.claude.com/docs/en/skills" target="_blank">Skills Docs</a>
<a href="https://code.claude.com/docs/en/sub-agents" target="_blank">Subagents Docs</a>
</div>
</div>
<!-- Slide 3: Slash Commands Deep Dive -->
<div class="slide" data-slide="3">
<div class="deep-dive">
<div class="deep-dive-content">
<p class="eyebrow" style="color: var(--command-primary);">Primitive 01</p>
<h2>Slash Commands</h2>
<p>The simplest primitive. A single markdown file that becomes a reusable prompt.</p>
<ul class="feature-list">
<li><strong>User-invoked</strong> — You type <code>/command-name</code></li>
<li><strong>Single file</strong> — One <code>.md</code> file per command</li>
<li><strong>Explicit</strong> — Claude never discovers these automatically</li>
<li><strong>Fast to create</strong> — Just write and save</li>
</ul>
</div>
<div class="code-block">
<span class="comment"># ~/.claude/commands/standup.md</span>
Generate my daily standup update based on:
<span class="string">1. Git commits from the last 24 hours</span>
<span class="string">2. Currently open pull requests</span>
<span class="string">3. Work in progress on current branch</span>
Format as bullet points, keep it brief.
</div>
</div>
<div class="slide-sources">
<a href="https://code.claude.com/docs/en/slash-commands" target="_blank">Slash Commands Docs</a>
</div>
</div>
<!-- Slide 4: Skills Deep Dive -->
<div class="slide" data-slide="4">
<div class="deep-dive">
<div class="deep-dive-content">
<p class="eyebrow" style="color: var(--skill-primary);">Primitive 02</p>
<h2>Skills</h2>
<p>Portable knowledge modules. Claude reads descriptions at startup and activates them when relevant.</p>
<ul class="feature-list">
<li><strong>Auto-discovered</strong> — Claude matches your request to skill descriptions</li>
<li><strong>Directory structure</strong> — <code>SKILL.md</code> plus supporting files</li>
<li><strong>Tool restrictions</strong> — Can limit which tools Claude uses</li>
<li><strong>Execution isolation</strong> — Can run in forked context</li>
</ul>
</div>
<div class="code-block">
<span class="comment"># ~/.claude/skills/audio-norm/SKILL.md</span>
<span class="heading">---</span>
<span class="key">name:</span> <span class="string">audio-normalization</span>
<span class="key">description:</span> <span class="string">Normalize audio levels in video files using ffmpeg</span>
<span class="key">allowed-tools:</span>
<span class="string">- Bash</span>
<span class="string">- Read</span>
<span class="heading">---</span>
When normalizing audio, use the EBU R128 standard:
<span class="string">1. Analyze with loudnorm filter</span>
<span class="string">2. Apply two-pass normalization</span>
<span class="string">3. Verify output levels</span>
See <span class="string">ffmpeg-presets.md</span> for command templates.
</div>
</div>
<div class="slide-sources">
<a href="https://code.claude.com/docs/en/skills" target="_blank">Skills Docs</a>
</div>
</div>
<!-- Slide 5: Subagents Deep Dive -->
<div class="slide" data-slide="5">
<div class="deep-dive">
<div class="deep-dive-content">
<p class="eyebrow" style="color: var(--agent-primary);">Primitive 03</p>
<h2>Subagents</h2>
<p>Specialized workers with their own context window. Claude delegates complex tasks to them.</p>
<ul class="feature-list">
<li><strong>Own context</strong> — Isolated conversation, returns summary</li>
<li><strong>Personality</strong> — Instructions define behavior and judgment</li>
<li><strong>Can load skills</strong> — Reference knowledge via <code>skills:</code> field</li>
<li><strong>Tool selection</strong> — Restrict available capabilities</li>
</ul>
</div>
<div class="code-block">
<span class="comment"># ~/.claude/agents/code-reviewer.md</span>
<span class="heading">---</span>
<span class="key">name:</span> <span class="string">code-reviewer</span>
<span class="key">description:</span> <span class="string">Meticulous code review specialist</span>
<span class="key">skills:</span> <span class="string">security-audit, python-style</span>
<span class="key">tools:</span>
<span class="string">- Read</span>
<span class="string">- Grep</span>
<span class="string">- Glob</span>
<span class="heading">---</span>
You are a senior code reviewer. When reviewing:
<span class="string">1. Check for logic errors first</span>
<span class="string">2. Use security-audit skill for vulnerabilities</span>
<span class="string">3. Apply python-style skill for conventions</span>
<span class="string">4. Be constructive but thorough</span>
</div>
</div>
<div class="slide-sources">
<a href="https://code.claude.com/docs/en/sub-agents" target="_blank">Subagents Docs</a>
</div>
</div>
<!-- Slide 6: The Convergence -->
<div class="slide" data-slide="6">
<p class="eyebrow">Claude Code 2.1.0</p>
<h2>The Great Convergence</h2>
<p>Recent updates have blurred the traditional distinctions between these primitives.</p>
<ul class="changes-list">
<li>
<strong><code>user-invocable</code> (default: true)</strong>
<span>Skills now appear in the <code>/</code> menu by default. They can be invoked like commands.</span>
</li>
<li>
<strong><code>context: fork</code></strong>
<span>Skills can run in isolated sub-agent contexts, keeping the main conversation clean.</span>
</li>
<li>
<strong><code>agent:</code> field</strong>
<span>Skills can specify which built-in agent type (Explore, Plan, etc.) executes them.</span>
</li>
</ul>
<div class="key-insight">
<h3>Key Insight</h3>
<p>The distinction is no longer about <em>discovery mechanism</em> (user vs. AI). It's now about <strong>capability complexity</strong> and <strong>execution model</strong>.</p>
</div>
<div class="slide-sources">
<a href="https://github.com/anthropics/claude-code/blob/main/CHANGELOG.md#210" target="_blank">Claude Code 2.1.0 Changelog</a>
<a href="https://code.claude.com/docs/en/skills" target="_blank">Skills Docs</a>
</div>
</div>
<!-- Slide 7: Capability Comparison -->
<div class="slide" data-slide="7">
<p class="eyebrow">The New Reality</p>
<h2>Capabilities Comparison</h2>
<table class="convergence-table">
<thead>
<tr>
<th>Capability</th>
<th>Slash Commands</th>
<th>Skills</th>
<th>Subagents</th>
</tr>
</thead>
<tbody>
<tr>
<td>Manual invocation (<code>/name</code>)</td>
<td><span class="check">✓</span></td>
<td><span class="check">✓</span> <span class="new">2.1.0</span></td>
<td><span class="cross">—</span></td>
</tr>
<tr>
<td>Auto-discovery by Claude</td>
<td><span class="cross">—</span></td>
<td><span class="check">✓</span></td>
<td><span class="check">✓</span></td>
</tr>
<tr>
<td>Supporting files</td>
<td><span class="cross">—</span></td>
<td><span class="check">✓</span></td>
<td><span class="cross">—</span></td>
</tr>
<tr>
<td>Execution isolation (<code>context: fork</code>)</td>
<td><span class="check">✓</span> <span class="new">2.1.0</span></td>
<td><span class="check">✓</span></td>
<td><span class="check">✓</span> always</td>
</tr>
<tr>
<td>Tool restrictions</td>
<td><span class="cross">—</span></td>
<td><span class="check">✓</span></td>
<td><span class="check">✓</span></td>
</tr>
<tr>
<td>Load skills as knowledge</td>
<td><span class="cross">—</span></td>
<td><span class="cross">—</span></td>
<td><span class="check">✓</span></td>
</tr>
<tr>
<td>Own personality/judgment</td>
<td><span class="cross">—</span></td>
<td><span class="cross">—</span></td>
<td><span class="check">✓</span></td>
</tr>
</tbody>
</table>
<div class="slide-sources">
<a href="https://code.claude.com/docs/en/slash-commands" target="_blank">Slash Commands</a>
<a href="https://code.claude.com/docs/en/skills" target="_blank">Skills</a>
<a href="https://code.claude.com/docs/en/sub-agents" target="_blank">Subagents</a>
</div>
</div>
<!-- Slide 8: Decision Tree - Main -->
<div class="slide" data-slide="8">
<p class="eyebrow">Decision Framework</p>
<h2>What Should I Create?</h2>
<div class="decision-tree">
<div class="tree-node">
<div class="tree-question">Is this <strong>knowledge/expertise</strong> or a <strong>worker with judgment</strong>?</div>
<div class="tree-branches">
<div class="tree-branch">
<div class="tree-label">Knowledge</div>
<div class="tree-question" style="font-size: 0.9rem;">Should Claude auto-discover this?</div>
<div class="tree-branches" style="gap: 2rem;">
<div class="tree-branch">
<div class="tree-label">Yes</div>
<div class="tree-result skill">SKILL</div>
</div>
<div class="tree-branch">
<div class="tree-label">No</div>
<div class="tree-result command">COMMAND</div>
</div>
</div>
</div>
<div class="tree-branch">
<div class="tree-label">Worker</div>
<div class="tree-result agent">SUBAGENT</div>
</div>
</div>
</div>
</div>
<div class="highlight-box" style="margin-top: 2rem;">
<h4>The Heuristic</h4>
<p><strong>Skills</strong> = "How to do X" (instructions, checklists, guides)<br>
<strong>Subagents</strong> = "Someone who does X" (personality, judgment, persistence)</p>
</div>
</div>
<!-- Slide 9: Skill Configuration -->
<div class="slide" data-slide="9">
<p class="eyebrow">If You Choose Skill</p>
<h2>Skill Configuration Options</h2>
<div class="decision-tree">
<div class="config-tree">
<div class="config-row">
<div class="config-question">Should users invoke this manually?</div>
<div class="config-options">
<div class="config-option yes">Yes (default)</div>
<div class="config-option no">No</div>
</div>
<div class="config-result">→ <code>user-invocable: false</code></div>
</div>
<div class="config-row">
<div class="config-question">Need execution isolation?</div>
<div class="config-options">
<div class="config-option yes">Yes</div>
<div class="config-option no">No (default)</div>
</div>
<div class="config-result">→ <code>context: fork</code></div>
</div>
<div class="config-row">
<div class="config-question">Which agent type?</div>
<div class="config-options">
<div class="config-option" style="background: #e0f2fe; color: #0369a1;">Explore</div>
<div class="config-option" style="background: #fef3c7; color: #92400e;">Plan</div>
<div class="config-option" style="background: #f3e8ff; color: #6b21a8;">general-purpose</div>
</div>
<div class="config-result">→ <code>agent: Explore</code></div>
</div>
<div class="config-row">
<div class="config-question">Restrict tools?</div>
<div class="config-options">
<div class="config-option yes">Yes</div>
<div class="config-option no">No (default)</div>
</div>
<div class="config-result">→ <code>allowed-tools: [...]</code></div>
</div>
</div>
</div>
<div class="two-col" style="margin-top: 2rem;">
<div>
<h3 style="font-size: 1rem;">Built-in Agent Types</h3>
<ul class="feature-list" style="font-size: 0.9rem;">
<li><code>Explore</code> — Read-only, fast codebase search</li>
<li><code>Plan</code> — Architecture and planning</li>
<li><code>general-purpose</code> — Full tool access</li>
<li><code>Bash</code> — Command execution only</li>
</ul>
</div>
<div class="code-block" style="font-size: 0.8rem;">
<span class="heading">---</span>
<span class="key">name:</span> <span class="string">deep-analysis</span>
<span class="key">description:</span> <span class="string">Comprehensive codebase analysis</span>
<span class="key">context:</span> <span class="string">fork</span>
<span class="key">agent:</span> <span class="string">Explore</span>
<span class="key">allowed-tools:</span>
<span class="string">- Read</span>
<span class="string">- Grep</span>
<span class="string">- Glob</span>
<span class="heading">---</span>
</div>
</div>
<div class="slide-sources">
<a href="https://code.claude.com/docs/en/skills" target="_blank">Skills Docs</a>
<a href="https://code.claude.com/docs/en/sub-agents" target="_blank">Subagents Docs</a>
</div>
</div>
<!-- Slide 10: The Mental Model -->
<div class="slide" data-slide="10">
<p class="eyebrow">The Big Picture</p>
<h2>The Mental Model</h2>
<div class="mental-model-box">
<div class="section">
<div class="section-title skill-color">SKILLS = Portable Knowledge Modules</div>
<ul>
<li>Instructions + domain expertise</li>
<li>Can be auto-discovered by main Claude</li>
<li>Can be LOADED into subagents via <code>skills:</code> field</li>
<li>Can run in forked context with built-in agent TYPE</li>
</ul>
</div>
<div class="section">
<div class="section-title agent-color">SUBAGENTS = Workers with Own Context</div>
<ul>
<li>Have their own instructions (personality, workflow)</li>
<li>Can load skills as reference knowledge</li>
<li>Spawned by Claude via Task tool</li>
<li>Run independently, return results</li>
</ul>
</div>
<div class="section">
<div class="section-title composition-color">COMPOSITION:</div>
<div class="composition-item">
• Skill + <code>context: fork</code> + <code>agent: Explore</code>
<span class="composition-result">→ Skill instructions run in Explore agent</span>
</div>
<div class="composition-item">
• Subagent + <code>skills: X, Y</code>
<span class="composition-result">→ Subagent has own instructions + skills as reference</span>
</div>
</div>
</div>
<div class="flow-diagram" style="margin-top: 2rem;">
<div class="flow-box skill" style="background: var(--skill-bg); border: 1px solid var(--skill-border);">Skills</div>
<div class="flow-arrow">→</div>
<div class="flow-box" style="background: white; border: 1px solid var(--text-subtle);">loaded into</div>
<div class="flow-arrow">→</div>
<div class="flow-box agent" style="background: var(--agent-bg); border: 1px solid var(--agent-border);">Subagents</div>
</div>
<div class="slide-sources">
<a href="https://code.claude.com/docs/en/skills" target="_blank">Skills Docs</a>
<a href="https://code.claude.com/docs/en/sub-agents" target="_blank">Subagents Docs</a>
</div>
</div>
<!-- Slide 11: Composition Cheatsheet -->
<div class="slide" data-slide="11">
<p class="eyebrow">Visual Summary</p>
<h2>The Composition Cheatsheet</h2>
<div class="cheatsheet">
<div class="cheatsheet-top">
<div class="cheatsheet-col">
<div class="cheatsheet-col-header command-color">SLASH COMMAND</div>
<div class="cheatsheet-col-desc">Simple prompt<br>User invokes</div>
<div class="cheatsheet-file-box command">
<div class="filename">/cmd.md</div>
<div>prompt<br>text</div>
</div>
</div>
<div class="cheatsheet-col">
<div class="cheatsheet-col-header skill-color">SKILL</div>
<div class="cheatsheet-col-desc">Portable knowledge<br>Claude discovers OR<br>subagent loads</div>
<div class="cheatsheet-file-box skill">
<div class="filename">skill/</div>
<div>SKILL.md<br>+ refs</div>
</div>
</div>
<div class="cheatsheet-col">
<div class="cheatsheet-col-header agent-color">SUBAGENT</div>
<div class="cheatsheet-col-desc">Worker with judgment<br>Claude delegates</div>
<div class="cheatsheet-file-box agent">
<div class="filename">agent.md</div>
<div>personality<br>+ workflow<br>+ skills:</div>
</div>
</div>
</div>
<div class="cheatsheet-arrow-section">
<span class="cheatsheet-arrow">←</span>
<span>(subagents load skills)</span>
</div>
<div class="cheatsheet-bottom">
<div class="cheatsheet-section-title">SKILL EXECUTION MODES:</div>
<div class="cheatsheet-modes">
<div class="mode-default">Default: Runs in main Claude context</div>
<div class="mode-fork">context: fork</div>
<div class="mode-agents">
<div>└─ <span class="agent-type">agent: Explore</span><span class="agent-desc">(read-only, fast)</span></div>
<div>└─ <span class="agent-type">agent: Plan</span><span class="agent-desc">(read + planning)</span></div>
<div>└─ <span class="agent-type">agent: general-purpose</span><span class="agent-desc">(full tools)</span></div>
<div>└─ <span class="agent-type">agent: Bash</span><span class="agent-desc">(command execution)</span></div>
</div>
<div class="mode-tools">allowed-tools: <code>[Read, Grep]</code><span class="tools-desc">(restrict regardless of agent)</span></div>
</div>
</div>
</div>
<div class="slide-sources">
<a href="https://code.claude.com/docs/en/skills" target="_blank">Skills Docs</a>
<a href="https://code.claude.com/docs/en/sub-agents" target="_blank">Subagents Docs</a>
</div>
</div>
<!-- Slide 12: Quick Reference -->
<div class="slide" data-slide="12">
<p class="eyebrow">Cheat Sheet</p>
<h2>Quick Reference</h2>
<table class="quick-ref">
<thead>
<tr>
<th>I want to...</th>
<th>Create</th>
<th>Configuration</th>
</tr>
</thead>
<tbody>
<tr>
<td>Quick prompt I type <code>/name</code></td>
<td><strong style="color: var(--command-primary);">Slash Command</strong></td>
<td>Single <code>.md</code> file</td>
</tr>
<tr>
<td>Knowledge Claude auto-discovers</td>
<td><strong style="color: var(--skill-primary);">Skill</strong></td>
<td>Good <code>description</code> in frontmatter</td>
</tr>
<tr>
<td>Knowledge only subagents use</td>
<td><strong style="color: var(--skill-primary);">Skill</strong></td>
<td><code>user-invocable: false</code></td>
</tr>
<tr>
<td>Long-running isolated task</td>
<td><strong style="color: var(--skill-primary);">Skill</strong></td>
<td><code>context: fork</code></td>
</tr>
<tr>
<td>Read-only exploration</td>
<td><strong style="color: var(--skill-primary);">Skill</strong></td>
<td><code>context: fork</code> + <code>agent: Explore</code></td>
</tr>
<tr>
<td>Restrict available tools</td>
<td><strong style="color: var(--skill-primary);">Skill</strong></td>
<td><code>allowed-tools: [Read, Grep]</code></td>
</tr>
<tr>
<td>Worker with personality</td>
<td><strong style="color: var(--agent-primary);">Subagent</strong></td>
<td>Own instructions in <code>.md</code></td>
</tr>
<tr>
<td>Worker with domain expertise</td>
<td><strong style="color: var(--agent-primary);">Subagent</strong></td>
<td><code>skills: X, Y</code> in frontmatter</td>
</tr>
<tr>
<td>Reusable expertise across workers</td>
<td><strong style="color: var(--skill-primary);">Skill</strong></td>
<td>Load into multiple subagents</td>
</tr>
</tbody>
</table>
<div class="slide-sources">
<a href="https://code.claude.com/docs/en/slash-commands" target="_blank">Slash Commands</a>
<a href="https://code.claude.com/docs/en/skills" target="_blank">Skills</a>
<a href="https://code.claude.com/docs/en/sub-agents" target="_blank">Subagents</a>
</div>
</div>
<!-- Slide 13: Summary -->
<div class="slide" data-slide="13">
<p class="eyebrow">Summary</p>
<h2>Key Takeaways</h2>
<div class="takeaways">
<div class="takeaway">
<div class="takeaway-icon">📝</div>
<h4>Commands are Simple</h4>
<p>Single file, explicit invocation, no auto-discovery. Use for quick prompts.</p>
</div>
<div class="takeaway">
<div class="takeaway-icon">🧠</div>
<h4>Skills are Knowledge</h4>
<p>Portable expertise that Claude discovers or subagents load. The building blocks.</p>
</div>
<div class="takeaway">
<div class="takeaway-icon">🤖</div>
<h4>Subagents are Workers</h4>
<p>Independent context, own judgment, can consume skills. Delegation targets.</p>
</div>
</div>
<div class="key-insight">
<h3>Remember</h3>
<p><strong>Skills are now a functional superset of commands</strong> — but commands remain simpler. <strong>Subagents consume skills</strong> — skills are the knowledge, subagents are the workers who use it.</p>
</div>
<div style="text-align: center; margin-top: 3rem; color: var(--text-muted);">
<p style="font-size: 1rem;">Official docs: <code>code.claude.com/docs</code></p>
</div>
</div>
<!-- Slide 14: A Simpler Model? -->
<div class="slide" data-slide="14">
<p class="eyebrow" style="color: var(--accent);">Proposal</p>
<h2>A Simpler Model?</h2>
<p>The current three-primitive system conflates orthogonal concerns. What if we separated them cleanly?</p>
<div class="two-col" style="margin-top: 2rem;">
<div>
<h3 style="font-size: 1.1rem; margin-bottom: 1rem;">The Current Confusion</h3>
<ul class="feature-list" style="font-size: 0.95rem;">
<li><strong>Knowledge type</strong> mixed with <strong>invocation method</strong></li>
<li><strong>Execution context</strong> mixed with <strong>personality</strong></li>
<li>Three directories for what's really <em>all markdown</em></li>
<li>Historical artifacts, not principled design</li>
</ul>
</div>
<div>
<h3 style="font-size: 1.1rem; margin-bottom: 1rem;">The Insight</h3>
<ul class="feature-list" style="font-size: 0.95rem;">
<li>"Disposition" is just procedural knowledge in text</li>
<li><code>agent:</code> field has unclear semantics</li>
<li>Invocation (explicit vs auto) is orthogonal to everything</li>
<li>Execution context (main vs fork) is the <em>one</em> real switch</li>
</ul>
</div>
</div>
<div class="key-insight">
<h3>The Question</h3>
<p>Can we collapse commands, skills, and subagents into <strong>one unified abstraction</strong> with <strong>one meaningful switch</strong>?</p>
</div>
</div>
<!-- Slide 15: The Unified Proposal -->
<div class="slide" data-slide="15">
<p class="eyebrow" style="color: var(--accent);">Proposal</p>
<h2>The Unified Model</h2>
<div class="mental-model-box" style="margin-top: 1.5rem;">
<div class="section">
<div class="section-title" style="color: #5eead4; font-size: 1.1rem;">ONE PRIMITIVE: Skills</div>
<ul>
<li>A skill is a <strong>knowledge pack</strong> (conceptual + procedural knowledge)</li>
<li>"Disposition" or "personality" = strong procedural instructions</li>
<li>Everything is markdown. Just write what you know.</li>
</ul>
</div>
<div class="section">
<div class="section-title" style="color: #fbbf24; font-size: 1.1rem;">ONE SWITCH: context: main | fork</div>
<ul>
<li><code>main</code> — Skill augments the current conversation context</li>
<li><code>fork</code> — Skill runs in isolated sub-agent context (results return)</li>
</ul>
</div>
<div class="section">
<div class="section-title" style="color: #c4b5fd; font-size: 1.1rem;">ONE COMPOSITION: cf: skill1, skill2...</div>
<ul>
<li>Explicit cross-references: "when running this, also keep skill1, skill2 in mind"</li>
<li>Model can <em>also</em> auto-discover and use other skills as needed</li>
</ul>
</div>
<div class="section" style="margin-bottom: 0; padding-top: 1rem; border-top: 1px solid #404040;">
<div class="section-title" style="color: #737373; font-size: 0.9rem;">INVOCATION: Orthogonal concern</div>
<ul>
<li>Auto-discovered by task matching (default)</li>
<li>Explicit via <code>/skillname</code></li>
<li>Opt-out with <code>user-invocable: false</code></li>
</ul>
</div>
</div>
</div>
<!-- Slide 16: What Gets Subsumed -->
<div class="slide" data-slide="16">
<p class="eyebrow" style="color: var(--accent);">Proposal</p>
<h2>What Gets Subsumed</h2>
<table class="convergence-table" style="margin-top: 1.5rem;">
<thead>
<tr>
<th>Current Primitive</th>
<th>In Unified Model</th>
<th>Configuration</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong style="color: var(--command-primary);">Slash Command</strong></td>
<td>Skill</td>
<td><code>user-invocable: true</code> (default)</td>
</tr>
<tr>
<td><strong style="color: var(--skill-primary);">Auto-discovered Skill</strong></td>
<td>Skill</td>
<td>Unchanged</td>
</tr>
<tr>
<td><strong style="color: var(--agent-primary);">Subagent</strong></td>
<td>Skill</td>
<td><code>context: fork</code> + strong disposition text</td>
</tr>
<tr>
<td><strong style="color: var(--text-subtle);">Built-in agent types</strong></td>
<td><em>Dropped</em></td>
<td>Unclear semantics → implementation detail</td>
</tr>
</tbody>
</table>
<div class="two-col" style="margin-top: 2rem;">
<div class="highlight-box" style="margin-top: 0; border-color: #22c55e;">
<h4 style="color: #22c55e;">✓ What's Preserved</h4>
<ul class="feature-list" style="font-size: 0.9rem; margin-top: 0.75rem;">
<li>Tool restrictions via existing frontmatter</li>
<li>Return semantics (same as current subagents)</li>
<li>Composition via explicit <code>cf:</code> references</li>
<li>All invocation patterns (explicit + auto)</li>
</ul>
</div>
<div class="highlight-box" style="margin-top: 0; border-color: var(--accent);">
<h4 style="color: var(--accent);">✗ What's Simplified Away</h4>
<ul class="feature-list" style="font-size: 0.9rem; margin-top: 0.75rem;">
<li>Three directories → One (<code>.claude/skills/</code>)</li>
<li><code>agent:</code> field (unclear semantics)</li>
<li>"Worker identity" fiction (it's just text)</li>
<li>Command vs skill mental distinction</li>
</ul>
</div>
</div>
</div>
</div><!-- /slides-container -->
</div><!-- /layout -->
<!-- Keyboard hint -->
<div class="keyboard-hint">
<kbd>←</kbd> <kbd>→</kbd> or <kbd>Space</kbd> to navigate
</div>
<!-- Navigation -->
<div class="nav">
<button id="prev" disabled>←</button>
<button id="next">→</button>
</div>
<script>
const slides = document.querySelectorAll('.slide');
const tocItems = document.querySelectorAll('.toc-item');
const sidebarProgressFill = document.querySelector('.sidebar-progress-fill');
const sidebarProgressText = document.querySelector('.sidebar-progress-text');
const prevBtn = document.getElementById('prev');
const nextBtn = document.getElementById('next');
let currentSlide = 0;
const totalSlides = slides.length;
function updateSlide(direction = 'next') {
// Remove active and prev classes from slides
slides.forEach(slide => {
slide.classList.remove('active', 'prev');
});
// Add appropriate classes
if (direction === 'prev' && currentSlide < totalSlides - 1) {
slides[currentSlide + 1].classList.add('prev');
}
slides[currentSlide].classList.add('active');
// Update progress
const progress = ((currentSlide + 1) / totalSlides) * 100;
// Update sidebar TOC
tocItems.forEach((item, index) => {
item.classList.remove('active', 'completed');
if (index === currentSlide) {
item.classList.add('active');
} else if (index < currentSlide) {
item.classList.add('completed');
}
});
// Update sidebar progress
sidebarProgressFill.style.width = `${progress}%`;
sidebarProgressText.textContent = `${currentSlide + 1} of ${totalSlides}`;
// Update buttons
prevBtn.disabled = currentSlide === 0;
nextBtn.disabled = currentSlide === totalSlides - 1;
}
function goToSlide(index) {
const direction = index > currentSlide ? 'next' : 'prev';
currentSlide = index;
updateSlide(direction);
}
function nextSlide() {
if (currentSlide < totalSlides - 1) {
currentSlide++;
updateSlide('next');
}
}
function prevSlide() {
if (currentSlide > 0) {
currentSlide--;
updateSlide('prev');
}
}
// Button events
nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);
// Keyboard navigation
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight' || e.key === ' ') {
e.preventDefault();
nextSlide();
} else if (e.key === 'ArrowLeft') {
e.preventDefault();
prevSlide();
}
});
// Touch support for mobile
let touchStartX = 0;
let touchEndX = 0;
document.addEventListener('touchstart', (e) => {
touchStartX = e.changedTouches[0].screenX;
});
document.addEventListener('touchend', (e) => {
touchEndX = e.changedTouches[0].screenX;
const diff = touchStartX - touchEndX;
if (Math.abs(diff) > 50) {
if (diff > 0) {
nextSlide();
} else {
prevSlide();
}
}
});
// Initialize
updateSlide();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment