skills.rest
mmohajer9
mmohajer9COMMUNITY
Explore all skills by this author →
WebsiteGitHub

video-to-ui

Converts screen recordings into React apps, design reports, code edits, or frame extractions using ffmpeg.

10|Updated May 4, 2026
Search Tags:#code comparison#UI analysis#design system extraction#video-to-ui#React app generation
One-click install
npx skills add https://github.com/mmohajer9/video-to-ui --skill video-to-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: video-to-ui
Source: https://github.com/mmohajer9/video-to-ui/tree/main/skills/video-to-ui
Command: npx skills add https://github.com/mmohajer9/video-to-ui --skill video-to-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires ffmpeg, and includes scripts (resource) and references (resource) components.

What problem does it solve?

The video-to-ui skill addresses the challenge of converting UI screen recordings into actionable design information, code edits, or full React applications.

Core Features & Use Cases

  • Frame Extraction: Extract frames from video recordings for analysis or further processing.
  • Design Analysis: Analyze the UI in videos to create design system reports, including color schemes, typography, spacing, and more.
  • Code Comparison: Compare UI videos against existing codebases to suggest or apply code changes that align with the video's UI.
  • App Scaffolding: Generate a complete React application that replicates the UI behavior and appearance from the video.
  • Use Case: If you have a video of a new UI design, you can use the skill to automatically extract frames, analyze the design, and generate a working React app that matches the design.

Quick Start

Add the video-to-ui skill to your Claude setup and run: use video-to-ui with your video file and specify the desired mode (e.g., 'analyze', 'compare', 'scaffold', 'frames').

Frequently Asked Questions about video-to-ui

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

FAQPage Schema
How do I convert a UI screen recording video into a React app?▼

You can convert a UI screen recording video into a React app by using the video-to-ui skill's 'scaffold' mode to extract frames, analyze the UI behavior and appearance, and automatically generate a complete React application matching the video design.

Can I extract a design system report from a video of a user interface?▼

Yes, you can extract a design system report from a video of a user interface by analyzing the extracted frames to identify color schemes, typography, spacing, and other UI elements to generate a comprehensive design analysis.

Do I need ffmpeg installed to analyze UI videos and generate code?▼

Yes, you need ffmpeg installed to analyze UI videos because the video-to-ui process requires ffmpeg specifically for extracting frames from the video recordings before performing design analysis or React app generation.

What is the best way to compare an existing codebase against a UI video?▼

The best way to compare an existing codebase against a UI video is to use the 'compare' mode in video-to-ui, which analyzes the video's UI and suggests or applies code changes to your existing codebase to align with the video design.

How does extracting frames from a UI video help with app scaffolding?▼

Extracting frames from a UI video helps with app scaffolding by breaking down the video into static images that can be individually analyzed for design system extraction, enabling the generation of a React application that matches the UI behavior and appearance.

Related Skills

Explore More Software Engineering Skills→
bbvch-aibbvch-ai
9

pr-demo-video

Generate GitHub PR demo descriptions from screen recordings and update test plan checklists.

Official
Advanced
InNoobWeTrustInNoobWeTrust
4

ai-ui-generation

Automates AI-generated UI integration into React/Next.js codebases with design constraints and QA checklists.

Community
Advanced
K9i-0K9i-0
1

ui-theming

Extract design tokens from reference images and apply them to Flutter ThemeData.

Community
Intermediate
TheArchitectitTheArchitectit
3

video-frames

Extract and analyze video frames using ffmpeg, ffprobe, and Pillow.

Community
Intermediate