From 9f78707d5175521d55be96daf046a453f70602df Mon Sep 17 00:00:00 2001 From: Shayan Rais Date: Fri, 24 Apr 2026 21:40:27 +0500 Subject: [PATCH] workflow added --- .../agents/presentation-learning-journey.md | 1 + .../index.html | 810 +----------------- .../{ => context}/context-window.jpeg | Bin .../assets/concepts/{ => context}/context.jpg | Bin 4 files changed, 48 insertions(+), 763 deletions(-) rename presentation/assets/concepts/{ => context}/context-window.jpeg (100%) rename presentation/assets/concepts/{ => context}/context.jpg (100%) diff --git a/.claude/agents/presentation-learning-journey.md b/.claude/agents/presentation-learning-journey.md index 21df218..f88b5bb 100644 --- a/.claude/agents/presentation-learning-journey.md +++ b/.claude/agents/presentation-learning-journey.md @@ -181,3 +181,4 @@ After completing changes, report to the user: - **2026-04-24 Skills emoji updated + 2 new slides inserted at 38-39 (63 → 65 slides)**: Edit 1 — slide 37's h1 emoji changed from `🎓` (graduation cap) to `🎯` (target) to match the Skills pillar-footer card emoji established on slide 14 and used across all 12 pillar footers. Edit 2 — new slide 38 ("Create your first skill", `data-level="skills"`) inserted with a `.two-col` layout: two `.col-card` divs (both green `#4caf50` border-left) for Method 1 (write by prompting) and Method 2 (use Anthropic's `skill-creator`), followed by an inline amber warning box (`background: #fff3e0; border-left: 4px solid #ff9800`) flagging the wrong-structure gotcha of Method 1. Edit 3 — new slide 39 ("Skill config fields with frontmatter", `data-level="skills"`) mirrors slide 29's agent field-table pattern exactly: 8 field rows using `.field-row` / `.field-name` / `.field-desc` / `.field-enforced` / `.pill-harness` / `.pill-prompt` CSS classes, italic intro sentence, and a centered `.fafafa` footnote callout for `description`. Old slides 38-63 renumbered to 40-65 via Python sentinel replacement (descending-order sentinel phase + resolve phase). **Redundancy flag**: old Skills section opener (was slide 39, now slide 41 — `data-level="skills"`, `section-slide` class, "Topic 2 — What the Weather Reporter Knows") is now downstream of the new teaching slides 38-39 which already fire `→ skills` earlier. Same pattern as the CLAUDE.md dual-fire situation at slides 33 and 52. Recommended: keep slide 41 as a breathing-space divider into the weather-reporter narrative arc; the journey bar will not re-fire (same level). Final section-divider positions: **Agents=23, Skills=38 (first skills data-level), Context=47, CLAUDE.md=52, Commands=58, Workflow=61**. Total slides: **65**. - **2026-04-24 context-section concept-intro enrichment (65 → 68 slides)**: (1) Green pill `✅ Fresh every chat` (bg `#2e7d32`) added to slide 41 as the first pill before the 2 existing red pills — visual order green/property first, red/pitfalls after. (2) New slide 42 ("Claude's Brain", `data-level="context"`) and slide 43 ("What Loads at Session Start", `data-level="context"`) inserted between slide 41 and the old Skills section opener (old 42 → 44). Both new slides pull content forward from the old deep-dive slides 49/50 (which become slides 51/52 after the +2 renumber). Both carry full pillar-footers with Context active. Renumber technique: Python sentinel with per-occurrence targeting — `data-slide="42" data-level="skills"` and `data-slide="43">` were each targeted individually before the bulk 44-66→46-68 sweep, because slides 42/43 now have two occurrences each (new context + old skills). The CSS rule `.slide[data-slide="1"]` creates a false-positive when counting `data-slide` occurrences via regex — use `Counter` + ignore the CSS line, or grep for `
` with 3 items). Yellow callout div (`background: #fff8e1; border-left: 4px solid #f9a825`) at bottom of right column ties the academic finding to the "dumb-zone problem" vocabulary already established. Image file did NOT exist at insertion time — placeholder path used; user must drop `lost-in-middle.png` into `presentation/assets/concepts/context/`. Renumber method: Python sentinel replacing `data-slide="44"` through `"68"` → `"45"` through `"69"`, with a first-occurrence restore for the new slide's own `"44"` sentinel. New section-divider positions: **agents=23 (unchanged), skills=45, context=51, claude-md=56, commands=62, workflow=65**. Total slides: **69**. +- **2026-04-24 mass deletion (slides 45-69) + single replacement + image relocation (69 → 45 slides)**: (1) Images `context-window.jpeg` and `context.jpg` moved from `presentation/assets/concepts/` to `presentation/assets/concepts/context/` alongside the already-resident `lost-in-the-middle.png`. All 5 `` references updated via sed (2 old-path `context-window.jpeg` refs, 2 old-path `context.jpg` refs, 1 `lost-in-middle.png` → `lost-in-the-middle.png` filename fix). (2) Slides 45-69 deleted (all 25 slides + their banner comments, lines 2289-3057 in 1-indexed) by slicing the lines array in Python and re-joining — the Python line-slice approach is the cleanest for deleting a contiguous range; no sentinel needed because no renumbering occurs within the retained block. (3) New slide 45 inserted in the same atomic write: `section-slide` with `data-level="workflow"`, h1 `📘 Workflow`, yellow pill `.claude/commands/`, green pills for Reproducible recipes / Same steps / Team-shareable, and a full pillar-footer with Workflows as the ONLY active card (all four others inactive). **Final state**: 45 slides, contiguous 1-45. data-level assignments: agents=23 (first), claude-md=33 (first), skills=38 (first), context=42 (first), workflow=45. Note: `commands` level is gone from data-level assignments (no remaining command-section slides). `LEVEL_LABELS` in JS still contains `'commands'` as a key — this is harmless (no slides will fire it) but should be removed in a future cleanup pass if desired. **Python line-slice pattern**: `before = lines[:del_start_0idx]`, `after = lines[del_end_0idx + 1:]`, new_content = join(before) + new_html + join(after). Atomic, no collision risk, trivially auditable. diff --git a/presentation/2026-04-25-gdg-kolachi-cli-claude-code-gemini/index.html b/presentation/2026-04-25-gdg-kolachi-cli-claude-code-gemini/index.html index 35b6445..52b35a7 100644 --- a/presentation/2026-04-25-gdg-kolachi-cli-claude-code-gemini/index.html +++ b/presentation/2026-04-25-gdg-kolachi-cli-claude-code-gemini/index.html @@ -2071,7 +2071,7 @@ todoapp/

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. If a thought isn't in the brain, Claude can't use it. Simple as that.

- Context window diagram showing how the 1M token limit is divided across system prompt, tools, files, and conversation + Context window diagram showing how the 1M token limit is divided across system prompt, tools, files, and conversation
💬 @@ -2144,7 +2144,7 @@ todoapp/

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 + Diagram showing what loads into Claude's context window at session start
📋 @@ -2221,7 +2221,7 @@ todoapp/
- Lost in the Middle paper illustration showing U-shaped attention curve across context positions + Lost in the Middle paper illustration showing U-shaped attention curve across context positions
@@ -2286,773 +2286,57 @@ 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

-

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

-
-
- 🌡️ -
- weather-fetcher - Knows exactly how to query Open-Meteo, extract the temperature value, and return it in the right format. This skill is preloaded into the agent's brain at startup. -
+ +
+
+

📘 Workflow

+
+ .claude/commands/
-
- 🖼️ -
- weather-svg-creator - Takes a temperature value and renders a visual SVG weather card. Writes the output file to orchestration-workflow/weather.svg. This skill is invoked directly by the command. -
+

Repeatable step-by-step recipes — the instruction manual that makes Claude run the same playbook every time.

+
+ ✅ Reproducible recipes + 🔁 Same steps, every run + 👥 Team-shareable via git
-

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:

-
-
- 🌡️ -
- Fetch Dubai's temperature - Same API, same parameters, same format every time. That's weather-fetcher. -
+
+
+ 🧑‍💼 + Agents + — the specialists + A dedicated Claude worker — own context, own tools, own focus. Each runs in isolation. + ✅ fresh working memory per run
-
- 🖼️ -
- Render the weather card - Same SVG template, same output path, same design every time. That's weather-svg-creator. -
+
+ 📝 + CLAUDE.md + — your memory + Knowledge you provide to the model. Read every session. Keep it under 200 lines. + ⚠️ 200-line problem
-
- 📝 -
- "Format my weekly update" - Same sections, same tone, same length every Monday. That's a skill waiting to be written. -
+
+ 🎯 + Skills + — the know-how + What the specialist (or Claude) can actually do. Loaded on demand — only when needed. + ✅ progressive disclosure +
+
+ 💭 + Context + — the working memory + What Claude holds in his head now — fresh every new chat. Finite budget; compact at ~50%. + ⚠️ dumb-zone problem +
+
+ 📘 + Workflows + — the instruction manual + Repeatable step-by-step recipes — like an AC install guide. Deterministic, reproducible. + ✅ reproducible recipes
-
-

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_2m from 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.

-
-
-
- 1 -
- Pick a repeated task - Something you explain to Claude more than once. "Fetch Dubai weather" is a perfect first skill. -
-
-
- 2 -
- Make a folder and a SKILL.md - Path: .claude/skills/weather-fetcher/SKILL.md. Or ask Claude: "Turn this into a skill." -
-
-
- 3 -
- Write the recipe in plain English - Same words you'd use to explain it to a coworker. Skills are instructions, not code. -
-
-
-
# File: .claude/skills/weather-fetcher/SKILL.md ---- -name: weather-fetcher -description: Fetch current temperature for Dubai from Open-Meteo API -user-invocable: false ---- - -Fetch the current temperature for Dubai, UAE. - -1. Call the Open-Meteo API: - https://api.open-meteo.com/v1/forecast - ?latitude=25.2048&longitude=55.2708¤t=temperature_2m - -2. Extract current.temperature_2m from the response - -3. Return: "The temperature in Dubai is {value}{unit}"
-
-

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:

-
-
- name - Display name and /slash-command. Defaults to directory name -
-
- description Recommended - What the skill does — shown in autocomplete, used for auto-discovery -
-
- user-invocable - Set false to hide from / menu — weather-fetcher uses this because it's agent-only -
-
- allowed-tools - Tools allowed without permission prompts when skill is active -
-
- model - Model to use: haiku, sonnet, or opus -
-
- context - Set to 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).

-
-
- - - - - - -
-
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

-

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.

-
- Context window diagram showing how the 1M token limit is divided across system prompt, tools, files, and conversation -

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:

-
-
- 💬 -
- Your messages - Every question, clarification, and follow-up -
-
-
- 📄 -
- Every file Claude opens - Read a 500-page PDF? All of it is in the brain now. -
-
-
- 🔧 -
- Every tool result - Web searches, command output, screenshots — all held in memory -
-
-
-
-

Two Things Every Non-Engineer Should Know

-

1. The brain is finite. It can hold about 1 million tokens — roughly 750,000 words, or a short novel. Big, but not infinite. 2. The brain empties at the end of every chat. When you start a new conversation, Claude remembers nothing from the last one unless you tell it again.

-
-
- - -
-

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 -
-
- 📋 -
- CLAUDE.md — full content - Standing instructions, every line. Always pinned in the brain at startup. -
-
-
- 🎓 -
- Skills — descriptions only - Claude knows which skills exist and what each does. At startup, Claude knows about weather-fetcher; the full content loads when the agent runs. -
-
-
- 👤 -
- Agents — descriptions only - The roster of specialists. The weather-agent's full system prompt loads when it's dispatched. -
-
-
-
-

The One-Liner

-

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.

-
-

Tip from Thariq (Anthropic) — Apr 16, 2026

-

"Every turn is a branching point." After Claude finishes a response, you don't have to just keep typing. You have five options — and four of them exist to keep the brain clear.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OptionWhen to use it
ContinueSame task, everything in the brain still matters
Rewind (tap Esc twice)Claude went down a wrong path — jump back and try again
/compactThe brain is bloated — summarize and keep going
/clear (fresh chat)Starting a truly new task — wipe the brain clean
SubagentNext step will make a mess — send a helper to do it in their own brain
-
-

Rule of Thumb

-

When you start a new task, start a new chat. Don't let yesterday's thinking clutter today's brain.

-
-
- - -
-

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.

-
-

The Commands

-

/context shows you how full the brain is. /compact summarizes it. /clear wipes it.

-
-
-
- 1 -
- Check how full the brain is — /context - Shows a breakdown of how many tokens are used and what's taking up space (system prompt, tools, files, conversation). -
-
-
- 2 -
- Trim or reset — /compact or /clear - /compact keeps a short summary so you can continue. /clear wipes everything for a truly fresh start. -
-
-
- 3 -
- Start the next task fresh - The brain is light again — re-state the goal, and Claude works without yesterday's clutter. -
-
-
-
# The three context commands -/context # Check how full the brain is right now -/compact # Summarize what's there and keep going on top -/clear # Wipe the brain — fresh chat, nothing remembered
-
-

Takeaway

-

Check first with /context. Trim with /compact. Reset with /clear when starting a new task.

-
-
- - - - - - -
-
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

-

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.

-
-

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:

-
# CLAUDE.md - -## About this project -This is the Q2 marketing campaign brief — targeting small business owners. - -## How I want you to talk to me -- Always explain technical terms in plain language -- Before you run any command, tell me what it does in one sentence -- If I ask for an opinion, give me one — don't hedge - -## House rules -- We say "clients" not "customers" -- Never edit files in the /archive folder -- Keep emails under 150 words
-
-

You Don't Have to Write It From Scratch

-

Claude can draft your first CLAUDE.md for you. The next slide shows how.

-
-
- - -
-

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.

-
-

The Command

-

Type /init inside Claude Code, in your project folder. Claude does the rest.

-
-
-
- 1 -
- Type /init in Claude Code - Make sure you're in your project folder. No other setup needed. -
-
-
- 2 -
- Claude reads your project - It looks at your files, folder names, and README to figure out what the project is about. -
-
-
- 3 -
- Claude drafts a starter CLAUDE.md - Saved to the root of your project. Open it and edit like any other document. -
-
-
-
-

Think of it like this

-

Running /init is like asking the new hire to read everything on the shared drive before you meet them — they walk in already knowing the project's shape, and they write up what they learned as a handbook for future Claude.

-
-
# The 60-second workflow -/init # Claude drafts the file -CLAUDE.md appears # In your project root -open, edit, save # Tweak it like any doc
-
-

Takeaway

-

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

-

"After every correction, end with: Update your CLAUDE.md so you don't make that mistake again. Claude is eerily good at writing rules for itself."

-
-

The CLAUDE.md isn't something you write once and forget. It's a living memory of every lesson you've ever had to teach Claude. The workflow:

-
-
- 1 -
- Claude makes a mistake - It uses the wrong tone, touches a file you didn't want touched, skips a step -
-
-
- 2 -
- You correct it - "Actually, we never write in all caps. And always confirm before sending." -
-
-
- 3 -
- You say: "update your CLAUDE.md so this doesn't happen again" - Claude writes the new rule for itself. Next conversation, it won't repeat the mistake. -
-
-
-
-

One Rule

-

Keep it short. Under 200 lines. Long CLAUDE.md files get ignored — same as a 50-page employee handbook nobody reads.

-
-
- - -
-

What Goes in CLAUDE.md

-
# CLAUDE.md - -## Project Overview -This is a TodoApp with a FastAPI backend and React frontend. - -## Key Commands -- npm run dev # Start frontend -- uvicorn main:app # Start backend -- pytest # Run tests - -## Architecture -- Routes follow the pattern in routes/todos.py -- Frontend components use Tailwind CSS -- Tests mirror the source tree: tests/test_*.py - -## Rules -- Always write tests for new endpoints -- Use the existing Sidebar component for navigation -- Keep CLAUDE.md under 200 lines
-
-

Keep It Short

-

Aim for under 200 lines. Files over 200 lines consume more context and may reduce adherence. Put detailed instructions in .claude/rules/ instead.

-
-
- - -
-

How CLAUDE.md Loads

-

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

-
-
-

Ancestor Loading (UP)

-

At startup, Claude walks upward from your current directory and loads every CLAUDE.md it finds.

-

Always loaded immediately.

-
-
-

Descendant Loading (DOWN)

-

CLAUDE.md files in subdirectories below you are loaded lazily — only when Claude reads files in those folders.

-

Loaded on demand.

-
-
-
# Example: running `claude` from /myapp -/myapp/ - CLAUDE.md # Loaded at startup (current dir) - frontend/ - CLAUDE.md # Loaded when you touch frontend/ files - backend/ - CLAUDE.md # Loaded when you touch backend/ files
-
-

Rules Directory

-

For topic-specific instructions, use .claude/rules/*.md. Each rule file can target specific file patterns using # Glob: pattern at the top — they only load when Claude works with matching files.

-
-
- - - - - - -
-
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

-

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 built-in commands in this presentation:

-
-
- 📋 -
- /init - Drafts a CLAUDE.md for your project (Topic 4) -
-
-
- 👤 -
- /agents - Opens the agent creator menu (Topic 1) -
-
-
- 🧠 -
- /context - Shows how full Claude's brain is right now (Topic 3) -
-
-
- 🧹 -
- /clear & /compact - Reset or summarize the brain (Topic 3) -
-
-
-
-

The Magic

-

You can write your own commands the same way. The next slide shows how.

-
-
- - -
-

How to Create Your Own Command

-

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

-
-

The File

-

Create .claude/commands/<your-command-name>.md. As soon as it's saved, /<your-command-name> appears in Claude Code's slash menu.

-
-
-
- 1 -
- Pick a workflow you trigger often - "Generate this week's status report." Anything you'd want one keystroke for. -
-
-
- 2 -
- Create the file - Path: .claude/commands/weather-orchestrator.md. The filename becomes the command name. -
-
-
- 3 -
- Write the playbook in plain English - Step-by-step what Claude should do — including which agents to dispatch and which skills to invoke. -
-
-
-
-

Think of it like this

-

A command is like a button on a coffee machine. One press, the machine grinds, brews, foams, pours. You don't think about the steps — you just want espresso. Slash commands are buttons you've labelled yourself.

-
-
# File: .claude/commands/weather-orchestrator.md ---- -description: Fetch weather data for Dubai and create an SVG weather card -model: haiku ---- - -1. Ask the user: Celsius or Fahrenheit? -2. Use the weather-agent to fetch Dubai's temperature -3. Use the weather-svg-creator skill to create an SVG card -4. Show the user the result
-
-

Takeaway

-

Commands are how you turn a multi-step prompt into a single keystroke that anyone on your team can run.

-
-
- - - - - - -
-
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 - - /weather-orchestrator COMMAND (entry point) - | - Step 1: Ask user C/F? - | - Step 2: Agent tool - | - v - weather-agent AGENT (specialist) - skill: weather-fetcher SKILL (preloaded training) - tools: WebFetch, Read - | - Returns: temp + unit - | - Step 3: Skill tool - | - v - weather-svg-creator SKILL (invoked directly) - | - Creates: weather.svg + output.md
-
- - -
-

Two Ways Skills Are Used

-

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

-
-
-

Pattern 1: Agent Skill (Preloaded)

-

weather-fetcher is listed in the agent's skills: field.

-

Its full content is injected into the agent's context at startup. The agent reads it like a reference manual.

-
# In weather-agent.md -skills: - - weather-fetcher
-
-
-

Pattern 2: Direct Invocation

-

weather-svg-creator is called directly by the command via the Skill tool.

-

It runs independently in the command's context, not inside any agent.

-
# In the command prompt -Skill(skill: "weather-svg-creator")
-
-
-
- - -
-

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.

-
-

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.

-
-
-
- 1 -
- Write the command (entry point) - .claude/commands/weather-orchestrator.md — the playbook the user types. -
-
-
- 2 -
- Write the agent and its preloaded skill - .claude/agents/weather-agent.md with skills: [weather-fetcher] in its config — the specialist + their training. -
-
-
- 3 -
- Write the output skill - .claude/skills/weather-svg-creator/SKILL.md — invoked directly by the command after the agent returns. -
-
-
-
-

Think of it like this

-

The workflow is the relay race. The command is the starter pistol. The agent is runner one (fetches the data, hands the baton back). The skill is runner two (turns the data into a visual). You don't run the race — you just point and say "go."

-
-
# The weather workflow — three files, one keystroke -.claude/commands/weather-orchestrator.md # Entry point -.claude/agents/weather-agent.md # Specialist + skill -.claude/skills/weather-fetcher/SKILL.md # Preloaded into agent -.claude/skills/weather-svg-creator/SKILL.md # Invoked by command - -# User types one thing: -/weather-orchestrator
-
-

Takeaway

-

Every workflow you'll ever build follows this same shape: Command at the top, Agent + Skill in the middle, Skill at the end. Once you've wired one, the rest are variations on the theme.

-
-
- - - - -
-

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.

-
-

👤 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

diff --git a/presentation/assets/concepts/context-window.jpeg b/presentation/assets/concepts/context/context-window.jpeg similarity index 100% rename from presentation/assets/concepts/context-window.jpeg rename to presentation/assets/concepts/context/context-window.jpeg diff --git a/presentation/assets/concepts/context.jpg b/presentation/assets/concepts/context/context.jpg similarity index 100% rename from presentation/assets/concepts/context.jpg rename to presentation/assets/concepts/context/context.jpg