{"id":"3cf27513-3792-4215-9a42-0ac398b8245d","slug":"present-now","kind":"skill","name":"present-now","summary":"Agent Skill for Claude Code, OpenCode, Codex, Kilo Code, and other SKILL.md agents. Turns a repo, docs, or an idea into an interactive HTML slide deck: interviews you, plans the talk, writes slides wi","owner":"Taimoorkhan1122","repoUrl":"https://github.com/Taimoorkhan1122/present-now","license":"MIT","licenseTier":"permissive","trust":"community","stars":1,"match":null,"fewStars":true,"format":"skill","createdAt":"2026-10-23T20:11:31.000Z","addedAt":"2026-10-30T02:25:17.763Z","logoUrl":"https://avatars.githubusercontent.com/u/46717905?u=4fd336336b3289c8a08a350f4fa5baefba6f0012&v=4","linkOnly":false,"collection":null,"skillPath":null,"categories":["browser-web","developer-tools","files-documents"],"tags":["agentic-workflow","ai-agents","ai-presentation","claude","claude-code","developer-tools","html-presentation","html-slides"],"runtime":"binary","local":true,"cloudCapable":false,"cloudCapability":"unknown","cloudReadyOnPlatform":false,"needsApiKey":false,"reviewed":false,"syncedAt":"2026-10-30T03:33:34.414Z","sample":false,"url":"https://conduits.dev/tools/present-now","language":"HTML","transports":["stdio"],"install":{},"requirements":{"env":[],"upstreamMayCharge":false},"tools":null,"readme":"# present-now\n\nAn Agent Skill that makes a slide deck for a talk or a workshop.\n\nYou tell your coding agent what the talk is about. The agent asks you a few questions, plans\nthe slides, writes them, and checks every slide in a real browser. You get one HTML file. Open it\nin a browser and present. You do not need PowerPoint or Keynote.\n\n[![Six helper agents write the slides of an 18-slide deck at the same time](demo/parallel-agents.gif)](demo/parallel-agents.mp4)\n\nSix helper agents write the slides at the same time. Click the picture for the full video.\n\n**See a demo deck:** [open it in your browser](https://taimoorkhan1122.github.io/present-now/demo/deck.html). This deck\nwas made with this skill. Its source file is [`demo/deck.html`](demo/deck.html).\n\n## For AI agents\n\nYou can let your agent do the install. Paste this into Claude Code (or another agent):\n\n```\nInstall the present-now skill from https://github.com/Taimoorkhan1122/present-now.\nFollow the \"For AI agents\" section of its README.md.\n```\n\n### Steps for the agent\n\n<details>\n<summary>Show the install steps</summary>\n\nIf you are an AI agent installing this skill, follow these steps in order.\n\n1. **Check the requirements.** Run each command and note which ones fail:\n\n   ```sh\n   rg --version\n   node --version              # needs v20 or newer\n   chrome-devtools-axi --help\n   ```\n\n   Also check that Google Chrome is installed. If something is missing, show the user the\n   install command from the Requirements table below. Install it only after the user says yes.\n   Missing Node, Chrome, or `chrome-devtools-axi` does not block the install. It only turns off\n   the browser check.\n\n2. **Pick the install folder.** Use `~/.claude/skills/present-now` unless the user asks for\n   one project only. For one project, use `.claude/skills/present-now` inside that project. If\n   the folder already exists, stop and ask the user before you change it.\n\n3. **Download the skill:**\n\n   ```sh\n   git clone --depth 1 https://github.com/Taimoorkhan1122/present-now <install-folder>\n   chmod +x <install-folder>/scripts/*.sh <install-folder>/template/build.sh\n   ```\n\n4. **Test it.** Make a throwaway deck, check that the title was filled in, then delete it:\n\n   ```sh\n   <install-folder>/scripts/new.sh /tmp/present-now-check \"Check\" \"Check\"\n   rg '__TITLE__|__FOOTER__' /tmp/present-now-check/src    # must print nothing\n   rm -rf /tmp/present-now-check\n   ```\n\n5. **Report to the user.** Say where the skill is installed and which requirements are\n   missing. Tell them to type `/present-now` to start. If it is not in the `/` menu, they should\n   start a new session.\n\nThe install is done when `<install-folder>/SKILL.md` exists, the test in step 4 prints nothing,\nand the user has your report.\n\nTo make a deck after the install, read `<install-folder>/SKILL.md` and follow it.\n\n</details>\n\n## What you get\n\n- **One file.** `deck.html` has everything inside it. It works offline. You can email it or put it\n  on a USB stick.\n- **Fits any screen.** Slides are drawn at 1600×900 and scale to fit the window.\n- **Interactive slides.** Tabs, before/after views, step-by-step reveals, and clickable maps.\n- **Speaker notes.** Each slide has notes with a time. Press `N` to see them, or `P` to open a\n  separate presenter window.\n- **Progress bar** and slide counter.\n- **Clicker-safe.** A presentation clicker (arrow keys, Page Up, Page Down) works.\n- **Five themes.** Editorial (default), Terminal, Swiss, Midnight, and Sage, or your own brand\n  color.\n\n## How it works\n\nThe skill follows seven steps:\n\n1. **Interview.** The agent asks up to 8 short questions: who is listening, the one thing they\n   should remember, what must be on screen, how long the talk is, and how it should look.\n2. **Read.** The agent reads your subject (a code repo, documents, or notes) just enough to plan.\n3. **Plan.** The agent shows you a table of slides, with times that add up to your time limit.\n   You say OK.\n4. **Set up.** A script copies the deck template into a new folder.\n5. **Write.** Several helper agents write the slides at the same time. Each one writes 2 or 3\n   slides.\n6. **Check.** A script opens every slide in Chrome, takes a screenshot, clicks every button, and\n   reports anything that falls off the slide. The agent fixes problems and checks again.\n7. **Hand-off.** The deck opens in your browser. The agent tells you what it made and what it\n   could not check.\n\n## Requirements\n\nYou need these before you install:\n\n| What | Why | How to get it |\n|---|---|---|\n| [Claude Code](https://claude.com/claude-code) | Runs the skill. The interview and the parallel helper agents use Claude Code tools. | See the Claude Code docs. |\n| macOS or Linux | The scripts use `sh`, `sed`, and `cp`. | Built in. On Windows, use WSL (not tested). |\n| `rg` (ripgrep) | Checks that the template has no empty placeholders left. | `brew install ripgrep` or `apt install ripgrep` |\n| Google Chrome | The check step opens slides in Chrome. | [google.com/chrome](https://www.google.com/chrome/) |\n| Node.js 20 or newer | Runs `chrome-devtools-axi`. | [nodejs.org](https://nodejs.org/) |\n| [`chrome-devtools-axi`](https://github.com/kunchenguid/chrome-devtools-axi) | Lets the check script control Chrome. | `npm install -g chrome-devtools-axi` |\n\nCheck that the tools are ready:\n\n```sh\nrg --version\nnode --version              # must be 20 or newer\nchrome-devtools-axi --help\n```\n\nThe last three rows are only for step 6 (the browser check). Without them, the skill can still\nwrite the deck, but no one checks the slides. You must then look at every slide yourself.\n\nOther agents that read `SKILL.md` files (the [Agent Skills](https://agentskills.io) format) can\nload this skill too. They may not have the question tool or helper agents, so steps 1 and 5 can\nwork differently. Only Claude Code is tested.\n\n## Install\n\nPick one way.\n\n**For all your projects** (most people want this):\n\n```sh\ngit clone https://github.com/Taimoorkhan1122/present-now ~/.claude/skills/present-now\n```\n\n**For one project only.** Run this inside the project folder:\n\n```sh\ngit clone https://github.com/Taimoorkhan1122/present-now .claude/skills/present-now\n```\n\n**Keep it somewhere else, and link it.** Use this if you want to edit the skill in its own\nfolder:\n\n```sh\ngit clone https://github.com/Taimoorkhan1122/present-now ~/present-now\nln -s ~/present-now ~/.claude/skills/present-now\n```\n\nThen make the scripts runnable:\n\n```sh\nchmod +x ~/.claude/skills/present-now/scripts/*.sh ~/.claude/skills/present-now/template/build.sh\n```\n\nTo check the install, start a new Claude Code session and type `/`. You should see\n`present-now` in the list.\n\nTo update later, run `git pull` in the skill folder.\n\n## Use\n\nStart Claude Code and type `/present-now`, then describe your talk in one line:\n\n```\n/present-now a 10 minute talk about this repo for our frontend team\n```\n\nYou can also just ask in plain words. The agent picks the skill on its own:\n\n```\nMake me slides for a 15 minute workshop on our API design rules.\n```\n\nThen:\n\n1. Answer the questions. Pick an option, or type your own answer.\n2. Read the slide plan. Say OK, or ask for changes.\n3. Wait while the slides are written and checked. This takes a few minutes.\n4. The deck opens in your browser.\n\nIf you want to skip the questions, say \"go\". The agent uses defaults for anything you did not\nanswer, and tells you which defaults it used.\n\nBy default the deck goes in `~/presentations/<talk-name>/`. This keeps it out of your code repo.\n\n## Present\n\nOpen `deck.html` in any modern browser.\n\n| Key | What it does |\n|---|---|\n| `→` `↓` `Space` `Page Down` | Next step or next slide |\n| `←` `↑` `Page Up` | Previous slide |\n| `Home` / `End` | First / last slide |\n| `N` | Show or hide speaker notes on the slide |\n| `P` | Open the presenter window (slide number, notes, next slide title) |\n| `F` | Full screen |\n\nTips:\n\n- When you share your screen or mirror it to a projector, hide the notes (`N`). Use the\n  presenter window (`P`) on your own screen.\n- The slide number is in the web address. If you reload the page, you stay on the same slide.\n\n## Change a deck later\n\nEach slide is its own file in `src/slides/`. To change a slide:\n\n1. Edit `src/slides/NN-name.html`.\n2. Run `./build.sh` in the deck folder. This makes a new `deck.html`.\n3. Reload the browser.\n\nYou can also ask your agent: \"On slide 4, make the headline shorter.\"\n\nTo check every slide again:\n\n```sh\n~/.claude/skills/present-now/scripts/qa.sh ~/presentations/<talk-name>/deck.html\n```\n\nScreenshots go to `/tmp/present-now-qa/`. Do not use Chrome for anything else while this runs.\n\n## Change the look\n\nIn the interview, the agent asks you to pick a theme. It suggests the one that fits your\naudience best.\n\n| Theme | Look | Good for |\n|---|---|---|\n| **Editorial** (default) | Warm off-white, serif headings, orange accent | Most talks |\n| **Terminal** | Near-black, sans headings, orange accent | Developer talks, live coding, dark rooms |\n| **Swiss** | Pure white, bold sans headings, blue accent | Product and engineering reviews, bright rooms, weak projectors |\n| **Midnight** | Deep navy, serif headings, gold accent | Keynotes, conference stages, evening events |\n| **Sage** | Soft green-grey, serif headings, teal accent | Workshops, onboarding, non-technical audiences |\n\nYou can also give a **brand color** (for example `#0055ff`). The agent puts it on top of the\nclosest theme. If your repo has design tokens, the agent can take the color from there.\n\nThe theme files are in `themes/`. How the agent picks and asks is in `references/themes.md`.\n\n## What is inside\n\n```\npresent-now/\n├── SKILL.md              The steps the agent follows\n├── scripts/\n│   ├── new.sh            Makes a new deck folder from the template\n│   └── qa.sh             Checks every slide in Chrome\n├── themes/               Terminal, Swiss, Midnight, and Sage colors\n├── references/\n│   └── themes.md         How the agent offers themes, and brand colors\n└── template/             Copied into every new deck\n    ├── AUTHORING.md      Rules every slide writer follows\n    ├── build.sh          Joins the slide files into deck.html\n    └── src/\n        ├── head.html     All the styles\n        └── tail.html     The slide engine (keys, notes, presenter window)\n```\n\nA finished deck folder looks like this:\n\n```\n~/presentations/my-talk/\n├── deck.html             Present this file\n├── build.sh\n├── AUTHORING.md\n└── src/\n    ├── head.html\n    ├── tail.html\n    └── slides/\n        ├── 01-title.html\n        ├── 02-problem.html\n        └── ...\n```\n\n## Known limits\n\n- The deck uses system fonts. On Windows and Linux, the serif headings fall back to Georgia.\n- At the end, the agent opens the deck with the macOS `open` command. On Linux, open\n  `deck.html` yourself, or use `xdg-open`.\n- `qa.sh` controls one shared Chrome window. Run it alone, or the screenshots can come out at\n  the wrong size.\n- Videos are not packed into the file. If a slide plays a video, keep the video file next to\n  `deck.html`.\n\n## Contributing\n\nIssues and pull requests are welcome. Please keep the deck to one self-contained HTML file with\nno outside downloads, and run `scripts/qa.sh` on a sample deck before you send a change.\n\n## License\n\n[MIT](LICENSE)\n"}