diff --git a/!/video-presentation-transcript/1-video-workflow.html b/!/video-presentation-transcript/1-video-workflow.html
new file mode 100644
index 0000000..21cb1ae
--- /dev/null
+++ b/!/video-presentation-transcript/1-video-workflow.html
@@ -0,0 +1,584 @@
+
+
+
+
+
+
+ Claude Code Workflows — Best Practice
+
+
+
+
+
+
+
+
+ Pro
+ High
+ Med
+ Low
+
+
+ Current = Low
+
+
+
+
+
+
+
+
+
+
+
+
Claude Code Workflows - Best Practice
+
From Vibe Coding to Agentic Engineering
+
Shayan Rais
+
+
+
+
+
+
+
+
+
Intro — 0:00
+
The Problem
+
You're doing vibe coding — and only using a fraction of what Claude Code can do.
+
+
+
+
+
Vibe Coding vs Agentic Engineering
+
+
+
Vibe Coding
+
Type prompts, get results, repeat.
+
It works — but Claude is just responding to you.
+
No structure. No repeatability. No workflow.
+
You're always in the loop. Claude never runs on its own.
+
+
+
Agentic Engineering
+
Define a workflow once.
+
Claude runs it for you — every time, the same way.
+
Commands, Agents, and Skills chain together.
+
You kick it off and walk away. Claude handles the rest.
+
+
+
+
This Video
+
Covers the foundation: Commands, Agents, and Skills — and how they chain together into repeatable workflows.
+
+
+
+
+
+
What We'll Cover
+
+
1The Ad-Hoc Way (0:45)
+
2The Workflow Way (2:00)
+
3How It Works (3:15)
+
4Why This Matters (4:30)
+
+
+
Demo Project
+
We'll use the weather workflow from this repo as our running example throughout the video.
+
+
+
+
+
+
+
+
+
+
Part 1 — 0:45
+
The Ad-Hoc Way
+
Vibe coding the weather task — it works once, but is it a workflow you can trust?
+
+
+
+
+
The Inconsistency Problem
+
+
The Prompt
+
Type into a fresh Claude Code terminal:
+
+
> What is the weather in Dubai? Write it to an output file and create an SVG card for it.
+
+
+
Run 1 — SVG Result
+
Blue gradient background
+
Large serif font, centered layout
+
Output saved to weather.svg
+
Looks fine... until you run it again.
+
+
+
Run 2 — SVG Result
+
Orange card-style background
+
Small sans-serif, left-aligned layout
+
Output saved to output/card.svg
+
Different design. Different file path. Every time.
+
+
+
+
The Vibe Coding Problem
+
It works once. But it's not repeatable. It's not a workflow you can trust. You had to sit and watch it work — and you'll get a completely different result tomorrow.
+
+
+
+
+
+
+
+
+
+
Part 2 — 2:00
+
The Workflow Way
+
The same task — but as a repeatable, autonomous workflow.
+
+
+
+
+
/weather-orchestrator
+
+
The Command
+
Instead of a freeform prompt, type a slash command:
+
+
> /weather-orchestrator
+
What Happens on Screen
+
+
1️⃣
It asks you: Celsius or Fahrenheit?Structured user interaction — not freeform guessing
+
2️⃣
It spawns a weather-agentYou see the green agent indicator in the terminal — a dedicated worker
+
3️⃣
It invokes the SVG skillweather-svg-creator creates a consistent card layout
+
4️⃣
Output: same files, same layout, every timeorchestration-workflow/weather.svg + orchestration-workflow/output.md
+
+
+
Run it again tomorrow
+
Same SVG layout. Same file structure. Same clean result. You can kick this off and walk away — it runs autonomously.
+
+
+
+
+
+
+
+
+
+
Part 3 — 3:15
+
How It Works
+
Command → Agent → Skill — the three building blocks.
+
+
+
+
+
Command → Agent → Skill
+
The weather workflow chains three building blocks together:
The entry point — the conductor. Asks the user a question, calls an agent, then calls a skill.
+
+
+
Agent
+
A specialized worker with one job: fetch the temperature. Has a preloaded skill for API knowledge.
+
+
+
Agent Skill (preloaded)
+
weather-fetcher is baked into the agent at startup — domain knowledge about which API to call.
+
+
+
Invoked Skill
+
weather-svg-creator is called independently via the Skill tool — creates a consistent SVG card.
+
+
+
+
+
+
+
Building Block 1: Commands
+
+
What Is a Command?
+
A command is the entry point — like a script. It's a markdown file that tells Claude what steps to follow. Think of it as the conductor.
+
+
# .claude/commands/weather-orchestrator.md
+---
+description: Fetch weather and create an SVG card
+---
+
+# Weather Orchestrator
+
+1. Ask the user: Celsius or Fahrenheit? (AskUserQuestion)
+2. Invoke weather-agent to fetch the temperature
+ - Task(subagent_type="weather-agent", ...)
+3. Invoke weather-svg-creator skill with the result
+ - Skill("weather-svg-creator", ...)
+4. Confirm output files are written
+
How to Use
+
+
📁
Location.claude/commands/ — one .md file per command
+
⚙
InvocationShows up as a /slash-command in your terminal
+
+
+
+
+
+
Building Block 2: Agents
+
+
What Is an Agent?
+
An agent is a specialized worker. Our weather-agent has one job: fetch the temperature. It has its own tools, model, and permissions — an isolated worker.
+
+
# .claude/agents/weather-agent.md
+---
+name: weather-agent
+description: Fetches weather data using wttr.in API
+tools: Bash, WebFetch
+model: haiku
+skills:
+ - weather-fetcher
+---
+You are a weather data fetcher.
+Use the weather-fetcher skill for API details.
+Return the temperature and conditions only.
+
Key Properties
+
+
🔧
Isolated contextRuns independently, returns a result, context is discarded
+
📚
Preloaded skillsweather-fetcher is injected at startup — it already knows the API
+
+
+
+
+
+
Building Block 3: Skills
+
+
What Is a Skill?
+
A skill is a reusable set of instructions. Think of it as a recipe. Skills can be background knowledge or standalone actions.
+
+
+
+
Agent Skill (Preloaded)
+
weather-fetcher is baked into the weather-agent.
+
It's domain knowledge — which API endpoint to call, how to parse the JSON response.
+
skills:
+ - weather-fetcher
+
+
+
Invoked Skill (Standalone)
+
weather-svg-creator is called via the Skill tool.
+
It creates the SVG card with a consistent template — same layout every time.
+
Skill("weather-svg-creator", ...)
+
+
+
+
Location
+
Skills live in .claude/skills/<name>/SKILL.md
+
+
+
+
+
+
+
+
+
+
Part 4 — 4:30
+
Why This Matters
+
The difference between vibe coding and agentic engineering is structure.
+
+
+
+
+
Structure Is the Difference
+
+
+
Vibe Coding
+
You type.
+
You hope.
+
You get something.
+
Inconsistent. You're always in the loop. Doesn't scale.
+
+
+
Agentic Engineering
+
You define a workflow once.
+
It runs the same way every time.
+
You kick it off and walk away.
+
Consistent. Autonomous. Repeatable. Trustworthy.
+
+
+
+
The Building Blocks
+
Commands, Agents, and Skills are the three building blocks. Once you understand these, you can build any workflow.
+
+
+
+
+
+
What's Next
+
This repo has more patterns — we'll cover them in upcoming videos:
+
+
🔗
HooksCustom scripts at lifecycle events — PreToolUse, PostToolUse, Stop, and more
+
👥
Multi-Agent TeamsCommands that orchestrate multiple specialized agents working in parallel
+
📋
CLAUDE.md ConfigurationProject memory, path-scoped rules, and keeping instructions under 150 lines
+
🔧
MCP ServersConnect Claude to databases, browsers, and external APIs
+
+
+
Get Started
+
Link 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)
+
+
+
+
+
+
Two Skill Patterns
+
Preloaded — baked into agent via skills: frontmatter
+
Invoked — called via Skill() tool at runtime
+
+
+
The Chain
+
/command → orchestrates
+
agent + preloaded skill → executes
+
invoked skill → produces output
+
+
+
+
+
+
+
+
+
+
Thank You!
+
Questions?
+
github.com/shanraisshan/claude-code-best-practice
+
+
+
+
+
+
+
+
+
+
+
+
1 / --
+
←→ or Space to navigate
+
+
+
+
diff --git a/!/video-presentation-transcript/1-video-workflow.md b/!/video-presentation-transcript/1-video-workflow.md
new file mode 100644
index 0000000..baf02b9
--- /dev/null
+++ b/!/video-presentation-transcript/1-video-workflow.md
@@ -0,0 +1,100 @@
+# 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) |
diff --git a/.claude/agents/presentation-curator.md b/.claude/agents/presentation-curator.md
index 8c611b7..1fb0397 100644
--- a/.claude/agents/presentation-curator.md
+++ b/.claude/agents/presentation-curator.md
@@ -23,8 +23,8 @@ Apply the requested changes to the presentation while maintaining structural int
### Step 1: Understand Current State (presentation-structure skill)
Follow the presentation-structure skill to understand:
-- The slide format (`data-slide` and `data-weight` attributes)
-- The journey bar system and weight requirements
+- The slide format (`data-slide` and `data-level` attributes)
+- The journey bar level system (Low/Medium/High/Pro — 4 discrete levels)
- The section structure (Parts 0-6 + Appendix)
- How slide numbering works
@@ -34,7 +34,7 @@ Based on the request:
- **Content changes**: Edit slide HTML within existing `
` elements
- **New slides**: Insert new slide divs with correct `data-slide` numbering
- **Reorder**: Move slide divs and renumber all `data-slide` attributes sequentially
-- **Weight changes**: Update `data-weight` attributes ensuring they sum to 100%
+- **Level changes**: Update `data-level` attributes on section-divider slides (3 transition points in main presentation: Low at slide 10, Medium at slide 18, High at slide 29; Part 6 at slide 34 also uses `high` — the presentation caps at High, not Pro)
- **Styling changes**: Update CSS within the `
@@ -90,10 +93,16 @@
- Agentic
-
- Vibe
- 0%
+
+
+
+ Pro
+ High
+ Med
+ Low
+
+
+ Current = Low
@@ -187,7 +196,7 @@ todoapp/
This is where everyone starts. The question is: how fast can you move beyond it?
-
What Happens (0%)
+
What Happens (Low Level)
> add a notes feature
Claude creates /api/notes with a random schema
Frontend gets a standalone page with no sidebar nav
@@ -195,7 +204,7 @@ todoapp/
Every new feature is a coin flip. Code entropy increases with every prompt.
-
What We Want (100%)
+
What We Want (High Level)
Claude knows the TodoApp architecture
New routes follow existing patterns in routes/todos.py
Frontend uses Sidebar.tsx nav and Tailwind tokens
@@ -209,16 +218,16 @@ todoapp/
The Journey
-
From 0% to 100%
+
From Low to High
Each section adds techniques that move you from vibe coding toward fully agentic engineering.
1Prerequisites
-
2Better Prompting (0%→20%)
-
3Project Memory (20%→40%)
-
4Structured Workflows (40%→50%)
-
5Domain Knowledge (50%→65%)
-
6Agentic Engineering (65%→100%)
+
2Better Prompting — Low
+
3Project Memory — Medium
+
4Structured Workflows — Medium
+
5Domain Knowledge — High
+
6Agentic Engineering — High
@@ -347,7 +356,7 @@ todoapp/
Claude Code scans your project structure, reads CLAUDE.md (if it exists), and opens an interactive REPL where you can type prompts.
This IS Vibe Coding
-
Right now, with no CLAUDE.md, no skills, no agents — you're at 0%. Claude will guess at everything. That's okay. We'll fix it step by step.
+
Right now, with no CLAUDE.md, no skills, no agents — you're at the Low level. Claude will guess at everything. That's okay. We'll fix it step by step.
@@ -374,10 +383,10 @@ todoapp/
-
+
Part 2
Better Prompting
-
Journey: 0% — effective prompting that produces real, production-quality results.
+
Level: Low — effective prompting that produces real, production-quality results.
@@ -397,8 +406,8 @@ todoapp/
-
-
+
+
Good vs Bad Prompts
The difference between vibe coding and professional usage — shown on our TodoApp:
@@ -420,8 +429,8 @@ todoapp/
-
-
+
+
Providing Context
Key Rule
@@ -441,8 +450,8 @@ todoapp/
-
-
+
+
Context Window & /compact
Key Concept
@@ -468,8 +477,8 @@ todoapp/
-
-
+
+
/plan — Plan Before Code
Try This
@@ -537,14 +546,14 @@ todoapp/
-
+
Part 3
Project Memory
-
Journey: 20% — make Claude remember your project, conventions, and preferences.
+
Level: Medium — make Claude remember your project, conventions, and preferences.
-
-
+
+
CLAUDE.md & /init
Key Concept
@@ -577,8 +586,8 @@ TodoApp monorepo: FastAPI backend + Next.js frontend.
- Always add tests for new endpoints
Your TodoApp now has: CLAUDE.md for project context, Rules for path-scoped conventions, Skills for domain knowledge, Agents for consistent execution, Commands for orchestrated workflows, Hooks for lifecycle automation, and MCP servers for external tools.
+