120 lines
6.3 KiB
Markdown
120 lines
6.3 KiB
Markdown
# 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 > section` structure
|
||
- 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-animate` on consecutive slides for smooth morphing
|
||
- Code: `data-line-numbers` with 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:
|
||
1. Full-bleed cockpit + "Would you fly on a fully automatic plane? ✈️"
|
||
2. 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.
|