Skills
.Work. You
Rest

demo-recording

Official

Record polished UI demo videos for GitHub PRs.

Software Engineering#browser automation#playwright#ffmpeg#video processing#github pr#ui walkthrough#demo recording
Authorai-ecoverse
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill eliminates the tedious, error-prone work of manually recording polished UI demo videos, saving developers hours of trial and error with generic screen recording tools and inconsistent post-processing.

Core Features & Use Cases

  • Automated UI Demo Recording: Uses playwright-cli to capture browser interactions with a visible animated cursor, chapter markers, and precise timing control.
  • GitHub-Optimized Post-Processing: Automatically converts raw webm recordings to H.264 MP4s formatted for seamless GitHub PR embeds, with support for trimming, cropping, and text overlays.
  • Use Case: When submitting a pull request for a new SLICC UI feature, use this Skill to record a 20-second demo of the side panel resize interaction, add chapter markers for key steps, and upload the final MP4 directly to the PR description for stakeholder review.

Quick Start

Use the demo-recording skill to record a 15-second demo of the SLICC terminal panel open interaction, convert it to a GitHub-embeddable MP4, and add a freeze-frame toast overlay highlighting the file open action.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: demo-recording
Download link: https://github.com/ai-ecoverse/slicc/archive/main.zip#demo-recording

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 537,000+ vetted skills library on demand.