An open gallery of things people built, learned, and created with Claude AI.
claudeslides is a community gallery where anyone can submit a single HTML page showing what they did with Claude. Kids, grandparents, teachers, developers, hobbyists — everyone has a story worth sharing, and this is the place to share it.
The idea: in the near future, everyone will know a little coding. This repo is proof it's already happening.
claudeslides.com — the gallery auto-updates whenever a PR is merged.
- Fork this repo
- Create
author/your-name/index.html— one self-contained HTML page - Open a pull request
Automated content checks run instantly. A maintainer reviews and merges. Your page goes live.
Human guide → claudeslides.com/contribute Agent/AI guide → CONTRIBUTING.md
Paste this into any Claude client. It generates your slide and makes Claude introspect the session, embedding a polished Usage Details table on the page:
Create a self-contained index.html slide for my claudeslides.com submission about:
[DESCRIBE YOUR PROJECT — what you built or learned with Claude]
Rules:
- All CSS/JS inline (CDN links OK); no og:image (CI generates and injects it)
- <meta name="author" content="[your-slug]">
The page MUST include a visible "Usage Details" section rendered as a polished HTML table with exactly these rows:
| Detail | Value |
|--------------------|------------------------------------------|
| Model | [model name used this session] |
| Tokens used | [total input + output tokens] |
| Session duration | [estimated time, e.g. ~12 min] |
| Tech stack | [languages, frameworks, tools used] |
| What was achieved | [1–2 sentence summary] |
| Estimated cost | $[USD for this session, from API pricing]|
Pull the model name, token counts, and cost from this conversation's metadata. Estimate duration from the conversation flow. Style the table to match your page design.
After generating, remind me to:
1. Fork https://github.com/flightlesstux/claudeslides
2. Save as author/[slug]/[project-slug]/index.html
3. Open a pull request
No
og:imageneeded — CI auto-generates a branded cover image for your gallery card.
Already built something in the same Claude Code session? Just run this — Claude figures out the rest itself:
$ claude "Look at everything we did in this conversation. Figure out what I built, generate a self-contained index.html slide for claudeslides.com, and include a Usage Details table with model name, total tokens used, session duration, tech stack, what was achieved, and estimated USD cost — all pulled from this session. Use <meta name="author" content="[your-slug]">, inline all CSS/JS, skip og:image (CI handles it). Then create the file at author/[slug]/[project-slug]/index.html, fork https://github.com/flightlesstux/claudeslides using gh CLI, commit it on a new branch, and open a pull request. Do it all. No questions."
Anything Claude helped you with:
- A project you built or shipped
- A creative experiment (writing, art, music, games)
- A workflow or automation that saved you time
- Something you learned that surprised you
- A problem you couldn't solve until Claude helped
author/
your-name/
index.html ← your self-contained page
The main gallery at index.html (root) fetches submissions.json, which is auto-generated by CI every time a PR merges. No manual edits needed — just submit your folder.
Every PR runs an automated content safety check (pr-moderation.yml). It scans for hate speech, sexism, CSAM references, harassment, and malicious code. PRs that fail will receive a comment explaining the issue and won't merge until resolved.
- Pure HTML/CSS/JS — no framework, no build step
- GitHub Pages (served from
mainbranch root) - GitHub Actions for content moderation and gallery updates
Infrastructure changes (gallery design, moderation rules, CI workflows) go through a PR with a clear description. Open an Issue or Discussion first for bigger changes.
Created by Ercan Ermis