← All sessionsHomeSearch
AI Catalyst C3·Core Sessions - Week 7·2:48:45

Session 13: Claude Code — Skills, Sub Agents & the Token Economy (posted as 'Beyond Vibe Coding — n8n & More')

Devesh Trainer — Data & Applied Scientist at Microsoft (M365 Copilot); teaches skills as the 'last piece of puzzle' in Claude Code, builds two landing-page skills live for a fictional agency (Outbrain), then generates its product video with Remotion, Suno, and ElevenLabs · Niharika Cohort manager (opens the session after a joining-link fix)
▶local recording  ·  LMS lesson

Session map

WHAT CLAUDE CODE IS MADE OFBUILD YOUR OWN SKILLSSHIP WITH THEM/context anatomywhere your tokens actually goMCP vs skillrent the tool or write the SOPSub agentsdepartments that run in parallel on che…Skills are horizontalthe resume analogy and the one-task ruleCreating a skilldescription is everything, expertise is…The Outbrain buildcopywriter skill → builder skill → live…Downloadable expertisevendor skills, curated lists, and editi…Remotiona product video written as code, no vid…The audio layer, and the agen…'Don't remember the redundant…discovery as the durable skill
What Claude Code is made ofBuild your own skillsShip with them
click a node — its card pops up (drag it anywhere, × to close)
Concept

The map reads left to right — what claude code is made of flow into build your own skills, then into ship with them. Click any node to open that idea here; every timestamp jumps into the recording.

The short version

  1. The mental model of the session: everything in Claude Code is one of three things — MCPs (third-party tools you rent), sub agents (departments that run in parallel on their own models), and skills (your SOPs, horizontal across every agent).
  2. The economics taught first: MCPs bill you always — 16.3k tokens of system-tools load before you type a word, used or not — while a skill loads only its .md description until invoked. 'You only load the .md description, nothing else.'
  3. Built live: two single-purpose skills — a landing-page copy creator seeded with Julian Shapiro's handbook, and a landing-page builder with Context7 attached — then used to ship a real page for the invented agency 'Outbrain.'
  4. The finale: a 30-second product video written as React code by Remotion ('this is not a video model at all'), scored with Suno, voiced by ElevenLabs — with Claude checking audio decibels, trimming to fit, flagging the exposed API key, and warning that the free tier lacks commercial rights.
  5. The working philosophy repeated throughout: 'don't remember the redundant things' — commands, install strings, tool lists are all one ChatGPT question away; your job is judgment and description.

The concepts

01

/context anatomy: where your tokens actually go

0:11:49

He opens a brand-new session, types nothing, and 16,300 tokens are already gone.

/context breaks a Claude Code session into its parts: the system prompt (fixed — 'you can't change it'), system tools (every installed MCP's descriptions, loaded whether you use them or not), custom agents, and skills. On his machine the MCP block dwarfs everything: ~16.3k tokens against 0.1–0.3% for agents and skills combined. The practical rule that falls out: install only the MCPs you use day to day; one-off MCPs can be added, used, and removed.

The companion habit is /usage and a slash-command cheat sheet — ask Claude itself to 'give me all the command line slash cheat sheet' rather than memorizing; every command self-describes when you type slash.

Worked example · from the session

Live reading: 1M-token window on Opus 4.8; system tools 16.3k ('all your MCP servers, which you are using, which you are not using, doesn't matter'); Canva MCP cited as the installed-but-idle tax; session ends at 262.5k tokens, 26% used.

Why it matters

Every optimization in the session — skills over MCPs, sub agents on cheaper models, not printing file contents into chat — starts from being able to read this one screen.

People get this wrong

Token cost starts when you start prompting.

A session pays its MCP tax at startup — his fresh session was 2% spent before the first sentence.

A fresh session, before the first prompt (/context, as read on stage) System prompt System tools (MCPs) Custom agents Skills The MCP block dwarfs everything — the context tax is paid at install, not at use Skill at rest only its .md description travels MCP at rest entire tool catalog always loaded 'When it comes to skills, I'm only loading your text description. Nothing else.' Session total after the whole build: 262.5k tokens = 26% of a 1M window Rule: install only day-to-day MCPs; one-timers get added, used, removed
One fresh session, zero prompts typed — and 2% of a million-token window is already spent, almost all of it on MCPs
All the MCPs which you are using, which you are not using, doesn't matter — it gets accounted for your token usage.0:11:49
I recently bought a t-shirt — 'tokens is all I need.'2:35:23
For your projects

["This is the direct answer to your 'reduce chat complexity' question: fewer connected tools per chat = lower per-message overhead, on any model."]

This idea elsewherereappears inthe /usage cost habit, Harshit's version next day
Go deeper

In one line: The /context command decomposes the context window into system prompt (immutable), system tools (all MCP descriptions, always loaded), custom agents, and skills; MCP descriptions dominate baseline token cost, which motivates minimal MCP installs and skill-first design.

'Without executing any task, my system tools are occupying 16.3k tokens' — 2% of the window gone before the first prompt (0:11:49)

Installed-but-unused MCPs still bill: 'doesn't matter — it gets accounted for your token usage' (0:13:50)

Advice: install day-to-day MCPs only; add/remove one-timers (0:13:50)

Model frugality modeled twice: swaps Fable for Sonnet just to read documentation, and refuses to print a skill file into chat — 'for printing, I should not waste my token' (0:32:01, 1:10:19)

End-of-session accounting read aloud: 262.5k tokens, 26% of the window, for the entire build (2:39:26)

Try it now

Run /context in a fresh session before doing anything. Whatever the system-tools number is, that's your standing MCP tax — decide which installs are earning it.

▶ Watch this taught: 0:11:49

Check yourself

Answer from memory first — the recall attempt is what makes it stick. Then reveal.

Why does an MCP you never call still cost you tokens every session?

Its tool descriptions load into the system-tools block at session start — the context tax is paid at install, not at use.

02

MCP vs skill: rent the tool or write the SOP

0:42:06

The biggest difference between MCPs and skills is one sentence: MCPs load everything always; skills load a paragraph until called.

An MCP comes from a third party — Canva, Gmail, Google Drive — so its whole tool catalog and descriptions load into context by default, and 'you can't control it; you have to abide with that.' A skill inverts the deal: only its .md description (5–10 lines) rides in context; the skill's other files — scripts, references, sample outputs — cost nothing until the skill is actually invoked. That's why his 30 skills cost less context than a handful of MCPs.

The two aren't substitutes: 'there is no or in between.' You need MCPs when a third party owns the surface (you can't write a Canva skill — Canva is the product). You write skills for your own reusable procedures, and a skill can even have an MCP wired inside it, as his builder skill does with Context7.

Worked example · from the session

His finance skill: a schedule-3-division balance-sheet formatter with generate_financials.py, recalculate.py and reference files inside — none of it loaded, ever, except the description, until a finance task calls it.

Why it matters

This is the pricing model that makes 'create more skills' rational: capability that costs nothing at rest.

People get this wrong

Skills and MCPs are competing options — pick one.

'There is no or in between. They are not at all related.' MCPs are rented third-party surfaces; skills are your own SOPs — and skills can contain MCP calls.

When it comes to skills, I'm only loading your text description. Nothing else.0:44:06
For your projects

['The checklist engine and README conventions are reference-file material; only their trigger descriptions belong in standing context.']

This idea elsewherereappears innext day's triptych adds CLIs to this pairreappears inthe tension: 13 wires Context7 into a skill; 14 retires it a day laterreappears inskills as a harness component, two sessions on
Go deeper

In one line: MCPs are third-party tool servers whose full descriptions always occupy context; skills are self-authored .md procedures loading only a short description until invoked, with unlimited supporting files at zero standing cost. Complements, not substitutes — a skill can call an MCP.

'By default, [MCP] will take tokens into consideration... you can't control this. When it comes to skills, I'm only loading your text description. Nothing else.' (0:42:06–0:44:06)

Official guidance read live: skill body capped ~500 lines, push detail to reference files, 'every paragraph should justify the token cost' (0:46:06)

Skill files can be many — scripts, samples, references — all invisible to the model until invocation (0:48:06)

'I can't create a Canva skill myself because this is coming from Canva as a product' — the ownership boundary (0:15:51)

Try it now

Pick your heaviest MCP and ask: is there a version of this that's really my own procedure plus one API call? That part is a skill.

▶ Watch this taught: 0:42:06

Check yourself

Answer from memory first — the recall attempt is what makes it stick. Then reveal.

When does a skill's Python script ever cost you context?

Only when the skill is invoked — at rest, just the .md description travels with the session.

03

Sub agents: departments that run in parallel on cheaper models

0:15:51

His company analogy does all the work: agents are departments, skills are the abilities on an employee's resume.

A sub agent is an instruction set plus a model assignment — nothing else ('I don't have any Python files... just the instruction and which model'). The /agents command is gone in the current build; you now create one conversationally ('create a front end sub agent who is expert in designing web pages...'), choose project-level or user-level scope, and Claude writes the .md into ~/.claude/agents/.

Two benefits, stated exactly: cost — the Opus orchestrator delegates to Sonnet sub agents (the default), and 'I have different usage limits of each and every model... highest limit for Haiku, a little less for Opus'; and parallelism — front end and back end have no dependency, so both Sonnet instances build simultaneously while the orchestrator coordinates. Use sub agents when two or three processes can genuinely start at once; otherwise they add nothing.

Worked example · from the session

Built live: a 'senior front end engineer' agent (upgraded from an existing one, saved user-level as senior-front-end-engineer.md, Sonnet by default) alongside an existing Python AI-agent engineer — the Amazon storefront/backend split as the worked example of independence.

Why it matters

This is model routing by org chart — the same cost/quality routing session 15 formalizes, here justified by Anthropic's own per-model limits.

People get this wrong

A sub agent is a mini-app with its own files and tools.

It's one .md instruction plus a model choice. The files and procedures live in skills, which any agent — including sub agents — can use.

Agents are vertical departments; skills are horizontal SOPs Front end agent own model: Sonnet Back end agent own model: Sonnet Data agent own model: Haiku Skills: Excel · email drafts · landing copy · finance formats usable by EVERY agent, in every project Orchestrator Opus · delegates & combines 'Skills are my SOPs. Agents are my executors.' — one instruction + one model each; agents run in parallel Design rule: one skill, one task — PDF, XLSX, PPT are three skills, not one
Agents are vertical departments with their own models; skills are horizontal SOPs every department can use
For your projects

['Your three-OUTSKILL-chat split (Fable extraction / Opus review / Sonnet KB) is this pattern at the account level.']

This idea elsewherebuilds onsession 10's primer, now with model routingreappears innext day: spawning them mid-build without stoppingreappears inthe cost logic, formalized into loop seats
Go deeper

In one line: Sub agents are instruction+model pairs (Sonnet default; Sonnet/Haiku/Opus only) created by conversational prompt at project or user scope; the main-agent orchestrator delegates independent workstreams to them for parallel execution and per-model cost/limit arbitrage.

Agent = instruction + model, no supporting files — the structural difference from skills (1:14:20)

/agents removed in the current build; 'simply ask Claude to create or manage sub agents' — churn noted live (0:15:51)

Scope choice matters: project-level agents vanish outside their folder; user-level follows you everywhere (0:21:54)

'So that way, 2 benefits: I am saving the cost on my main model... and I'm using the parallelism of my sub agents' (0:25:59–0:28:00)

Sub agents only pay off when processes can start simultaneously — 'then only it is beneficial' (0:23:57)

Try it now

Create one user-level sub agent for the work you delegate most, and check which model Claude assigned it — then ask whether that seat needs anything stronger.

▶ Watch this taught: 0:15:51

Check yourself

Answer from memory first — the recall attempt is what makes it stick. Then reveal.

What are the only two components of a sub agent, and what's the default model?

An instruction (.md) and a model assignment — Sonnet by default, choosable among Sonnet, Haiku, and Opus.

04

Skills are horizontal: the resume analogy and the one-task rule

0:30:01

Excel isn't a department. Marketing, HR, and tech all use it — and that's exactly what a skill is.

The mental model: agents are vertical (departments with independent KPIs — front end has no dependency on back end), while skills are horizontal (Excel, email drafting, landing-page copy — usable by any agent, in any project, from the main session). A learner lands the summary he adopts on the spot: 'skills are how-to-dos, SOPs; agents are executors.'

The design rule that follows: one skill, one task. Not 'documents skill' but PDF as one skill, PPT as another, Excel as a third — 'make 1 skill for 1 task; that is how skills are defined,' straight from the documentation he reads on screen. Skills run inside the main session; agents run beside it.

Worked example · from the session

The whiteboard grid: HR / marketing / tech departments as vertical agents; Excel (pivots, formulas, VLOOKUP, charting) drawn as the horizontal bar all of them touch — then echoed in his own stack: newsletter copywriter, finance balance-sheet formatter, data-analysis skill.

Why it matters

Getting the axis right decides where capability lives: procedures that any agent should reuse must be skills, or you'll rebuild them per agent.

People get this wrong

A powerful skill should bundle related tasks.

Bundling breaks the model's ability to pick the right tool from the description — single-task skills with sharp descriptions are what Claude can reliably select among 'a hundred plus candidates.'

Skills are my SOPs. Agents are my executors.1:16:22
For your projects

["'One skill, one task' is also good checklist design — your ss/oh manifests already obey it."]

This idea elsewherebuilds onsession 9 previewed skills as sellable unitsreappears inthe same definitions, Harshit's cut
Go deeper

In one line: Skills are single-purpose, agent-agnostic procedures (SOPs) available horizontally across all agents and projects; agents are vertical executors. Design rule: one skill per task, invoked in the main session, reusable everywhere.

'Imagine agents as your company departments... skills are like how we humans add skills in our resume' (0:30:01)

Excel-across-departments as the horizontality proof (0:34:03–0:36:03)

'Make 1 skill for 1 task' — PDF, XLSX, PPT are separate skills by design (0:50:11)

Learner formulation adopted by the trainer: 'Skills are SOPs. Agents are my executors. Exactly — that's the word Anthropic has given.' (1:16:22)

Skills run in the main session; agents run in parallel beside it (1:14:20)

Try it now

List three things you re-explain across different working sessions. Each is a horizontal candidate — one skill each, one task each.

▶ Watch this taught: 0:30:01

Check yourself

Answer from memory first — the recall attempt is what makes it stick. Then reveal.

Why must the landing-page copy skill and the landing-page builder be two skills, not one?

One task per skill: copy is persuasion (what to say), building is implementation (how it looks and works) — two real-world roles, two skills that pipe into each other.

05

Creating a skill: description is everything, expertise is borrowed

how-to0:48:06

He is not a marketer — so the skill's quality comes from one pasted link to someone who is.

The creation recipe has three load-bearing parts. First, the description: it's how Claude decides whether to load this skill out of a hundred-plus candidates — third person, what it does, when to use it, concrete trigger keywords ('use this skill for PDF creation'). Second, borrowed expertise: 'I am not an expert in how to design a copy... this is out of my knowledge' — so the skill is built around Julian Shapiro's actual framework, and the result encodes his purchase-rate formula (desire minus labor minus confusion) instead of generic copy advice. Third, human-in-the-loop by instruction: the skill must ask clarifying questions — product, audience, value prop, buying objection — before writing, using concrete options rather than open-ended prompts.

Worked example · from the session

The finished copy-creator skill self-reports: 'I fetched the Julian guide and built the skill around the actual framework rather than generic copy advice... if any [of four inputs] are missing, it uses ask-user-question with concrete options since founders describe their products vaguely.'

Do it in this order

Gotchas["Command churn is constant: /create-skill and /agents both removed between his last use and this session; learners on newer builds see a 'skill generator' his version lacks", "Don't print skill contents into chat to inspect them — open the file in an editor; 'for printing, I should not waste my tokens'", 'Scope prompts are easy to misread — he initially thought it saved to the wrong folder before finding it at user level, as requested']

Why it matters

This is prompting discipline promoted to an asset: the one-time cost of a well-fed skill is amortized over every future landing page — 'I have my best instructions already incorporated, so I can reuse this component.'

People get this wrong

A skill's power comes from clever internal prompting.

It comes from the description (selection) and the fed expertise (quality). Claude writes the internals; you supply scope, source, and the clarify-first gate.

Description is everything... this is how Claude decides whether to load the skill out of potentially hundred-plus candidates.0:32:01
Ask all the follow-up questions. Don't simply assume anything — that's the best advice I can give to Claude Code.1:24:27
For your projects

['Your custom-instructions blocks for per-session chats are proto-skills; the clarify-first gate is your input-elicitation checklist, independently converged.']

  • A 'skill-ify this chat' pass: each standing procedure in this project's instructions, rewritten as a one-task skill with a selection-grade description.
This idea elsewherebuilds onthe portal's prompt anatomy, promoted into a reusable assetreappears innext day: what happens when someone ELSE writes the skill
Go deeper

In one line: Skills are created conversationally (slash commands removed): a hard-scoped single task, a description optimized as the model's selection signal, borrowed domain expertise via pasted authoritative sources, and a clarify-before-output instruction; saved at user scope for cross-project reuse.

'Description is everything... this is how Claude decides whether to load the skill out of potentially hundred-plus candidates' — from the official docs, read live (0:32:01–0:34:03)

Trigger keywords in descriptions: 'use this skill for video generation / PDF creation / PPT generation' (0:34:03)

Borrowed expertise beats model defaults: 'I don't want the LLM to use its own knowledge — that's where the skills come in' (0:42:06)

Clarify-first as standing advice: 'ask all the follow-up questions, don't simply assume anything — that's the best advice I can give to Claude Code' (1:24:27)

The skill even audits the demo: it flags 'Outbrain' as a live trademark of a public company that would 'poison your SEO' (1:26:28)

Try it now

Build one skill this week seeded with the single best external resource in a domain you're NOT expert in — the borrowed-expertise move is the whole trick.

▶ Watch this taught: 0:48:06

Check yourself

Answer from memory first — the recall attempt is what makes it stick. Then reveal.

What are the four things the copy-creator skill must collect before writing, and what does it do if any is missing?

What the product literally does, who it's for, the dominant value prop, and the primary buying objection — missing ones trigger ask-user-question with concrete options.

06

The Outbrain build: copywriter skill → builder skill → live page

how-to1:16:22

The two skills interrogated a vague voice-memo of a business idea into a produced, previewable page — and along the way told the founder his company name was a trademark problem.

The pipeline demonstrates skills composing: the copy creator (Julian-seeded, clarify-first) produces the layout and language; the builder consumes 'the approved copy' — its description even names the pairing — and turns it into a working page, with Context7 attached inside the skill so package versions are current at build time. Design taste is outsourced to inspiration: browse superdesign.dev (found via a ChatGPT 'top 10 design websites' ask), copy a design's prompt, paste it as reference.

The output holds up: the live page carries the copy's positioning ('Most AI agents break the moment they touch real data. We build the ones that don't'), an honest FAQ, and the skill's ethics — no invented testimonials for a product with no users.

Worked example · from the session

Outbrain, the invented AI agency (name crowdsourced from chat): custom chatbots/RAG/agents for EdTech, healthcare, manufacturing; two 'products' (a job-application agent, a Jarvis second brain); page live on localhost:8000-class preview the same hour.

Do it in this order

Gotchas["The builder deleted the reference design's fake five-star testimonial on its own — 'still there is no product, so ideally we should not have a testimonial'", 'A first npm install of Context7 failed on cache permissions; the fix was simply using the alternate install command Claude suggested', 'Local preview exit code 1044 confused the room — the page was fine; the command just needed running in a real terminal']

Why it matters

It's the session's proof that skills are compound assets — the second landing page ever will cost one description, not one afternoon.

People get this wrong

You needed to know web development to get this page.

You needed a describable business and answers to four questions; expertise arrived via the seeded guide, current packages via the embedded MCP, and taste via a borrowed design prompt.

Business described vague is fine — on purpose Copy creator skill Julian-seeded · clarify-first Approved copy hero · proof · CTA Builder skill Context7 inside Live page (localhost) single self-contained file Design inspiration superdesign.dev prompt, pasted 4 questions gate the draft: product · audience · value prop · objection Unprompted counsel along the way: 'Outbrain' is a live trademark — 'it will poison your SEO' Two skills, two real-world roles: the copywriter architect and the builder contractor
Two single-task skills piped together: persuasion first, implementation second, inspiration optional
For your projects

['The clarify-first + approve-stages shape is your manifest checklist philosophy applied to marketing output.']

This idea elsewherereappears innext day's build swaps borrowed prompts for a component systembuilds onthe portal's page anatomy, now produced by skills
Go deeper

In one line: A composed workflow of two single-task skills — copy creator (persuasion, clarify-first, expert-seeded) and page builder (implementation, Context7-equipped, inspiration-guided) — taking a spoken business description to a previewable single-file landing page.

Skill invocation is by name from the slash list; description text is what disambiguates the two 'landing' skills (1:10:19)

The trademark catch: 'Outbrain is a well-known ad-tech company... building your brand on that name is a live trademark problem [and] will poison your SEO' — unprompted (1:26:28)

Copywriter vs builder as architect vs contractor — 'two different persons' in the real world, hence two skills (1:04:17–1:06:17)

Design inspiration loop: ChatGPT for the top-10 list → superdesign.dev → copy the design's prompt → paste as reference; result 'exactly same UI what I was looking for' (1:28:28–1:52:44)

Voice input (Whisperflow) garbled the first business description; he retyped — voice-to-agent still needs a proofread (1:20:25)

Try it now

Run the pair on your own project: describe it vaguely on purpose, and count how many of the four qualifying questions the skill forces you to actually answer.

▶ Watch this taught: 1:16:22

Check yourself

Answer from memory first — the recall attempt is what makes it stick. Then reveal.

Where does Context7 live in this architecture, and why there?

Inside the builder skill — so every page build pulls current package versions at the moment of use, without Context7 taxing every unrelated session.

07

Downloadable expertise: vendor skills, curated lists, and editing to taste

1:38:34

He didn't write the Remotion skill — the company that makes Remotion did, and one npx command installed their entire expertise.

Skills flow three ways: you write them (the landing pair), vendors publish them (npx skills add for the Remotion bundle — captions, create, interactivity, best-practices as sub-skills), and communities curate them (the 'awesome Claude code skills' repo — Composio-hosted, Claude itself listed among contributors — bucketed into document processing, data analysis, business/marketing, comms). Installation is a link: paste the repo page into Claude Code and say 'install this brand-building skill.'

The quality caveat comes from experience: a downloaded data-analysis skill was 'a little generic... more giving me pie charts,' so he edited the skill file itself — 'don't give me pie charts, use line charts' — turning a generic download into his own. Downloaded skills are starting points, not gospel; an n8n skill exists in the same ecosystem for workflow builders.

Worked example · from the session

The live installs: 'npx skills add remotion dev skills' pulls the official bundle into ~/.claude; /skills lists 'Remotion best practices' beside the built-ins (deep research, data visualization, code review) and his own creations.

Why it matters

Marketplaces invert the build-vs-buy question for procedures — check whether your niche's SOP already exists before authoring, then edit rather than accept.

People get this wrong

Installed skills should be used as shipped.

They're text. The expected workflow is install, read, and edit to your practice — the same file you'd have written, minus the first draft.

For your projects

["Session 14's vetting rule pairs with this one: download from curated lists, audit before install, then edit to taste."]

This idea elsewherebuilds onthe marketplace thesis, now with working install commandsreappears inthe security counterweight to easy installs, next day
Go deeper

In one line: Skills are distributable: vendor-published (installed via npx or a pasted link), community-curated (awesome-claude-code-skills), and built-in — and downloaded skills are editable text, meant to be customized when their defaults ('pie charts') don't match your practice.

Vendor skills exist because the vendor is the expert: 'this company is expert in how to use this skill' (1:42:35)

Install is trivial by design: ask ChatGPT for the command, paste it — 'who will give me this command? You don't have to remember it' (2:45:30)

Curated list toured live: brand-building, competitive-ad extractor, article extractor, n8n workflows — 'imagine you hire this person, and that person has this skill' (2:13:06)

Edit-to-taste precedent: the pie-chart fix — downloaded skills are drafts of your SOP, not finished ones (2:39:26)

Try it now

Browse the awesome-claude-code-skills list for your domain; install one, read its SKILL.md, and make one edit that fits your taste — the edit is what makes it yours.

▶ Watch this taught: 1:38:34

Check yourself

Answer from memory first — the recall attempt is what makes it stick. Then reveal.

What did he do when the downloaded data-analysis skill kept producing pie charts?

Edited the skill file directly — banned pie charts, specified line charts — converting a generic download into his own SOP.

08

Remotion: a product video written as code, no video model involved

how-to1:32:29

'Don't assume we are using any video model here like Veo or Sora. No. It is writing a code for me.'

Remotion's premise: explainer/product videos have reverse-engineerable structure (headers in, animations, scene changes), so videos can be a programming target — React/Node code that renders to MP4. That makes video generation deterministic, editable, and essentially free: the 'model' is Claude writing code against Remotion's own published skill.

Because it's code, iteration is surgical: the studio shows the literal timeline; you identify the sequence, tell Claude Code 'this frame at this interval — fix the overflow / attach this product image,' and re-render. Continuity with the site is automatic when you build in the same session — colors and copy flow from the landing page context ('it should not come as a standalone thing').

Worked example · from the session

The Outbrain 30-second spot: opens on the copy skill's own hook line, animates the positioning, renders at 900 frames — then a learner (Syed) shows his own version built during class, which the trainer rates 'better than mine... proper messaging, no animation issues.'

Do it in this order

Gotchas["30 seconds was 'highly optimistic' for a live demo — frame rendering is the slow phase", "A header 'breaking badly' mid-render was caught and fixed by the build's own checks", "Landing pages behind paywalls or sign-ins can't be phase-0 extracted"]

Why it matters

It collapses the product-video vendor chain into the same terminal that built the product — and the skill was free, official, and installed in one command.

People get this wrong

AI video means Veo/Sora-class model calls and per-second costs.

For structured product/explainer video, the video IS code: deterministic, timeline-editable, re-renderable, no video model anywhere in the loop.

Vendor skills npx skills add (Remotion) Phase guide doc built once from the docs Phase 0: extract facts from YOUR landing page Phase 3: map site colors & type React code → 900 frames no video model anywhere MP4 rendered music bed + per-scene voice npx remotion studio scrub timeline → prompt fix → re-render 'It is writing a code for me. This is not a video model at all.' Audio guardrails ride along: decibel check, trim + fade, exposed-key warning, license-tier check
Phase prompts → context extraction from your own landing page → React code → rendered MP4 → timeline studio for edits
Don't assume we are using any video models here like Veo or maybe Sora. No. It is writing a code for me.1:32:29
For your projects

["Session 14 taught HyperFrames as 'the better Remotion' one day later — the pairing is your comparative record of the same capability."]

This idea elsewherereappears inthe alternative taught the very next dayreappears inthe portal's L3, executed
Go deeper

In one line: Remotion renders videos from React/Node code — no diffusion or video model — driven in Claude Code by the vendor's official skill bundle, a phase-guide prompt document, and design context extracted from your own landing page; edited via the remotion studio timeline and re-rendered to MP4.

'They analyzed a lot of advertisement videos... and reverse-engineered to come up with the language' — video as a programming target (2:00:45–2:02:48)

The phase guide is itself a reusable artifact: built once from Remotion's docs by prompting Claude for a phase-by-phase plan, shared with the cohort (1:38:34)

Site-to-video continuity: phase 3 lifts colors and typography from the built page so 'my video is created for my website' (1:58:44)

The studio is the review loop: scrub, name the sequence, prompt the fix — 'you can live test your entire thing because it is running in your localhost' (2:33:22)

Learner replication same-hour (Syed's video, deployed via Vercel) — the pipeline transferred on first exposure (2:41:27)

Try it now

Give Remotion your landing page URL and ask for a 15-second (not 30) hook video in your site's palette. Judge it in the studio before rendering.

▶ Watch this taught: 1:32:29

Check yourself

Answer from memory first — the recall attempt is what makes it stick. Then reveal.

What is doing the 'generation' in a Remotion video?

Claude Code writing React/Node against Remotion's framework — the video is compiled code, not sampled model output, which is why it's free and precisely editable.

09

The audio layer, and the agent as compliance officer

1:56:44

The most impressive moment isn't the music — it's Claude refusing to just bolt it on: it read the track's decibels, flagged the exposed API key, and checked the license terms unprompted.

Audio came from two free-ish sources: Suno for an instrumental background bed (prompted 'exciting sound for product intro video, no lyrics, instrumental,' downloaded as MP3 into the project folder), and ElevenLabs for voice-over via a restricted API key. The delivery discipline is .env: keys belong in a .env file — ignored by git by default, invisible in repo syncs — and any key shown on stream gets rotated afterward.

The agent's own behavior carried the lesson: it analyzed the music's mean volume and silence profile before wiring fade-in/fade-out; it warned 'your ElevenLabs key is now exposed — treat this as compromised'; and it checked that the free tier 'does not grant commercial usage rights,' distinguishing preview use from running a paid campaign. Per-scene voice clips were generated separately so each line syncs to its scene 'rather than drifting against one long track.'

Worked example · from the session

The finished Outbrain spot ships two deliverables — music-only and voice-over versions — after a graceful-degradation instruction: 'if voice over is not there, that is fine, we can ignore.'

Why it matters

It's the free-audio pattern of session 14 plus the guardrails: license terms and key hygiene are exactly the failure modes that turn a demo into a liability.

People get this wrong

Free-tier API output is yours to use anywhere.

Tiers carry usage rights: ElevenLabs' free tier excludes commercial use — the agent caught the distinction between previewing and running a paid ad.

For your projects

['Matches your credential rule in this project: secrets via masked prompts, never pasted — his .env is the repo-side same policy.']

This idea elsewherereappears innext day's version swaps ElevenLabs for macOS TTS entirelybuilds onwhy .env stays out of the repo — the fundamentals side
Go deeper

In one line: A free/cheap audio pipeline (Suno instrumental bed as a local MP3; ElevenLabs voice-over via restricted key in .env) with the agent performing audio analysis (levels, trim, fade), key-exposure warnings, and license-tier compliance checks; secrets live in .env, and exposed keys get rotated.

Suno prompt captured verbatim below; downloaded MP3 placed in the project folder and announced to the model (2:04:49–2:11:06)

'Your 11 labs key is now exposed... treat this as compromised' — flagged by Claude mid-build; he rotates it after the session (2:15:09, 2:19:12)

License check unprompted: free tier fine for preview, 'running it in a paid campaign on the free tier would violate their terms' (2:15:09)

Audio engineering by agent: decibel read, mean-volume check, trim 3:31 track to 30s with fade in/out; per-scene voice clips for sync (2:17:11)

.env doctrine: 'always use .env for your API keys' — git-ignored by default; create it and tell the agent where to look (2:19:12–2:21:15)

Try it now

Next time you hand an agent a key, put it in a .env file and watch whether your agent flags exposure or license limits on its own — then add those checks to your prompt if it doesn't.

▶ Watch this taught: 1:56:44

Check yourself

Answer from memory first — the recall attempt is what makes it stick. Then reveal.

Why did Claude generate one voice clip per scene instead of one long track?

So each line syncs exactly to its scene rather than drifting against a single continuous read — sync by construction, not by editing.

10

'Don't remember the redundant things': discovery as the durable skill

1:26:28

Asked how he knows an install command, a design site, or which MCP brings package docs, his answer never varies: 'just a ChatGPT search away.'

The repeated meta-lesson: commands, tool lists, install strings, and directories are redundant knowledge — ask an AI at the moment of need. Worked live four times: 'is there any MCP which brings new packages and versions' (→ Context7), 'give me top 10 design websites' (→ superdesign.dev, plus awwwards/land-book he didn't know), 'give me the command to install this MCP,' and 'I want to use Remotion in Claude Code, give me the skill install command.' What you do keep in your head is judgment: which result fits, what to feed a skill, when the output is wrong.

The NotebookLM aside extends the same idea to learning itself: feed sources (PDFs, YouTube, docs — not confidential company material), get explainer videos and mind maps free — discovery and digestion tools around the core work.

Worked example · from the session

His own second-brain project follows the pattern: inspired by a Karpathy blog on an Obsidian LLM-wiki plugin, discovered, adapted, in progress — 'I don't have any concrete solutions so far, but once it is ready, I'll share.'

Why it matters

It reframes what the cohort should study: not syntax, but the loop of ask → evaluate → apply — the only part that doesn't churn with every product update (both slash commands he 'knew' had been removed since his last session).

People get this wrong

Fluency means memorized commands.

The commands churned mid-course — twice, live. Fluency is the ask-evaluate-apply loop plus knowing your own requirements.

In this AI world, I always suggest don't remember the redundant things.1:26:28
For your projects

["Your own workflow already runs this way; the KB value is capturing that it's taught doctrine, not just habit."]

This idea elsewherereappears inthe portal's toolkit posture, trainer-livedreappears inSukhin's replay-and-build protocol, same doctrine
Go deeper

In one line: A working posture: treat commands, tool inventories, and install strings as look-up-at-need knowledge (via ChatGPT/Claude), reserving memory for judgment; supplemented by discovery/digestion tools (NotebookLM videos and mind maps) for learning at need.

'In this AI world, I always suggest don't remember the redundant things' — stated while finding design sites (1:26:28)

The pattern survived product churn live: /agents and /create-skill both removed since his last session; he rediscovered the new way by asking, on stage (0:15:51, 0:52:11)

Even his top design site wasn't in ChatGPT's top 10 — 'that can happen; that's how AI works' — discovery results get judged, not trusted (1:28:28)

NotebookLM: sources in, explainer video + mind maps out, free — with the confidentiality caveat for company documents (2:25:17–2:29:22)

Karpathy's Obsidian LLM-wiki blog as his current inspiration source for a personal second brain (1:22:26)

Try it now

Next command you're about to look up in docs, ask your AI instead and note the time difference. Then notice what you still had to know: whether the answer fit.

▶ Watch this taught: 1:26:28

Check yourself

Answer from memory first — the recall attempt is what makes it stick. Then reveal.

What knowledge does he say is worth keeping in your head, if not commands?

Judgment — which result fits your case, what expertise to feed a skill, and when output is wrong. The look-up loop handles the rest.

Every concept, three clicks deep

The same concepts as a quick reference: the closed row is the glance, open is the study card, and every timestamp jumps into the recording.

01/context anatomy: where your tokens actually goThe /context command decomposes the context window into system prompt (immutable), system tools (all MCP de…0:11:49›

The /context command decomposes the context window into system prompt (immutable), system tools (all MCP descriptions, always loaded), custom agents, and skills; MCP descriptions dominate baseline token cost, which motivates minimal MCP installs and skill-first design.

'Without executing any task, my system tools are occupying 16.3k tokens' — 2% of the window gone before the first prompt (0:11:49)

Installed-but-unused MCPs still bill: 'doesn't matter — it gets accounted for your token usage' (0:13:50)

Advice: install day-to-day MCPs only; add/remove one-timers (0:13:50)

Model frugality modeled twice: swaps Fable for Sonnet just to read documentation, and refuses to print a skill file into chat — 'for printing, I should not waste my token' (0:32:01, 1:10:19)

End-of-session accounting read aloud: 262.5k tokens, 26% of the window, for the entire build (2:39:26)

02MCP vs skill: rent the tool or write the SOPMCPs are third-party tool servers whose full descriptions always occupy context;0:42:06›

MCPs are third-party tool servers whose full descriptions always occupy context; skills are self-authored .md procedures loading only a short description until invoked, with unlimited supporting files at zero standing cost. Complements, not substitutes — a skill can call an MCP.

'By default, [MCP] will take tokens into consideration... you can't control this. When it comes to skills, I'm only loading your text description. Nothing else.' (0:42:06–0:44:06)

Official guidance read live: skill body capped ~500 lines, push detail to reference files, 'every paragraph should justify the token cost' (0:46:06)

Skill files can be many — scripts, samples, references — all invisible to the model until invocation (0:48:06)

'I can't create a Canva skill myself because this is coming from Canva as a product' — the ownership boundary (0:15:51)

03Sub agents: departments that run in parallel on cheaper modelsSub agents are instruction+model pairs (Sonnet default;0:15:51›

Sub agents are instruction+model pairs (Sonnet default; Sonnet/Haiku/Opus only) created by conversational prompt at project or user scope; the main-agent orchestrator delegates independent workstreams to them for parallel execution and per-model cost/limit arbitrage.

Agent = instruction + model, no supporting files — the structural difference from skills (1:14:20)

/agents removed in the current build; 'simply ask Claude to create or manage sub agents' — churn noted live (0:15:51)

Scope choice matters: project-level agents vanish outside their folder; user-level follows you everywhere (0:21:54)

'So that way, 2 benefits: I am saving the cost on my main model... and I'm using the parallelism of my sub agents' (0:25:59–0:28:00)

Sub agents only pay off when processes can start simultaneously — 'then only it is beneficial' (0:23:57)

04Skills are horizontal: the resume analogy and the one-task ruleSkills are single-purpose, agent-agnostic procedures (SOPs) available horizontally across all agents and pr…0:30:01›

Skills are single-purpose, agent-agnostic procedures (SOPs) available horizontally across all agents and projects; agents are vertical executors. Design rule: one skill per task, invoked in the main session, reusable everywhere.

'Imagine agents as your company departments... skills are like how we humans add skills in our resume' (0:30:01)

Excel-across-departments as the horizontality proof (0:34:03–0:36:03)

'Make 1 skill for 1 task' — PDF, XLSX, PPT are separate skills by design (0:50:11)

Learner formulation adopted by the trainer: 'Skills are SOPs. Agents are my executors. Exactly — that's the word Anthropic has given.' (1:16:22)

Skills run in the main session; agents run in parallel beside it (1:14:20)

05Creating a skill: description is everything, expertise is borrowedSkills are created conversationally (slash commands removed): a hard-scoped single task, a description opti…0:48:06›

Skills are created conversationally (slash commands removed): a hard-scoped single task, a description optimized as the model's selection signal, borrowed domain expertise via pasted authoritative sources, and a clarify-before-output instruction; saved at user scope for cross-project reuse.

'Description is everything... this is how Claude decides whether to load the skill out of potentially hundred-plus candidates' — from the official docs, read live (0:32:01–0:34:03)

Trigger keywords in descriptions: 'use this skill for video generation / PDF creation / PPT generation' (0:34:03)

Borrowed expertise beats model defaults: 'I don't want the LLM to use its own knowledge — that's where the skills come in' (0:42:06)

Clarify-first as standing advice: 'ask all the follow-up questions, don't simply assume anything — that's the best advice I can give to Claude Code' (1:24:27)

The skill even audits the demo: it flags 'Outbrain' as a live trademark of a public company that would 'poison your SEO' (1:26:28)

06The Outbrain build: copywriter skill → builder skill → live pageA composed workflow of two single-task skills — copy creator (persuasion, clarify-first, expert-seeded) and…1:16:22›

A composed workflow of two single-task skills — copy creator (persuasion, clarify-first, expert-seeded) and page builder (implementation, Context7-equipped, inspiration-guided) — taking a spoken business description to a previewable single-file landing page.

Skill invocation is by name from the slash list; description text is what disambiguates the two 'landing' skills (1:10:19)

The trademark catch: 'Outbrain is a well-known ad-tech company... building your brand on that name is a live trademark problem [and] will poison your SEO' — unprompted (1:26:28)

Copywriter vs builder as architect vs contractor — 'two different persons' in the real world, hence two skills (1:04:17–1:06:17)

Design inspiration loop: ChatGPT for the top-10 list → superdesign.dev → copy the design's prompt → paste as reference; result 'exactly same UI what I was looking for' (1:28:28–1:52:44)

Voice input (Whisperflow) garbled the first business description; he retyped — voice-to-agent still needs a proofread (1:20:25)

07Downloadable expertise: vendor skills, curated lists, and editing to tasteSkills are distributable: vendor-published (installed via npx or a pasted link), community-curated (awesome…1:38:34›

Skills are distributable: vendor-published (installed via npx or a pasted link), community-curated (awesome-claude-code-skills), and built-in — and downloaded skills are editable text, meant to be customized when their defaults ('pie charts') don't match your practice.

Vendor skills exist because the vendor is the expert: 'this company is expert in how to use this skill' (1:42:35)

Install is trivial by design: ask ChatGPT for the command, paste it — 'who will give me this command? You don't have to remember it' (2:45:30)

Curated list toured live: brand-building, competitive-ad extractor, article extractor, n8n workflows — 'imagine you hire this person, and that person has this skill' (2:13:06)

Edit-to-taste precedent: the pie-chart fix — downloaded skills are drafts of your SOP, not finished ones (2:39:26)

08Remotion: a product video written as code, no video model involvedRemotion renders videos from React/Node code — no diffusion or video model — driven in Claude Code by the v…1:32:29›

Remotion renders videos from React/Node code — no diffusion or video model — driven in Claude Code by the vendor's official skill bundle, a phase-guide prompt document, and design context extracted from your own landing page; edited via the remotion studio timeline and re-rendered to MP4.

'They analyzed a lot of advertisement videos... and reverse-engineered to come up with the language' — video as a programming target (2:00:45–2:02:48)

The phase guide is itself a reusable artifact: built once from Remotion's docs by prompting Claude for a phase-by-phase plan, shared with the cohort (1:38:34)

Site-to-video continuity: phase 3 lifts colors and typography from the built page so 'my video is created for my website' (1:58:44)

The studio is the review loop: scrub, name the sequence, prompt the fix — 'you can live test your entire thing because it is running in your localhost' (2:33:22)

Learner replication same-hour (Syed's video, deployed via Vercel) — the pipeline transferred on first exposure (2:41:27)

09The audio layer, and the agent as compliance officerA free/cheap audio pipeline (Suno instrumental bed as a local MP3;1:56:44›

A free/cheap audio pipeline (Suno instrumental bed as a local MP3; ElevenLabs voice-over via restricted key in .env) with the agent performing audio analysis (levels, trim, fade), key-exposure warnings, and license-tier compliance checks; secrets live in .env, and exposed keys get rotated.

Suno prompt captured verbatim below; downloaded MP3 placed in the project folder and announced to the model (2:04:49–2:11:06)

'Your 11 labs key is now exposed... treat this as compromised' — flagged by Claude mid-build; he rotates it after the session (2:15:09, 2:19:12)

License check unprompted: free tier fine for preview, 'running it in a paid campaign on the free tier would violate their terms' (2:15:09)

Audio engineering by agent: decibel read, mean-volume check, trim 3:31 track to 30s with fade in/out; per-scene voice clips for sync (2:17:11)

.env doctrine: 'always use .env for your API keys' — git-ignored by default; create it and tell the agent where to look (2:19:12–2:21:15)

10'Don't remember the redundant things': discovery as the durable skillA working posture: treat commands, tool inventories, and install strings as look-up-at-need knowledge (via…1:26:28›

A working posture: treat commands, tool inventories, and install strings as look-up-at-need knowledge (via ChatGPT/Claude), reserving memory for judgment; supplemented by discovery/digestion tools (NotebookLM videos and mind maps) for learning at need.

'In this AI world, I always suggest don't remember the redundant things' — stated while finding design sites (1:26:28)

The pattern survived product churn live: /agents and /create-skill both removed since his last session; he rediscovered the new way by asking, on stage (0:15:51, 0:52:11)

Even his top design site wasn't in ChatGPT's top 10 — 'that can happen; that's how AI works' — discovery results get judged, not trusted (1:28:28)

NotebookLM: sources in, explainer video + mind maps out, free — with the confidentiality caveat for company documents (2:25:17–2:29:22)

Karpathy's Obsidian LLM-wiki blog as his current inspiration source for a personal second brain (1:22:26)

Tools referenced

ToolCoverageMomentContext
Claude Codedemonstrated0:09:47Terminal on macOS; Opus 4.8 orchestrator, 1M context; /context, /usage, /skills; sub agents and skills created conversationally
Context7demonstrated0:40:05Endorsed and wired INSIDE the builder skill for current package versions — the position session 14 reverses next day
Remotiondemonstrated1:32:29Official vendor skills via npx skills add; phase-guide doc; 900-frame render; npx remotion studio timeline editing
Sunodemonstrated2:02:48Instrumental background bed, downloaded MP3, no API
ElevenLabsdemonstrated2:06:54Voice-over via restricted key in .env; free-tier commercial-rights limit flagged by Claude
superdesign.devdemonstrated1:28:28Design inspiration; copied its design prompt as the builder's reference
NotebookLMdemonstrated2:25:17Explainer video + mind maps from sources; confidentiality caveat for company docs
Whisperflowdemonstrated1:18:23Voice input to Claude Code; garbled the first business description — retyped
ChatGPTdemonstrated1:02:17The discovery engine: MCP lookup, design top-10, install commands
Obsidianmentioned1:22:26His in-progress second brain, via Karpathy's LLM-wiki blog
n8nmentioned2:13:06An n8n skill exists in the marketplace — the title's only real n8n content
Canvamentioned0:13:50The installed-but-idle MCP paying the token tax
Vercelmentioned2:41:27Learner (Syed) deployed his class-built page/video via Vercel
Composiomentioned2:13:06Host of the awesome-claude-code-skills curated list

Session materials

Archived locally on V: — click to open. Companion pages link to the LMS.

vtt
GMT20260711-140045_Recording.transcript.vtt
183 KB
lms
Basecamp Part 2 | Vibe Coding - Post Read
companion page on the platform

Action items

Resources mentioned

Resources
  • docSkill-creation prompt — landing page copy creator (verbatim as spoken) 0:50:11
  • docSkill-creation prompt — landing page builder (verbatim as spoken) 1:00:16
  • docSub agent creation prompt (verbatim as spoken) 0:17:52
  • docOutbrain business description (the input the skills interrogated; verbatim as retyped after the voice garble) 1:20:25
  • docSuno background-music prompt (verbatim as typed) 2:04:49
  • docGraceful-degradation instruction (verbatim as spoken) 2:23:16
  • docRemotion phase-guide document (phase 0–5 prompt plan built from Remotion's docs) 1:38:34
  • docJulian Shapiro — landing page handbook 0:52:11
  • docawesome-claude-code-skills (curated list, Composio) 2:13:06
  • docRemotion official skills install 1:40:35
  • docsuperdesign.dev 1:28:28
  • docKarpathy blog — Obsidian LLM wiki / second brain 1:22:26
  • docClaude Code official skills documentation 0:30:01
  • docthinklytics.ai.in 1:38:34

Extraction notes

This page was built from an auto-generated transcript, which garbles product and people's names. Those were corrected silently in everything above and logged here for transparency. The warnings flag claims that were true on the recording day but change fast.

Transcript corrections applied

The transcript saysThe trainer actually means
Dheer / David / Divis / DwayneDevesh (trainer; self-ID as Microsoft M365 data & applied scientist matches registry)
cloud code / clod / plot code / flawed code / cloudClaude Code / Claude
NarikaNiharika (cohort manager)
Charge GPT / ChargeGPD / Chargebee / chat g p tChatGPT
copyright / copyrights (throughout the skills segment)copy / copywriting — ASR collapses 'copywriter' into 'copyright'
3 motion / every motion / re motion / pre motion / stream motionRemotion
11 labs / 11 lapsElevenLabs
Versal / WarsalVercel
entropicAnthropic
Julian (blog)Julian Shapiro (landing-page handbook)
SONET / SONNETSonnet (model)
m 3 65M365 (Microsoft 365)
notebook l mNotebookLM
Composeo / Composeo HQComposio
Proful / Prafullearner name (as heard); shared the skills-list link
wipe coded / wipe codingvibe coded / vibe coding
misagentexisting agent (garbled)
scale / scales (in skill contexts)skill / skills — recurring collapse

True on recording day — verify before relying