skills.rest
FriendlyInternet
FriendlyInternetOFFICIAL
Explore all skills by this author →
GitHub

demo-video

Record UI flow demos from YAML storyboards using shot-scraper video.

10|Updated Sep 24, 2025
Search Tags:#storyboard#UI demo#UI flow#interactive recording#feature demonstration
One-click install
npx skills add https://github.com/FriendlyInternet/nuxt-crouton --skill demo-video-friendlyinternet
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: demo-video
Source: https://github.com/FriendlyInternet/nuxt-crouton/tree/main/.claude/skills/demo-video
Command: npx skills add https://github.com/FriendlyInternet/nuxt-crouton --skill demo-video-friendlyinternet

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill simplifies the process of creating interactive, narratable demos of UI flows by automating the recording of user interactions with an animated cursor overlay, making it easier for reviewers to understand and test features.

Core Features & Use Cases

  • Storyboard-Driven UI Recording: Automates the recording of UI flows with a YAML storyboard, including clicks, types, scrolls, and waits.
  • Animated Cursor Overlay: Provides a human-like demonstration of the UI flow, enhancing comprehension.
  • Use Case: When you need to create a video demo of a feature for UI sign-off or to provide a clear example of how a feature works.

Quick Start

Record a demo video of a UI flow by running 'bash scripts/demo-video-setup.sh' and then executing 'shot-scraper video storyboard.yml'.

Frequently Asked Questions about demo-video

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate UI flow recording for a feature demonstration?▼

You can automate UI flow recording by defining clicks, types, and scrolls in a YAML storyboard, then executing it with the shot-scraper video tool to generate a narratable feature demonstration.

What is a storyboard-driven demo video and how does it work?▼

A storyboard-driven demo video uses a YAML file to script UI interactions and waits, which an automated video tool records to produce a consistent, narratable demonstration of your feature flow.

Can I add an animated cursor overlay to interactive recordings?▼

Yes, the recording process provides an animated cursor overlay during the interactive recording to simulate human-like interaction, which enhances viewer comprehension during UI sign-off.

Does shot-scraper video work with YAML for UI sign-off recordings?▼

Yes, shot-scraper video works with a YAML storyboard to automate UI flow recordings, specifically designed to provide clear evidence of UI functionality for feature sign-off.

What do I need to create narratable demos of UI flows?▼

To create narratable demos of UI flows, you need a YAML storyboard defining the interaction sequence and the shot-scraper video tool to automate the recording process.

Related Skills

Explore More Software Engineering Skills→
lxt070409lxt070409
1

macos-computer-use

Automate macOS desktop actions with clicks, inputs, scrolls, and screenshots.

Community
Advanced
qazuorqazuor

qa-criteria-validator

Validates project requirements and generates a structured QA report.

Community
Basic
jingkaihejingkaihe
16

kodelet

Automate software engineering tasks via an AI-assisted CLI.

Community
Advanced
vathymutvathymut

screen-recording

Automate annotated GIF and screen recording creation with Playwright, Pillow, imageio, and mss.

Community
Advanced