michel-cli-demo-recorder

Solid

Produce proof-of-execution demos of the Packmind CLI (`packmind-cli`) as terminal-styled images (colors and formatting preserved exactly), for embedding in a GitHub PR. Renders a crisp master SVG and rasterizes it to a PNG — the PNG is what you embed, because GitHub does not render SVG in PR/issue bodies. Use this whenever a dev task touches the CLI — new command, changed output, new flag, bug fix in terminal rendering — and the PR would benefit from showing the tool actually running. Trigger it when the user says "record a CLI demo", "show the command output", "add a terminal screenshot to the PR", "prove the CLI works", "capture the CLI", "demo the command", or whenever you finish CLI work and are about to open or update a PR. Default to running this for any PR whose diff includes CLI source, even if the user didn't explicitly ask for a screenshot — a CLI PR without a visual of the output is an incomplete deliverable.

AI & Automation 303 stars 15 forks Updated today Apache-2.0

Install

View on GitHub

Quality Score: 86/100

Stars 20%
83
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# CLI Demo Recorder Turn a local `packmind-cli` invocation into a polished, colored terminal **screenshot** that drops straight into a GitHub PR. The renderer writes a crisp master **SVG** and, by default, rasterizes it to a **PNG** next to it — the PNG is the artifact you embed, because GitHub refuses to render SVG in a PR/issue body (its image proxy rejects `image/svg+xml`). The companion to `michel-ui-demo-recorder` — that one records the browser UI; this one captures the terminal. ## When to reach for this skill - You just implemented or changed a CLI command/flag/output and are opening or updating a PR. - "Add a screenshot of the CLI to the PR", "show what the command prints", "prove it runs". - A bug was about terminal rendering (colors, alignment, truncation) and the fix needs visual evidence. - Anytime the PR diff includes CLI source (`apps/cli/`) — attach a demo by default; reviewers shouldn't have to clone and run it to see the output. The deliverable is one or more terminal-window images, each showing a fake prompt line (`user@host dir % <command>`) followed by the command's real, fully-colored output. The renderer emits **two files per demo**: a `.svg` master (crisp at any zoom, a few KB, exact-color — keep it as the source) and a `.png` rasterized from it. **Embed the PNG in the PR** — GitHub does not render SVG in PR/issue bodies, so an embedded SVG shows up broken. The PNG is what reviewers actually see. ## Why a skill exists for this Capturing colored CL...

Details

Author
PackmindHub
Repository
PackmindHub/packmind
Created
10 months ago
Last Updated
today
Language
TypeScript
License
Apache-2.0

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Solid

michel-create-pr-with-screenshots

Best practices for creating GitHub pull requests that include inline images — CLI terminal screenshots (from cli-demo-recorder), UI screenshots/videos (from ui-demo-recorder), or any other visual artifact. Use this skill whenever opening or updating a PR that has visual artifacts to embed, or when images aren't rendering in a PR description. Also use it when asked "how do I add screenshots to a PR", "why isn't my image showing", or "embed a demo in the PR".

303 Updated today
PackmindHub
AI & Automation Solid

michel-ui-demo-recorder

Record polished UI demo videos and screenshots of a running web app using Playwright MCP — for client deliverables, release notes, feature walkthroughs, or bug repros. Produces an HD WebM video with chapter markers, a mandatory animated cursor overlay, and a mandatory subtitle bar that narrates each step (positioned deliberately so it never masks the UI being demonstrated), plus full-page screenshots at each step. Use this whenever the user asks to "record a demo", "create a screencast", "make a UI walkthrough video", "document this feature with video", "show the client how X works", "capture screenshots of the app", or anything similar — even when the user only says "make a video" or "take screenshots" in the context of a running frontend. Also use it when the user wants to demonstrate a workflow, generate marketing-quality footage of an app, or produce repeatable visual documentation.

303 Updated today
PackmindHub
AI & Automation Listed

record-demo

Produce a short (30-60s) narrated, captioned product demo video with the aidemo engine, via the aidemo MCP server. Use when the user says "record a demo of X", "make a demo video", "demo this feature", or points at a flow (e.g. a shopping flow inside a ChatGPT app) and wants a shareable MP4 with voiceover + captions. The skill authors a storyboard.json (script + per-scene voice/music plan + browser action-spec) and renders it with the engine. Do NOT use for: live screen-sharing, editing an already-rendered MP4, or demos of native/mobile apps (browser only).

1 Updated 4 days ago
tandryukha