claude-code-best-practice/!/video-presentation-transcript/1-video-workflow.md

Video 1: From Vibe Coding to Agentic Engineering — Workflows with Claude Code

Total duration: ~5 minutes

---

INTRO — The Problem (0:00 – 0:45)

• "If you've just started with Claude Code, chances are you're doing vibe coding — typing prompts, getting results, repeating. That works, but you're only using a fraction of what Claude Code can do."
• "This repo is a curated collection of best practices that takes you from vibe coding to agentic engineering — where Claude doesn't just respond to you, it runs workflows for you."
• "In this first video, I'm covering the foundation: Commands, Agents, and Skills — and how they chain together into repeatable workflows."

---

PART 1 — The Ad-Hoc Way (0:45 – 2:00)

Demo: Vibe coding approach

• Open a fresh Claude Code terminal
• Type: "What is the weather in Dubai? Write it to an output file and create an SVG card for it."
• Show the result — it works, but point out:
  • The SVG design is different every time (random colors, layout, fonts)
  • You had to sit and watch it work
  • If you run it again tomorrow, you'll get a completely different looking card
• Open a second terminal, run the same prompt again
  • Show the SVG side-by-side — they look different
• "This is the problem with vibe coding. It works once. But it's not repeatable. It's not a workflow you can trust."

---

PART 2 — The Workflow Way (2:00 – 3:15)

Demo: /weather-orchestrator command

• "Now let me show you the same task, but as a workflow."
• Type: /weather-orchestrator
• Walk through what happens on screen:
  1. It asks you Celsius or Fahrenheit (structured user interaction)
  2. It spawns a weather-agent to fetch the temperature (you see the green agent in the terminal)
  3. It invokes a skill to create the SVG card
  4. Output: orchestration-workflow/weather.svg + orchestration-workflow/output.md
• "Run it again — same SVG layout, same file structure, same clean result. Every time."
• "You can kick this off and walk away. It runs autonomously."

---

PART 3 — How It Works: Command → Agent → Skill (3:15 – 4:30)

Explain the three building blocks

Commands (.claude/commands/)

• "A command is the entry point — like a script. It's a markdown file that tells Claude what steps to follow."
• "Our weather-orchestrator is the conductor. It asks the user a question, calls an agent, then calls a skill."
• Commands live in .claude/commands/ and show up as /slash-commands

Agents (.claude/agents/)

• "An agent is a specialized worker. Our weather-agent has one job: fetch the temperature."
• "It has a preloaded skill called weather-fetcher — that skill is injected into the agent's context at startup, so it knows exactly which API to call and how to parse the response."
• Agents have their own tools, models, and permissions. They're isolated workers.

Skills (.claude/skills/)

• "A skill is a reusable set of instructions. Think of it as a recipe."
• "We have two skill patterns here:"
  • Agent skill (preloaded): weather-fetcher is baked into the agent — it's domain knowledge
  • Invoked skill: weather-svg-creator is called independently via the Skill tool — it creates the SVG card
• Skills can be background knowledge OR standalone actions

Flow Diagram (optionally show on screen)

/weather-orchestrator (Command)
    → AskUser: C° or F°?
    → weather-agent (Agent + weather-fetcher skill)
    → weather-svg-creator (Skill)
    → Output: weather.svg + output.md

---

PART 4 — Why This Matters / Wrap-up (4:30 – 5:00)

• "The difference between vibe coding and agentic engineering is structure."
  • Vibe coding: you type, you hope, you get something.
  • Agentic engineering: you define a workflow once, and it runs the same way every time.
• "Commands, Agents, and Skills are the three building blocks. Once you understand these, you can build any workflow."
• "This repo has more patterns — hooks, multi-agent teams, CLAUDE.md configuration — we'll cover those in upcoming videos."
• "Link to the repo is in the description. Star it, clone it, and start building your own workflows."

---

Quick Reference

Concept	Location	Purpose
Command	.claude/commands/	Entry point, orchestration, /slash-command
Agent	.claude/agents/	Specialized worker with own tools & model
Skill	.claude/skills/	Reusable instructions (preloaded or invoked)