aidemo: Skill for Claude Code

landing-page

You maintain aidemo's public landing page. It is the project's pitch to humans AND its primary machine-readable source for LLM search (GEO). Every edit must serve both audiences.

Where things live

• docs/index.html — the entire site: one self-contained file (inline CSS/JS).
• docs/llms.txt — curated map for LLM crawlers; MUST stay in sync with any positioning/feature claims changed on the page.
• docs/robots.txt — AI-crawler allowlist. docs/sitemap.xml — single URL.
• docs/hero-demo.mp4 (1280×800 h264, copy of the release asset) + docs/hero-poster.jpg (poster frame, also the og:image).
• docs/icons/*.webp — card icons (176px, shown at 44px) + real customer logo marks; docs/favicon.png (64px, from the clapper icon). See "Icon system" below before adding one.
• docs/.nojekyll — keep; Pages serves docs/ verbatim from main.
• docs/internal/ is gitignored and private — never link to it from the page, and read docs/internal/INDEXING_PLAN.md for strategy/decisions (domain-swap checklist lives there).

Deploy = push to main

Commit straight to main and push (no PRs in this repo). GitHub Pages rebuilds in ~30–60 s. Always verify after pushing:

until curl -sL https://aidemo.top/ | grep -q "<distinctive new string>"; do sleep 6; done

(-L matters: tandryukha.github.io/aidemo now 301s to aidemo.top, so a bare curl -s there greps a redirect stub and never matches.)

Run that check with Bash run_in_background: true, never a bare foreground sleep.

Hard rules (learned, do not relearn)

1. Only claim what ships. No named future integrations or roadmap promises on the page. (History: ElevenLabs was removed while planned, then claimed once it shipped; the old "Codex/Gemini planned" exception is obsolete — since v0.6.0 they work today via the built-in MCP server, as do the ElevenLabs provider and the in-process local voice, and the page claims all of them as shipped.) Describe extensibility via what's true in code ("swappable VoiceProvider interface").
2. Positioning (approved): built for coding agents to autonomously record product demos — landing-page hero videos, GitHub README walkthroughs, what-shipped videos for customer release notes. Open-source alternative to Screen Studio / Clueso / Demosmith. Keep this framing consistent across hero sub, meta description, og:description, JSON-LD, and llms.txt. Audience = developers (owner directive): write dev-to-dev — terminal-first examples with real, runnable commands and real paths, no marketing fluff. When showing an assistant/integration, show the actual command a developer would type (if a genuinely unshipped integration ever needs showing, a muted # planned comment is the approved mechanism — currently none are).
3. Video, never GIF, for the hero. GIFs are 256-color mush (the old 560×350 GIF looked terrible upscaled). Use <video autoplay muted loop playsinline preload="metadata" poster=...> with a same-origin MP4. Set width/height attrs to the file's REAL dimensions (check with ffprobe -v error -select_streams v:0 -show_entries stream=width,height -of csv=p=0 <file>) and keep CSS width:100%; height:auto; aspect-ratio: W / H — a mismatched height attribute stretches the frame.
4. Self-contained page. No CDN scripts, external fonts, or third-party requests. Inline everything. Both color schemes must work (prefers-color-scheme + the CSS variables at the top of the file).
5. FAQ and JSON-LD move together. Every visible FAQ <details> has a matching entry in the FAQPage JSON-LD block, same wording. Question-shaped headings ("Can Claude Code record a demo video?") — LLM search lifts them verbatim. New claims also go into llms.txt.
6. Respect the motion system. Load stagger = fade + d1..d5 classes; scroll fade-in/out = reveal class picked up by the IntersectionObserver at the bottom of the file; everything is disabled under prefers-reduced-motion. New sections: class="reveal" on the h2 and on each card/step/details. Don't add per-element transition-delay that would lag hover states (.reveal.in resets it to 0s for this reason).