⚡
Claude Code Tools
← skills

@demoday/skill

official

Beautiful clickable product demos, installed as a Claude Code skill.

Version
0.5.2
Last Updated
2026-04-14
Source
official
View Repository → Homepage →

Demoday

Beautiful clickable demos. One command. One HTML file. One iframe.

Demoday is an open-source Claude Code skill that turns your product into an interactive, clickable demo — a self-contained HTML file generated by your coding agent and embedded on your landing page with a single <iframe>. No video. No SaaS. No monthly bill.

Quick start

npx @demoday/skill@latest init

Then ask your coding agent: “Run the Demoday skill to generate a demo for my landing page.”

That’s it. The skill reads your codebase, picks three flows, writes one HTML file, and embeds it.

What it does

  1. Reads your repo — detects your framework, nav structure, brand colors, and logo.
  2. Generates one HTML file — pure HTML, CSS, and vanilla JS. No React runtime, no CDN, no external fonts.
  3. Embeds with one iframe — works in Webflow, Framer, WordPress, Next.js, Astro, Ghost, MDX, or plain HTML.
  4. Stays in git — the demo is a file in your repo, reviewable via pull request, updatable with a single prompt.

What it is not

  • Not a screen recorder. It generates real HTML from your product, not a video.
  • Not a SaaS. There is no dashboard, no editor, no per-seat pricing.
  • Not a hosted service. Your demo lives in your repo as a static file.
  • Not a browser extension. It reads your source code, not your production UI.

How it works

The skill runs inside your coding agent (Claude Code, Cursor, or Codex CLI). It:

  1. Validates your repo and detects the landing page.
  2. Maps your product’s real navigation by reading route files, sidebar components, and layout files.
  3. Extracts brand colors from Tailwind config, CSS custom properties, or theme files.
  4. Generates a three-step demo carousel:
    • Step 01 — the payoff (dashboard, result, outcome)
    • Step 02 — the core action
    • Step 03 — onboarding / first touch
  5. Writes a single HTML file to public/demos/demoday.html.
  6. Embeds it in your landing page with one <iframe> tag.
  7. Opens a browser preview so you can verify before shipping.

The generated HTML includes:

  • Dark mode by default (for contrast against light landing pages)
  • Sidebar navigation with your real product nav labels
  • Step controls with chevrons, dots, and descriptions
  • Realistic placeholder data (never “Coming soon” screens)
  • postMessage listener for parent-controlled step switching
  • Query string support (?step=N) for bookmarkable states

Video recording

If ffmpeg is installed and your dev server is running, the skill can generate a 6-second 1080x1080 MP4 optimized for X/Twitter:

Ask your agent: "Record a demo video for social media."

Puppeteer captures frames at 30fps while clicking through all steps, then ffmpeg encodes to H.264. Output lands in recordings/demo.mp4.

Pricing

Free forever. Unlimited demos. That’s it.

Who it’s for

  • Early-stage founders who want a landing-page demo without a monthly SaaS fee.
  • Product engineers who want their demo in git, reviewable via PR.
  • Indie makers who ship with a coding agent and want to move fast.
  • Open-source contributors who want to improve the skill or build on top of it.

Tech stack

  • Skill: Pure Node.js, runs entirely in the coding agent.
  • Output: Self-contained HTML/CSS/JS, typically under 80 KB.
  • Landing page: Next.js 14 (App Router), deployed on Vercel.
  • Video: Puppeteer + ffmpeg for social media clips.

Privacy

  • Your source code never leaves your machine. Everything runs locally in your coding agent.
  • Generated HTML is written to your repo and nowhere else.
  • Optional anonymous telemetry (skill name, duration, version, OS, success/fail) can be enabled at install time. No code, file paths, or repo names are ever sent.

License

MIT. Contributions welcome.