CtrlK
BlogDocsLog inGet started
Tessl Logo

video-interaction-mapper

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.

77

Quality

96%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

92%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A high-quality operational skill body: every workflow step is backed by an executable command against real bundled scripts, verification and failure-recovery paths are explicit, and heavy implementation logic is correctly externalized into scripts. The only weakness is mild redundancy around the coordinate-hiding rule, which is repeated several times across sections.

DimensionReasoningScore

Conciseness

Largely lean and command-driven with no explanations of concepts Claude already knows, but there is minor repetition that could be trimmed: the rule that coordinates must stay out of visible annotations appears four times ("Do not include coordinate values in visible annotation text", "Keep annotations human-readable: Target: Account avatar, not a label with a raw coordinate suffix", "never raw coordinate percentages", "do not expose coordinate values"). Not 5 because of this redundancy; not 3 because nearly all content is skill-specific operational detail that earns its place.

4 / 5

Actionability

Fully executable, copy-paste-ready commands with exact flags and paths for all five bundled scripts (all of which exist in scripts/), a complete key_moments.json example, exact upload parameters ("count: 1", "scaleMode: \"FILL\""), and specific numeric defaults (1440 px landscape, quality 75, threshold 0.4). Specific examples cover the common cases end to end.

5 / 5

Workflow Clarity

Eight clearly numbered steps with explicit validation checkpoints: step 1 validates the video path and ffmpeg, step 8 is a dedicated Verify pass (screenshots nonblank, markers on target, annotations human-readable), and edge cases include feedback loops for error recovery (retry individual upload_assets targets, re-run the fill pass when images fail to render, raise --scene-threshold when too many frames). Ordering is also deliberate — local analysis completes before the Figma file is touched to avoid partial pages.

5 / 5

Progressive Disclosure

Scored against the actual bundle: all five scripts in scripts/ are referenced by exact path and verified to exist, are one level deep, and the body explicitly instructs to run them as helpers rather than read them ("Read or modify them only when debugging, adapting to an unusual environment, or changing the skill itself"). Implementation detail is appropriately externalized into executable scripts while SKILL.md stays a navigable overview with clear section headers and no nested references.

5 / 5

Total

19

/

20

Passed

Description

100%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

Exemplary description: explicit "use when" guidance with eight concrete trigger phrases, file extensions, contextual co-triggers, and a precise third-person statement of what the skill does. Both the what and when questions are answered with concrete, natural language users would actually say.

DimensionReasoningScore

Specificity

Lists multiple concrete actions with comprehensive coverage: "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" — three specific, distinct capabilities stated in third person. Not 4 because coverage of the skill's actions is complete rather than having minor gaps.

5 / 5

Completeness

Explicitly answers both parts: when ("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...") and what ("extracts key visual moments... infers interaction triggers... builds an annotated Figma Design storyboard"). Concrete trigger phrases are present, matching the anchor-5 exemplar.

5 / 5

Trigger Term Quality

Eight natural user phrasings ("put video frames in Figma", "extract states from my recording", "create a storyboard from my video", etc.) plus synonyms and file extensions (.mp4, .mov, .webm, .avi) plus contextual triggers ("design review, interaction analysis, prototypes, or UI states"). Comprehensive natural-term coverage including extensions, matching the anchor-5 example pattern.

5 / 5

Distinctiveness Conflict Risk

Clear niche (video-to-Figma interaction storyboards) with distinct, Figma-bound triggers and file-extension guards; conflict risk is minimal. A few phrases like "analyze this screen recording" could overlap with a generic video-analysis skill, but the description's dominant framing ("map interaction states into Figma") keeps the niche unambiguous, so this fits anchor 5 better than anchor 4's "minor overlap risk with closely related skills".

5 / 5

Total

20

/

20

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
figma/mcp-server-guide
Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.