Agent skill

App Demo Videos

by glifxyz in glifxyz/glif-mcp-server

Record a screencast of an app you are building and turn it into a polished demo, explainer or promo video with Glif, using video templates for device mockups, captions, voiceover and music.

MITAuto-check passedMedia & Creative

Install App Demo Videos

skills CLI
$ npx skills add glifxyz/glif-mcp-server --skill app-demo-videos -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install glifxyz/glif-mcp-server app-demo-videos --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/glifxyz/glif-mcp-server.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/app-demo-videos .claude/skills/app-demo-videos && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
app-demo-videos
GitHub stars
213
Token cost
~1.4k tokens
SKILL.md length
752 words
Files
3 (incl. scripts)
Skills in repo
10
Repo updated
First seen
Licence
MIT

At a glance

Record a screencast of an app you are building and turn it into a polished demo, explainer or promo video with Glif, using video templates for device mockups, captions, voiceover and music.

  • Works in 4 steps: Plan the video → Record the app → Send it to Glif → …
  • : make a demo video
  • SKILL.md covers 1. Plan the video, 2. Record the app, 3. Send it to Glif and 4. Check and save
  • Runs JavaScript scripts from its folder; calls ffmpeg, npm and npx

What it does

App Demo Videos is an agent skill from glifxyz/glif-mcp-server. Record a screencast of an app you are building and turn it into a polished demo, explainer or promo video with Glif, using video templates for device mockups, captions, voiceover and music. Use when: "make a demo video", "record a screencast", "I need a launch video for my startup", "hype trailer for my app", "product walkthrough", "feature tour", "explainer video", "turn my Loom into a polished demo", "show my app on a MacBook", "scroll through my dashboard and zoom in", "15-second TikTok ad for our best…

Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including scripts (for example `agents/openai.yaml`). Compatibility notes: Requires the Glif MCP server at https://glif.app/api/mcp. Recording needs Node.js and Playwright.

It sits in Media & Creative, covering Video production. It works with TikTok and Model Context Protocol. The repository describes itself as: Glif's hosted MCP server, plugin and skills for creating images, video and audio. Works with Claude, ChatGPT, Codex, Cursor and more. The licence is MIT.

When your agent uses it

  • : make a demo video
  • Record a screencast
  • I need a launch video for my startup
  • Hype trailer for my app

Example prompts

  • “make a demo video”
  • “record a screencast”
  • “I need a launch video for my startup”
  • “/app-demo-videos”

Requirements

  • Node.js
  • Compatibility (from SKILL.md): Requires the Glif MCP server at https://glif.app/api/mcp. Recording needs Node.js and Playwright.

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. Plan the video
  2. Record the app
  3. Send it to Glif
  4. Check and save

What it can do on your machine

Read from SKILL.md and the folder at commit 0c90bf7. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/ (JavaScript), which the agent can run.

    Shell commands in SKILL.md call:

    • ffmpeg
    • npm
    • npx
    • curl
    • ffprobe

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npm, npx and curl, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • Compatibility

    Requires the Glif MCP server at https://glif.app/api/mcp. Recording needs Node.js and Playwright.

    From compatibility in the SKILL.md frontmatter.

Context cost

App Demo Videos loads about 1.4k tokens when it runs. Until then it costs about 197 tokens; SKILL.md has 752 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~197
When it runs · the whole SKILL.md, loaded when a task matches
~1.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from glifxyz/glif-mcp-server at commit 0c90bf7, republished under its MIT licence (© glifxyz). 752 words, ~1,449 tokens.

Download SKILL.mdSave it as .claude/skills/app-demo-videos/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
app-demo-videos
description
Record a screencast of an app you are building and turn it into a polished demo, explainer or promo video with Glif, using video templates for device mockups, captions, voiceover and music. Use when: "make a demo video", "record a screencast", "I need a launch video for my startup", "hype trailer for my app", "product walkthrough", "feature tour", "explainer video", "turn my Loom into a polished demo", "show my app on a MacBook", "scroll through my dashboard and zoom in", "15-second TikTok ad for our best feature", "changelog video", "App Store preview video", "GIF for the README", "thumbnail for the launch video". NOT for: still graphics (use app-promo-materials), videos unrelated to the app (use audio-and-video), animating a single image (use audio-and-video).
compatibility
Requires the Glif MCP server at https://glif.app/api/mcp. Recording needs Node.js and Playwright.

Record the real app, then let Glif frame it in a video template. The user's explicit instructions come first, within host safety rules.

1. Plan the video

Agree on a short plan before recording:

  • Story: 3 to 6 beats, one feature or action each. Open with the most useful moment; social cuts need a hook in the first 3 seconds.
  • Length: 15 to 30 seconds for social and teasers, 30 to 90 for walkthroughs and explainers.
  • Template: pick one, or describe your own.
    • Browser tour: the app in a clean browser window on a soft background, zooms on clicks, a caption per beat.
    • Device composite: the real recording placed on a laptop or phone screen in a generated lifestyle scene. Glif tracks the screen if the camera moves.
    • Social ad demo: vertical, 15 seconds, hook first, big captions, music.
    • Narrated walkthrough: voiceover and captions over the browser tour.
    • Explainer: animated slides in a chosen style, narrated, with short clips of the real app. Good for "how it works".
    • Changelog video: release notes or a changelog URL turned into a short narrated update.
    • App Store preview: real app footage only, 15 to 30 seconds, vertical. Check App Store Connect for current specs.
  • Outputs: 16:9 master at 1920×1080, plus a 9:16 1080×1920 cut if wanted, a poster image, a 1280×720 YouTube thumbnail or a README GIF.
  • Sound: voiceover script, voice (Glif can play samples to choose from, or clone a voice from a sample with the owner's consent), music mood (ducked under the voice), and optional click sounds synced to the cursor.
  • Captions: word-by-word highlight, simple lower thirds, or motion-graphic overlays with numbers and charts. Ask Glif for a still frame with a few font options first if the look matters.

Show the plan and wait for a yes. Video uses more credits than images.

2. Record the app

Use the user's own recording or Loom export if they have one. Otherwise:

  1. Start the app locally and seed it with demo data. Never record real customer data, emails, tokens or keys.
  2. Copy scripts/record-demo.mjs into the project's scratch space. Install Playwright if the project lacks it (npm i -D playwright and npx playwright install chromium), after checking with the user.
  3. Replace the example beats with the planned steps. glideClick moves a visible cursor before clicking. smoothScroll scrolls gently. Leave about a second of stillness after each beat.
  4. Run it with DEMO_URL=<local url> node record-demo.mjs. Add DEMO_MOBILE=1 for a phone layout. It prints each beat's time; keep those for captions.
  5. Check the result, or pull frames with ffmpeg -ss <seconds> -i <file> -frames:v 1 frame.png. Re-record if something glitched.
  6. If ffmpeg is installed, convert to MP4: ffmpeg -i in.webm -c:v libx264 -pix_fmt yuv420p -crf 18 demo-raw.mp4.

Keep recordings out of git, such as in recordings/ listed in .gitignore.

Show full SKILL.md (282 more words)Show less

3. Send it to Glif

Upload each recording and the logo with upload_file: pass filename and kind: "video" (or "image"), then run the returned command with the real path. Attach the returned fileUrl values.

Call compose_project once with:

  • the chosen template, length and every output size
  • the beat list with timestamps and exact caption text, in quotes
  • the voiceover script, voice choice and music mood
  • brand colors (hex), logo and an intro or outro card (app name, one line, URL)
  • this rule: "Keep the app footage real. Frame, crop, zoom, speed up and caption it, but never regenerate or restyle the interface. Use a programmatic video template, such as Remotion, so captions and timing are exact."

Share the projectUrl. Follow the run with get_job_status, passing the jobId as job_id. A video can take several minutes; keep working on other things meanwhile. A pending status or timeout is not a reason to start another run.

4. Check and save

Download with curl -fsSL "<media url>" -o <path> into marketing/video/, or public/videos/ if the site embeds it. Check:

  • size, length and codec: ffprobe -v error -show_entries stream=codec_name,width,height:format=duration -of csv=p=0 <file>
  • caption spelling and timing against the beats
  • the interface looks like the real app

Fix problems in the same project by passing its project_id. Don't start a fresh run for a small fix. Useful follow-ups there: a 9:16 cut, 3 alternative 3-second openings to test, or a thumbnail.

To embed on the site:

html
<video src="/videos/demo.mp4" poster="/videos/demo-poster.jpg" autoplay muted loop playsinline width="1920" height="1080"></video>

For a README, a short MP4 works on GitHub. A GIF should stay under about 10 MB; ask Glif for one or make it locally with ffmpeg.

List the files you made. Posting or uploading to stores is the user's call.

© glifxyz, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 2 other files (scripts) in skills/app-demo-videos of glifxyz/glif-mcp-server.

  • SKILL.md
  • agents/openai.yaml
  • scripts/record-demo.mjs

Open the folder on GitHubat commit 0c90bf7

Compare with similar skills

App Demo Videos next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

App Demo Videos compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
App Demo Videos this skillglifxyz/glif-mcp-server213—~1.4kAutomated safety check: PassMIT
Taisly Social Media Postingtaisly/agent2171 repos~1.5kAutomated safety check: PassMIT
Taisly Social Media Postingsickn33/agentic-awesome-skills47k1 repos~768Automated safety check: PassMIT
ShowtimeFavioVazquez/showtime220—~3kAutomated safety check: PassMIT
Remotion ProductionDojoCodingLabs/remotion-superpowers132—~1.1kAutomated safety check: PassMIT
ReelclawLeoYeAI/openclaw-master-skills2.2k—~5.4kAutomated safety check: NotesMIT

Similar skills

  • Free AI-first short-form video publishing to TikTok, Instagram Reels, YouTube Shorts, X, and Facebook from AI agents through Taisly.

    217 GitHub starsUsed in 1 repo~1.5k tokens
    Media & CreativeAuto-check passed
  • Taisly Social Media Posting

    sickn33/agentic-awesome-skills

    Use Taisly Agent Kit to prepare and publish approved short-form video posts across TikTok, Instagram Reels, YouTube Shorts, X, and Facebook.

    47k GitHub starsUsed in 1 repo~768 tokens
    Media & CreativeAuto-check passed
  • Showtime

    FavioVazquez/showtime

    A skill your agent uses when the user wants a video made, edited or finished: a launch or promo, product demo, explainer, trailer or teaser, tutorial or walkthrough, a screen recording turned into a…

    220 GitHub stars~3k tokensUpdated 2 days ago
    Media & CreativeAuto-check passed
  • Remotion Production

    DojoCodingLabs/remotion-superpowers

    Full video production workflow for Remotion projects. An agent skill from DojoCodingLabs/remotion-superpowers.

    132 GitHub stars~1.1k tokensUpdated 7 days ago
    Media & CreativeAuto-check passed
  • Reelclaw

    LeoYeAI/openclaw-master-skills

    Create, produce, and schedule UGC-style short-form video reels at scale.

    2.2k GitHub stars~5.4k tokensUpdated 2 mo ago
    Media & CreativeAuto-check: notes
  • Stitch to Remotion Walkthrough Videos

    google-labs-code/stitch-skills

    Official

    Builds walkthrough videos from Stitch design projects using Remotion, with transitions, zoom effects and text overlays on each screen.

    8.5k GitHub starsUsed in 6 repos~3.2k tokens
    Media & CreativeAuto-check: notes

More from glifxyz/glif-mcp-server

All 10 skills in this repo
  • Audio And Video

    glifxyz/glif-mcp-server

    Make or edit audio and video with Glif, from a text brief or from a reference image, video or audio file.

    213 GitHub stars~1.6k tokensUpdated 2 days ago
    Auto-check passed
  • Edit Images

    glifxyz/glif-mcp-server

    Edit an existing image with Glif: remove the background, erase or replace objects, expand the canvas, restore or upscale, retouch, restyle or change one detail.

    213 GitHub stars~778 tokensUpdated 2 days ago
    Auto-check passed
  • Make Images

    glifxyz/glif-mcp-server

    Make new still images from a brief with Glif and save them to a folder: concept art, a series of variations, mockups, posters, illustrations, wallpapers, reference boards or any picture that isn't…

    213 GitHub stars~931 tokensUpdated 2 days ago
    Auto-check passed
  • Web Visuals

    glifxyz/glif-mcp-server

    Make images, textures, illustrations and background video for a website or app you are building, with Glif, and wire them into the code.

    213 GitHub stars~1.5k tokensUpdated 2 days ago
    Auto-check passed
  • App Icons And Logos

    glifxyz/glif-mcp-server

    Design a logo, app icon, favicon set, icon set or brand kit with Glif for an app or site you are building, then export every size and wire it into the code.

    213 GitHub stars~1.3k tokensUpdated 2 days ago
    Auto-check passed
  • App Promo Materials

    glifxyz/glif-mcp-server

    Plan and make launch, store, ad and campaign graphics with Glif: real app screens turned into store listings and launch posts, or a coordinated set of product photos, ads, a short video and a jingle…

    213 GitHub stars~1.7k tokensUpdated 2 days ago
    Auto-check passed

Questions about App Demo Videos

What does App Demo Videos do?

Record a screencast of an app you are building and turn it into a polished demo, explainer or promo video with Glif, using video templates for device mockups, captions, voiceover and music. App Demo Videos is an agent skill from glifxyz/glif-mcp-server. Record a screencast of an app you are building and turn it into a polished demo, explainer or promo video with Glif, using video templates for device mockups, captions, voiceover and music.

When should I use App Demo Videos?

App Demo Videos fits situations like: : make a demo video; record a screencast; I need a launch video for my startup; hype trailer for my app.

How do I install App Demo Videos in Claude Code?

Run `npx skills add glifxyz/glif-mcp-server --skill app-demo-videos -a claude-code`. Or copy the skill folder (skills/app-demo-videos in glifxyz/glif-mcp-server) into .claude/skills/app-demo-videos in your project. Claude Code loads it when a task matches its description.

How do I install App Demo Videos in Codex?

Run `npx skills add glifxyz/glif-mcp-server --skill app-demo-videos -a codex`. Or copy the skill folder (skills/app-demo-videos in glifxyz/glif-mcp-server) into .agents/skills/app-demo-videos in your project. Codex loads it when a task matches its description.

Can I use App Demo Videos in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add glifxyz/glif-mcp-server --skill app-demo-videos -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/app-demo-videos, .gemini/skills/app-demo-videos, .github/skills/app-demo-videos and .opencode/skills/app-demo-videos in your project.

What does App Demo Videos need to run?

Going by SKILL.md and its folder, App Demo Videos needs JavaScript for the scripts in its folder and the command-line tools its instructions call (ffmpeg, npm, npx, curl and ffprobe). Our summary lists: Node.js. Compatibility (from SKILL.md): Requires the Glif MCP server at https://glif.app/api/mcp. Recording needs Node.js and Playwright..

Does App Demo Videos access the network?

SKILL.md contains no URLs. Its commands use npm, npx and curl, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is App Demo Videos safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does App Demo Videos use?

App Demo Videos is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does App Demo Videos use?

About 1.4k tokens (SKILL.md is roughly 5.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to App Demo Videos?

Skills that share tags, products or a category with App Demo Videos: Taisly Social Media Posting (taisly/agent, 217 stars), Taisly Social Media Posting (sickn33/agentic-awesome-skills, 47k stars), Showtime (FavioVazquez/showtime, 220 stars) and Remotion Production (DojoCodingLabs/remotion-superpowers, 132 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains App Demo Videos?

glifxyz (a GitHub organization) maintains it in glifxyz/glif-mcp-server, which has 213 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on October 9, 2026.

Source: glifxyz/glif-mcp-server on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.