The Learning Journey
-Six Topics, One Continuous Arc
-Built from the inside out: what Claude sees, what it always knows, who it becomes, what it's trained to do, how you trigger it, and how it all wires together.
-
+ + There is no single “correct” way. But there are patterns worth understanding. +
🧠 Context (What Claude Sees)
-Before anything else — before agents, before skills — there's Claude's brain. Everything Claude can see, remember, and reason about right now lives in that brain. If it's not in there, Claude doesn't know about it.
+From Vibe Coding to Agentic Engineering
+Most people start by describing what they want in natural language. That works — but it's only the beginning. The next level is giving Claude a structure so it behaves the same way every time.
+Before — Vibe Coding
+Plain folder. Claude starts from zero every conversation. No memory, no structure, no specialist roles.
+After — Agentic Engineering
+Structure added. Claude walks in knowing the rules, the specialists, and the playbooks.
+The Shift
+You stop describing what you want every time and start configuring how Claude should behave. This session teaches you the five pieces that make the "After" column work.
+What is Vibe Coding?
+The Brilliant but Forgetful Stranger
+Claude is like a brilliant stranger you meet at a coffee shop — incredibly capable, but they know nothing about you, your project, or your preferences. Every conversation, you're re-introducing yourself. Vibe coding is just talking to this stranger and hoping they get it right.
+Vibe Coding (ad-hoc)
+"Write me a weather report for Dubai."
+No source specified. No format agreed. No memory of last time. The output varies every run.
+Unpredictable. Hard to share. Hard to repeat.
+Agentic Engineering (structured)
+"/weather-orchestrator"
One keystroke. Claude knows the source (Open-Meteo), the format (SVG card), the agent (weather-reporter).
+Repeatable. Shareable. Same every time.
+Good vs Bad Prompts
+Even before you set up any structure, how you prompt matters. Specific beats vague. Context beats assumption.
+Weak Prompt
+"Give me the weather."
+Which city? Celsius or Fahrenheit? From a live API or training data? Claude guesses.
+Strong Prompt
+"Fetch the current temperature for Dubai from Open-Meteo and return it in Celsius."
+Source named. Location named. Unit specified. No guessing needed.
+Weak Prompt
+"Make this better."
+Better how? Shorter? More formal? Better structured? Claude will pick one at random.
+Strong Prompt
+"Rewrite this in a warmer, less formal tone. Keep it under 100 words."
+Tone named. Length constrained. Unambiguous.
+But Here's the Bigger Move
+You can encode good prompts permanently so you never have to write them again. That's what the next five topics are about.
+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.
+👤 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
+Without an agent, you walk into a random kitchen and shout "make me pasta!" — whoever happens to hear you might boil instant noodles or make a five-course Italian meal. With an agent, you're walking up to a specific person with a specific job title. The Italian chef makes pasta the Italian-chef way. Every time.
+Plain Prompting (asking a stranger)
+You ask Claude "What's the weather in Dubai?"
+It might guess from training data, search the web, or make something up.
+You don't know what it'll do.
+With an Agent (your specialist)
+The weather-agent has a clear job description:
"Always check the Open-Meteo weather service. Always return temperature in a clean, consistent format."
+Same question, same approach, every time.
+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.
+| + | Prompting (stranger) | +Agent (specialist) | +
|---|---|---|
| Who answers | +Whoever happens to be there | +The person you hired for this exact job | +
| Source of truth | +Could be anywhere | +Always the official Open-Meteo weather service | +
| Format | +Whatever comes out | +Clean, consistent temperature + unit | +
| Twice in a row? | +Different each time | +Same method, same shape | +
Takeaway
+Agents don't make Claude smarter — they make it predictable. Same question → same approach → same quality. That's what you need for anything you'll do more than once.
+Agents Get Their Own Brain
+Tip from Thariq (Anthropic) — Apr 16, 2026
+"When Claude spawns an agent, that agent gets its own fresh brain. It can do as much work as it needs, then synthesize its results — only the final report comes back to you."
+This connects directly to the weather reporter: the weather-agent works in its own brain — all that web fetching, JSON parsing, and failed attempts stay out of yours. You just get the temperature back.
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.
The Command
+Type /agents in Claude Code. A menu appears with your existing agents and an option to create a new one.
/agents
+ A menu opens listing your existing agents (including weather-agent) plus "Create new agent".
+ .claude/agents/weather-agent.md — job description, allowed tools, model. Edit it like any document.
+ Think of it like this
+Creating an agent is like writing a job description for a new hire. You say what the role is, what tools they get, and how they should behave. Claude drafts the JD; you review and adjust.
+Takeaway
+Agents are just text files. Anyone on your team can create, share, or edit one. No coding required.
+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:
weather-agent
+ "PROACTIVELY" for auto-invocation
+ haiku, sonnet, opus, or inherit (default). weather-agent uses sonnet
+ WebFetch, Read, Write, etc.
+ weather-fetcher
+ 5
+ user, project, or local. weather-agent uses project
+ green
+ The Key Field for This Workshop
+The skills: field is what makes the weather-agent special. It preloads weather-fetcher directly into the agent's brain at startup — before the agent has received a single instruction. The agent doesn't need to be told how to fetch weather; it already knows.
🎓 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
+When someone joins your team, they have a role (agent), but they also go through specific training modules — how to use the CRM, how to write a proposal, how to run a standup. Each training module is a skill.
+The Weather Reporter's Two Skills
+orchestration-workflow/weather.svg. This skill is invoked directly by the command.
+ Each skill has its own knowledge and methods. The reporter uses the right skill for the right step. Claude works the same way.
+When to Turn Something Into a Skill
+Tip from Boris Cherny (creator of Claude Code) — Feb 1, 2026
+"If you do something more than once a day, turn it into a skill."
+The rule is simple: anything you're explaining to Claude over and over is a skill waiting to be written down. The weather reporter's skills are a perfect example:
+weather-fetcher.
+ weather-svg-creator.
+ Takeaway
+Skills are how repetition becomes reliability. Write it down once, and Claude does it the same way forever — or until you update the skill.
+Why Separate Agents and Skills?
+Agent = The Person
+The weather-agent is the person with the job title "Weather Reporter".
It defines the role and behavior: use Open-Meteo, return temperature, track history in memory.
+Skill = The Training
+The weather-fetcher skill is the specific training on how to fetch weather data.
It contains exact instructions:
+-
+
- Call this specific API URL +
- Extract
current.temperature_2mfrom the response
+ - Return value + unit in this exact format +
The Power
+One agent can have multiple skills, and one skill can be used by multiple agents. Skills are reusable building blocks. Agents are the people who use them.
+How to Create Your Own Skill
+Skills are plain markdown files. If you can write a recipe, you can write a skill.
+The File
+Create .claude/skills/<your-skill-name>/SKILL.md in your project. That's it.
.claude/skills/weather-fetcher/SKILL.md. Or ask Claude: "Turn this into a skill."
+ Takeaway
+The skill contains instructions, not code. It tells Claude how to do something using its existing tools.
+Skill Config Fields
+The small config block at the top of a SKILL.md (the "frontmatter") controls how the skill behaves:
+/slash-command. Defaults to directory name
+ false to hide from / menu — weather-fetcher uses this because it's agent-only
+ haiku, sonnet, or opus
+ fork to run in isolated subagent context
+ Two Ways to Use Skills
+User-invocable: appears in / menu, user runs it directly (like weather-svg-creator). Agent-preloaded: set user-invocable: false, then list it in an agent's skills: field — it becomes domain knowledge injected into that agent (like weather-fetcher).
🧠 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
-Imagine Claude has a brain that holds everything it's aware of right now — your question, every file it's opened, every tool result, every word it's said back to you. Inside that brain is a small working area (picture a desk) where the actual thinking happens. If a thought isn't in the brain, Claude can't use it. Simple as that.
+Imagine Claude has a brain that holds everything it's aware of right now — your question, every file it's opened, every tool result, every word it's said back to you. If a thought isn't in the brain, Claude can't use it. Simple as that.
- Everything you give Claude in a conversation lands in its brain:
+When the weather-agent is dispatched, it gets its own fresh brain — and weather-fetcher is pinned into it at startup via the skills: field. Everything you give Claude in a conversation lands in its brain:
Two Things Every Non-Engineer Should Know
@@ -212,53 +746,42 @@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.
-
+
weather-fetcher; the full content loads when the agent runs.
The One-Liner
-Only the descriptions of skills and agents are loaded at startup — the rest is fetched on-demand. That's progressive disclosure. MCPs work the same way when set up for deferred loading.
-Why It Matters
-The brain has a fixed budget (~1M tokens). Loading every skill, agent, and external tool upfront would burn the budget before you've typed a word. Progressive disclosure keeps the brain light. Run /context any time to see exactly what's currently loaded.
Only descriptions of skills and agents are loaded at startup — the rest is fetched on-demand. That's progressive disclosure. It keeps the brain light.
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.
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.
Think of it like this
-/context is checking how cluttered the desk is. /compact is filing the paperwork into a one-page summary. /clear is walking the assistant out of the room and back in for a fresh one. Same person, same skills — just a tidier workspace.
📋 CLAUDE.md (Standing Instructions)
-If context is Claude's brain, CLAUDE.md is the standing instructions pinned in that brain at the start of every chat — rules Claude has memorized before you've said a word.
📋 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
Imagine hiring a brilliant new assistant every single morning — someone who forgets everything at 5pm. You'd get tired of re-explaining "we say clients, not customers" and "always CC my manager" over and over. So you pin those rules into their brain before the day starts. That's CLAUDE.md: a short list of standing instructions Claude reads first, every time.
It's just a plain-text file at the top of your project. Here's a CLAUDE.md a non-engineer might write:
+For the weather reporter, CLAUDE.md might contain: "Always report in Celsius unless asked. Always cite Open-Meteo as the source." Here's a non-technical example:
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.
Takeaway
-You'll keep improving it over time (Boris's tip on the next slide). But /init gets you to a working draft in under a minute.
You'll keep improving it over time. But /init gets you to a working draft in under a minute.
Grow CLAUDE.md With Every Mistake
Tip from Boris Cherny (creator of Claude Code) — Feb 1, 2026
@@ -467,8 +986,8 @@ open, edit, save # Tweak it like any doc<What Goes in CLAUDE.md
How CLAUDE.md Loads
Claude Code uses two mechanisms to find CLAUDE.md files:
👤 Agents (The Specialist)
-An agent is Claude playing a specific role, with a specific job title — a weather reporter, a copy editor, a research analyst. Same Claude, different hat.
-The Restaurant Kitchen
-Think of it like this
-Without an agent, you walk into a random kitchen and shout "make me pasta!" — whoever happens to hear you might boil instant noodles or make a five-course Italian meal. With an agent, you're walking up to a specific person with a specific job title. The Italian chef makes pasta the Italian-chef way. Every time.
-Plain Prompting (asking a stranger)
-You ask Claude "What's the weather in Dubai?"
-It might guess from its training data, search the web, or make something up.
-You don't know what it'll do.
-With an Agent (your specialist)
-A weather-agent has a clear job description:
"Always check the official Open-Meteo weather service. Always return the temperature in a clean, consistent format."
-Same question, same approach, every time.
-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.
-| - | Prompting (stranger) | -Agent (specialist) | -
|---|---|---|
| Who answers | -Whoever happens to be there | -The person you hired for this exact job | -
| Source of truth | -Could be anywhere | -Always the official weather service | -
| Format | -Whatever comes out | -Clean, consistent temperature + unit | -
| Twice in a row? | -Different each time | -Same method, same shape | -
Takeaway
-Agents don't make Claude smarter — they make it predictable. Same question → same approach → same quality. That's what you need for anything you'll do more than once.
-Agents Get Their Own Brain
-Tip from Thariq (Anthropic) — Apr 16, 2026
-"When Claude spawns an agent, that agent gets its own fresh brain. It can do as much work as it needs, then synthesize its results — only the final report comes back to you."
-This is quietly one of the most useful things about agents, and it connects directly to what we learned about context:
-How to Use It
-Just ask. "Spin up an agent to read through these ten PDFs and summarize them." Claude will dispatch a specialist, they'll churn through the work in their own brain, and come back with just the summary.
-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.
The Command
-Type /agents in Claude Code. A menu appears with your existing agents and an option to create a new one.
/agents
- A menu opens listing your existing agents plus "Create new agent".
- Think of it like this
-Creating an agent is like writing a job description for a new hire. You say what the role is, what tools they get, and how they should behave. Claude drafts the JD; you review and adjust.
-Takeaway
-Agents are just text files. Anyone on your team can create, share, or edit one. No coding required.
-Agent Config Fields
-The config block at the top of an agent file controls its identity and capabilities:
-"PROACTIVELY" for auto-invocation
- haiku, sonnet, opus, or inherit (default)
- user, project, or local
- red, blue, green, etc.
- 🎓 Skills (The Training)
-If an agent is a person with a job title, a skill is a specific thing they've been trained to do — a certification, a how-to, a recipe.
-The Training Manual
-Think of it like this
-When someone joins your team, they have a role (agent), but they also go through specific training modules — how to use the CRM, how to write a proposal, how to run a standup. Each training module is a skill.
-A Real Person Example
-Shayan has many skills:
-Each skill has its own knowledge and methods. Shayan uses the right skill for the right task. Claude works the same way.
-When to Turn Something Into a Skill
-Tip from Boris Cherny (creator of Claude Code) — Feb 1, 2026
-"If you do something more than once a day, turn it into a skill."
-The rule is simple: anything you're explaining to Claude over and over is a skill waiting to be written down. A few examples from real teams:
-Takeaway
-Skills are how repetition becomes reliability. Write it down once, and Claude does it the same way forever — or until you update the skill.
-Why Separate Agents and Skills?
-Agent = The Person
-The weather-agent is the person with the job title "Weather Reporter".
It defines the role and behavior.
-Skill = The Training
-The weather-fetcher skill is the specific training on how to fetch weather data.
It contains exact instructions:
--
-
- Go to this specific weather service -
- Read the temperature from this specific place -
- Return it in this specific format -
The Power
-One agent can have multiple skills, and one skill can be used by multiple agents. Skills are reusable building blocks. Agents are the people who use them.
-How to Create Your Own Skill
-Skills don't have a slash-command creator — they're plain markdown files you create directly. The pattern is simple enough that you can write your first one in a minute.
-The File
-Create .claude/skills/<your-skill-name>/SKILL.md in your project. That's it.
.claude/skills/weekly-update/SKILL.md. Or ask Claude: "Turn this into a skill called weekly-update."
- Think of it like this
-Writing a skill is like writing a page in a recipe book. Title at the top, ingredients, steps. Anyone on the team can open it and follow along — Claude included.
-Takeaway
-The skill contains instructions, not code. It tells Claude how to do something using its existing tools. The next slide shows the small config block at the top.
-Skill Config Fields
-The small config block at the top of a SKILL.md (the "frontmatter") controls how the skill behaves:
-/slash-command. Defaults to directory name
- false to hide from / menu — becomes background knowledge only
- haiku, sonnet, or opus
- fork to run in isolated subagent context
- Two Ways to Use Skills
-User-invocable: appears in / menu, user runs it directly. Agent-preloaded: set user-invocable: false, then list it in an agent's skills: field — it becomes domain knowledge injected into that agent.
⚡ Commands (Your Shortcuts)
-If CLAUDE.md is what Claude always knows, a command is what Claude does when you press one specific button. Slash commands turn a multi-step workflow into a single keystroke.
⚡ 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
If agents are employees and skills are their training, a command is the manager's playbook — "when someone asks for a weather report, first ask them Celsius or Fahrenheit, then dispatch the weather team, then create the visual."
You've already seen five built-in commands in this presentation:
+You've already seen built-in commands in this presentation:
/init
- Drafts a CLAUDE.md for your project (Topic 2)
+ Drafts a CLAUDE.md for your project (Topic 4)
/agents
- Opens the agent creator menu (Topic 3)
+ Opens the agent creator menu (Topic 1)
/context
- Shows how full Claude's brain is right now (Topic 1)
+ Shows how full Claude's brain is right now (Topic 3)
/clear & /compact
- Reset or summarize the brain (Topic 1)
+ Reset or summarize the brain (Topic 3)
How to Create Your Own Command
Commands are markdown files too. If you can write a recipe, you can write a command.
.claude/commands/status-report.md. The filename becomes the command name.
+ Path: .claude/commands/weather-orchestrator.md. The filename becomes the command name.
🎼 Workflow (How They All Fit)
-Five pieces, one orchestrated flow: a command kicks it off, an agent does the work using its preloaded skill, then another skill takes the result and turns it into output.
+ +🎼 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:
Two Ways Skills Are Used
The weather workflow demonstrates both skill patterns in a single flow:
How to Wire Your Own Workflow
-A workflow isn't a separate file type. It emerges when one command calls one or more agents and skills in sequence. Here's how the weather workflow in this repo wires itself together — your own can follow the same shape.
+A workflow isn't a separate file type. It emerges when one command calls agents and skills in sequence.
The Recipe
One command at the top. One agent with a skill preloaded for fetching. One skill at the end for output. Wire them in the command file.
@@ -1139,12 +1259,20 @@ To fetch the current temperature for Dubai:Journey So Far
-Six topics, one continuous arc
-From understanding Claude's brain to wiring a complete Command → Agent → Skill workflow. The same six pieces compose every workflow you'll ever build.
-The learning continues — hooks, MCP servers, settings, and more.
+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.
+👤 Agents — the specialist with a job title
+🎓 Skills — the training they carry
+🧠 Context — the brain that resets each session
+📋 CLAUDE.md — the pocket rulebook that survives resets
+⚡ Commands & 🎼 Workflow — the trigger that wires it all
+github.com/shanraisshan/claude-code-best-practice