video-to-claude
CommunityTurn any video into buildable specs.
Design & Creative#claude code#spec generation#gemini#micro-interactions#video understanding#ui reverse engineering#animation easing
Authorrohunvora
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
google-genai
Components
scripts
💻 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: video-to-claude Download link: https://github.com/rohunvora/video-to-claude/archive/main.zip#video-to-claude Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.