A 39-chapter operator field manual where every artifact is live, clickable, and forwardable.
Stop sending dead files. Every report, pitch, audit, deck, and analysis ships as a live interactive HTML artifact on a deployed link — not a PDF attachment that started rotting the second it was exported. The link is current because the repo is. People forward links; they archive PDFs unread.
This repo is the proof. The book about building this kind of artifact is, itself, this kind of artifact — a private GitHub repo deployed to a public link, updated by commit, with two real interactive case studies embedded and clickable inside it.
→ Read the thesis + click the embeds: dive.vladyslavpodoliako.com/html-first
The repo is how it's built. The site is what it IS.
| Surface | What's there | Live link |
|---|---|---|
| All 39 chapters | The whole book, MDX-rendered, with TL;DRs, glossary tooltips, code blocks, and the receipts behind every claim | /chapters |
| HTML-ization | The flagship — thesis + 3 embedded live artifacts (AFC pitch deck, AFC robot stable, sanitized client deliverability audit) | /html-first |
| Tier list | Every tool ranked without diplomatic phrasing, plus the live LMArena leaderboard widget | /tier-list |
| Cheat sheet | 16 reference sections — slash commands, settings keys, hook JSON shape, permission syntax, model routing — printable | /cheat-sheet |
| Glossary | 52 terms, A–Z, linked inline throughout the chapters | /glossary |
| Resources | Copy-paste templates: CLAUDE.md skeletons, .mcp.json, hooks, SKILL.md, subagent .md, Docker sandbox + devcontainer, 18 reusable prompts | /resources |
| Research notes | 9 external signals that shift what to do Monday — sourced, dated, signal-vs-receipt discipline | /research-notes |
| The 12-rule CLAUDE.md | Karpathy's 4 + 8 operator additions, with a receipt per rule | /claude-md-rules |
| For your CFO | 600-word defense memo. Defend the spend. | /cfo-case |
| 30-day plan | Custom roadmap with markdown + .ics export | /thirty-day-plan |
Press ⌘K anywhere on the site — search every chapter, page, section anchor, glossary term, and research note from one box.
The HTML-ization page doesn't describe the method — it shows it, with three real artifacts the operator-Claude workflow produced:
- AFC — the pitch deck. Vlad's "Autonomous Fighting Championship" — a dinner-table idea ("robots in an octagon"); friends asked for a deck; one got spun up fast as interactive HTML before the next meeting did. (open it)
- AFC — the robot stable. Companion doc: every humanoid platform shipping in 2026, filterable, with a profit-per-fighter calculator. (open it)
- The 90-domain deliverability audit (sanitized sample). A real Folderly external audit of a ~90-domain / ~5K-mailbox cold-email estate — swarmed in days, delivered as a clickable interactive doc instead of a 40-page PDF. Client, every domain, every infra fingerprint de-identified before publication. (open it)
- 39 chapters in
src/content/chapters/*.mdx - 25 React/Astro widgets in
src/widgets/(live LMArena leaderboard, sortable tier list, command palette, token-burn calculator, swarm visualizer, persona-agent walkthrough, …) - 25 standalone pages in
src/pages/(the surfaces in the table above + the journey, sections index, showcase, vault starter, weekend builds, and more) - 52 glossary terms in
src/lib/glossary.ts - 9 dated research notes in
src/lib/research-notes.ts - 3 embedded interactive artifacts in
public/artifacts/— single-file, self-contained, sandboxed-iframe-embedded on/html-first - 18 copy-paste prompt templates + 9 hook templates + 5 CLAUDE.md skeletons + 8 SKILL.md templates in
src/lib/snippets.ts
The auto-updated LMArena leaderboard widget pulls live from the HuggingFace datasets-server API — the rest of the site is static HTML.
- Astro 5 static site generator (
astro build). Server components by default; React 18 islands only where interaction needs them. - MDX for chapter content with custom Astro components
(
<Callout>,<PullQuote>,<TLDR>,<ScreenshotPlaceholder>,<GlossaryTooltip>). - Tailwind 3 with project design tokens
(
--accent: #FF6B2C,--paper,--line, etc.). - GitHub Pages auto-deploy via
.github/workflows/deploy.yml— push tomain, live in ~90 seconds atdive.vladyslavpodoliako.com. - Built by a swarm of Claude Code agents in parallel — content migration, widget builds, design system, security scrubbing, deploy pipeline. The process is the technique the book describes; the artifact IS the technique.
npm install
npm run dev # http://localhost:4321
npm run build # static output → dist/
npm run preview # serve dist/ locallyRequires Node 20+.
- Drop a new MDX file into
src/content/chapters/matching the schema insrc/content/config.ts. - Add the chapter to the ordered list in
src/lib/chapters.ts. - The dynamic route at
src/pages/chapters/[slug].astropicks it up.
To add a whole new page (resources, /tier-list-style surface, etc.), the
six wiring surfaces are codified in the
playbook-new-page skill: page
file · ⌘K index · chapter cross-link · glossary term · homepage tile ·
changelog.
Written and built by Vlad Podoliako — Founder & CEO of Belkins, founder of Folderly, and operator across a portfolio of others.
- 📬 Vlad's Newsletter (10K+ subscribers)
- 🌐 vladyslavpodoliako.com
- 🎧 Spotify (AI-native music side project)
The book teaches the technique. The artifact IS the technique. The repo is how it's built — but the site is what it IS.
- Code — MIT. Copy the Astro + Tailwind + widget structure into your own living-link artifacts; that's the entire point.
- Content — CC BY-NC-SA 4.0. Read it, share it, quote it, credit it; don't resell it.
See LICENSE.