Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Agents & Autonomous Workflows — CUNY AI J Labs Builders Class 5</title> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.css"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/theme/white.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); | |
| :root { | |
| --bg-light: #e8e6e1; | |
| --bg-dark: #1a1a1a; | |
| --bg-blue: #2563b8; | |
| --bg-red: #dc2626; | |
| --text-dark: #1a1a1a; | |
| --text-light: #e8e6e1; | |
| --pill-bg: #d8d5ce; | |
| --pill-border: #c5c2bb; | |
| --circle-light: #e0ddd7; | |
| --circle-mid: #c8c4bc; | |
| --circle-dark: #b0aca4; | |
| --r-background-color: var(--bg-light); | |
| --r-main-font: 'Inter', -apple-system, sans-serif; | |
| --r-heading-font: 'Anton', 'Impact', sans-serif; | |
| --r-main-color: var(--text-dark); | |
| --r-heading-color: var(--text-dark); | |
| --r-link-color: var(--bg-blue); | |
| } | |
| .reveal { font-weight: 400; font-size: 22px; } | |
| .reveal .slides { text-align: left; } | |
| .reveal .slides section { | |
| padding: 60px 60px 50px; | |
| text-align: left; | |
| height: 700px; | |
| box-sizing: border-box; | |
| } | |
| .reveal h1, .reveal h2, .reveal .mega, .reveal .giga { | |
| font-family: 'Anton', 'Impact', sans-serif; | |
| text-transform: uppercase; | |
| letter-spacing: -0.02em; | |
| line-height: 0.92; | |
| margin: 0; | |
| } | |
| .reveal h1 { font-size: 5em; } | |
| .reveal h2 { font-size: 3.2em; } | |
| .reveal h3 { | |
| font-family: 'Inter', sans-serif; | |
| font-weight: 600; | |
| font-size: 1.1em; | |
| letter-spacing: -0.01em; | |
| text-transform: none; | |
| margin: 0; | |
| } | |
| .reveal p { font-size: 0.95em; line-height: 1.5; margin: 0.6em 0; } | |
| .reveal li { font-size: 0.9em; line-height: 1.5; margin-bottom: 0.3em; } | |
| .reveal ul, .reveal ol { margin-left: 1em; } | |
| .reveal strong { font-weight: 700; } | |
| .mega { font-size: 6em ; } | |
| .giga { font-size: 8em ; } | |
| .slide-header { | |
| position: absolute; top: 0; left: 0; right: 0; | |
| display: flex; justify-content: space-between; align-items: center; | |
| padding: 8px 0; font-family: 'Inter', sans-serif; font-size: 0.65em; | |
| font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; | |
| z-index: 10; border-bottom: 1.5px solid currentColor; | |
| } | |
| .slide-footer { | |
| position: absolute; bottom: 0; left: 0; right: 0; | |
| display: flex; justify-content: flex-end; padding: 8px 0; | |
| font-family: 'Inter', sans-serif; font-size: 0.6em; font-weight: 500; | |
| letter-spacing: 0.06em; text-transform: uppercase; z-index: 10; | |
| border-top: 1.5px solid currentColor; | |
| } | |
| .reveal .slides section { background: var(--bg-light); color: var(--text-dark); } | |
| .reveal .slides section .slide-header, | |
| .reveal .slides section .slide-footer { color: var(--text-dark); border-color: rgba(26,26,30,0.25); } | |
| .reveal .slides section.dark { background: var(--bg-dark); color: var(--text-light); } | |
| .reveal .slides section.dark h1, | |
| .reveal .slides section.dark h2, | |
| .reveal .slides section.dark .mega, | |
| .reveal .slides section.dark .giga { color: var(--text-light); } | |
| .reveal .slides section.dark .slide-header, | |
| .reveal .slides section.dark .slide-footer { color: var(--text-light); border-color: rgba(232,230,225,0.25); } | |
| .reveal .slides section.blue { background: var(--bg-blue); color: white; } | |
| .reveal .slides section.blue h1, | |
| .reveal .slides section.blue h2, | |
| .reveal .slides section.blue .mega, | |
| .reveal .slides section.blue .giga { color: white; } | |
| .reveal .slides section.blue .slide-header, | |
| .reveal .slides section.blue .slide-footer { color: white; border-color: rgba(255,255,255,0.3); } | |
| .reveal .slides section.red { background: var(--bg-red); color: white; } | |
| .reveal .slides section.red h1, | |
| .reveal .slides section.red h2, | |
| .reveal .slides section.red .mega, | |
| .reveal .slides section.red .giga { color: white; } | |
| .reveal .slides section.red .slide-header, | |
| .reveal .slides section.red .slide-footer { color: white; border-color: rgba(255,255,255,0.3); } | |
| .reveal .title-slide { | |
| display: flex ; flex-direction: column; justify-content: center; | |
| } | |
| .reveal .title-slide h1 { font-size: 4.5em; line-height: 0.95; margin-bottom: 0.2em; } | |
| .reveal .title-slide .subtitle { | |
| font-family: 'Inter', sans-serif; font-size: 1em; font-weight: 400; | |
| text-transform: none; margin-top: 0.8em; | |
| } | |
| .reveal .title-slide .meta { | |
| font-family: 'Inter', sans-serif; font-size: 0.75em; margin-top: 0.3em; | |
| } | |
| .pill { | |
| display: inline-block; padding: 10px 24px; border-radius: 50px; | |
| font-family: 'Inter', sans-serif; font-size: 0.75em; font-weight: 500; | |
| letter-spacing: 0.04em; text-transform: uppercase; | |
| background: var(--pill-bg); color: var(--text-dark); border: 1.5px solid var(--pill-border); | |
| } | |
| .dark .pill { background: rgba(232,230,225,0.12); color: var(--text-light); border-color: rgba(232,230,225,0.2); } | |
| .blue .pill { background: rgba(255,255,255,0.15); color: white; border-color: rgba(255,255,255,0.25); } | |
| .red .pill { background: rgba(255,255,255,0.15); color: white; border-color: rgba(255,255,255,0.25); } | |
| .circle { | |
| display: inline-flex; align-items: center; justify-content: center; | |
| text-align: center; border-radius: 50%; | |
| font-family: 'Inter', sans-serif; font-size: 0.7em; font-weight: 500; | |
| letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.3; padding: 12px; | |
| } | |
| .circle-sm { width: 100px; height: 100px; } | |
| .circle-md { width: 140px; height: 140px; } | |
| .circle-lg { width: 160px; height: 160px; } | |
| .slide-grid { height: 100%; } | |
| .slide-grid.g-1-1 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; height: 100%; } | |
| .slide-grid.g-2-3 { display: grid; grid-template-columns: 2fr 3fr; gap: 40px; height: 100%; } | |
| .slide-grid .col-heading { display: flex; flex-direction: column; justify-content: flex-end; } | |
| .slide-grid .col-body { display: flex; flex-direction: column; justify-content: center; } | |
| .reveal table { border-collapse: collapse; font-size: 0.78em; width: 100%; margin: 0.8em 0; } | |
| .reveal table th { | |
| background: var(--text-dark); color: var(--bg-light); font-weight: 600; | |
| padding: 10px 14px; text-align: left; font-family: 'Inter', sans-serif; | |
| text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.85em; | |
| } | |
| .reveal table td { padding: 10px 14px; border-bottom: 1px solid rgba(26,26,30,0.12); vertical-align: top; } | |
| .dark table th { background: var(--text-light); color: var(--text-dark); } | |
| .dark table td { border-bottom-color: rgba(232,230,225,0.15); } | |
| .blue table th { background: rgba(255,255,255,0.2); color: white; } | |
| .blue table td { border-bottom-color: rgba(255,255,255,0.15); color: white; } | |
| .callout { | |
| background: rgba(26,26,30,0.06); border-left: 3px solid var(--text-dark); | |
| padding: 14px 18px; margin: 0.8em 0; font-size: 0.88em; | |
| } | |
| .dark .callout { background: rgba(232,230,225,0.08); border-left-color: var(--text-light); } | |
| .blue .callout { background: rgba(255,255,255,0.1); border-left-color: rgba(255,255,255,0.5); } | |
| .layer-stack { display: flex; flex-direction: column; gap: 8px; } | |
| .layer-card { padding: 16px 20px; border-radius: 4px; position: relative; } | |
| .layer-card .layer-num { | |
| font-family: 'Anton', sans-serif; font-size: 1.4em; opacity: 0.2; | |
| position: absolute; right: 14px; top: 10px; | |
| } | |
| .layer-card h3 { font-size: 0.95em; margin-bottom: 2px; } | |
| .layer-card p { font-size: 0.78em; opacity: 0.7; margin: 0; } | |
| .code-block { | |
| font-family: 'JetBrains Mono', monospace; font-size: 0.75em; | |
| background: rgba(26,26,30,0.06); border: 1.5px solid rgba(26,26,30,0.1); | |
| border-radius: 4px; padding: 16px 20px; line-height: 1.7; | |
| white-space: pre; overflow-x: auto; | |
| } | |
| .dark .code-block { background: rgba(232,230,225,0.06); border-color: rgba(232,230,225,0.1); } | |
| .reveal .progress { color: var(--bg-blue); height: 3px; } | |
| .reveal .slide-number { display: none; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="reveal"> | |
| <div class="slides"> | |
| <!-- ============================================================ --> | |
| <!-- TITLE --> | |
| <!-- ============================================================ --> | |
| <section class="dark title-slide"> | |
| <h1>AI Agents &<br>Autonomous<br>Workflows</h1> | |
| <div class="meta" style="color: rgba(232,230,225,0.4);">CUNY AI Journalism Lab: Builders · Class 5 · March 26, 2026</div> | |
| <div class="slide-footer">FLORENT DAUDENS</div> | |
| </section> | |
| <!-- ============================================================ --> | |
| <!-- WHERE WE ARE --> | |
| <!-- ============================================================ --> | |
| <section> | |
| <div class="slide-header"><span>AI AGENTS & AUTONOMOUS WORKFLOWS</span><span>CUNY BUILDERS — 2026</span></div> | |
| <div class="slide-grid g-2-3"> | |
| <div class="col-heading"> | |
| <h2 style="font-size: 2.8em;">Where<br>We Are</h2> | |
| </div> | |
| <div class="col-body"> | |
| <ul style="list-style: none; margin: 0; padding: 0;"> | |
| <li style="margin-bottom: 0.5em; opacity: 0.35;">AI for product overview</li> | |
| <li style="margin-bottom: 0.5em; opacity: 0.35;">Case studies</li> | |
| <li style="margin-bottom: 0.5em; opacity: 0.35;">Product methodology</li> | |
| <li style="margin-bottom: 0.5em; opacity: 0.35;">Building Custom Assistants</li> | |
| <li style="margin-bottom: 0.5em; opacity: 0.35;">Designing AI Products</li> | |
| <li style="margin-bottom: 0.5em; opacity: 0.35;">Prototyping with no-code tools</li> | |
| <li style="margin-bottom: 0.5em; opacity: 0.35;">RAG Systems (×2)</li> | |
| <li style="margin-bottom: 0.5em;"><strong>→ AI Agents & Autonomous Workflows</strong></li> | |
| <li style="margin-bottom: 0.5em; opacity: 0.35;">AI Agents, part 2</li> | |
| <li style="margin-bottom: 0.5em; opacity: 0.35;">Measurement & Ethics</li> | |
| <li style="opacity: 0.35;">Final presentations</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="slide-footer">FLORENT DAUDENS</div> | |
| </section> | |
| <!-- ============================================================ --> | |
| <!-- AGENDA --> | |
| <!-- ============================================================ --> | |
| <section> | |
| <div class="slide-header"><span>AI AGENTS & AUTONOMOUS WORKFLOWS</span><span>CUNY BUILDERS — 2026</span></div> | |
| <div class="slide-grid g-1-1"> | |
| <div style="display: flex; flex-direction: column; justify-content: center;"> | |
| <h2 style="font-size: 2.8em; margin-bottom: 0.6em;">Today</h2> | |
| <div> | |
| <ul style="list-style: none; margin: 0; padding: 0;"> | |
| <li style="margin-bottom: 0.5em;"><strong>0:00</strong> What is an agent?</li> | |
| <li style="margin-bottom: 0.5em;"><strong>0:15</strong> Two ecosystems, one idea</li> | |
| <li style="margin-bottom: 0.5em;"><strong>0:30</strong> Cowork demo + privacy</li> | |
| <li style="margin-bottom: 0.5em;"><strong>0:45</strong> Setup: Codex + VS Code</li> | |
| <li style="margin-bottom: 0.5em;"><strong>1:10</strong> Write your AGENTS.md</li> | |
| <li style="margin-bottom: 0.5em;"><strong>1:10</strong> Customize: Daily Digest skill</li> | |
| <li style="margin-bottom: 0.5em;"><strong>1:25</strong> Codex App + automate your digest</li> | |
| <li style="margin-bottom: 0.5em;"><strong>1:40</strong> Build: Interview Prep skill</li> | |
| <li style="margin-bottom: 0.5em;"><strong>1:50</strong> Wrap-up + homework</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="slide-footer">FLORENT DAUDENS</div> | |
| </section> | |
| <!-- ============================================================ --> | |
| <!-- WHAT IS AN AGENT? --> | |
| <!-- ============================================================ --> | |
| <section> | |
| <div class="slide-header"><span>AI AGENTS & AUTONOMOUS WORKFLOWS</span><span>CUNY BUILDERS — 2026</span></div> | |
| <div style="display: flex; flex-direction: column; justify-content: center; height: 100%;"> | |
| <h2 style="font-size: 2.4em; margin-bottom: 0.8em;">What is an agent?</h2> | |
| <div style="display: flex; align-items: center; justify-content: center; gap: 30px; margin-top: 1em;"> | |
| <div class="circle circle-lg" style="background: var(--circle-light);"> | |
| <div><strong>Chatbot</strong><br><span style="font-size: 0.8em; opacity: 0.6;">Simple Q&A</span></div> | |
| </div> | |
| <div style="font-family: 'Anton'; font-size: 2em; opacity: 0.2;">→</div> | |
| <div class="circle circle-lg" style="background: var(--circle-mid);"> | |
| <div><strong>RAG</strong><br><span style="font-size: 0.8em; opacity: 0.6;">Context-aware<br>answers</span></div> | |
| </div> | |
| <div style="font-family: 'Anton'; font-size: 2em; opacity: 0.2;">→</div> | |
| <div class="circle circle-lg" style="background: var(--circle-dark);"> | |
| <div><strong>Agent</strong><br><span style="font-size: 0.8em; opacity: 0.6;">Autonomous<br>task completion</span></div> | |
| </div> | |
| </div> | |
| <div class="callout" style="max-width: 600px; margin-top: 2em;"> | |
| <strong>Agent = LLM + autonomy + tool use + memory</strong> | |
| </div> | |
| </div> | |
| <div class="slide-footer">FLORENT DAUDENS</div> | |
| <aside class="notes">You've built RAG systems. That's context-aware answers — you ask, it reads your files, it answers. An agent goes further: it can use tools, take actions, make decisions, and chain steps without you directing each one. Today we're building agents — but starting from what you already know. Think about your capstones: a URL-to-video pipeline that turns articles into vertical video? That's an agent — it fetches, transforms, generates voiceover, adds subtitles, all autonomously. A political events calendar that scans sources and outputs structured data? Agent. Even the WhatsApp podcast recommender — it listens, reasons about preferences, and takes action. You're all building agents already, you just need the scaffolding.</aside> | |
| </section> | |
| <!-- ============================================================ --> | |
| <!-- TWO ECOSYSTEMS --> | |
| <!-- ============================================================ --> | |
| <section class="blue"> | |
| <div class="slide-header"><span>AI AGENTS & AUTONOMOUS WORKFLOWS</span><span>CUNY BUILDERS — 2026</span></div> | |
| <div style="display: flex; flex-direction: column; justify-content: center; height: 100%;"> | |
| <h2 style="font-size: 2.4em; margin-bottom: 0.8em;">Two Ecosystems,<br>Same Idea</h2> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th></th> | |
| <th>Claude (Anthropic)</th> | |
| <th>Codex (OpenAI)</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td><strong>Chat</strong></td> | |
| <td>claude.ai</td> | |
| <td>chatgpt.com</td> | |
| </tr> | |
| <tr> | |
| <td><strong>Workspace agent</strong></td> | |
| <td>Cowork</td> | |
| <td>Codex app</td> | |
| </tr> | |
| <tr> | |
| <td><strong>Code agent (VS Code)</strong></td> | |
| <td>Claude Code extension</td> | |
| <td>Codex extension</td> | |
| </tr> | |
| <tr> | |
| <td><strong>Instructions file</strong></td> | |
| <td>CLAUDE.md</td> | |
| <td>AGENTS.md</td> | |
| </tr> | |
| <tr> | |
| <td><strong>Reusable workflows</strong></td> | |
| <td>Skills (.md files)</td> | |
| <td>Skills (.md files)</td> | |
| </tr> | |
| <tr> | |
| <td><strong>External tools</strong></td> | |
| <td>MCP servers</td> | |
| <td>MCP servers</td> | |
| </tr> | |
| <tr> | |
| <td><strong>Subagents</strong></td> | |
| <td>Claude Code subagents</td> | |
| <td style="color: #a5f3a5; font-weight: 600;">✓ Just shipped (Mar 16)</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <div class="callout" style="margin-top: 1em;"> | |
| Today: <strong>Codex</strong>, because you already have it with your ChatGPT subscription. | |
| </div> | |
| </div> | |
| <div class="slide-footer">FLORENT DAUDENS</div> | |
| <aside class="notes">Same concepts, different implementations. The mental model transfers completely — AGENTS.md in Codex works the same way CLAUDE.md does in Claude Code. Skills are just markdown files in both. MCP is the same protocol. We're focusing on Codex today because you already have it — no new subscription needed.</aside> | |
| </section> | |
| <!-- ============================================================ --> | |
| <!-- THREE BUILDING BLOCKS --> | |
| <!-- ============================================================ --> | |
| <section class="dark"> | |
| <div class="slide-header"><span>AI AGENTS & AUTONOMOUS WORKFLOWS</span><span>CUNY BUILDERS — 2026</span></div> | |
| <div style="display: flex; flex-direction: column; justify-content: center; height: 100%; text-align: center;"> | |
| <h2 style="font-size: 3.6em; margin-bottom: 0.5em;">Three<br>Building<br>Blocks</h2> | |
| <div style="display: flex; gap: 14px; justify-content: center; margin-top: 0.5em;"> | |
| <div style="background: rgba(37,99,184,0.12); border: 1.5px solid rgba(37,99,184,0.25); border-radius: 4px; padding: 24px 20px; text-align: center; flex: 0 1 240px;"> | |
| <div style="font-family: 'Anton'; font-size: 2em; text-transform: uppercase; color: #7db4f0;">MCP</div> | |
| <p style="font-size: 0.82em; opacity: 0.6; margin-top: 6px;">Live data connections</p> | |
| <p style="font-size: 0.75em; opacity: 0.4; margin-top: 4px;">APIs & databases</p> | |
| </div> | |
| <div style="background: rgba(22,163,74,0.12); border: 1.5px solid rgba(22,163,74,0.25); border-radius: 4px; padding: 24px 20px; text-align: center; flex: 0 1 240px;"> | |
| <div style="font-family: 'Anton'; font-size: 2em; text-transform: uppercase; color: #6ee7a0;">Skills</div> | |
| <p style="font-size: 0.82em; opacity: 0.6; margin-top: 6px;">Reusable workflows</p> | |
| <p style="font-size: 0.75em; opacity: 0.4; margin-top: 4px;">Just markdown</p> | |
| </div> | |
| <div style="background: rgba(124,58,237,0.12); border: 1.5px solid rgba(124,58,237,0.25); border-radius: 4px; padding: 24px 20px; text-align: center; flex: 0 1 240px; position: relative;"> | |
| <div style="font-family: 'Anton'; font-size: 2em; text-transform: uppercase; color: #c4b5fd;">Subagents</div> | |
| <p style="font-size: 0.82em; opacity: 0.6; margin-top: 6px;">Parallel autonomous work</p> | |
| <p style="font-size: 0.75em; opacity: 0.4; margin-top: 4px;">Now live in Codex</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="slide-footer">FLORENT DAUDENS</div> | |
| <aside class="notes">Skills cover 90% of journalism use cases — they're markdown files, no coding. MCP is the next level: connecting to live external data. Subagents are autonomous — they can run multi-step research on their own. Today: skills. Class 6: MCP live install. Quick mental exercise: which block does your capstone need most? The headline refiner and journalist toolkit are pure skills — markdown instructions, no APIs needed. The video pipeline and cultural-references-to-streaming system need MCP to connect to external services. The Slack emoji game might use subagents to manage parallel game states. We'll get to all of these.</aside> | |
| </section> | |
| <!-- ============================================================ --> | |
| <!-- COWORK DEMO --> | |
| <!-- ============================================================ --> | |
| <section class="blue"> | |
| <div class="slide-header"><span>AI AGENTS & AUTONOMOUS WORKFLOWS</span><span>CUNY BUILDERS — 2026</span></div> | |
| <div style="display: flex; flex-direction: column; justify-content: center; height: 100%;"> | |
| <span class="pill" style="margin-bottom: 1em; width: fit-content;">Live demo</span> | |
| <h2 style="font-size: 4em;">Claude<br>Cowork</h2> | |
| <p style="opacity: 0.8; font-size: 1em; margin-top: 0.6em; max-width: 560px;">Drop a dataset. Ask it to build a dashboard. Watch it reason, plan, write code, and execute — without you touching a line.</p> | |
| <div style="display: flex; gap: 8px; margin-top: 1em;"> | |
| <span class="pill">file upload</span> | |
| <span class="pill">code execution</span> | |
| <span class="pill">plugins</span> | |
| <span class="pill">iteration</span> | |
| </div> | |
| </div> | |
| <div class="slide-footer">FLORENT DAUDENS</div> | |
| <aside class="notes">This is the clearest demo of what an agent actually does. Drop an Excel file. Prompt: "Build an interactive dashboard showing cases by country over time." The AI doesn't just answer — it reasons, writes code, runs it, shows you the result, and iterates. Notice the plugins panel: Sheets, Slack, databases. The agent can read and write to external services. This is what MCP enables. After the demo: "Today we build the same pattern with Codex, which you already have."</aside> | |
| </section> | |
| <!-- ============================================================ --> | |
| <!-- PRIVACY FIRST --> | |
| <!-- ============================================================ --> | |
| <section class="dark"> | |
| <div class="slide-header"><span>AI AGENTS & AUTONOMOUS WORKFLOWS</span><span>CUNY BUILDERS — 2026</span></div> | |
| <div class="slide-grid g-2-3"> | |
| <div class="col-heading"> | |
| <h2 style="font-size: 3.6em;">Privacy<br>First</h2> | |
| </div> | |
| <div class="col-body"> | |
| <h3 style="margin-bottom: 0.8em;">Before we build:</h3> | |
| <ul> | |
| <li><strong>NEVER</strong> share source identities with AI</li> | |
| <li>Choose which folders Codex can access</li> | |
| <li>Use local processing for sensitive work</li> | |
| <li>Keep <span style="font-family: monospace; background: rgba(232,230,225,0.1); padding: 2px 8px; border-radius: 3px;">investigations/</span> folder restricted</li> | |
| <li>Never publish AI output directly. Always editorial review</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="slide-footer">FLORENT DAUDENS</div> | |
| <aside class="notes">Non-negotiable. AI assistants don't have editorial judgment and can't protect sources. Anything you share could be processed externally. Build privacy into your workflow from day one: anonymize before you analyze, restrict sensitive folders. Codex operates inside a project folder — you control what it can see.</aside> | |
| </section> | |
| <!-- ============================================================ --> | |
| <!-- SETUP --> | |
| <!-- ============================================================ --> | |
| <section> | |
| <div class="slide-header"><span>AI AGENTS & AUTONOMOUS WORKFLOWS</span><span>CUNY BUILDERS — 2026</span></div> | |
| <div class="slide-grid g-2-3"> | |
| <div class="col-heading"> | |
| <h2 style="font-size: 3em;">Setup</h2> | |
| <p style="opacity: 0.5; margin-top: 0.4em;">Let's do this<br>together.</p> | |
| </div> | |
| <div class="col-body"> | |
| <div class="layer-stack"> | |
| <div class="layer-card" style="background: rgba(26,26,30,0.04); border: 1.5px solid rgba(26,26,30,0.12);"> | |
| <div class="layer-num">01</div> | |
| <h3>Download Codex app</h3> | |
| <p><a href="https://developers.openai.com/codex/app" target="_blank">developers.openai.com/codex/app</a> — sign in with your ChatGPT account</p> | |
| </div> | |
| <div class="layer-card" style="background: rgba(26,26,30,0.04); border: 1.5px solid rgba(26,26,30,0.12);"> | |
| <div class="layer-num">02</div> | |
| <h3>Install VS Code</h3> | |
| <p>code.visualstudio.com — if you don't have it yet</p> | |
| </div> | |
| <div class="layer-card" style="background: rgba(26,26,30,0.04); border: 1.5px solid rgba(26,26,30,0.12);"> | |
| <div class="layer-num">03</div> | |
| <h3>Install Codex extension</h3> | |
| <p>Search "Codex" in the VS Code Extensions panel</p> | |
| </div> | |
| <div class="layer-card" style="background: rgba(26,26,30,0.04); border: 1.5px solid rgba(26,26,30,0.12);"> | |
| <div class="layer-num">04</div> | |
| <h3>Download the starter kit</h3> | |
| <p><a href="https://huggingface.co/spaces/CUNY-Builders/course-material" style="color: inherit; text-decoration: underline;" target="_blank">Get the .zip</a> — unzip & open in VS Code</p> | |
| </div> | |
| <div class="layer-card" style="background: rgba(37,99,184,0.08); border: 1.5px solid rgba(37,99,184,0.2);"> | |
| <div class="layer-num">05</div> | |
| <h3>Create AGENTS.md</h3> | |
| <p>New file in root — this is where we're going next</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="slide-footer">FLORENT DAUDENS</div> | |
| <aside class="notes">Step by step together. Raise your hand if you hit a problem — I'll stay on this slide until everyone is set up. The most important thing we're about to create is AGENTS.md. Everything else is scaffolding.</aside> | |
| </section> | |
| <!-- ============================================================ --> | |
| <!-- FOLDER STRUCTURE --> | |
| <!-- ============================================================ --> | |
| <section> | |
| <div class="slide-header"><span>AI AGENTS & AUTONOMOUS WORKFLOWS</span><span>CUNY BUILDERS — 2026</span></div> | |
| <div class="slide-grid g-2-3"> | |
| <div class="col-heading"> | |
| <h2 style="font-size: 2.8em;">Structure<br>= Better<br>Help</h2> | |
| </div> | |
| <div class="col-body"> | |
| <div class="code-block">my-assistant/ | |
| ├── AGENTS.md <span style="opacity:0.4"># Your identity & rules</span> | |
| ├── context/ | |
| │ ├── beat-notes.md <span style="opacity:0.4"># Your beat, key sources</span> | |
| │ └── style-guide.md <span style="opacity:0.4"># House style conventions</span> | |
| ├── skills/ | |
| │ ├── daily-digest.md <span style="opacity:0.4"># We'll customize this first</span> | |
| │ └── interview-prep.md <span style="opacity:0.4"># Then build this from scratch</span> | |
| ├── research/ <span style="opacity:0.4"># Reports, PDFs, data</span> | |
| ├── drafts/ <span style="opacity:0.4"># Work in progress</span> | |
| └── todo.md <span style="opacity:0.4"># Task list</span></div> | |
| <p style="margin-top: 0.8em; opacity: 0.6; font-size: 0.85em;">An AI without context is just a chatbot. Structure gives it your world.</p> | |
| </div> | |
| </div> | |
| <div class="slide-footer">FLORENT DAUDENS</div> | |
| <aside class="notes">This folder structure is what separates a generic chatbot from your personal assistant. AGENTS.md is identity. context/ is knowledge. skills/ is workflows. The AI can read all of it. The more context you give it, the more relevant its help becomes. Think of it as setting up a desk for a new colleague — but you control exactly what they can see. For your capstones, think about what goes in context/: if you're building the story archive with conversational interviews, your context/ folder might have your publication's archive structure and interview templates. If you're building the podcast recommender, it might have listener personas and genre taxonomies.</aside> | |
| </section> | |
| <!-- ============================================================ --> | |
| <!-- AGENTS.MD: YOUR IDENTITY --> | |
| <!-- ============================================================ --> | |
| <section> | |
| <div class="slide-header"><span>AI AGENTS & AUTONOMOUS WORKFLOWS</span><span>CUNY BUILDERS — 2026</span></div> | |
| <div class="slide-grid g-2-3"> | |
| <div class="col-heading"> | |
| <span class="pill" style="margin-bottom: 0.8em; align-self: flex-start; width: fit-content;">Most important file</span> | |
| <h2 style="font-size: 2.6em;">AGENTS<br>.md</h2> | |
| <p style="opacity: 0.5; margin-top: 0.4em;">The AI reads<br>this first,<br>every time.</p> | |
| </div> | |
| <div class="col-body"> | |
| <div class="code-block"># My Assistant | |
| ## About Me | |
| - Name: [your name] | |
| - Role: [your role] | |
| - Beat: [what you cover] | |
| - Organization: [your org] | |
| ## How to Help Me | |
| - [Your preferences — tone, format, depth] | |
| - [What you care about most] | |
| - [What to avoid] | |
| ## My Current Projects | |
| - [Active story or project] | |
| ## Style | |
| - [AP style / house rules]</div> | |
| </div> | |
| </div> | |
| <div class="slide-footer">FLORENT DAUDENS</div> | |
| <aside class="notes">Start filling this in now. The better you describe yourself, the more relevant every response becomes. Your beat, your role, your current projects, how you like things formatted. This is the difference between a generic AI and your AI. Take 5 minutes — I'll come around to help. Concrete examples from your projects: if you're building the headline refiner, your AGENTS.md starts with your house style rules and what makes a good headline at your org. If you're building the cultural-references system, it starts with your broadcaster's streaming catalog structure. The "Current Projects" section should describe your capstone — that way the assistant can connect everything it does back to what you're building. MAP YOUR CAPSTONE: write the first 3 lines of your project's AGENTS.md right now.</aside> | |
| </section> | |
| <!-- ============================================================ --> | |
| <!-- TRY IT NOW: AGENTS.MD TEST --> | |
| <!-- ============================================================ --> | |
| <section class="blue"> | |
| <div class="slide-header"><span>AI AGENTS & AUTONOMOUS WORKFLOWS</span><span>CUNY BUILDERS — 2026</span></div> | |
| <div style="display: flex; flex-direction: column; justify-content: center; height: 100%;"> | |
| <h2 style="font-size: 3.2em; margin-bottom: 0.8em;">Try It Now</h2> | |
| <div class="layer-stack" style="max-width: 680px;"> | |
| <div class="layer-card" style="background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2);"> | |
| <h3 style="color: white;">"Read my AGENTS.md and tell me what you understand about me."</h3> | |
| </div> | |
| <div class="layer-card" style="background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2);"> | |
| <h3 style="color: white;">"What are my current projects?"</h3> | |
| </div> | |
| <div class="layer-card" style="background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2);"> | |
| <h3 style="color: white;">"How would you help me prepare for an interview?"</h3> | |
| </div> | |
| </div> | |
| <p style="opacity: 0.7; margin-top: 1em;">If it gets something wrong — that's your cue to improve the file.</p> | |
| </div> | |
| <div class="slide-footer">FLORENT DAUDENS</div> | |
| <aside class="notes">This is the test. If it describes you accurately, your AGENTS.md is doing its job. If it misses something or gets it wrong, that's signal — go back and add the missing context. The iteration loop on AGENTS.md is as important as writing it the first time. Bonus prompt for capstone teams: try asking "How would you help me build [your capstone project]?" — if the assistant gives generic advice, your AGENTS.md needs more project-specific context. If it gives targeted suggestions, you're on the right track.</aside> | |
| </section> | |
| <!-- ============================================================ --> | |
| <!-- SKILLS: THE 90% SOLUTION --> | |
| <!-- ============================================================ --> | |
| <section> | |
| <div class="slide-header"><span>AI AGENTS & AUTONOMOUS WORKFLOWS</span><span>CUNY BUILDERS — 2026</span></div> | |
| <div class="slide-grid g-2-3"> | |
| <div class="col-heading"> | |
| <span class="pill" style="margin-bottom: 0.8em; align-self: flex-start; width: fit-content;">Start here</span> | |
| <h2 style="font-size: 3em;">Skills</h2> | |
| <p style="opacity: 0.5; margin-top: 0.4em;">Write it once,<br>use it forever.</p> | |
| </div> | |
| <div class="col-body"> | |
| <p>A skill is a <strong>markdown file</strong> with instructions the AI follows when you invoke it.</p> | |
| <div style="display: flex; gap: 8px; flex-wrap: wrap; margin: 0.8em 0;"> | |
| <span class="pill" style="font-size: 0.65em; padding: 5px 14px;">interview-prep.md</span> | |
| <span class="pill" style="font-size: 0.65em; padding: 5px 14px;">fact-checker.md</span> | |
| <span class="pill" style="font-size: 0.65em; padding: 5px 14px;">daily-digest.md</span> | |
| <span class="pill" style="font-size: 0.65em; padding: 5px 14px;">story-pitch.md</span> | |
| <span class="pill" style="font-size: 0.65em; padding: 5px 14px;">source-monitor.md</span> | |
| </div> | |
| <div class="callout"> | |
| No programming. Just plain English instructions. Shareable with your whole team. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="slide-footer">FLORENT DAUDENS</div> | |
| <aside class="notes">A skill is just a markdown file — a text file with instructions. Interview prep, fact-checking, daily digest, story pitching. You write it once in plain English: "When I invoke this skill, read my beat notes and draft 10 interview questions organized by theme." The AI follows the instructions every time. No code. Key insight: skills are shareable. Your interview prep skill works for everyone on your team. MAP YOUR CAPSTONE: what's the first skill your project needs? If you're building the video pipeline, it's probably an "article-to-script" skill that takes a URL and outputs a video script with shot notes. The journalist toolkit? That's literally three skills in a trench coat — source-finder, interview-prep, timeline-builder. The headline refiner is one focused skill with your house style rules baked in.</aside> | |
| </section> | |
| <!-- ============================================================ --> | |
| <!-- CUSTOMIZE: DAILY DIGEST SKILL --> | |
| <!-- ============================================================ --> | |
| <section class="red"> | |
| <div class="slide-header"><span>AI AGENTS & AUTONOMOUS WORKFLOWS</span><span>CUNY BUILDERS — 2026</span></div> | |
| <div style="display: flex; flex-direction: column; justify-content: center; height: 100%; text-align: center;"> | |
| <span class="pill" style="margin-bottom: 0.8em; width: fit-content; align-self: center;">Hands-on</span> | |
| <h2 style="font-size: 3.6em;">Daily<br>Digest Skill</h2> | |
| <p style="opacity: 0.8; font-size: 1em; margin-top: 0.5em;">Open <code style="font-family: monospace; background: rgba(255,255,255,0.15); padding: 2px 10px; border-radius: 3px;">skills/daily-digest.md</code> from the starter kit</p> | |
| </div> | |
| <div class="slide-footer">FLORENT DAUDENS</div> | |
| <aside class="notes">This file already exists in the starter kit. Instead of building from scratch, we'll read it together and customize it. This is how most skill work happens in practice — you take a template and make it yours.</aside> | |
| </section> | |
| <!-- ============================================================ --> | |
| <!-- DAILY DIGEST: THE TEMPLATE --> | |
| <!-- ============================================================ --> | |
| <section> | |
| <div class="slide-header"><span>AI AGENTS & AUTONOMOUS WORKFLOWS</span><span>CUNY BUILDERS — 2026</span></div> | |
| <div class="slide-grid g-2-3"> | |
| <div class="col-heading"> | |
| <h2 style="font-size: 2.4em;">Anatomy<br>of a Skill</h2> | |
| <p style="opacity: 0.5; margin-top: 0.4em; font-size: 0.9em;">Four parts.<br>All plain English.</p> | |
| </div> | |
| <div class="col-body"> | |
| <div class="code-block" style="font-size: 0.68em;"># Daily Digest | |
| When I ask for a daily digest, follow these steps: | |
| 1. Read context/beat-notes.md for my themes | |
| 2. Read context/sources.md for my feeds | |
| 3. Check research/ for new material | |
| 4. Select the 8-10 most relevant items | |
| 5. Draft a briefing with links and story angles | |
| ## Output format | |
| Save to drafts/daily-digest-YYYY-MM-DD.md: | |
| - Theme of the day | |
| - Top items (headline, source, why it matters) | |
| - Story angles | |
| - Sources checked | |
| ## Rules | |
| - Never fabricate links | |
| - Flag inaccessible sources | |
| - Prioritize: timely, relevant, actionable</div> | |
| </div> | |
| </div> | |
| <div class="slide-footer">FLORENT DAUDENS</div> | |
| <aside class="notes">Walk through the four parts: trigger (when to run), steps (what to do), output format (what it produces), rules (guardrails). This is the pattern for every skill. The steps reference your own files — that's what makes it personal, not generic.</aside> | |
| </section> | |
| <!-- ============================================================ --> | |
| <!-- DAILY DIGEST: MAKE IT YOURS --> | |
| <!-- ============================================================ --> | |
| <section class="blue"> | |
| <div class="slide-header"><span>AI AGENTS & AUTONOMOUS WORKFLOWS</span><span>CUNY BUILDERS — 2026</span></div> | |
| <div style="display: flex; flex-direction: column; justify-content: center; height: 100%;"> | |
| <h2 style="font-size: 3.2em; margin-bottom: 0.8em;">Make It<br>Yours</h2> | |
| <div class="layer-stack" style="max-width: 680px;"> | |
| <div class="layer-card" style="background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2);"> | |
| <h3 style="color: white;">Add your actual RSS feeds and websites to sources.md</h3> | |
| </div> | |
| <div class="layer-card" style="background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2);"> | |
| <h3 style="color: white;">Change the number of items (maybe 5, not 10)</h3> | |
| </div> | |
| <div class="layer-card" style="background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2);"> | |
| <h3 style="color: white;">Add a beat-specific section (court filings, earnings, policy changes...)</h3> | |
| </div> | |
| <div class="layer-card" style="background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2);"> | |
| <h3 style="color: white;">Adjust the output format to match how you start your day</h3> | |
| </div> | |
| </div> | |
| <p style="opacity: 0.7; margin-top: 1em;">Then test it: <em>"Give me my daily digest"</em></p> | |
| </div> | |
| <div class="slide-footer">FLORENT DAUDENS</div> | |
| <aside class="notes">Everyone opens skills/daily-digest.md and starts editing. The goal isn't perfection — it's getting a version that reflects your actual workflow. If you cover courts, add "Check recent court filings." If you cover tech, add "Scan Product Hunt and Hacker News." After editing, test it: "Give me my daily digest." What worked? What's missing? Edit again. This is the loop. Think about how a daily digest connects to your capstone: the political events calendar team could adapt this template to scan for political events instead of news. The cultural-references team could build a "what's trending in culture today" digest that feeds their recommendation engine. Same pattern, different content.</aside> | |
| </section> | |
| <!-- ============================================================ --> | |
| <!-- CODEX APP: FEATURES --> | |
| <!-- ============================================================ --> | |
| <section> | |
| <div class="slide-header"><span>AI AGENTS & AUTONOMOUS WORKFLOWS</span><span>CUNY BUILDERS — 2026</span></div> | |
| <div class="slide-grid g-2-3"> | |
| <div class="col-heading"> | |
| <span class="pill" style="margin-bottom: 0.8em; align-self: flex-start; width: fit-content;">Live demo</span> | |
| <h2 style="font-size: 2.6em;">Codex<br>App</h2> | |
| <p style="opacity: 0.5; margin-top: 0.4em;">The other half<br>of your OpenAI<br>subscription.</p> | |
| </div> | |
| <div class="col-body"> | |
| <div class="layer-stack"> | |
| <div class="layer-card" style="background: rgba(37,99,184,0.06); border: 1.5px solid rgba(37,99,184,0.15);"> | |
| <h3>Multi-agent task management</h3> | |
| <p>Run parallel tasks across projects, review results in one place</p> | |
| </div> | |
| <div class="layer-card" style="background: rgba(37,99,184,0.09); border: 1.5px solid rgba(37,99,184,0.2);"> | |
| <h3>Git integration</h3> | |
| <p>Review diffs, stage changes, commit — all without leaving the app</p> | |
| </div> | |
| <div class="layer-card" style="background: rgba(37,99,184,0.12); border: 1.5px solid rgba(37,99,184,0.25);"> | |
| <h3>Automations</h3> | |
| <p>Scheduled background tasks: scan for bugs, triage issues, generate briefs</p> | |
| </div> | |
| <div class="layer-card" style="background: rgba(37,99,184,0.15); border: 1.5px solid rgba(37,99,184,0.3);"> | |
| <h3>Skills + MCP</h3> | |
| <p>Extend your agent with reusable workflows and external tool connections</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="slide-footer">FLORENT DAUDENS</div> | |
| <aside class="notes">Quick tour of the Codex app — the desktop interface for managing coding agents. It reads your whole workspace just like the VS Code extension. The key feature for us today: Automations. You can schedule a skill to run on a recurring basis. We're about to use that with the daily digest skill you just customized.</aside> | |
| </section> | |
| <!-- ============================================================ --> | |
| <!-- CODEX APP VS CHATGPT --> | |
| <!-- ============================================================ --> | |
| <section class="dark"> | |
| <div class="slide-header"><span>AI AGENTS & AUTONOMOUS WORKFLOWS</span><span>CUNY BUILDERS — 2026</span></div> | |
| <div style="display: flex; flex-direction: column; justify-content: center; height: 100%;"> | |
| <h2 style="font-size: 2.4em; margin-bottom: 0.6em;">Codex App vs<br>ChatGPT</h2> | |
| <p style="opacity: 0.6; margin-bottom: 0.8em;">You have both. Use them for different things.</p> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th></th> | |
| <th>ChatGPT</th> | |
| <th>Codex App</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td><strong>Best for</strong></td> | |
| <td>General tasks, research, writing</td> | |
| <td>Workspace-aware coding tasks</td> | |
| </tr> | |
| <tr> | |
| <td><strong>Data analysis</strong></td> | |
| <td>Upload CSV/PDF, build charts</td> | |
| <td>Analyze your codebase and project files</td> | |
| </tr> | |
| <tr> | |
| <td><strong>Automation</strong></td> | |
| <td>Scheduled prompts, email output</td> | |
| <td>Recurring dev tasks, results in app inbox</td> | |
| </tr> | |
| <tr> | |
| <td><strong>Context</strong></td> | |
| <td>Conversation only</td> | |
| <td>Reads your whole workspace (AGENTS.md, skills, files)</td> | |
| </tr> | |
| <tr> | |
| <td><strong>Execution</strong></td> | |
| <td>Sandboxed code, web browsing, canvas</td> | |
| <td>Local terminal, Git, parallel agents</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="slide-footer">FLORENT DAUDENS</div> | |
| <aside class="notes">Important distinction: ChatGPT is where you upload a PDF and ask "what are the 5 most newsworthy facts?" or paste a spreadsheet for analysis. The Codex app is where you manage coding agents that work on your actual project files. Both are included in your ChatGPT subscription. Think: ChatGPT for general AI work, Codex for workspace-aware development.</aside> | |
| </section> | |
| <!-- ============================================================ --> | |
| <!-- AUTOMATE YOUR DIGEST --> | |
| <!-- ============================================================ --> | |
| <section class="red"> | |
| <div class="slide-header"><span>AI AGENTS & AUTONOMOUS WORKFLOWS</span><span>CUNY BUILDERS — 2026</span></div> | |
| <div style="display: flex; flex-direction: column; justify-content: center; height: 100%;"> | |
| <span class="pill" style="margin-bottom: 0.8em; width: fit-content;">Hands-on</span> | |
| <h2 style="font-size: 3.2em; margin-bottom: 0.8em;">Automate<br>Your Digest</h2> | |
| <p style="opacity: 0.8; font-size: 1em; max-width: 640px; margin-bottom: 1em;">You just customized the skill. Now make it run automatically.</p> | |
| <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 720px;"> | |
| <div style="background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2); border-radius: 4px; padding: 16px 20px;"> | |
| <div style="font-family: 'Anton'; font-size: 1.2em; text-transform: uppercase; opacity: 0.4; margin-bottom: 4px;">01</div> | |
| <h3 style="color: white; font-size: 0.9em;">Open the Codex app and navigate to your project</h3> | |
| </div> | |
| <div style="background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2); border-radius: 4px; padding: 16px 20px;"> | |
| <div style="font-family: 'Anton'; font-size: 1.2em; text-transform: uppercase; opacity: 0.4; margin-bottom: 4px;">02</div> | |
| <h3 style="color: white; font-size: 0.9em;">Create a new Automation</h3> | |
| </div> | |
| <div style="background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2); border-radius: 4px; padding: 16px 20px;"> | |
| <div style="font-family: 'Anton'; font-size: 1.2em; text-transform: uppercase; opacity: 0.4; margin-bottom: 4px;">03</div> | |
| <h3 style="color: white; font-size: 0.9em;">Attach your daily-digest skill</h3> | |
| </div> | |
| <div style="background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2); border-radius: 4px; padding: 16px 20px;"> | |
| <div style="font-family: 'Anton'; font-size: 1.2em; text-transform: uppercase; opacity: 0.4; margin-bottom: 4px;">04</div> | |
| <h3 style="color: white; font-size: 0.9em;">Schedule it: every day at 6 AM</h3> | |
| </div> | |
| </div> | |
| <p style="opacity: 0.6; margin-top: 0.8em; font-size: 0.85em;">Tomorrow morning: your digest is waiting in the Codex inbox when you open your laptop.</p> | |
| </div> | |
| <div class="slide-footer">FLORENT DAUDENS</div> | |
| <aside class="notes">This is the immediate payoff of the skill they just customized. Walk through the Codex app UI together: create automation, point it to the skill, set the schedule. Every morning at 6 AM, the agent runs their digest skill and the output lands in their Codex inbox. If someone's machine won't be on at 6 AM, pick a time that works — the point is the pattern, not the exact hour.</aside> | |
| </section> | |
| <!-- ============================================================ --> | |
| <!-- BUILD FROM SCRATCH: INTERVIEW PREP SKILL --> | |
| <!-- ============================================================ --> | |
| <section class="red"> | |
| <div class="slide-header"><span>AI AGENTS & AUTONOMOUS WORKFLOWS</span><span>CUNY BUILDERS — 2026</span></div> | |
| <div style="display: flex; flex-direction: column; justify-content: center; height: 100%; text-align: center;"> | |
| <span class="pill" style="margin-bottom: 0.8em; width: fit-content; align-self: center;">Build from scratch</span> | |
| <h2 style="font-size: 3.6em;">Interview<br>Prep Skill</h2> | |
| <p style="opacity: 0.8; font-size: 1em; margin-top: 0.5em;">Create <code style="font-family: monospace; background: rgba(255,255,255,0.15); padding: 2px 10px; border-radius: 3px;">skills/interview-prep.md</code></p> | |
| <p style="opacity: 0.5; font-size: 0.85em; margin-top: 0.3em;">Now you know the pattern — trigger, steps, output, rules.</p> | |
| </div> | |
| <div class="slide-footer">FLORENT DAUDENS</div> | |
| <aside class="notes">Now that you've seen the anatomy of a skill with daily digest, let's build one from scratch. Same four parts: trigger, steps, output format, rules. I'll build it on screen and you follow along — then customize for your beat.</aside> | |
| </section> | |
| <!-- ============================================================ --> | |
| <!-- SKILL TEMPLATE --> | |
| <!-- ============================================================ --> | |
| <section> | |
| <div class="slide-header"><span>AI AGENTS & AUTONOMOUS WORKFLOWS</span><span>CUNY BUILDERS — 2026</span></div> | |
| <div class="slide-grid g-2-3"> | |
| <div class="col-heading"> | |
| <h2 style="font-size: 2.4em;">The<br>Template</h2> | |
| <p style="opacity: 0.5; margin-top: 0.4em; font-size: 0.9em;">Customize for<br>your beat.</p> | |
| </div> | |
| <div class="col-body"> | |
| <div class="code-block"># Interview Prep Skill | |
| When I ask you to prepare for an interview: | |
| 1. Read my beat notes in context/beat-notes.md | |
| 2. Research the person / organization | |
| 3. Find recent public statements, articles, posts | |
| 4. Identify 3 key themes or tensions to explore | |
| 5. Draft 10 questions, organized by theme | |
| 6. Flag claims that need verification | |
| 7. Note connections to my current projects | |
| ## Output format | |
| - Brief bio (3-4 lines) | |
| - Key themes with context | |
| - Questions: easy → hard | |
| - Suggested follow-ups | |
| - Background links</div> | |
| </div> | |
| </div> | |
| <div class="slide-footer">FLORENT DAUDENS</div> | |
| <aside class="notes">Walk through each step. The power is in step 1: it reads your actual beat notes, not generic journalism knowledge. Steps 6-7 are important — it connects research to your specific work and flags what to verify. After we build this together, the next slide is the test. Notice the pattern: trigger, steps, output format, rules. This is the same skeleton for every skill you'll build — including for your capstones. The story archive team could use this exact structure for a "story-intake" skill: when I want to archive a story, read my archive structure, ask me guided questions about the piece, output a structured record. Same four parts.</aside> | |
| </section> | |
| <!-- ============================================================ --> | |
| <!-- TEST YOUR SKILL --> | |
| <!-- ============================================================ --> | |
| <section class="blue"> | |
| <div class="slide-header"><span>AI AGENTS & AUTONOMOUS WORKFLOWS</span><span>CUNY BUILDERS — 2026</span></div> | |
| <div style="display: flex; flex-direction: column; justify-content: center; height: 100%;"> | |
| <h2 style="font-size: 3.2em; margin-bottom: 0.8em;">Test It</h2> | |
| <div class="layer-stack" style="max-width: 680px;"> | |
| <div class="layer-card" style="background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2);"> | |
| <h3 style="color: white;">"Prepare me for an interview with [someone on your beat]"</h3> | |
| </div> | |
| <div class="layer-card" style="background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2);"> | |
| <h3 style="color: white; opacity: 0.6;">If it misses something → update the skill file</h3> | |
| </div> | |
| <div class="layer-card" style="background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2);"> | |
| <h3 style="color: white; opacity: 0.6;">"That missed X — update the approach to always include it."</h3> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="slide-footer">FLORENT DAUDENS</div> | |
| <aside class="notes">The iteration loop is the skill. Don't aim for perfect on the first run — aim for useful enough to improve. If it misses your org's focus, add that to AGENTS.md. If it misses a step, add it to the skill. Every refinement makes the next run better. This is exactly how you'll develop your capstone skills too. The Slack emoji game team won't get the game rules right on attempt one — but each failed round tells you what to add to the skill file. The headline refiner will suggest awkward headlines at first — add your house style gotchas and it gets sharper every iteration.</aside> | |
| </section> | |
| <!-- ============================================================ --> | |
| <!-- THE COMPOUND EFFECT --> | |
| <!-- ============================================================ --> | |
| <section> | |
| <div class="slide-header"><span>AI AGENTS & AUTONOMOUS WORKFLOWS</span><span>CUNY BUILDERS — 2026</span></div> | |
| <div class="slide-grid g-2-3"> | |
| <div class="col-heading"> | |
| <h2 style="font-size: 3em;">The<br>Compound<br>Effect</h2> | |
| </div> | |
| <div class="col-body"> | |
| <div class="layer-stack"> | |
| <div class="layer-card" style="background: rgba(22,163,74,0.06); border: 1.5px solid rgba(22,163,74,0.15);"> | |
| <div class="layer-num">01</div> | |
| <h3>Share skills with colleagues</h3> | |
| <p>Your interview prep skill works for everyone on the team</p> | |
| </div> | |
| <div class="layer-card" style="background: rgba(22,163,74,0.10); border: 1.5px solid rgba(22,163,74,0.2);"> | |
| <div class="layer-num">02</div> | |
| <h3>Every file you add makes it smarter</h3> | |
| <p>More context = more relevant help. Beat notes, source lists, past research.</p> | |
| </div> | |
| <div class="layer-card" style="background: rgba(22,163,74,0.14); border: 1.5px solid rgba(22,163,74,0.25);"> | |
| <div class="layer-num">03</div> | |
| <h3>Your assistant grows with you</h3> | |
| <p>Ask it to self-correct: "That missed X — update the skill."</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="slide-footer">FLORENT DAUDENS</div> | |
| <aside class="notes">This isn't a tool you learn once and use forever unchanged. It's a system that compounds. The people who get the most from AI assistants are the ones who spend 10 minutes a week refining their setup — adding a beat note, sharpening a skill, updating their AGENTS.md with something new they learned. The best organizations share skills across teams. For your capstones: every piece of research, every dataset, every source list you add to your workspace makes the assistant more useful for your specific project. The journalist toolkit team can share skills across team members — one person writes the source-finder skill, another writes the timeline generator, and everyone benefits.</aside> | |
| </section> | |
| <!-- ============================================================ --> | |
| <!-- WHAT THE BUILDERS OF CLAUDE CODE LEARNED (THARIQ) --> | |
| <!-- ============================================================ --> | |
| <section class="blue"> | |
| <div class="slide-header"><span>AI AGENTS & AUTONOMOUS WORKFLOWS</span><span>CUNY BUILDERS — 2026</span></div> | |
| <div style="display: flex; flex-direction: column; justify-content: center; height: 100%;"> | |
| <span class="pill" style="margin-bottom: 0.8em; width: fit-content;">From the people who built it</span> | |
| <h2 style="font-size: 2.4em; margin-bottom: 0.5em;">9 Types<br>of Skills</h2> | |
| <p style="opacity: 0.7; font-size: 0.85em; margin-bottom: 0.6em;">Anthropic cataloged hundreds of internal skills. They cluster into 9 categories.</p> | |
| <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;"> | |
| <div style="background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2); border-radius: 4px; padding: 12px 14px;"> | |
| <div style="font-family: 'Anton'; font-size: 1em; text-transform: uppercase; opacity: 0.4;">01</div> | |
| <h3 style="color: white; font-size: 0.8em;">Library & API Reference</h3> | |
| <p style="font-size: 0.65em; opacity: 0.5; margin: 2px 0 0;">How to use tools correctly</p> | |
| </div> | |
| <div style="background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2); border-radius: 4px; padding: 12px 14px;"> | |
| <div style="font-family: 'Anton'; font-size: 1em; text-transform: uppercase; opacity: 0.4;">02</div> | |
| <h3 style="color: white; font-size: 0.8em;">Product Verification</h3> | |
| <p style="font-size: 0.65em; opacity: 0.5; margin: 2px 0 0;">Test that output is correct</p> | |
| </div> | |
| <div style="background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2); border-radius: 4px; padding: 12px 14px;"> | |
| <div style="font-family: 'Anton'; font-size: 1em; text-transform: uppercase; opacity: 0.4;">03</div> | |
| <h3 style="color: white; font-size: 0.8em;">Data Fetching & Analysis</h3> | |
| <p style="font-size: 0.65em; opacity: 0.5; margin: 2px 0 0;">Connect to data sources</p> | |
| </div> | |
| <div style="background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2); border-radius: 4px; padding: 12px 14px;"> | |
| <div style="font-family: 'Anton'; font-size: 1em; text-transform: uppercase; opacity: 0.4;">04</div> | |
| <h3 style="color: white; font-size: 0.8em;">Business Process Automation</h3> | |
| <p style="font-size: 0.65em; opacity: 0.5; margin: 2px 0 0;">Recurring workflows</p> | |
| </div> | |
| <div style="background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2); border-radius: 4px; padding: 12px 14px;"> | |
| <div style="font-family: 'Anton'; font-size: 1em; text-transform: uppercase; opacity: 0.4;">05</div> | |
| <h3 style="color: white; font-size: 0.8em;">Code Scaffolding</h3> | |
| <p style="font-size: 0.65em; opacity: 0.5; margin: 2px 0 0;">Generate boilerplate</p> | |
| </div> | |
| <div style="background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2); border-radius: 4px; padding: 12px 14px;"> | |
| <div style="font-family: 'Anton'; font-size: 1em; text-transform: uppercase; opacity: 0.4;">06</div> | |
| <h3 style="color: white; font-size: 0.8em;">Code Quality & Review</h3> | |
| <p style="font-size: 0.65em; opacity: 0.5; margin: 2px 0 0;">Enforce standards</p> | |
| </div> | |
| <div style="background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2); border-radius: 4px; padding: 12px 14px;"> | |
| <div style="font-family: 'Anton'; font-size: 1em; text-transform: uppercase; opacity: 0.4;">07</div> | |
| <h3 style="color: white; font-size: 0.8em;">CI/CD & Deployment</h3> | |
| <p style="font-size: 0.65em; opacity: 0.5; margin: 2px 0 0;">Ship and monitor</p> | |
| </div> | |
| <div style="background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2); border-radius: 4px; padding: 12px 14px;"> | |
| <div style="font-family: 'Anton'; font-size: 1em; text-transform: uppercase; opacity: 0.4;">08</div> | |
| <h3 style="color: white; font-size: 0.8em;">Runbooks</h3> | |
| <p style="font-size: 0.65em; opacity: 0.5; margin: 2px 0 0;">Symptom → investigation → report</p> | |
| </div> | |
| <div style="background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2); border-radius: 4px; padding: 12px 14px;"> | |
| <div style="font-family: 'Anton'; font-size: 1em; text-transform: uppercase; opacity: 0.4;">09</div> | |
| <h3 style="color: white; font-size: 0.8em;">Infrastructure Ops</h3> | |
| <p style="font-size: 0.65em; opacity: 0.5; margin: 2px 0 0;">Maintenance with guardrails</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="slide-footer">FLORENT DAUDENS</div> | |
| <aside class="notes">This comes from Thariq at Anthropic — the person who built Claude Code. After cataloging hundreds of internal skills, they found 9 recurring categories. The best skills fit cleanly into one; the confusing ones straddle several. For journalism: your daily digest is a "Business Process Automation" skill (category 4). Your interview prep is a "Runbook" (category 8) — symptom is "I have an interview," investigation is research, report is the question list. MAP YOUR CAPSTONE: which category does your first skill fall into? The URL-to-video pipeline is "Business Process Automation." The headline refiner is "Product Verification" — it checks output quality. The political calendar is "Data Fetching & Analysis." The Slack emoji game is a "Runbook" with a playful twist. Knowing the category helps you write a better skill because you can follow that category's pattern.</aside> | |
| </section> | |
| <!-- ============================================================ --> | |
| <!-- THARIQ: TIPS FOR MAKING SKILLS --> | |
| <!-- ============================================================ --> | |
| <section> | |
| <div class="slide-header"><span>AI AGENTS & AUTONOMOUS WORKFLOWS</span><span>CUNY BUILDERS — 2026</span></div> | |
| <div class="slide-grid g-2-3"> | |
| <div class="col-heading"> | |
| <h2 style="font-size: 2.6em;">How to<br>Write<br>Good<br>Skills</h2> | |
| <p style="opacity: 0.5; margin-top: 0.4em; font-size: 0.85em;">Insider tips from<br>Anthropic's team.</p> | |
| </div> | |
| <div class="col-body"> | |
| <div class="layer-stack"> | |
| <div class="layer-card" style="background: rgba(26,26,30,0.04); border: 1.5px solid rgba(26,26,30,0.12);"> | |
| <div class="layer-num">01</div> | |
| <h3>Don't state the obvious</h3> | |
| <p>The AI already knows how to code. Focus on what makes YOUR workflow unique.</p> | |
| </div> | |
| <div class="layer-card" style="background: rgba(26,26,30,0.04); border: 1.5px solid rgba(26,26,30,0.12);"> | |
| <div class="layer-num">02</div> | |
| <h3>Build a gotchas section</h3> | |
| <p>Highest-signal content. Every time the AI fails, add the fix to the skill.</p> | |
| </div> | |
| <div class="layer-card" style="background: rgba(26,26,30,0.04); border: 1.5px solid rgba(26,26,30,0.12);"> | |
| <div class="layer-num">03</div> | |
| <h3>A skill is a folder, not just a file</h3> | |
| <p>Include reference files, templates, examples. The AI reads them when needed.</p> | |
| </div> | |
| <div class="layer-card" style="background: rgba(26,26,30,0.04); border: 1.5px solid rgba(26,26,30,0.12);"> | |
| <div class="layer-num">04</div> | |
| <h3>Don't over-specify</h3> | |
| <p>Give the AI information and flexibility — don't railroad every step.</p> | |
| </div> | |
| <div class="layer-card" style="background: rgba(26,26,30,0.04); border: 1.5px solid rgba(26,26,30,0.12);"> | |
| <div class="layer-num">05</div> | |
| <h3>The description is a trigger, not a summary</h3> | |
| <p>It tells the AI WHEN to use the skill, not what it does.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="slide-footer">FLORENT DAUDENS</div> | |
| <aside class="notes">Five tips from the people who build Claude Code. Number 2 is the biggest one: every time the AI gets something wrong, add it to a "gotchas" section in your skill file. Over time, the skill gets smarter because it learns from its own mistakes. Number 3 is subtle but powerful: your skill can be a whole folder — the main file plus reference docs, templates, examples. The AI discovers and reads them when it needs them. Number 5 is counterintuitive: the description field isn't for humans, it's for the AI to decide when to activate the skill.</aside> | |
| </section> | |
| <!-- ============================================================ --> | |
| <!-- HOMEWORK --> | |
| <!-- ============================================================ --> | |
| <section class="dark"> | |
| <div class="slide-header"><span>AI AGENTS & AUTONOMOUS WORKFLOWS</span><span>CUNY BUILDERS — 2026</span></div> | |
| <div style="display: flex; flex-direction: column; justify-content: center; height: 100%;"> | |
| <h2 style="font-size: 3.2em; margin-bottom: 0.8em;">Before<br>April 9</h2> | |
| <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 800px;"> | |
| <div style="background: rgba(232,230,225,0.06); border: 1.5px solid rgba(232,230,225,0.15); border-radius: 4px; padding: 20px;"> | |
| <h3 style="color: var(--text-light);">Use it for real work</h3> | |
| <p style="opacity: 0.6; margin-top: 6px;">Use your assistant at least once for an actual task. Note what works and what's missing.</p> | |
| </div> | |
| <div style="background: rgba(232,230,225,0.06); border: 1.5px solid rgba(232,230,225,0.15); border-radius: 4px; padding: 20px;"> | |
| <h3 style="color: var(--text-light);">Improve your AGENTS.md</h3> | |
| <p style="opacity: 0.6; margin-top: 6px;">Add one thing you wish it knew about you or your beat. Add a context file.</p> | |
| </div> | |
| <div style="background: rgba(232,230,225,0.06); border: 1.5px solid rgba(232,230,225,0.15); border-radius: 4px; padding: 20px;"> | |
| <h3 style="color: var(--text-light);">Think about your capstone</h3> | |
| <p style="opacity: 0.6; margin-top: 6px;">Try to make your assistant useful for your capstone project. Bring context, data, or sources you'll need.</p> | |
| </div> | |
| <div style="background: rgba(37,99,184,0.15); border: 1.5px solid rgba(37,99,184,0.3); border-radius: 4px; padding: 20px;"> | |
| <h3 style="color: #7db4f0;">Explore Codex app</h3> | |
| <p style="opacity: 0.6; margin-top: 6px;">Try automation / scheduled tasks.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="slide-footer">FLORENT DAUDENS</div> | |
| <aside class="notes">The capstone connection is the through-line for homework. "Use it for real work" means use it for your capstone. "Improve your AGENTS.md" means describe your capstone project in it. "Think about your capstone" — by April 9 you should have your AGENTS.md describing the project, at least one skill drafted, and context files with whatever data or references your project needs. Class 6 is where we build with code, connect to external APIs via MCP, and start shipping. Come prepared with a clear picture of what your project needs from an agent.</aside> | |
| </section> | |
| <!-- ============================================================ --> | |
| <!-- CLOSING --> | |
| <!-- ============================================================ --> | |
| <section class="dark"> | |
| <div class="slide-footer">FLORENT DAUDENS</div> | |
| <div style="display: flex; flex-direction: column; justify-content: center; height: 100%;"> | |
| <h1 style="font-size: 7em; line-height: 0.85;">Thank<br>You</h1> | |
| <div style="position: absolute; bottom: 60px; right: 60px; text-align: right; font-size: 0.95em;"> | |
| <div>flo@mizal.ai</div> | |
| <div style="opacity: 0.5; margin-top: 4px;">li/x: @fdaudens</div> | |
| </div> | |
| </div> | |
| </section> | |
| </div><!-- /slides --> | |
| </div><!-- /reveal --> | |
| <script src="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/plugin/notes/notes.js"></script> | |
| <script> | |
| Reveal.initialize({ | |
| hash: true, | |
| slideNumber: false, | |
| width: 1200, | |
| height: 700, | |
| margin: 0, | |
| transition: 'fade', | |
| transitionSpeed: 'fast', | |
| plugins: [ RevealNotes ], | |
| keyboard: { | |
| 66: () => { document.querySelector('.reveal').classList.toggle('blackout'); } | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |