diff --git a/.claude/agents/presentation-learning-journey.md b/.claude/agents/presentation-learning-journey.md index 67b01c0..f51d67c 100644 --- a/.claude/agents/presentation-learning-journey.md +++ b/.claude/agents/presentation-learning-journey.md @@ -165,3 +165,5 @@ After completing changes, report to the user: - **2026-04-19 hero-tier chip visual hierarchy**: when a word-cloud slide needs a dominant/supporting split, introduce a hero tier by: (1) increasing font-size to ~1.5-1.6rem and font-weight to 800, (2) adding more padding (14px 28px vs 8px 16px), (3) using a stronger box-shadow with a colored glow (`0 4px 18px rgba(R,G,B,0.45), 0 0 0 2px rgba(R,G,B,0.2)` — the outer ring acts as a subtle halo), and (4) slightly increasing border-radius (28px vs 20px so the pill looks "fatter"). Supporting chips use padding 7-8px 14-16px, font-size 0.9-1.0rem, weight 600, and a plain `0 2px 6px rgba(0,0,0,0.18)` shadow. No new CSS classes are needed — all styling is inline on each ``. When squinting, the hero chips should be immediately readable as headlines; supporting chips recede into background. Color rebalancing rule when switching chip tiers: confirm each chip's target tier/color before editing — "harness" and "compaction" moved from blue hero to purple supporting; "agentic engineering", "orchestration", "dumb zone" moved from their previous colors to blue hero. Position re-scatter tip: space hero chips ~15-20% apart vertically and distribute them across left/right/centre columns so no two heroes are adjacent; fill gaps between heroes with supporting chips at 8-12% vertical spacing. - **2026-04-19 chip-splitting pattern (slide 2 jargon cloud)**: when splitting one combined-jargon chip into two, keep the first chip at the original position (slightly smaller font/padding to fit), and place the second chip in a new "Row Nb" at a top offset ~6-8% lower and a left offset ~2-4% inward from the right edge. This creates a natural staggered sub-cluster. Color rebalancing rule: when removing amber chips and adding replacements, assign new chips to whichever colors are below the median count — target no color exceeding 5 chips. Final distribution for 17 chips: 4 blue / 4 purple / 5 green / 4 amber. The `progressive disclosure` chip was nudged 2% left (60%→58%) to avoid visual crowding with the newly inserted `prompt engineering` chip in Row 1b. - **2026-04-19 chip overlap check method**: after any chip insertion, mentally walk each new chip's bounding box against its neighbors — chip height is roughly `padding-top + padding-bottom + font-size * line-height` ≈ 38-46px at 0.9-1.3rem. A 6-9% vertical gap on a 480px min-height container is ~29-43px which is tight but sufficient for same-column chips with different left offsets. If left offsets are within 15% of each other, require at least 8% vertical gap. +- **2026-04-22 About Me slide (slide 2) insertion — interactive fact-card pattern**: new slide inserted at position 2; all slides 2-39 renumbered to 3-40 (total now 40). Slide 2 has no `data-level` — journey bar shows visible but 0% fill (correct for pre-arc slides, bar is only hidden for slide 1). Interactive elements: circular avatar with `onmouseover` scale+glow effect; three `.fact-card` divs (Role, Education, Repo) using `translateY(-5px)` lift + colored box-shadow on hover; repo card is an `` with `target="_blank" rel="noopener"` opening `https://github.com/shanraisshan/claude-code-best-practice`; star icon uses `animation: pulse-star 2s ease-in-out infinite` keyframe. The `@keyframes pulse-star` was placed in the `` ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/presentation/assets/logo/disrupt-logo.png b/presentation/assets/logo/disrupt-logo.png new file mode 100644 index 0000000..e7396a6 Binary files /dev/null and b/presentation/assets/logo/disrupt-logo.png differ diff --git a/presentation/assets/logo/github.svg b/presentation/assets/logo/github.svg new file mode 100644 index 0000000..42ed8c7 --- /dev/null +++ b/presentation/assets/logo/github.svg @@ -0,0 +1,3 @@ + + + diff --git a/presentation/assets/logo/uni-fast-logo.png b/presentation/assets/logo/uni-fast-logo.png new file mode 100644 index 0000000..8158309 Binary files /dev/null and b/presentation/assets/logo/uni-fast-logo.png differ diff --git a/presentation/assets/logo/uni-ned-logo.png b/presentation/assets/logo/uni-ned-logo.png new file mode 100644 index 0000000..18b3580 Binary files /dev/null and b/presentation/assets/logo/uni-ned-logo.png differ diff --git a/presentation/assets/shayan.png b/presentation/assets/shayan.png new file mode 100644 index 0000000..29fb5e2 Binary files /dev/null and b/presentation/assets/shayan.png differ diff --git a/presentation/learning-journey/index.html b/presentation/learning-journey/index.html index ac22b61..88ea7a5 100644 --- a/presentation/learning-journey/index.html +++ b/presentation/learning-journey/index.html @@ -119,7 +119,7 @@ .file-tree .file { color: #444; } .file-tree .highlight { color: #2e7d32; font-weight: 600; } .file-tree .dim { color: #aaa; } - +
@@ -151,9 +151,82 @@ - +
+
+ + +
+ Shayan Rais +
+ + +

Shayan Rais

+

Software Architect at disrupt.com

+ + +
+ + +
+
Education
+ +
+ FAST NUCES logo +
+
Master’s in Computer Science
+
FAST NUCES — 2019
+
+
+ +
+ +
+ NED University logo +
+
Bachelor’s in Computer Information Systems
+
NED University — 2014
+
+
+
+ + + + Claude mascot +
+
Achievement
+
Creator of claude-code-best-practice
+
The most-starred AI repo from Pakistan — over 50,000 stars ★
+
+ + +
+
+ +
+ + + + +

Jargon you'll hear

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

@@ -257,9 +330,9 @@
- + -
+
Boris Cherny slides showing the spectrum of Claude Code usage styles @@ -272,9 +345,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.

@@ -302,9 +375,9 @@
- + -
+

Vibe Coding vs Agentic Engineering

@@ -371,9 +444,9 @@ todoapp/
- + -
+

What is Vibe Coding?

@@ -400,9 +473,9 @@ todoapp/
- + -
+

Good vs Bad Prompts

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

@@ -436,41 +509,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 (job title: weather reporter)
A specialist hired for a specific role — same Claude, different hat
-
+
2
🎓 Skills — What the Person Can Do
do reporting on weather • play a game • read a book
-
+
3
🧠 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
@@ -485,14 +558,14 @@ 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

@@ -515,7 +588,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.

@@ -556,7 +629,7 @@ todoapp/ -
+

Agents Get Their Own Brain

Tip from Thariq (Anthropic) — Apr 16, 2026

@@ -589,7 +662,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.

@@ -632,7 +705,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:

@@ -680,14 +753,14 @@ 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

@@ -714,7 +787,7 @@ todoapp/
-
+

When to Turn Something Into a Skill

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

@@ -751,7 +824,7 @@ todoapp/
-
+

Why Separate Agents and Skills?

@@ -777,7 +850,7 @@ todoapp/
-
+

How to Create Your Own Skill

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

@@ -830,7 +903,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:

@@ -870,14 +943,14 @@ 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

@@ -915,7 +988,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 @@ -949,7 +1022,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.

@@ -993,7 +1066,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.

@@ -1038,14 +1111,14 @@ 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

@@ -1073,7 +1146,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.

@@ -1118,7 +1191,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

@@ -1155,7 +1228,7 @@ open, edit, save # Tweak it like any doc<
-
+

What Goes in CLAUDE.md

# CLAUDE.md @@ -1183,7 +1256,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:

@@ -1216,14 +1289,14 @@ 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

@@ -1267,7 +1340,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.

@@ -1322,14 +1395,14 @@ 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 @@ -1356,7 +1429,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:

@@ -1379,7 +1452,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.

@@ -1428,9 +1501,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.