skills.rest
rohunvora
rohunvoraCOMMUNITY
Explore all skills by this author →
𝕏@rohunvoraGitHub

video-to-claude

Converts video files into JSON build instructions with extracted metadata and formatting details.

10|3|Updated Jan 10, 2026
Search Tags:#claude code#spec generation#gemini#micro-interactions#video understanding#ui reverse engineering#animation easing
One-click install
npx skills add https://github.com/rohunvora/video-to-claude --skill video-to-claude
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: video-to-claude
Source: https://github.com/rohunvora/video-to-claude/tree/main
Command: npx skills add https://github.com/rohunvora/video-to-claude --skill video-to-claude

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires google-genai, and includes scripts (resource) components.

What problem does it solve?

Turning a demo video (or GIF) into something engineers and designers can actually build is slow and error-prone, because key UI details like exact CSS values, typography, and micro-interaction timing are hard to capture manually.

Core Features & Use Cases

  • Video-to-structured JSON analysis: Uses Gemini multimodal video understanding to output a structured spec describing what the product does and how the UI behaves.
  • Micro-interaction extraction for 1:1 recreation: With micro mode, extracts precise layout, colors (hex), typography, animation durations (ms), easing (cubic-bezier), and state transitions.
  • Implementation-focused skill instructions: Produces step-by-step “skill_instructions” so Claude Code can translate the spec into an implementation plan.
  • Use cases: Clone a UI interaction from a screen recording, reverse engineer a product’s behavior, or generate reproduction/build steps from a tutorial.

Quick Start

Use the video-to-claude script on your provided source and ask for micro-interaction detail by running the command on your local file or video URL.

Frequently Asked Questions about video-to-claude

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

FAQPage Schema
How do I extract CSS and animation timing specs from a product demo video?▼

Extracting CSS and animation timing specs from a product demo video requires analyzing the recording frame-by-frame. This process captures precise layout details, hex colors, typography, animation durations in milliseconds, and cubic-bezier easing values to generate structured JSON build instructions for 1:1 UI recreation.

How do I reverse engineer UI micro-interactions from a screen recording?▼

Reverse engineering UI micro-interactions from a screen recording involves applying multimodal video understanding to analyze state transitions frame-by-frame. This micro mode extraction identifies exact visual properties and timing, translating observed behavior directly into structured JSON build instructions.

Does Gemini multimodal video understanding work with GIF files for spec generation?▼

Gemini multimodal video understanding can process GIF files for spec generation after applying GIF-to-MP4 preprocessing. Once converted to MP4, the analysis extracts product features, workflow steps, and animation-ready details from the source material.

Can I generate implementation plans from a YouTube tutorial link?▼

You can generate implementation plans from a YouTube tutorial link by passing the URL to a multimodal video analysis tool. The system processes the video content to output step-by-step skill instructions and structured JSON build specs ready for coding.

Do I need a Gemini API key to convert video to structured JSON build instructions?▼

You need a Gemini API key to convert video to structured JSON build instructions. The video analysis pipeline relies on the google-genai dependency to access Flash or Pro models for frame-by-frame processing and spec extraction.

Related Skills

Explore More Design & Creative Skills→
danielctcdanielctc

ai-multimodal

Process audio, images, video, and documents with Google Gemini APIs.

Community
Advanced
phoenicisfphoenicisf

figma-implement-design

Translate Figma designs into production-ready UI code.

Community
Advanced
not-matthiasnot-matthias
9

rizin-analysis

Analyze binary code with Rizin and Radare2 to reveal functions, CFGs, and disassembly.

Community
Advanced
XyrcesXyrces
2

2D Animation Systems

Designs ECS-driven 2D animation systems for Godot 4.x characters and UI.

Community
Advanced