From 55c3ca1095eaac6b3f1bc4b1f72771dab9f2cccf Mon Sep 17 00:00:00 2001 From: Shayan Rais Date: Sun, 19 Apr 2026 11:27:50 +0500 Subject: [PATCH] presentation/learning-journey: insert slide 2 AI jargon word-cloud MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit New slide 2 "Jargon you'll hear" — 15 scattered pill-chips (vibe coding, agentic engineering, context engineering, context rot, dumb zone, hallucination prompt engineering, progressive disclosure, orchestration, token burn, context bloat, one shot AI slop, harness, MCP, hooks, compaction) with varied sizes, rotations, and 4 colors (blue/purple/ green/amber). Existing slides 2-38 renumbered to 3-39; all goToSlide targets and section banner comments updated accordingly. Total: 39 slides. Co-Authored-By: Claude --- presentation/learning-journey/index.html | 166 +++++++++++++++-------- 1 file changed, 106 insertions(+), 60 deletions(-) diff --git a/presentation/learning-journey/index.html b/presentation/learning-journey/index.html index b2d6c5b..ccf095d 100644 --- a/presentation/learning-journey/index.html +++ b/presentation/learning-journey/index.html @@ -151,9 +151,55 @@ - +
+

Jargon you'll hear

+

I'll unpack each of these as we go — for now, just let them wash over you.

+
+ + + vibe coding + + agentic engineering + + hallucination prompt engineering + + + context engineering + + context bloat + + progressive disclosure + + + context rot + + orchestration + + one shot AI slop + + + MCP + + dumb zone + + harness + + token burn + + + hooks + + compaction + +
+
+ + + + +
Boris Cherny slides showing the spectrum of Claude Code usage styles @@ -166,9 +212,9 @@
- + -
+

What is Claude Code?

Claude Code isn't just Claude. It's Claude (the model) wrapped in a harness with a set of tools — and that wrapper is what turns a chatbot into an agent.

@@ -196,9 +242,9 @@
- + -
+

Vibe Coding vs Agentic Engineering

@@ -265,9 +311,9 @@ todoapp/
- + -
+

What is Vibe Coding?

@@ -294,9 +340,9 @@ todoapp/
- + -
+

Good vs Bad Prompts

Even before you set up any structure, how you prompt matters. Specific beats vague. Context beats assumption.

@@ -330,41 +376,41 @@ todoapp/
- + -
+

Meet the Person

We're going to learn five concepts using one running example: a weather reporter agent that fetches Dubai's temperature and renders a weather card. Same person — five different angles.

-
+
1
-
👤 Agents — The Person
-
A specialist with a job title: the weather reporter
+
👤 Agents — The Person (job title: weather reporter)
+
A specialist hired for a specific role — same Claude, different hat
-
+
2
-
🎓 Skills — What the Person Knows
-
fetch temperature • render SVG card • write the script
+
🎓 Skills — What the Person Can Do
+
do reporting on weather • play a game • read a book
-
+
3
-
🧠 Context — The Person's Brain
-
finite working memory — ~1M tokens, resets each session
+
🧠 Context — The Person's Brain (storage — the 1M-token space)
+
where knowledge gets loaded in — resets each session
-
+
4
📋 CLAUDE.md — The Pocket Rulebook
standing instructions read at the start of every shift
-
+
5
🎼 Workflow — The Trigger
@@ -375,18 +421,18 @@ todoapp/
- + -
+
Topic 1

👤 Agents — The Weather Reporter

An agent is Claude playing a specific role. Meet the weather reporter — a specialist hired to fetch and report weather data for Dubai. Same Claude, different hat.

-
+

The Restaurant Kitchen

Think of it like this

@@ -409,7 +455,7 @@ todoapp/
-
+

Prompting vs. Agent — Side by Side

The difference in one picture: prompting is asking a stranger on the street; using an agent is asking your dedicated specialist.

@@ -450,7 +496,7 @@ todoapp/ -
+

Agents Get Their Own Brain

Tip from Thariq (Anthropic) — Apr 16, 2026

@@ -483,7 +529,7 @@ todoapp/
-
+

How to Create Your Own Agent

You don't write an agent from scratch — Claude helps you build one. Type /agents inside Claude Code and a guided menu opens.

@@ -526,7 +572,7 @@ todoapp/
-
+

Agent Config Fields

The config block at the top of an agent file controls its identity and capabilities. Here's what the real weather-agent.md uses:

@@ -570,18 +616,18 @@ todoapp/
- + -
+
Topic 2

🎓 Skills — What the Weather Reporter Knows

Skills are the specific things the reporter has been trained to do. Our reporter has two: fetch the data, and render it as a card.

-
+

The Training Manual

Think of it like this

@@ -608,7 +654,7 @@ todoapp/
-
+

When to Turn Something Into a Skill

Tip from Boris Cherny (creator of Claude Code) — Feb 1, 2026

@@ -645,7 +691,7 @@ todoapp/
-
+

Why Separate Agents and Skills?

@@ -671,7 +717,7 @@ todoapp/
-
+

How to Create Your Own Skill

Skills are plain markdown files. If you can write a recipe, you can write a skill.

@@ -724,7 +770,7 @@ Fetch the current temperature for Dubai, UAE.
-
+

Skill Config Fields

The small config block at the top of a SKILL.md (the "frontmatter") controls how the skill behaves:

@@ -760,18 +806,18 @@ Fetch the current temperature for Dubai, UAE.
- + -
+
Topic 3

🧠 Context — The Reporter's Brain

Now that you've met the reporter and know their skills, let's understand what they can actually hold in mind at once. Every agent — including the weather reporter — gets its own fresh brain.

-
+

Claude's Brain

Think of it like this

@@ -809,7 +855,7 @@ Fetch the current temperature for Dubai, UAE.
-
+

What Loads at Session Start

The moment you open Claude Code, certain things land in Claude's brain before you've typed a word. The rest waits in the wings — only loaded when you actually need it. This is called progressive disclosure.

Diagram showing what loads into Claude's context window at session start @@ -843,7 +889,7 @@ Fetch the current temperature for Dubai, UAE.
-
+

Keep the Brain Clear

The more stuff crammed into Claude's brain, the harder it is to focus on what matters. This is called context rot — performance drops as the brain gets crowded.

@@ -887,7 +933,7 @@ Fetch the current temperature for Dubai, UAE.
-
+

How to Manage Your Context

You can't create the context — it's just there, the moment you open a chat. But you can see how full it is, trim it down, or wipe it clean. Three commands give you full control.

@@ -928,18 +974,18 @@ Fetch the current temperature for Dubai, UAE.
- + -
+
Topic 4

📋 CLAUDE.md — The Reporter's Pocket Rulebook

The weather reporter consults this at the start of every shift — even though their brain resets overnight. It's the standing instructions pinned in that brain before you've said a word.

-
+

The Employee Handbook

Think of it like this

@@ -967,7 +1013,7 @@ This is the Q2 marketing campaign brief — targeting small business owners.
-
+

How to Create Your CLAUDE.md

You don't need to write CLAUDE.md by hand. Claude can look at your project and draft one for you.

@@ -1012,7 +1058,7 @@ open, edit, save # Tweak it like any doc<
-
+

Grow CLAUDE.md With Every Mistake

Tip from Boris Cherny (creator of Claude Code) — Feb 1, 2026

@@ -1049,7 +1095,7 @@ open, edit, save # Tweak it like any doc<
-
+

What Goes in CLAUDE.md

# CLAUDE.md @@ -1077,7 +1123,7 @@ This is a TodoApp with a FastAPI backend and React frontend.
-
+

How CLAUDE.md Loads

Claude Code uses two mechanisms to find CLAUDE.md files:

@@ -1106,18 +1152,18 @@ This is a TodoApp with a FastAPI backend and React frontend.
- + -
+
Topic 5

⚡ Commands — The Trigger

One word kicks off the whole chain. /weather-orchestrator → agent → skill → SVG card. Commands are the entry point into any workflow.

-
+

Commands — The Entry Point

Think of it like this

@@ -1161,7 +1207,7 @@ This is a TodoApp with a FastAPI backend and React frontend.
-
+

How to Create Your Own Command

Commands are markdown files too. If you can write a recipe, you can write a command.

@@ -1212,18 +1258,18 @@ This is a TodoApp with a FastAPI backend and React frontend.
- + -
+
Putting It All Together

🎼 Workflow — All Five Pieces Together

Watch the weather reporter example run from one keystroke to SVG card output. Five concepts, one orchestrated flow.

-
+

Command → Agent → Skill

This is the core architecture pattern of Claude Code workflows — demonstrated in this very repo by the weather example:

The Orchestration Flow @@ -1250,7 +1296,7 @@ This is a TodoApp with a FastAPI backend and React frontend.
-
+

Two Ways Skills Are Used

The weather workflow demonstrates both skill patterns in a single flow:

@@ -1273,7 +1319,7 @@ This is a TodoApp with a FastAPI backend and React frontend.
-
+

How to Wire Your Own Workflow

A workflow isn't a separate file type. It emerges when one command calls agents and skills in sequence.

@@ -1322,9 +1368,9 @@ This is a TodoApp with a FastAPI backend and React frontend.
- + -
+

Journey So Far

Five concepts, one running example

From meeting the weather reporter to wiring the full Command → Agent → Skill chain. The same five pieces compose every workflow you'll ever build.