6.3 KiB
Claude Conversation — Automatic Coding Presentation
Session reconstructed from context. Model: claude-sonnet-4-6
User: read the documentation about reveal.js (https://revealjs.com/markup/) and learn how to build effective and fancy presentations.
Claude: Fetched revealjs.com/markup/, /themes/, /transitions/, /backgrounds/, /fragments/, /layout/, /code/, /auto-animate/ in parallel. Summarized:
- Basic
.reveal > .slides > sectionstructure - 12 built-in themes
- Transitions: none / fade / slide / convex / concave / zoom
- Backgrounds: color, gradient, image, video, iframe
- Fragments: fade-up, highlight-red, fade-in-then-out, etc.
- Auto-Animate:
data-auto-animateon consecutive slides for smooth morphing - Code:
data-line-numberswith pipe-delimited steps - Layout helpers:
r-stack,r-fit-text,r-stretch
User: make a skill out of this information
Claude: Created /Users/domenico/.claude/skills/revealjs.md — a /revealjs skill that reads an outline (or topic), plans slide structure, and generates a self-contained index.html using CDN-hosted reveal.js with guidance on auto-animate, fragments, backgrounds, code walkthroughs, layout helpers, and theme selection.
User: create a presentation using reveal.js, as a vite project -> to get automatic reload support. Use the outline to draft an eye catching and professional presentation. Use strong and meme pictures
Claude: Spawned a general-purpose agent that created:
package.json(Vite + reveal.js 5.x)main.js(imports Reveal, RevealHighlight, RevealNotes)index.html(~31KB, 8 sections, ~28 slides)
Slides: Title · LLM Basics (context window CSS diagram) · Vibe Coding ("🔥 This is fine" meme) · 5 Phases (phase-badge / tip-card / problem-card) · Demo Claude Code · AI Slop (Drake-panel CSS layout) · Wise Strategy · Advice (EXPERIMENT / REVIEW / UNDERSTAND closer).
Dev server confirmed running at http://localhost:5173.
User: [selected lines 493–494 — comment about compiler experiment] address this comment and add a slide about phase 5
Claude: Searched the web, found shape-of-code.com/2026/02/22/investigating-an-llm-generated-c-compiler/. Fetched it: Claude Opus used to write a C compiler (106K lines Rust, 351 files, compiles Linux kernel) for $20,000+ in API calls. Key insight: 32 phases × ~11 files each. Type checker doesn't work.
Added slide after Phase 5 "still a myth" slide with: 🦀 106K lines · 🤖 Claude Opus · 🧩 modular decomposition · 💸 $20K+ · link to article.
User: [selected lines 240–241 — comment about growingswe.com/blog/microgpt] address this comment and add the slide
Claude: Fetched growingswe.com/blog/microgpt — interactive walkthrough of Karpathy's 200-line GPT: tokenization, softmax, backpropagation, attention, all interactive. Added data-background-iframe + data-background-interactive slide with attribution strip at bottom.
User: the link interferes with the contents - move it on the bottom
Claude: Fixed bottom: -280px → bottom: 0 with full-width strip.
User: for some reason, despite being absolute positioned, the link still is in the middle of the screen. Maybe it's parent is wrong
Claude: Added style="height: 100%" to the section so it fills the slide and bottom: 0 resolves correctly.
User: [selected comment about arxiv paper on AI & skill formation] add the missing slide where I left the comment
Claude: Fetched arxiv.org/abs/2601.20245 — Shen & Tamkin, "How AI Impacts Skill Formation". Key finding: AI use impairs conceptual understanding, code reading, and debugging without delivering significant efficiency gains. Added data-background-iframe slide (later replaced with screenshot when iframe was blocked).
User: it doesn't work because embedding is not permitted. take a screenshot and replace the iframe
Claude: Used headless Chrome (/Applications/Google Chrome.app) to screenshot https://arxiv.org/abs/2601.20245 → assets/arxiv-skill-formation.png. Replaced iframe with data-background-image + data-background-size="contain".
User: don't use 'cover' it takes too much space on my wide monitor
Claude: Changed data-background-size from "cover" to "contain".
User: use the same technique to grab a screenshot of some representative video of tsoding and codingtrain from youtube. One slide each.
Claude: Attempted headless Chrome screenshots of YouTube — hit consent wall. User took screenshots manually with same filenames (tsoding-yt.png, codingtrain-yt.png). Added two slides (7e Tsoding Daily, 7f The Coding Train) with data-background-image + data-background-size="contain" + attribution strip.
User: [selected comment about next learning steps] add the slides described in the comment
Claude: Added a new vertical slide group "WHAT'S NEXT?" with 6 slides:
- Level 1: Adding AI to your app (hosted APIs, HF inference proxy)
- Level 2: Local inference (Ollama, llama.cpp, HF Transformers)
- Level 3: RAG pipeline (visual CSS flow diagram)
- Level 4: Training open-weight models (LoRA / QLoRA / Unsloth)
- HuggingFace as your AI platform (2×2 grid)
Marked RAG and training slides with "→ Currently experimenting 🧪".
User: [selected comment about plane/autopilot analogy] add a slide about the analogy between plane flying and automatic coding: use the b737_cockpit picture I added in the assets folder
Claude: Read assets/b737_cockpit.jpg (Boeing 737 cockpit on runway). Added two data-auto-animate slides before the 5 Phases section:
- Full-bleed cockpit + "Would you fly on a fully automatic plane? ✈️"
- Cockpit fades to 25% opacity, question shrinks, four tip/problem cards reveal the analogy: autopilot ≠ no pilots · skills matter when things go wrong · checklists exist for a reason · same goes for AI coding.
User: create a Makefile with a target to start the presentation (in foreground). then create a README.md file with instructions on how to run the presentation.
Claude: Created Makefile (targets: install, start) and README.md (requirements, make start, keyboard shortcuts table). User adjusted Makefile so start depends on install and removed install from README run instructions.
User: export this conversation to a file "claude-conversation"
Claude: This file.