Video Interaction Mapper — Agent Skill by Figma

From the author

This skill should be used when the user asks to analyze a UI screen recording and map interaction states into Figma. Trigger for requests such as "put video frames in Figma", "extract states from my recording", "map interactions from video to Figma", "analyze this screen recording", "create a storyboard from my video", "deconstruct this interaction in Figma", "annotate the UI states in my recording", or "pull the key moments from this video into Figma". Also trigger when the user references a video file (.mp4, .mov, .webm, .avi) together with Figma, design review, interaction analysis, prototypes, or UI states. The skill extracts key visual moments from a video, infers interaction triggers, and builds an annotated Figma Design storyboard using native Figma annotations and uploaded screenshot assets.

— the description by Figma

Install

Get the skill from its source (we cannot redistribute it):
https://github.com/figma/mcp-server-guide/tree/19be8d51c6a2f8ca949d33e5cd8e9662c5d243e8/workflow-skills/video-interaction-mapper

Documentation by Figma

The licence of this skill does not allow us to copy its documentation. Read it at the source

Files

README.md(opens on GitHub)Not mirrored: opens on GitHub1.6 KiB
SKILL.md(opens on GitHub)Not mirrored: opens on GitHub12.6 KiB
scripts/extract_key_frames.py(opens on GitHub)ScriptNot mirrored: opens on GitHub13.4 KiB
scripts/generate_figma_calls.py(opens on GitHub)ScriptNot mirrored: opens on GitHub24.0 KiB
scripts/prepare_upload_frames.py(opens on GitHub)ScriptNot mirrored: opens on GitHub7.1 KiB
scripts/resolve_moment_frames.py(opens on GitHub)ScriptNot mirrored: opens on GitHub6.3 KiB
scripts/update_run_manifest.py(opens on GitHub)ScriptNot mirrored: opens on GitHub7.0 KiB

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Needs Python, Needs Node.js

Security

What our scanner noticed· Low risk

Instructions that use the network
Scripts that your agent may run

This skill includes scripts that your agent may run. Read them before you use it.

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Theme Factory
AnthropicOfficial
A toolkit for applying professional color and font themes to documents, presentations, and web artifacts.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
Apache-2.0GitHub stars of the source repository188.6k
Brand Guidelines
AnthropicOfficial
Applies Anthropic's official brand colors and typography to digital artifacts.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
Apache-2.0GitHub stars of the source repository188.6k
Frontend Design
AnthropicOfficial
A framework for creating distinctive, intentional UI designs that avoid common templated aesthetics.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
Apache-2.0GitHub stars of the source repository188.6k
Impeccable
Paul Bakaus· Community
A comprehensive design system and UI refinement tool for auditing, polishing, and evolving digital interfaces.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
Apache-2.0Low riskHas scriptsGitHub stars of the source repository105.3k
Diagram Design
Cathryn Lavery· Community
Generate branded, editorial-style technical diagrams as self-contained HTML, SVG, or PNG files.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
MITLow riskHas scriptsGitHub stars of the source repository65.6k
Choreograph
Emil Kowalski· Community
A systematic approach to coordinating multi-element animations into intentional, cohesive motion.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository54.3k