[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-figma-video-interaction-mapper":3,"mdc--i28wcj-key":34,"related-org-figma-video-interaction-mapper":2957,"related-repo-figma-video-interaction-mapper":3127},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":23,"repoUrl":24,"updatedAt":25,"license":26,"forks":27,"topics":28,"repo":29,"sourceUrl":32,"mdContent":33},"video-interaction-mapper","map video interaction states to Figma","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.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"figma","Figma","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Ffigma.png",[12,16,19,20],{"name":13,"slug":14,"type":15},"Interaction","interaction","tag",{"name":17,"slug":18,"type":15},"Video","video",{"name":9,"slug":8,"type":15},{"name":21,"slug":22,"type":15},"Design","design",1805,"https:\u002F\u002Fgithub.com\u002Ffigma\u002Fmcp-server-guide","2026-07-07T06:46:26.285159",null,164,[],{"repoUrl":24,"stars":23,"forks":27,"topics":30,"description":31},[],"A guide on how to use the Figma MCP server","https:\u002F\u002Fgithub.com\u002Ffigma\u002Fmcp-server-guide\u002Ftree\u002FHEAD\u002Fworkflow-skills\u002Fvideo-interaction-mapper","---\nname: video-interaction-mapper\ndescription: >\n This skill should be used when the user asks to analyze a UI screen recording and\n map interaction states into Figma. Trigger for requests such as \"put video frames\n in Figma\", \"extract states from my recording\", \"map interactions from video to\n Figma\", \"analyze this screen recording\", \"create a storyboard from my video\",\n \"deconstruct this interaction in Figma\", \"annotate the UI states in my recording\",\n or \"pull the key moments from this video into Figma\". Also trigger when the user\n references a video file (.mp4, .mov, .webm, .avi) together with Figma, design\n review, interaction analysis, prototypes, or UI states. The skill extracts key\n visual moments from a video, infers interaction triggers, and builds an annotated\n Figma Design storyboard using native Figma annotations and uploaded screenshot\n assets.\n---\n\n# Video Interaction Mapper\n\nTurn a UI recording into a static, annotated Figma storyboard. Extract the important\nbefore\u002Fafter states, infer what triggered each change, then place clean screenshots,\nblue interaction markers, and concise annotations into a Figma Design file.\n\n## Required Inputs and Tools\n\nStart with:\n\n- A local video file path (`.mp4`, `.mov`, `.webm`, or `.avi`).\n- `ffmpeg` and `ffprobe` available on the machine.\n- Python with Pillow installed.\n- Figma MCP tools available: `create_new_file`, `use_figma`, `upload_assets`, and\n `get_screenshot` or `get_design_context`.\n\nRun the bundled files in `scripts\u002F` as executable workflow helpers. They are part\nof the skill's implementation, not reference material. Read or modify them only\nwhen debugging, adapting to an unusual environment, or changing the skill itself.\n\nUse a Figma Design file (`figma.com\u002Fdesign\u002F...`) as the target. The generated\nPlugin API code creates pages and image-fill frames, which are Design-file\noperations. If the user provides a FigJam or Slides URL, ask for a Design file or\ncreate a new one.\n\nBefore any `use_figma` call, load the Figma API guidance skill if available\n(`figma-use`). Before creating a new Figma file, load the file-creation guidance\nskill if available (`figma-create-new-file`). Pass `skillNames:\n\"figma-use,video-interaction-mapper\"` on `use_figma` calls when the client supports\nthat parameter.\n\n## Workflow\n\n### 1. Validate and Prepare\n\nConfirm the video path exists, then check `ffmpeg -version`. If Pillow is missing,\ninstall it in the active Python environment:\n\n```bash\npip install Pillow --break-system-packages -q\n```\n\nDo local analysis before creating or modifying the Figma file. Create a Figma file\nonly after `key_moments.json`, `upload_manifest.json`, and generated Figma scripts\nare ready, unless the user explicitly asks to create the file first. This avoids\nleaving partial pages behind when local frame analysis changes.\n\n### 2. Scout the Timeline Quickly\n\nStart with a low-resolution scout pass and contact sheet:\n\n```bash\npython \u003CSKILL_DIR>\u002Fscripts\u002Fextract_key_frames.py \\\n --input \"\u003Cvideo_path>\" \\\n --output \u002Ftmp\u002Fvim_frames_\u003Ctimestamp>\u002F \\\n --mode scout\n```\n\nThe scout pass extracts at 1 fps by default, resizes frames to 640 px wide, scores\nscene changes, writes `\u003Coutput_dir>\u002Fframes_manifest.json`, and creates\n`\u003Coutput_dir>\u002Fcontact_sheet.jpg`. Inspect the contact sheet first to identify likely\ninteraction moments.\n\nUse the slower full extraction only when the scout pass is insufficient:\n\n```bash\npython \u003CSKILL_DIR>\u002Fscripts\u002Fextract_key_frames.py \\\n --input \"\u003Cvideo_path>\" \\\n --output \u002Ftmp\u002Fvim_frames_\u003Ctimestamp>\u002Ffull_frames\u002F \\\n --mode full \\\n --max-width 1600\n```\n\nFor very long videos, ask whether to focus on a specific time range before\nprocessing the whole recording. For too many key frames, re-run extraction with a\nhigher `--scene-threshold`, such as `0.4`.\n\n### 3. Analyze Key Moments\n\nRead `frames_manifest.json` and inspect `contact_sheet.jpg` or relevant extracted\nframes. For each meaningful transition, identify:\n\n- Visual change: modal, drawer, dropdown, tooltip, snackbar, overlay, navigation,\n loaded content, selected state, validation state, input focus, or scroll position.\n- Trigger: click, tap, keyboard input, hover, scroll, swipe, form submit, auto\u002Ftimer,\n or unknown trigger when the cause is ambiguous.\n- Interaction target and result coordinates when visible and useful.\n\nUse normalized coordinates from `0` to `1` relative to the screenshot. Percent-like\nvalues such as `45` or `94` are accepted by the generated Figma script and converted\nto `0.45` or `0.94`. Coordinates are machine metadata for marker placement only.\nDo not include coordinate values in visible annotation text, moment labels, or user\nsummaries.\n\nOnly add marker coordinates when the point lands on a clearly visible UI element or\nstate. If a target is inferred, between visible controls, or based mainly on cursor\nposition, mark it with `inferred: true`, `uncertain: true`, `visible: false`, or\n`confidence: \"medium\"`\u002F`\"low\"`. The generated script suppresses markers for those\npoints by default so the canvas does not show a confident pulse over empty UI. If\nthe target or result cannot be located usefully, set `interaction` to `null`.\n\nUse `confidence: \"high\"` or omit `confidence` only when the marker should be drawn.\nUse `show_marker: true` only when an uncertain point is still worth marking; the\ngenerated marker uses an alternate style for these forced uncertain markers.\n\nAim for 5 to 15 key moments. Prioritize high scene scores and genuinely different\nstates over tiny visual shifts.\n\nWrite the analysis to `\u003Coutput_dir>\u002Fkey_moments.json` as an array. When using the\nscout flow, provide timestamps first; resolve high-quality frame files in the next\nstep.\n\n```json\n[\n {\n \"moment_index\": 1,\n \"timestamp_s\": 3.4,\n \"before_timestamp_s\": 3.2,\n \"after_timestamp_s\": 3.4,\n \"trigger\": \"Click\",\n \"trigger_emoji\": \"\",\n \"short_label\": \"Dropdown menu opens\",\n \"annotation\": \"The account avatar is activated. A menu appears below it with profile, billing, and sign-out actions.\",\n \"interaction\": {\n \"target_frame\": \"before\",\n \"target\": {\n \"x\": 0.91,\n \"y\": 0.08,\n \"label\": \"Account avatar\",\n \"confidence\": \"high\"\n },\n \"result_frame\": \"after\",\n \"result\": {\n \"x\": 0.86,\n \"y\": 0.2,\n \"label\": \"Opened account menu\"\n },\n \"annotation\": \"Activating the avatar opens the account menu.\"\n }\n }\n]\n```\n\nKeep annotations human-readable: `Target: Account avatar`, not a label with a raw\ncoordinate suffix. Coordinates stay hidden in JSON and appear only as visual marker\nplacement.\n\nIf a marker is drawn, the native Figma annotation is attached to that marker node\nrather than the screenshot frame. If a marker is suppressed because the point is\nuncertain or not visible, the annotation remains attached to the screenshot frame.\n\n### 4. Resolve Selected Frames\n\nIf `key_moments.json` uses timestamps, extract only the selected before\u002Fafter\nframes at higher quality:\n\n```bash\npython \u003CSKILL_DIR>\u002Fscripts\u002Fresolve_moment_frames.py \\\n --video \"\u003Cvideo_path>\" \\\n --moments-file \u002Ftmp\u002Fvim_frames_\u003Ctimestamp>\u002Fkey_moments.json \\\n --output \u002Ftmp\u002Fvim_frames_\u003Ctimestamp>\u002Fkey_moments_resolved.json \\\n --frames-dir \u002Ftmp\u002Fvim_frames_\u003Ctimestamp>\u002Fselected_frames\u002F \\\n --max-width 1600\n```\n\nUse `key_moments_resolved.json` in later steps. If a full extraction already\nproduced precise `before_frame_path` and `after_frame_path` values, this step can\nbe skipped.\n\n### 5. Prepare Uploadable Screenshot Assets\n\nCompress and resize the before\u002Fafter screenshots for upload:\n\n```bash\npython \u003CSKILL_DIR>\u002Fscripts\u002Fprepare_upload_frames.py \\\n --manifest \u002Ftmp\u002Fvim_frames_\u003Ctimestamp>\u002Fframes_manifest.json \\\n --moments-file \u002Ftmp\u002Fvim_frames_\u003Ctimestamp>\u002Fkey_moments_resolved.json \\\n --output \u002Ftmp\u002Fvim_frames_\u003Ctimestamp>\u002Fupload_manifest.json\n```\n\nThe script writes optimized JPEGs under `\u003Coutput_dir>\u002Fupload_assets\u002F` and creates\n`upload_manifest.json`. Defaults are 1440 px wide for landscape recordings and 900\npx wide for portrait recordings at JPEG quality 75. It records image dimensions,\nactual JPEG quality, file size, and whether each asset fits the upload budget.\n\n### 6. Generate Figma Call Files\n\nGenerate the self-contained Plugin API scripts:\n\n```bash\npython \u003CSKILL_DIR>\u002Fscripts\u002Fgenerate_figma_calls.py \\\n --prepared \u002Ftmp\u002Fvim_frames_\u003Ctimestamp>\u002Fupload_manifest.json \\\n --output-dir \u002Ftmp\u002Fvim_frames_\u003Ctimestamp>\u002Ffigma_calls\u002F\n```\n\nThis writes:\n\n- `figma_storyboard.js`: one combined storyboard creation call.\n- `figma_apply_fills_template.js`: a fill-pass template for uploaded image hashes.\n- `figma_manifest.json`: execution order and upload instructions.\n- `run_manifest.json`: resumable status, selected moments, expected uploads, node\n IDs, image hashes, fill status, and verification status.\n\nThe generated JavaScript does not embed image bytes and does not call\n`figma.createImage`. The storyboard script creates all screenshot containers,\nlabels, native annotations, and marker overlays in one call, then returns\n`uploadTargets` containing Figma node IDs and local JPEG paths. In a newly created\nblank file, the script reuses and renames the default page instead of creating a\nsecond page.\n\n### 7. Execute in Figma and Upload Assets\n\nCreate a new Figma Design file or open the target Design file now. Run the generated\nfiles in `figma_manifest.json`:\n\n1. Read `figma_storyboard.js`.\n2. Call `use_figma` against the target Design file with the full JavaScript content.\n3. Save the result JSON if practical, then update the run manifest:\n\n```bash\npython \u003CSKILL_DIR>\u002Fscripts\u002Fupdate_run_manifest.py \\\n --run-manifest \u002Ftmp\u002Fvim_frames_\u003Ctimestamp>\u002Ffigma_calls\u002Frun_manifest.json \\\n --storyboard-result \u002Ftmp\u002Fvim_frames_\u003Ctimestamp>\u002Fstoryboard_result.json\n```\n\nFor each returned `uploadTargets` item:\n\n- Call `upload_assets` with the target `fileKey`, `count: 1`, `nodeId`, and\n `scaleMode: \"FILL\"`.\n- POST the local file at `target.path` to the returned upload URL.\n- Record `{ \"nodeId\": \"...\", \"imageHash\": \"...\", \"scaleMode\": \"FILL\" }` in an\n uploads JSON file.\n\nGenerate and run the fill pass:\n\n```bash\npython \u003CSKILL_DIR>\u002Fscripts\u002Fupdate_run_manifest.py \\\n --run-manifest \u002Ftmp\u002Fvim_frames_\u003Ctimestamp>\u002Ffigma_calls\u002Frun_manifest.json \\\n --uploads-file \u002Ftmp\u002Fvim_frames_\u003Ctimestamp>\u002Fuploaded_images.json \\\n --write-fill-script \u002Ftmp\u002Fvim_frames_\u003Ctimestamp>\u002Ffigma_calls\u002Ffigma_apply_fills.js\n```\n\nRun `figma_apply_fills.js` once with `use_figma`. This explicit image-hash fill pass\nis preferred because it makes uploaded screenshots render reliably in the generated\ncontainers.\n\n### 8. Verify\n\nRun `get_screenshot`, `download_assets`, or `get_design_context` to verify that:\n\n- Screenshots are visible and nonblank.\n- Blue marker rings sit on the intended target\u002Fresult locations.\n- Native annotations use human labels and do not expose coordinate values.\n- Ambiguous or inferred targets are suppressed unless explicitly forced with\n `show_marker: true`.\n\nUpdate `run_manifest.json` with verification artifacts when available:\n\n```bash\npython \u003CSKILL_DIR>\u002Fscripts\u002Fupdate_run_manifest.py \\\n --run-manifest \u002Ftmp\u002Fvim_frames_\u003Ctimestamp>\u002Ffigma_calls\u002Frun_manifest.json \\\n --verification-screenshot \u002Ftmp\u002Fvim_frames_\u003Ctimestamp>\u002Ffigma_storyboard.png \\\n --verification-notes \"Screenshots and markers verified\"\n```\n\n## Output Expectations\n\nThe storyboard layout is left-to-right:\n\n```text\n[Title block]\n\n[Before] [After] [Before] [After] [Before] [After]\nmoment 1 moment 2 moment 3\n\n\"Before state\" \"01 Dropdown menu opens\"\n Annotation text...\n```\n\nBlue ring\u002Fdot overlays show the target and result locations when coordinates are\navailable and confident. Native Figma annotations attach to the marker nodes when\nmarkers exist; otherwise they attach to the relevant before\u002Fafter screenshot nodes.\nAnnotation labels should name the UI element or state change, never raw coordinate\npercentages.\n\nReport back with:\n\n- The number of key moments mapped.\n- The Figma file URL.\n- Any moments whose trigger was ambiguous.\n- Any uploads or frames that failed.\n- The verification status and any inferred\u002Funcertain markers.\n\n## Edge Cases\n\n- Long video: ask for a time range or warn that processing can take longer.\n- Too many moments: raise `--scene-threshold` or manually keep the most meaningful\n 5 to 15 transitions.\n- Mobile recording: keep the portrait default width of 900 px so text remains\n readable without oversized assets.\n- Missing trigger evidence: use `Unknown trigger` instead of guessing.\n- Asset upload failure: retry the individual `upload_assets` target; the generated\n screenshot container remains in the file and can be reused.\n- `upload_assets` succeeds but images do not render: run the generated fill pass\n with the returned image hashes.\n- `upload_assets` is unavailable: warn that the fallback path is slower because it\n must embed image data directly in `use_figma` calls.\n",{"data":35,"body":36},{"name":4,"description":6},{"type":37,"children":38},"root",[39,47,53,60,65,174,187,200,243,249,256,269,313,333,339,344,474,495,500,628,648,654,675,693,744,799,828,833,846,1588,1601,1606,1612,1624,1808,1835,1841,1846,1989,2009,2015,2020,2129,2134,2181,2202,2208,2219,2250,2359,2371,2439,2444,2587,2607,2613,2637,2666,2678,2809,2815,2820,2830,2835,2840,2868,2874,2951],{"type":40,"tag":41,"props":42,"children":43},"element","h1",{"id":4},[44],{"type":45,"value":46},"text","Video Interaction Mapper",{"type":40,"tag":48,"props":49,"children":50},"p",{},[51],{"type":45,"value":52},"Turn a UI recording into a static, annotated Figma storyboard. Extract the important\nbefore\u002Fafter states, infer what triggered each change, then place clean screenshots,\nblue interaction markers, and concise annotations into a Figma Design file.",{"type":40,"tag":54,"props":55,"children":57},"h2",{"id":56},"required-inputs-and-tools",[58],{"type":45,"value":59},"Required Inputs and Tools",{"type":40,"tag":48,"props":61,"children":62},{},[63],{"type":45,"value":64},"Start with:",{"type":40,"tag":66,"props":67,"children":68},"ul",{},[69,107,126,131],{"type":40,"tag":70,"props":71,"children":72},"li",{},[73,75,82,84,90,91,97,99,105],{"type":45,"value":74},"A local video file path (",{"type":40,"tag":76,"props":77,"children":79},"code",{"className":78},[],[80],{"type":45,"value":81},".mp4",{"type":45,"value":83},", ",{"type":40,"tag":76,"props":85,"children":87},{"className":86},[],[88],{"type":45,"value":89},".mov",{"type":45,"value":83},{"type":40,"tag":76,"props":92,"children":94},{"className":93},[],[95],{"type":45,"value":96},".webm",{"type":45,"value":98},", or ",{"type":40,"tag":76,"props":100,"children":102},{"className":101},[],[103],{"type":45,"value":104},".avi",{"type":45,"value":106},").",{"type":40,"tag":70,"props":108,"children":109},{},[110,116,118,124],{"type":40,"tag":76,"props":111,"children":113},{"className":112},[],[114],{"type":45,"value":115},"ffmpeg",{"type":45,"value":117}," and ",{"type":40,"tag":76,"props":119,"children":121},{"className":120},[],[122],{"type":45,"value":123},"ffprobe",{"type":45,"value":125}," available on the machine.",{"type":40,"tag":70,"props":127,"children":128},{},[129],{"type":45,"value":130},"Python with Pillow installed.",{"type":40,"tag":70,"props":132,"children":133},{},[134,136,142,143,149,150,156,158,164,166,172],{"type":45,"value":135},"Figma MCP tools available: ",{"type":40,"tag":76,"props":137,"children":139},{"className":138},[],[140],{"type":45,"value":141},"create_new_file",{"type":45,"value":83},{"type":40,"tag":76,"props":144,"children":146},{"className":145},[],[147],{"type":45,"value":148},"use_figma",{"type":45,"value":83},{"type":40,"tag":76,"props":151,"children":153},{"className":152},[],[154],{"type":45,"value":155},"upload_assets",{"type":45,"value":157},", and\n",{"type":40,"tag":76,"props":159,"children":161},{"className":160},[],[162],{"type":45,"value":163},"get_screenshot",{"type":45,"value":165}," or ",{"type":40,"tag":76,"props":167,"children":169},{"className":168},[],[170],{"type":45,"value":171},"get_design_context",{"type":45,"value":173},".",{"type":40,"tag":48,"props":175,"children":176},{},[177,179,185],{"type":45,"value":178},"Run the bundled files in ",{"type":40,"tag":76,"props":180,"children":182},{"className":181},[],[183],{"type":45,"value":184},"scripts\u002F",{"type":45,"value":186}," as executable workflow helpers. They are part\nof the skill's implementation, not reference material. Read or modify them only\nwhen debugging, adapting to an unusual environment, or changing the skill itself.",{"type":40,"tag":48,"props":188,"children":189},{},[190,192,198],{"type":45,"value":191},"Use a Figma Design file (",{"type":40,"tag":76,"props":193,"children":195},{"className":194},[],[196],{"type":45,"value":197},"figma.com\u002Fdesign\u002F...",{"type":45,"value":199},") as the target. The generated\nPlugin API code creates pages and image-fill frames, which are Design-file\noperations. If the user provides a FigJam or Slides URL, ask for a Design file or\ncreate a new one.",{"type":40,"tag":48,"props":201,"children":202},{},[203,205,210,212,218,220,226,228,234,236,241],{"type":45,"value":204},"Before any ",{"type":40,"tag":76,"props":206,"children":208},{"className":207},[],[209],{"type":45,"value":148},{"type":45,"value":211}," call, load the Figma API guidance skill if available\n(",{"type":40,"tag":76,"props":213,"children":215},{"className":214},[],[216],{"type":45,"value":217},"figma-use",{"type":45,"value":219},"). Before creating a new Figma file, load the file-creation guidance\nskill if available (",{"type":40,"tag":76,"props":221,"children":223},{"className":222},[],[224],{"type":45,"value":225},"figma-create-new-file",{"type":45,"value":227},"). Pass ",{"type":40,"tag":76,"props":229,"children":231},{"className":230},[],[232],{"type":45,"value":233},"skillNames: \"figma-use,video-interaction-mapper\"",{"type":45,"value":235}," on ",{"type":40,"tag":76,"props":237,"children":239},{"className":238},[],[240],{"type":45,"value":148},{"type":45,"value":242}," calls when the client supports\nthat parameter.",{"type":40,"tag":54,"props":244,"children":246},{"id":245},"workflow",[247],{"type":45,"value":248},"Workflow",{"type":40,"tag":250,"props":251,"children":253},"h3",{"id":252},"_1-validate-and-prepare",[254],{"type":45,"value":255},"1. Validate and Prepare",{"type":40,"tag":48,"props":257,"children":258},{},[259,261,267],{"type":45,"value":260},"Confirm the video path exists, then check ",{"type":40,"tag":76,"props":262,"children":264},{"className":263},[],[265],{"type":45,"value":266},"ffmpeg -version",{"type":45,"value":268},". If Pillow is missing,\ninstall it in the active Python environment:",{"type":40,"tag":270,"props":271,"children":276},"pre",{"className":272,"code":273,"language":274,"meta":275,"style":275},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pip install Pillow --break-system-packages -q\n","bash","",[277],{"type":40,"tag":76,"props":278,"children":279},{"__ignoreMap":275},[280],{"type":40,"tag":281,"props":282,"children":285},"span",{"class":283,"line":284},"line",1,[286,292,298,303,308],{"type":40,"tag":281,"props":287,"children":289},{"style":288},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[290],{"type":45,"value":291},"pip",{"type":40,"tag":281,"props":293,"children":295},{"style":294},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[296],{"type":45,"value":297}," install",{"type":40,"tag":281,"props":299,"children":300},{"style":294},[301],{"type":45,"value":302}," Pillow",{"type":40,"tag":281,"props":304,"children":305},{"style":294},[306],{"type":45,"value":307}," --break-system-packages",{"type":40,"tag":281,"props":309,"children":310},{"style":294},[311],{"type":45,"value":312}," -q\n",{"type":40,"tag":48,"props":314,"children":315},{},[316,318,324,325,331],{"type":45,"value":317},"Do local analysis before creating or modifying the Figma file. Create a Figma file\nonly after ",{"type":40,"tag":76,"props":319,"children":321},{"className":320},[],[322],{"type":45,"value":323},"key_moments.json",{"type":45,"value":83},{"type":40,"tag":76,"props":326,"children":328},{"className":327},[],[329],{"type":45,"value":330},"upload_manifest.json",{"type":45,"value":332},", and generated Figma scripts\nare ready, unless the user explicitly asks to create the file first. This avoids\nleaving partial pages behind when local frame analysis changes.",{"type":40,"tag":250,"props":334,"children":336},{"id":335},"_2-scout-the-timeline-quickly",[337],{"type":45,"value":338},"2. Scout the Timeline Quickly",{"type":40,"tag":48,"props":340,"children":341},{},[342],{"type":45,"value":343},"Start with a low-resolution scout pass and contact sheet:",{"type":40,"tag":270,"props":345,"children":347},{"className":272,"code":346,"language":274,"meta":275,"style":275},"python \u003CSKILL_DIR>\u002Fscripts\u002Fextract_key_frames.py \\\n --input \"\u003Cvideo_path>\" \\\n --output \u002Ftmp\u002Fvim_frames_\u003Ctimestamp>\u002F \\\n --mode scout\n",[348],{"type":40,"tag":76,"props":349,"children":350},{"__ignoreMap":275},[351,391,419,460],{"type":40,"tag":281,"props":352,"children":353},{"class":283,"line":284},[354,359,365,370,376,381,386],{"type":40,"tag":281,"props":355,"children":356},{"style":288},[357],{"type":45,"value":358},"python",{"type":40,"tag":281,"props":360,"children":362},{"style":361},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[363],{"type":45,"value":364}," \u003C",{"type":40,"tag":281,"props":366,"children":367},{"style":294},[368],{"type":45,"value":369},"SKILL_DI",{"type":40,"tag":281,"props":371,"children":373},{"style":372},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[374],{"type":45,"value":375},"R",{"type":40,"tag":281,"props":377,"children":378},{"style":361},[379],{"type":45,"value":380},">",{"type":40,"tag":281,"props":382,"children":383},{"style":294},[384],{"type":45,"value":385},"\u002Fscripts\u002Fextract_key_frames.py",{"type":40,"tag":281,"props":387,"children":388},{"style":372},[389],{"type":45,"value":390}," \\\n",{"type":40,"tag":281,"props":392,"children":394},{"class":283,"line":393},2,[395,400,405,410,415],{"type":40,"tag":281,"props":396,"children":397},{"style":294},[398],{"type":45,"value":399}," --input",{"type":40,"tag":281,"props":401,"children":402},{"style":361},[403],{"type":45,"value":404}," \"",{"type":40,"tag":281,"props":406,"children":407},{"style":294},[408],{"type":45,"value":409},"\u003Cvideo_path>",{"type":40,"tag":281,"props":411,"children":412},{"style":361},[413],{"type":45,"value":414},"\"",{"type":40,"tag":281,"props":416,"children":417},{"style":372},[418],{"type":45,"value":390},{"type":40,"tag":281,"props":420,"children":422},{"class":283,"line":421},3,[423,428,433,438,443,447,451,456],{"type":40,"tag":281,"props":424,"children":425},{"style":294},[426],{"type":45,"value":427}," --output",{"type":40,"tag":281,"props":429,"children":430},{"style":294},[431],{"type":45,"value":432}," \u002Ftmp\u002Fvim_frames_",{"type":40,"tag":281,"props":434,"children":435},{"style":361},[436],{"type":45,"value":437},"\u003C",{"type":40,"tag":281,"props":439,"children":440},{"style":294},[441],{"type":45,"value":442},"timestam",{"type":40,"tag":281,"props":444,"children":445},{"style":372},[446],{"type":45,"value":48},{"type":40,"tag":281,"props":448,"children":449},{"style":361},[450],{"type":45,"value":380},{"type":40,"tag":281,"props":452,"children":453},{"style":294},[454],{"type":45,"value":455},"\u002F",{"type":40,"tag":281,"props":457,"children":458},{"style":372},[459],{"type":45,"value":390},{"type":40,"tag":281,"props":461,"children":463},{"class":283,"line":462},4,[464,469],{"type":40,"tag":281,"props":465,"children":466},{"style":294},[467],{"type":45,"value":468}," --mode",{"type":40,"tag":281,"props":470,"children":471},{"style":294},[472],{"type":45,"value":473}," scout\n",{"type":40,"tag":48,"props":475,"children":476},{},[477,479,485,487,493],{"type":45,"value":478},"The scout pass extracts at 1 fps by default, resizes frames to 640 px wide, scores\nscene changes, writes ",{"type":40,"tag":76,"props":480,"children":482},{"className":481},[],[483],{"type":45,"value":484},"\u003Coutput_dir>\u002Fframes_manifest.json",{"type":45,"value":486},", and creates\n",{"type":40,"tag":76,"props":488,"children":490},{"className":489},[],[491],{"type":45,"value":492},"\u003Coutput_dir>\u002Fcontact_sheet.jpg",{"type":45,"value":494},". Inspect the contact sheet first to identify likely\ninteraction moments.",{"type":40,"tag":48,"props":496,"children":497},{},[498],{"type":45,"value":499},"Use the slower full extraction only when the scout pass is insufficient:",{"type":40,"tag":270,"props":501,"children":503},{"className":272,"code":502,"language":274,"meta":275,"style":275},"python \u003CSKILL_DIR>\u002Fscripts\u002Fextract_key_frames.py \\\n --input \"\u003Cvideo_path>\" \\\n --output \u002Ftmp\u002Fvim_frames_\u003Ctimestamp>\u002Ffull_frames\u002F \\\n --mode full \\\n --max-width 1600\n",[504],{"type":40,"tag":76,"props":505,"children":506},{"__ignoreMap":275},[507,538,561,597,613],{"type":40,"tag":281,"props":508,"children":509},{"class":283,"line":284},[510,514,518,522,526,530,534],{"type":40,"tag":281,"props":511,"children":512},{"style":288},[513],{"type":45,"value":358},{"type":40,"tag":281,"props":515,"children":516},{"style":361},[517],{"type":45,"value":364},{"type":40,"tag":281,"props":519,"children":520},{"style":294},[521],{"type":45,"value":369},{"type":40,"tag":281,"props":523,"children":524},{"style":372},[525],{"type":45,"value":375},{"type":40,"tag":281,"props":527,"children":528},{"style":361},[529],{"type":45,"value":380},{"type":40,"tag":281,"props":531,"children":532},{"style":294},[533],{"type":45,"value":385},{"type":40,"tag":281,"props":535,"children":536},{"style":372},[537],{"type":45,"value":390},{"type":40,"tag":281,"props":539,"children":540},{"class":283,"line":393},[541,545,549,553,557],{"type":40,"tag":281,"props":542,"children":543},{"style":294},[544],{"type":45,"value":399},{"type":40,"tag":281,"props":546,"children":547},{"style":361},[548],{"type":45,"value":404},{"type":40,"tag":281,"props":550,"children":551},{"style":294},[552],{"type":45,"value":409},{"type":40,"tag":281,"props":554,"children":555},{"style":361},[556],{"type":45,"value":414},{"type":40,"tag":281,"props":558,"children":559},{"style":372},[560],{"type":45,"value":390},{"type":40,"tag":281,"props":562,"children":563},{"class":283,"line":421},[564,568,572,576,580,584,588,593],{"type":40,"tag":281,"props":565,"children":566},{"style":294},[567],{"type":45,"value":427},{"type":40,"tag":281,"props":569,"children":570},{"style":294},[571],{"type":45,"value":432},{"type":40,"tag":281,"props":573,"children":574},{"style":361},[575],{"type":45,"value":437},{"type":40,"tag":281,"props":577,"children":578},{"style":294},[579],{"type":45,"value":442},{"type":40,"tag":281,"props":581,"children":582},{"style":372},[583],{"type":45,"value":48},{"type":40,"tag":281,"props":585,"children":586},{"style":361},[587],{"type":45,"value":380},{"type":40,"tag":281,"props":589,"children":590},{"style":294},[591],{"type":45,"value":592},"\u002Ffull_frames\u002F",{"type":40,"tag":281,"props":594,"children":595},{"style":372},[596],{"type":45,"value":390},{"type":40,"tag":281,"props":598,"children":599},{"class":283,"line":462},[600,604,609],{"type":40,"tag":281,"props":601,"children":602},{"style":294},[603],{"type":45,"value":468},{"type":40,"tag":281,"props":605,"children":606},{"style":294},[607],{"type":45,"value":608}," full",{"type":40,"tag":281,"props":610,"children":611},{"style":372},[612],{"type":45,"value":390},{"type":40,"tag":281,"props":614,"children":616},{"class":283,"line":615},5,[617,622],{"type":40,"tag":281,"props":618,"children":619},{"style":294},[620],{"type":45,"value":621}," --max-width",{"type":40,"tag":281,"props":623,"children":625},{"style":624},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[626],{"type":45,"value":627}," 1600\n",{"type":40,"tag":48,"props":629,"children":630},{},[631,633,639,641,647],{"type":45,"value":632},"For very long videos, ask whether to focus on a specific time range before\nprocessing the whole recording. For too many key frames, re-run extraction with a\nhigher ",{"type":40,"tag":76,"props":634,"children":636},{"className":635},[],[637],{"type":45,"value":638},"--scene-threshold",{"type":45,"value":640},", such as ",{"type":40,"tag":76,"props":642,"children":644},{"className":643},[],[645],{"type":45,"value":646},"0.4",{"type":45,"value":173},{"type":40,"tag":250,"props":649,"children":651},{"id":650},"_3-analyze-key-moments",[652],{"type":45,"value":653},"3. Analyze Key Moments",{"type":40,"tag":48,"props":655,"children":656},{},[657,659,665,667,673],{"type":45,"value":658},"Read ",{"type":40,"tag":76,"props":660,"children":662},{"className":661},[],[663],{"type":45,"value":664},"frames_manifest.json",{"type":45,"value":666}," and inspect ",{"type":40,"tag":76,"props":668,"children":670},{"className":669},[],[671],{"type":45,"value":672},"contact_sheet.jpg",{"type":45,"value":674}," or relevant extracted\nframes. For each meaningful transition, identify:",{"type":40,"tag":66,"props":676,"children":677},{},[678,683,688],{"type":40,"tag":70,"props":679,"children":680},{},[681],{"type":45,"value":682},"Visual change: modal, drawer, dropdown, tooltip, snackbar, overlay, navigation,\nloaded content, selected state, validation state, input focus, or scroll position.",{"type":40,"tag":70,"props":684,"children":685},{},[686],{"type":45,"value":687},"Trigger: click, tap, keyboard input, hover, scroll, swipe, form submit, auto\u002Ftimer,\nor unknown trigger when the cause is ambiguous.",{"type":40,"tag":70,"props":689,"children":690},{},[691],{"type":45,"value":692},"Interaction target and result coordinates when visible and useful.",{"type":40,"tag":48,"props":694,"children":695},{},[696,698,704,706,712,714,720,721,727,729,735,736,742],{"type":45,"value":697},"Use normalized coordinates from ",{"type":40,"tag":76,"props":699,"children":701},{"className":700},[],[702],{"type":45,"value":703},"0",{"type":45,"value":705}," to ",{"type":40,"tag":76,"props":707,"children":709},{"className":708},[],[710],{"type":45,"value":711},"1",{"type":45,"value":713}," relative to the screenshot. Percent-like\nvalues such as ",{"type":40,"tag":76,"props":715,"children":717},{"className":716},[],[718],{"type":45,"value":719},"45",{"type":45,"value":165},{"type":40,"tag":76,"props":722,"children":724},{"className":723},[],[725],{"type":45,"value":726},"94",{"type":45,"value":728}," are accepted by the generated Figma script and converted\nto ",{"type":40,"tag":76,"props":730,"children":732},{"className":731},[],[733],{"type":45,"value":734},"0.45",{"type":45,"value":165},{"type":40,"tag":76,"props":737,"children":739},{"className":738},[],[740],{"type":45,"value":741},"0.94",{"type":45,"value":743},". Coordinates are machine metadata for marker placement only.\nDo not include coordinate values in visible annotation text, moment labels, or user\nsummaries.",{"type":40,"tag":48,"props":745,"children":746},{},[747,749,755,756,762,763,769,771,777,778,784,786,791,792,798],{"type":45,"value":748},"Only add marker coordinates when the point lands on a clearly visible UI element or\nstate. If a target is inferred, between visible controls, or based mainly on cursor\nposition, mark it with ",{"type":40,"tag":76,"props":750,"children":752},{"className":751},[],[753],{"type":45,"value":754},"inferred: true",{"type":45,"value":83},{"type":40,"tag":76,"props":757,"children":759},{"className":758},[],[760],{"type":45,"value":761},"uncertain: true",{"type":45,"value":83},{"type":40,"tag":76,"props":764,"children":766},{"className":765},[],[767],{"type":45,"value":768},"visible: false",{"type":45,"value":770},", or\n",{"type":40,"tag":76,"props":772,"children":774},{"className":773},[],[775],{"type":45,"value":776},"confidence: \"medium\"",{"type":45,"value":455},{"type":40,"tag":76,"props":779,"children":781},{"className":780},[],[782],{"type":45,"value":783},"\"low\"",{"type":45,"value":785},". The generated script suppresses markers for those\npoints by default so the canvas does not show a confident pulse over empty UI. If\nthe target or result cannot be located usefully, set ",{"type":40,"tag":76,"props":787,"children":789},{"className":788},[],[790],{"type":45,"value":14},{"type":45,"value":705},{"type":40,"tag":76,"props":793,"children":795},{"className":794},[],[796],{"type":45,"value":797},"null",{"type":45,"value":173},{"type":40,"tag":48,"props":800,"children":801},{},[802,804,810,812,818,820,826],{"type":45,"value":803},"Use ",{"type":40,"tag":76,"props":805,"children":807},{"className":806},[],[808],{"type":45,"value":809},"confidence: \"high\"",{"type":45,"value":811}," or omit ",{"type":40,"tag":76,"props":813,"children":815},{"className":814},[],[816],{"type":45,"value":817},"confidence",{"type":45,"value":819}," only when the marker should be drawn.\nUse ",{"type":40,"tag":76,"props":821,"children":823},{"className":822},[],[824],{"type":45,"value":825},"show_marker: true",{"type":45,"value":827}," only when an uncertain point is still worth marking; the\ngenerated marker uses an alternate style for these forced uncertain markers.",{"type":40,"tag":48,"props":829,"children":830},{},[831],{"type":45,"value":832},"Aim for 5 to 15 key moments. Prioritize high scene scores and genuinely different\nstates over tiny visual shifts.",{"type":40,"tag":48,"props":834,"children":835},{},[836,838,844],{"type":45,"value":837},"Write the analysis to ",{"type":40,"tag":76,"props":839,"children":841},{"className":840},[],[842],{"type":45,"value":843},"\u003Coutput_dir>\u002Fkey_moments.json",{"type":45,"value":845}," as an array. When using the\nscout flow, provide timestamps first; resolve high-quality frame files in the next\nstep.",{"type":40,"tag":270,"props":847,"children":851},{"className":848,"code":849,"language":850,"meta":275,"style":275},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","[\n {\n \"moment_index\": 1,\n \"timestamp_s\": 3.4,\n \"before_timestamp_s\": 3.2,\n \"after_timestamp_s\": 3.4,\n \"trigger\": \"Click\",\n \"trigger_emoji\": \"\",\n \"short_label\": \"Dropdown menu opens\",\n \"annotation\": \"The account avatar is activated. A menu appears below it with profile, billing, and sign-out actions.\",\n \"interaction\": {\n \"target_frame\": \"before\",\n \"target\": {\n \"x\": 0.91,\n \"y\": 0.08,\n \"label\": \"Account avatar\",\n \"confidence\": \"high\"\n },\n \"result_frame\": \"after\",\n \"result\": {\n \"x\": 0.86,\n \"y\": 0.2,\n \"label\": \"Opened account menu\"\n },\n \"annotation\": \"Activating the avatar opens the account menu.\"\n }\n }\n]\n","json",[852],{"type":40,"tag":76,"props":853,"children":854},{"__ignoreMap":275},[855,863,871,904,933,962,991,1029,1059,1097,1135,1160,1199,1224,1255,1285,1323,1357,1366,1404,1429,1458,1487,1520,1528,1561,1570,1579],{"type":40,"tag":281,"props":856,"children":857},{"class":283,"line":284},[858],{"type":40,"tag":281,"props":859,"children":860},{"style":361},[861],{"type":45,"value":862},"[\n",{"type":40,"tag":281,"props":864,"children":865},{"class":283,"line":393},[866],{"type":40,"tag":281,"props":867,"children":868},{"style":361},[869],{"type":45,"value":870}," {\n",{"type":40,"tag":281,"props":872,"children":873},{"class":283,"line":421},[874,879,885,889,894,899],{"type":40,"tag":281,"props":875,"children":876},{"style":361},[877],{"type":45,"value":878}," \"",{"type":40,"tag":281,"props":880,"children":882},{"style":881},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[883],{"type":45,"value":884},"moment_index",{"type":40,"tag":281,"props":886,"children":887},{"style":361},[888],{"type":45,"value":414},{"type":40,"tag":281,"props":890,"children":891},{"style":361},[892],{"type":45,"value":893},":",{"type":40,"tag":281,"props":895,"children":896},{"style":624},[897],{"type":45,"value":898}," 1",{"type":40,"tag":281,"props":900,"children":901},{"style":361},[902],{"type":45,"value":903},",\n",{"type":40,"tag":281,"props":905,"children":906},{"class":283,"line":462},[907,911,916,920,924,929],{"type":40,"tag":281,"props":908,"children":909},{"style":361},[910],{"type":45,"value":878},{"type":40,"tag":281,"props":912,"children":913},{"style":881},[914],{"type":45,"value":915},"timestamp_s",{"type":40,"tag":281,"props":917,"children":918},{"style":361},[919],{"type":45,"value":414},{"type":40,"tag":281,"props":921,"children":922},{"style":361},[923],{"type":45,"value":893},{"type":40,"tag":281,"props":925,"children":926},{"style":624},[927],{"type":45,"value":928}," 3.4",{"type":40,"tag":281,"props":930,"children":931},{"style":361},[932],{"type":45,"value":903},{"type":40,"tag":281,"props":934,"children":935},{"class":283,"line":615},[936,940,945,949,953,958],{"type":40,"tag":281,"props":937,"children":938},{"style":361},[939],{"type":45,"value":878},{"type":40,"tag":281,"props":941,"children":942},{"style":881},[943],{"type":45,"value":944},"before_timestamp_s",{"type":40,"tag":281,"props":946,"children":947},{"style":361},[948],{"type":45,"value":414},{"type":40,"tag":281,"props":950,"children":951},{"style":361},[952],{"type":45,"value":893},{"type":40,"tag":281,"props":954,"children":955},{"style":624},[956],{"type":45,"value":957}," 3.2",{"type":40,"tag":281,"props":959,"children":960},{"style":361},[961],{"type":45,"value":903},{"type":40,"tag":281,"props":963,"children":965},{"class":283,"line":964},6,[966,970,975,979,983,987],{"type":40,"tag":281,"props":967,"children":968},{"style":361},[969],{"type":45,"value":878},{"type":40,"tag":281,"props":971,"children":972},{"style":881},[973],{"type":45,"value":974},"after_timestamp_s",{"type":40,"tag":281,"props":976,"children":977},{"style":361},[978],{"type":45,"value":414},{"type":40,"tag":281,"props":980,"children":981},{"style":361},[982],{"type":45,"value":893},{"type":40,"tag":281,"props":984,"children":985},{"style":624},[986],{"type":45,"value":928},{"type":40,"tag":281,"props":988,"children":989},{"style":361},[990],{"type":45,"value":903},{"type":40,"tag":281,"props":992,"children":994},{"class":283,"line":993},7,[995,999,1004,1008,1012,1016,1021,1025],{"type":40,"tag":281,"props":996,"children":997},{"style":361},[998],{"type":45,"value":878},{"type":40,"tag":281,"props":1000,"children":1001},{"style":881},[1002],{"type":45,"value":1003},"trigger",{"type":40,"tag":281,"props":1005,"children":1006},{"style":361},[1007],{"type":45,"value":414},{"type":40,"tag":281,"props":1009,"children":1010},{"style":361},[1011],{"type":45,"value":893},{"type":40,"tag":281,"props":1013,"children":1014},{"style":361},[1015],{"type":45,"value":404},{"type":40,"tag":281,"props":1017,"children":1018},{"style":294},[1019],{"type":45,"value":1020},"Click",{"type":40,"tag":281,"props":1022,"children":1023},{"style":361},[1024],{"type":45,"value":414},{"type":40,"tag":281,"props":1026,"children":1027},{"style":361},[1028],{"type":45,"value":903},{"type":40,"tag":281,"props":1030,"children":1032},{"class":283,"line":1031},8,[1033,1037,1042,1046,1050,1055],{"type":40,"tag":281,"props":1034,"children":1035},{"style":361},[1036],{"type":45,"value":878},{"type":40,"tag":281,"props":1038,"children":1039},{"style":881},[1040],{"type":45,"value":1041},"trigger_emoji",{"type":40,"tag":281,"props":1043,"children":1044},{"style":361},[1045],{"type":45,"value":414},{"type":40,"tag":281,"props":1047,"children":1048},{"style":361},[1049],{"type":45,"value":893},{"type":40,"tag":281,"props":1051,"children":1052},{"style":361},[1053],{"type":45,"value":1054}," \"\"",{"type":40,"tag":281,"props":1056,"children":1057},{"style":361},[1058],{"type":45,"value":903},{"type":40,"tag":281,"props":1060,"children":1062},{"class":283,"line":1061},9,[1063,1067,1072,1076,1080,1084,1089,1093],{"type":40,"tag":281,"props":1064,"children":1065},{"style":361},[1066],{"type":45,"value":878},{"type":40,"tag":281,"props":1068,"children":1069},{"style":881},[1070],{"type":45,"value":1071},"short_label",{"type":40,"tag":281,"props":1073,"children":1074},{"style":361},[1075],{"type":45,"value":414},{"type":40,"tag":281,"props":1077,"children":1078},{"style":361},[1079],{"type":45,"value":893},{"type":40,"tag":281,"props":1081,"children":1082},{"style":361},[1083],{"type":45,"value":404},{"type":40,"tag":281,"props":1085,"children":1086},{"style":294},[1087],{"type":45,"value":1088},"Dropdown menu opens",{"type":40,"tag":281,"props":1090,"children":1091},{"style":361},[1092],{"type":45,"value":414},{"type":40,"tag":281,"props":1094,"children":1095},{"style":361},[1096],{"type":45,"value":903},{"type":40,"tag":281,"props":1098,"children":1100},{"class":283,"line":1099},10,[1101,1105,1110,1114,1118,1122,1127,1131],{"type":40,"tag":281,"props":1102,"children":1103},{"style":361},[1104],{"type":45,"value":878},{"type":40,"tag":281,"props":1106,"children":1107},{"style":881},[1108],{"type":45,"value":1109},"annotation",{"type":40,"tag":281,"props":1111,"children":1112},{"style":361},[1113],{"type":45,"value":414},{"type":40,"tag":281,"props":1115,"children":1116},{"style":361},[1117],{"type":45,"value":893},{"type":40,"tag":281,"props":1119,"children":1120},{"style":361},[1121],{"type":45,"value":404},{"type":40,"tag":281,"props":1123,"children":1124},{"style":294},[1125],{"type":45,"value":1126},"The account avatar is activated. A menu appears below it with profile, billing, and sign-out actions.",{"type":40,"tag":281,"props":1128,"children":1129},{"style":361},[1130],{"type":45,"value":414},{"type":40,"tag":281,"props":1132,"children":1133},{"style":361},[1134],{"type":45,"value":903},{"type":40,"tag":281,"props":1136,"children":1138},{"class":283,"line":1137},11,[1139,1143,1147,1151,1155],{"type":40,"tag":281,"props":1140,"children":1141},{"style":361},[1142],{"type":45,"value":878},{"type":40,"tag":281,"props":1144,"children":1145},{"style":881},[1146],{"type":45,"value":14},{"type":40,"tag":281,"props":1148,"children":1149},{"style":361},[1150],{"type":45,"value":414},{"type":40,"tag":281,"props":1152,"children":1153},{"style":361},[1154],{"type":45,"value":893},{"type":40,"tag":281,"props":1156,"children":1157},{"style":361},[1158],{"type":45,"value":1159}," {\n",{"type":40,"tag":281,"props":1161,"children":1163},{"class":283,"line":1162},12,[1164,1169,1174,1178,1182,1186,1191,1195],{"type":40,"tag":281,"props":1165,"children":1166},{"style":361},[1167],{"type":45,"value":1168}," \"",{"type":40,"tag":281,"props":1170,"children":1171},{"style":288},[1172],{"type":45,"value":1173},"target_frame",{"type":40,"tag":281,"props":1175,"children":1176},{"style":361},[1177],{"type":45,"value":414},{"type":40,"tag":281,"props":1179,"children":1180},{"style":361},[1181],{"type":45,"value":893},{"type":40,"tag":281,"props":1183,"children":1184},{"style":361},[1185],{"type":45,"value":404},{"type":40,"tag":281,"props":1187,"children":1188},{"style":294},[1189],{"type":45,"value":1190},"before",{"type":40,"tag":281,"props":1192,"children":1193},{"style":361},[1194],{"type":45,"value":414},{"type":40,"tag":281,"props":1196,"children":1197},{"style":361},[1198],{"type":45,"value":903},{"type":40,"tag":281,"props":1200,"children":1202},{"class":283,"line":1201},13,[1203,1207,1212,1216,1220],{"type":40,"tag":281,"props":1204,"children":1205},{"style":361},[1206],{"type":45,"value":1168},{"type":40,"tag":281,"props":1208,"children":1209},{"style":288},[1210],{"type":45,"value":1211},"target",{"type":40,"tag":281,"props":1213,"children":1214},{"style":361},[1215],{"type":45,"value":414},{"type":40,"tag":281,"props":1217,"children":1218},{"style":361},[1219],{"type":45,"value":893},{"type":40,"tag":281,"props":1221,"children":1222},{"style":361},[1223],{"type":45,"value":1159},{"type":40,"tag":281,"props":1225,"children":1227},{"class":283,"line":1226},14,[1228,1233,1238,1242,1246,1251],{"type":40,"tag":281,"props":1229,"children":1230},{"style":361},[1231],{"type":45,"value":1232}," \"",{"type":40,"tag":281,"props":1234,"children":1235},{"style":624},[1236],{"type":45,"value":1237},"x",{"type":40,"tag":281,"props":1239,"children":1240},{"style":361},[1241],{"type":45,"value":414},{"type":40,"tag":281,"props":1243,"children":1244},{"style":361},[1245],{"type":45,"value":893},{"type":40,"tag":281,"props":1247,"children":1248},{"style":624},[1249],{"type":45,"value":1250}," 0.91",{"type":40,"tag":281,"props":1252,"children":1253},{"style":361},[1254],{"type":45,"value":903},{"type":40,"tag":281,"props":1256,"children":1258},{"class":283,"line":1257},15,[1259,1263,1268,1272,1276,1281],{"type":40,"tag":281,"props":1260,"children":1261},{"style":361},[1262],{"type":45,"value":1232},{"type":40,"tag":281,"props":1264,"children":1265},{"style":624},[1266],{"type":45,"value":1267},"y",{"type":40,"tag":281,"props":1269,"children":1270},{"style":361},[1271],{"type":45,"value":414},{"type":40,"tag":281,"props":1273,"children":1274},{"style":361},[1275],{"type":45,"value":893},{"type":40,"tag":281,"props":1277,"children":1278},{"style":624},[1279],{"type":45,"value":1280}," 0.08",{"type":40,"tag":281,"props":1282,"children":1283},{"style":361},[1284],{"type":45,"value":903},{"type":40,"tag":281,"props":1286,"children":1288},{"class":283,"line":1287},16,[1289,1293,1298,1302,1306,1310,1315,1319],{"type":40,"tag":281,"props":1290,"children":1291},{"style":361},[1292],{"type":45,"value":1232},{"type":40,"tag":281,"props":1294,"children":1295},{"style":624},[1296],{"type":45,"value":1297},"label",{"type":40,"tag":281,"props":1299,"children":1300},{"style":361},[1301],{"type":45,"value":414},{"type":40,"tag":281,"props":1303,"children":1304},{"style":361},[1305],{"type":45,"value":893},{"type":40,"tag":281,"props":1307,"children":1308},{"style":361},[1309],{"type":45,"value":404},{"type":40,"tag":281,"props":1311,"children":1312},{"style":294},[1313],{"type":45,"value":1314},"Account avatar",{"type":40,"tag":281,"props":1316,"children":1317},{"style":361},[1318],{"type":45,"value":414},{"type":40,"tag":281,"props":1320,"children":1321},{"style":361},[1322],{"type":45,"value":903},{"type":40,"tag":281,"props":1324,"children":1326},{"class":283,"line":1325},17,[1327,1331,1335,1339,1343,1347,1352],{"type":40,"tag":281,"props":1328,"children":1329},{"style":361},[1330],{"type":45,"value":1232},{"type":40,"tag":281,"props":1332,"children":1333},{"style":624},[1334],{"type":45,"value":817},{"type":40,"tag":281,"props":1336,"children":1337},{"style":361},[1338],{"type":45,"value":414},{"type":40,"tag":281,"props":1340,"children":1341},{"style":361},[1342],{"type":45,"value":893},{"type":40,"tag":281,"props":1344,"children":1345},{"style":361},[1346],{"type":45,"value":404},{"type":40,"tag":281,"props":1348,"children":1349},{"style":294},[1350],{"type":45,"value":1351},"high",{"type":40,"tag":281,"props":1353,"children":1354},{"style":361},[1355],{"type":45,"value":1356},"\"\n",{"type":40,"tag":281,"props":1358,"children":1360},{"class":283,"line":1359},18,[1361],{"type":40,"tag":281,"props":1362,"children":1363},{"style":361},[1364],{"type":45,"value":1365}," },\n",{"type":40,"tag":281,"props":1367,"children":1369},{"class":283,"line":1368},19,[1370,1374,1379,1383,1387,1391,1396,1400],{"type":40,"tag":281,"props":1371,"children":1372},{"style":361},[1373],{"type":45,"value":1168},{"type":40,"tag":281,"props":1375,"children":1376},{"style":288},[1377],{"type":45,"value":1378},"result_frame",{"type":40,"tag":281,"props":1380,"children":1381},{"style":361},[1382],{"type":45,"value":414},{"type":40,"tag":281,"props":1384,"children":1385},{"style":361},[1386],{"type":45,"value":893},{"type":40,"tag":281,"props":1388,"children":1389},{"style":361},[1390],{"type":45,"value":404},{"type":40,"tag":281,"props":1392,"children":1393},{"style":294},[1394],{"type":45,"value":1395},"after",{"type":40,"tag":281,"props":1397,"children":1398},{"style":361},[1399],{"type":45,"value":414},{"type":40,"tag":281,"props":1401,"children":1402},{"style":361},[1403],{"type":45,"value":903},{"type":40,"tag":281,"props":1405,"children":1407},{"class":283,"line":1406},20,[1408,1412,1417,1421,1425],{"type":40,"tag":281,"props":1409,"children":1410},{"style":361},[1411],{"type":45,"value":1168},{"type":40,"tag":281,"props":1413,"children":1414},{"style":288},[1415],{"type":45,"value":1416},"result",{"type":40,"tag":281,"props":1418,"children":1419},{"style":361},[1420],{"type":45,"value":414},{"type":40,"tag":281,"props":1422,"children":1423},{"style":361},[1424],{"type":45,"value":893},{"type":40,"tag":281,"props":1426,"children":1427},{"style":361},[1428],{"type":45,"value":1159},{"type":40,"tag":281,"props":1430,"children":1432},{"class":283,"line":1431},21,[1433,1437,1441,1445,1449,1454],{"type":40,"tag":281,"props":1434,"children":1435},{"style":361},[1436],{"type":45,"value":1232},{"type":40,"tag":281,"props":1438,"children":1439},{"style":624},[1440],{"type":45,"value":1237},{"type":40,"tag":281,"props":1442,"children":1443},{"style":361},[1444],{"type":45,"value":414},{"type":40,"tag":281,"props":1446,"children":1447},{"style":361},[1448],{"type":45,"value":893},{"type":40,"tag":281,"props":1450,"children":1451},{"style":624},[1452],{"type":45,"value":1453}," 0.86",{"type":40,"tag":281,"props":1455,"children":1456},{"style":361},[1457],{"type":45,"value":903},{"type":40,"tag":281,"props":1459,"children":1461},{"class":283,"line":1460},22,[1462,1466,1470,1474,1478,1483],{"type":40,"tag":281,"props":1463,"children":1464},{"style":361},[1465],{"type":45,"value":1232},{"type":40,"tag":281,"props":1467,"children":1468},{"style":624},[1469],{"type":45,"value":1267},{"type":40,"tag":281,"props":1471,"children":1472},{"style":361},[1473],{"type":45,"value":414},{"type":40,"tag":281,"props":1475,"children":1476},{"style":361},[1477],{"type":45,"value":893},{"type":40,"tag":281,"props":1479,"children":1480},{"style":624},[1481],{"type":45,"value":1482}," 0.2",{"type":40,"tag":281,"props":1484,"children":1485},{"style":361},[1486],{"type":45,"value":903},{"type":40,"tag":281,"props":1488,"children":1490},{"class":283,"line":1489},23,[1491,1495,1499,1503,1507,1511,1516],{"type":40,"tag":281,"props":1492,"children":1493},{"style":361},[1494],{"type":45,"value":1232},{"type":40,"tag":281,"props":1496,"children":1497},{"style":624},[1498],{"type":45,"value":1297},{"type":40,"tag":281,"props":1500,"children":1501},{"style":361},[1502],{"type":45,"value":414},{"type":40,"tag":281,"props":1504,"children":1505},{"style":361},[1506],{"type":45,"value":893},{"type":40,"tag":281,"props":1508,"children":1509},{"style":361},[1510],{"type":45,"value":404},{"type":40,"tag":281,"props":1512,"children":1513},{"style":294},[1514],{"type":45,"value":1515},"Opened account menu",{"type":40,"tag":281,"props":1517,"children":1518},{"style":361},[1519],{"type":45,"value":1356},{"type":40,"tag":281,"props":1521,"children":1523},{"class":283,"line":1522},24,[1524],{"type":40,"tag":281,"props":1525,"children":1526},{"style":361},[1527],{"type":45,"value":1365},{"type":40,"tag":281,"props":1529,"children":1531},{"class":283,"line":1530},25,[1532,1536,1540,1544,1548,1552,1557],{"type":40,"tag":281,"props":1533,"children":1534},{"style":361},[1535],{"type":45,"value":1168},{"type":40,"tag":281,"props":1537,"children":1538},{"style":288},[1539],{"type":45,"value":1109},{"type":40,"tag":281,"props":1541,"children":1542},{"style":361},[1543],{"type":45,"value":414},{"type":40,"tag":281,"props":1545,"children":1546},{"style":361},[1547],{"type":45,"value":893},{"type":40,"tag":281,"props":1549,"children":1550},{"style":361},[1551],{"type":45,"value":404},{"type":40,"tag":281,"props":1553,"children":1554},{"style":294},[1555],{"type":45,"value":1556},"Activating the avatar opens the account menu.",{"type":40,"tag":281,"props":1558,"children":1559},{"style":361},[1560],{"type":45,"value":1356},{"type":40,"tag":281,"props":1562,"children":1564},{"class":283,"line":1563},26,[1565],{"type":40,"tag":281,"props":1566,"children":1567},{"style":361},[1568],{"type":45,"value":1569}," }\n",{"type":40,"tag":281,"props":1571,"children":1573},{"class":283,"line":1572},27,[1574],{"type":40,"tag":281,"props":1575,"children":1576},{"style":361},[1577],{"type":45,"value":1578}," }\n",{"type":40,"tag":281,"props":1580,"children":1582},{"class":283,"line":1581},28,[1583],{"type":40,"tag":281,"props":1584,"children":1585},{"style":361},[1586],{"type":45,"value":1587},"]\n",{"type":40,"tag":48,"props":1589,"children":1590},{},[1591,1593,1599],{"type":45,"value":1592},"Keep annotations human-readable: ",{"type":40,"tag":76,"props":1594,"children":1596},{"className":1595},[],[1597],{"type":45,"value":1598},"Target: Account avatar",{"type":45,"value":1600},", not a label with a raw\ncoordinate suffix. Coordinates stay hidden in JSON and appear only as visual marker\nplacement.",{"type":40,"tag":48,"props":1602,"children":1603},{},[1604],{"type":45,"value":1605},"If a marker is drawn, the native Figma annotation is attached to that marker node\nrather than the screenshot frame. If a marker is suppressed because the point is\nuncertain or not visible, the annotation remains attached to the screenshot frame.",{"type":40,"tag":250,"props":1607,"children":1609},{"id":1608},"_4-resolve-selected-frames",[1610],{"type":45,"value":1611},"4. Resolve Selected Frames",{"type":40,"tag":48,"props":1613,"children":1614},{},[1615,1617,1622],{"type":45,"value":1616},"If ",{"type":40,"tag":76,"props":1618,"children":1620},{"className":1619},[],[1621],{"type":45,"value":323},{"type":45,"value":1623}," uses timestamps, extract only the selected before\u002Fafter\nframes at higher quality:",{"type":40,"tag":270,"props":1625,"children":1627},{"className":272,"code":1626,"language":274,"meta":275,"style":275},"python \u003CSKILL_DIR>\u002Fscripts\u002Fresolve_moment_frames.py \\\n --video \"\u003Cvideo_path>\" \\\n --moments-file \u002Ftmp\u002Fvim_frames_\u003Ctimestamp>\u002Fkey_moments.json \\\n --output \u002Ftmp\u002Fvim_frames_\u003Ctimestamp>\u002Fkey_moments_resolved.json \\\n --frames-dir \u002Ftmp\u002Fvim_frames_\u003Ctimestamp>\u002Fselected_frames\u002F \\\n --max-width 1600\n",[1628],{"type":40,"tag":76,"props":1629,"children":1630},{"__ignoreMap":275},[1631,1663,1687,1724,1760,1797],{"type":40,"tag":281,"props":1632,"children":1633},{"class":283,"line":284},[1634,1638,1642,1646,1650,1654,1659],{"type":40,"tag":281,"props":1635,"children":1636},{"style":288},[1637],{"type":45,"value":358},{"type":40,"tag":281,"props":1639,"children":1640},{"style":361},[1641],{"type":45,"value":364},{"type":40,"tag":281,"props":1643,"children":1644},{"style":294},[1645],{"type":45,"value":369},{"type":40,"tag":281,"props":1647,"children":1648},{"style":372},[1649],{"type":45,"value":375},{"type":40,"tag":281,"props":1651,"children":1652},{"style":361},[1653],{"type":45,"value":380},{"type":40,"tag":281,"props":1655,"children":1656},{"style":294},[1657],{"type":45,"value":1658},"\u002Fscripts\u002Fresolve_moment_frames.py",{"type":40,"tag":281,"props":1660,"children":1661},{"style":372},[1662],{"type":45,"value":390},{"type":40,"tag":281,"props":1664,"children":1665},{"class":283,"line":393},[1666,1671,1675,1679,1683],{"type":40,"tag":281,"props":1667,"children":1668},{"style":294},[1669],{"type":45,"value":1670}," --video",{"type":40,"tag":281,"props":1672,"children":1673},{"style":361},[1674],{"type":45,"value":404},{"type":40,"tag":281,"props":1676,"children":1677},{"style":294},[1678],{"type":45,"value":409},{"type":40,"tag":281,"props":1680,"children":1681},{"style":361},[1682],{"type":45,"value":414},{"type":40,"tag":281,"props":1684,"children":1685},{"style":372},[1686],{"type":45,"value":390},{"type":40,"tag":281,"props":1688,"children":1689},{"class":283,"line":421},[1690,1695,1699,1703,1707,1711,1715,1720],{"type":40,"tag":281,"props":1691,"children":1692},{"style":294},[1693],{"type":45,"value":1694}," --moments-file",{"type":40,"tag":281,"props":1696,"children":1697},{"style":294},[1698],{"type":45,"value":432},{"type":40,"tag":281,"props":1700,"children":1701},{"style":361},[1702],{"type":45,"value":437},{"type":40,"tag":281,"props":1704,"children":1705},{"style":294},[1706],{"type":45,"value":442},{"type":40,"tag":281,"props":1708,"children":1709},{"style":372},[1710],{"type":45,"value":48},{"type":40,"tag":281,"props":1712,"children":1713},{"style":361},[1714],{"type":45,"value":380},{"type":40,"tag":281,"props":1716,"children":1717},{"style":294},[1718],{"type":45,"value":1719},"\u002Fkey_moments.json",{"type":40,"tag":281,"props":1721,"children":1722},{"style":372},[1723],{"type":45,"value":390},{"type":40,"tag":281,"props":1725,"children":1726},{"class":283,"line":462},[1727,1731,1735,1739,1743,1747,1751,1756],{"type":40,"tag":281,"props":1728,"children":1729},{"style":294},[1730],{"type":45,"value":427},{"type":40,"tag":281,"props":1732,"children":1733},{"style":294},[1734],{"type":45,"value":432},{"type":40,"tag":281,"props":1736,"children":1737},{"style":361},[1738],{"type":45,"value":437},{"type":40,"tag":281,"props":1740,"children":1741},{"style":294},[1742],{"type":45,"value":442},{"type":40,"tag":281,"props":1744,"children":1745},{"style":372},[1746],{"type":45,"value":48},{"type":40,"tag":281,"props":1748,"children":1749},{"style":361},[1750],{"type":45,"value":380},{"type":40,"tag":281,"props":1752,"children":1753},{"style":294},[1754],{"type":45,"value":1755},"\u002Fkey_moments_resolved.json",{"type":40,"tag":281,"props":1757,"children":1758},{"style":372},[1759],{"type":45,"value":390},{"type":40,"tag":281,"props":1761,"children":1762},{"class":283,"line":615},[1763,1768,1772,1776,1780,1784,1788,1793],{"type":40,"tag":281,"props":1764,"children":1765},{"style":294},[1766],{"type":45,"value":1767}," --frames-dir",{"type":40,"tag":281,"props":1769,"children":1770},{"style":294},[1771],{"type":45,"value":432},{"type":40,"tag":281,"props":1773,"children":1774},{"style":361},[1775],{"type":45,"value":437},{"type":40,"tag":281,"props":1777,"children":1778},{"style":294},[1779],{"type":45,"value":442},{"type":40,"tag":281,"props":1781,"children":1782},{"style":372},[1783],{"type":45,"value":48},{"type":40,"tag":281,"props":1785,"children":1786},{"style":361},[1787],{"type":45,"value":380},{"type":40,"tag":281,"props":1789,"children":1790},{"style":294},[1791],{"type":45,"value":1792},"\u002Fselected_frames\u002F",{"type":40,"tag":281,"props":1794,"children":1795},{"style":372},[1796],{"type":45,"value":390},{"type":40,"tag":281,"props":1798,"children":1799},{"class":283,"line":964},[1800,1804],{"type":40,"tag":281,"props":1801,"children":1802},{"style":294},[1803],{"type":45,"value":621},{"type":40,"tag":281,"props":1805,"children":1806},{"style":624},[1807],{"type":45,"value":627},{"type":40,"tag":48,"props":1809,"children":1810},{},[1811,1812,1818,1820,1826,1827,1833],{"type":45,"value":803},{"type":40,"tag":76,"props":1813,"children":1815},{"className":1814},[],[1816],{"type":45,"value":1817},"key_moments_resolved.json",{"type":45,"value":1819}," in later steps. If a full extraction already\nproduced precise ",{"type":40,"tag":76,"props":1821,"children":1823},{"className":1822},[],[1824],{"type":45,"value":1825},"before_frame_path",{"type":45,"value":117},{"type":40,"tag":76,"props":1828,"children":1830},{"className":1829},[],[1831],{"type":45,"value":1832},"after_frame_path",{"type":45,"value":1834}," values, this step can\nbe skipped.",{"type":40,"tag":250,"props":1836,"children":1838},{"id":1837},"_5-prepare-uploadable-screenshot-assets",[1839],{"type":45,"value":1840},"5. Prepare Uploadable Screenshot Assets",{"type":40,"tag":48,"props":1842,"children":1843},{},[1844],{"type":45,"value":1845},"Compress and resize the before\u002Fafter screenshots for upload:",{"type":40,"tag":270,"props":1847,"children":1849},{"className":272,"code":1848,"language":274,"meta":275,"style":275},"python \u003CSKILL_DIR>\u002Fscripts\u002Fprepare_upload_frames.py \\\n --manifest \u002Ftmp\u002Fvim_frames_\u003Ctimestamp>\u002Fframes_manifest.json \\\n --moments-file \u002Ftmp\u002Fvim_frames_\u003Ctimestamp>\u002Fkey_moments_resolved.json \\\n --output \u002Ftmp\u002Fvim_frames_\u003Ctimestamp>\u002Fupload_manifest.json\n",[1850],{"type":40,"tag":76,"props":1851,"children":1852},{"__ignoreMap":275},[1853,1885,1922,1957],{"type":40,"tag":281,"props":1854,"children":1855},{"class":283,"line":284},[1856,1860,1864,1868,1872,1876,1881],{"type":40,"tag":281,"props":1857,"children":1858},{"style":288},[1859],{"type":45,"value":358},{"type":40,"tag":281,"props":1861,"children":1862},{"style":361},[1863],{"type":45,"value":364},{"type":40,"tag":281,"props":1865,"children":1866},{"style":294},[1867],{"type":45,"value":369},{"type":40,"tag":281,"props":1869,"children":1870},{"style":372},[1871],{"type":45,"value":375},{"type":40,"tag":281,"props":1873,"children":1874},{"style":361},[1875],{"type":45,"value":380},{"type":40,"tag":281,"props":1877,"children":1878},{"style":294},[1879],{"type":45,"value":1880},"\u002Fscripts\u002Fprepare_upload_frames.py",{"type":40,"tag":281,"props":1882,"children":1883},{"style":372},[1884],{"type":45,"value":390},{"type":40,"tag":281,"props":1886,"children":1887},{"class":283,"line":393},[1888,1893,1897,1901,1905,1909,1913,1918],{"type":40,"tag":281,"props":1889,"children":1890},{"style":294},[1891],{"type":45,"value":1892}," --manifest",{"type":40,"tag":281,"props":1894,"children":1895},{"style":294},[1896],{"type":45,"value":432},{"type":40,"tag":281,"props":1898,"children":1899},{"style":361},[1900],{"type":45,"value":437},{"type":40,"tag":281,"props":1902,"children":1903},{"style":294},[1904],{"type":45,"value":442},{"type":40,"tag":281,"props":1906,"children":1907},{"style":372},[1908],{"type":45,"value":48},{"type":40,"tag":281,"props":1910,"children":1911},{"style":361},[1912],{"type":45,"value":380},{"type":40,"tag":281,"props":1914,"children":1915},{"style":294},[1916],{"type":45,"value":1917},"\u002Fframes_manifest.json",{"type":40,"tag":281,"props":1919,"children":1920},{"style":372},[1921],{"type":45,"value":390},{"type":40,"tag":281,"props":1923,"children":1924},{"class":283,"line":421},[1925,1929,1933,1937,1941,1945,1949,1953],{"type":40,"tag":281,"props":1926,"children":1927},{"style":294},[1928],{"type":45,"value":1694},{"type":40,"tag":281,"props":1930,"children":1931},{"style":294},[1932],{"type":45,"value":432},{"type":40,"tag":281,"props":1934,"children":1935},{"style":361},[1936],{"type":45,"value":437},{"type":40,"tag":281,"props":1938,"children":1939},{"style":294},[1940],{"type":45,"value":442},{"type":40,"tag":281,"props":1942,"children":1943},{"style":372},[1944],{"type":45,"value":48},{"type":40,"tag":281,"props":1946,"children":1947},{"style":361},[1948],{"type":45,"value":380},{"type":40,"tag":281,"props":1950,"children":1951},{"style":294},[1952],{"type":45,"value":1755},{"type":40,"tag":281,"props":1954,"children":1955},{"style":372},[1956],{"type":45,"value":390},{"type":40,"tag":281,"props":1958,"children":1959},{"class":283,"line":462},[1960,1964,1968,1972,1976,1980,1984],{"type":40,"tag":281,"props":1961,"children":1962},{"style":294},[1963],{"type":45,"value":427},{"type":40,"tag":281,"props":1965,"children":1966},{"style":294},[1967],{"type":45,"value":432},{"type":40,"tag":281,"props":1969,"children":1970},{"style":361},[1971],{"type":45,"value":437},{"type":40,"tag":281,"props":1973,"children":1974},{"style":294},[1975],{"type":45,"value":442},{"type":40,"tag":281,"props":1977,"children":1978},{"style":372},[1979],{"type":45,"value":48},{"type":40,"tag":281,"props":1981,"children":1982},{"style":361},[1983],{"type":45,"value":380},{"type":40,"tag":281,"props":1985,"children":1986},{"style":294},[1987],{"type":45,"value":1988},"\u002Fupload_manifest.json\n",{"type":40,"tag":48,"props":1990,"children":1991},{},[1992,1994,2000,2002,2007],{"type":45,"value":1993},"The script writes optimized JPEGs under ",{"type":40,"tag":76,"props":1995,"children":1997},{"className":1996},[],[1998],{"type":45,"value":1999},"\u003Coutput_dir>\u002Fupload_assets\u002F",{"type":45,"value":2001}," and creates\n",{"type":40,"tag":76,"props":2003,"children":2005},{"className":2004},[],[2006],{"type":45,"value":330},{"type":45,"value":2008},". Defaults are 1440 px wide for landscape recordings and 900\npx wide for portrait recordings at JPEG quality 75. It records image dimensions,\nactual JPEG quality, file size, and whether each asset fits the upload budget.",{"type":40,"tag":250,"props":2010,"children":2012},{"id":2011},"_6-generate-figma-call-files",[2013],{"type":45,"value":2014},"6. Generate Figma Call Files",{"type":40,"tag":48,"props":2016,"children":2017},{},[2018],{"type":45,"value":2019},"Generate the self-contained Plugin API scripts:",{"type":40,"tag":270,"props":2021,"children":2023},{"className":272,"code":2022,"language":274,"meta":275,"style":275},"python \u003CSKILL_DIR>\u002Fscripts\u002Fgenerate_figma_calls.py \\\n --prepared \u002Ftmp\u002Fvim_frames_\u003Ctimestamp>\u002Fupload_manifest.json \\\n --output-dir \u002Ftmp\u002Fvim_frames_\u003Ctimestamp>\u002Ffigma_calls\u002F\n",[2024],{"type":40,"tag":76,"props":2025,"children":2026},{"__ignoreMap":275},[2027,2059,2096],{"type":40,"tag":281,"props":2028,"children":2029},{"class":283,"line":284},[2030,2034,2038,2042,2046,2050,2055],{"type":40,"tag":281,"props":2031,"children":2032},{"style":288},[2033],{"type":45,"value":358},{"type":40,"tag":281,"props":2035,"children":2036},{"style":361},[2037],{"type":45,"value":364},{"type":40,"tag":281,"props":2039,"children":2040},{"style":294},[2041],{"type":45,"value":369},{"type":40,"tag":281,"props":2043,"children":2044},{"style":372},[2045],{"type":45,"value":375},{"type":40,"tag":281,"props":2047,"children":2048},{"style":361},[2049],{"type":45,"value":380},{"type":40,"tag":281,"props":2051,"children":2052},{"style":294},[2053],{"type":45,"value":2054},"\u002Fscripts\u002Fgenerate_figma_calls.py",{"type":40,"tag":281,"props":2056,"children":2057},{"style":372},[2058],{"type":45,"value":390},{"type":40,"tag":281,"props":2060,"children":2061},{"class":283,"line":393},[2062,2067,2071,2075,2079,2083,2087,2092],{"type":40,"tag":281,"props":2063,"children":2064},{"style":294},[2065],{"type":45,"value":2066}," --prepared",{"type":40,"tag":281,"props":2068,"children":2069},{"style":294},[2070],{"type":45,"value":432},{"type":40,"tag":281,"props":2072,"children":2073},{"style":361},[2074],{"type":45,"value":437},{"type":40,"tag":281,"props":2076,"children":2077},{"style":294},[2078],{"type":45,"value":442},{"type":40,"tag":281,"props":2080,"children":2081},{"style":372},[2082],{"type":45,"value":48},{"type":40,"tag":281,"props":2084,"children":2085},{"style":361},[2086],{"type":45,"value":380},{"type":40,"tag":281,"props":2088,"children":2089},{"style":294},[2090],{"type":45,"value":2091},"\u002Fupload_manifest.json",{"type":40,"tag":281,"props":2093,"children":2094},{"style":372},[2095],{"type":45,"value":390},{"type":40,"tag":281,"props":2097,"children":2098},{"class":283,"line":421},[2099,2104,2108,2112,2116,2120,2124],{"type":40,"tag":281,"props":2100,"children":2101},{"style":294},[2102],{"type":45,"value":2103}," --output-dir",{"type":40,"tag":281,"props":2105,"children":2106},{"style":294},[2107],{"type":45,"value":432},{"type":40,"tag":281,"props":2109,"children":2110},{"style":361},[2111],{"type":45,"value":437},{"type":40,"tag":281,"props":2113,"children":2114},{"style":294},[2115],{"type":45,"value":442},{"type":40,"tag":281,"props":2117,"children":2118},{"style":372},[2119],{"type":45,"value":48},{"type":40,"tag":281,"props":2121,"children":2122},{"style":361},[2123],{"type":45,"value":380},{"type":40,"tag":281,"props":2125,"children":2126},{"style":294},[2127],{"type":45,"value":2128},"\u002Ffigma_calls\u002F\n",{"type":40,"tag":48,"props":2130,"children":2131},{},[2132],{"type":45,"value":2133},"This writes:",{"type":40,"tag":66,"props":2135,"children":2136},{},[2137,2148,2159,2170],{"type":40,"tag":70,"props":2138,"children":2139},{},[2140,2146],{"type":40,"tag":76,"props":2141,"children":2143},{"className":2142},[],[2144],{"type":45,"value":2145},"figma_storyboard.js",{"type":45,"value":2147},": one combined storyboard creation call.",{"type":40,"tag":70,"props":2149,"children":2150},{},[2151,2157],{"type":40,"tag":76,"props":2152,"children":2154},{"className":2153},[],[2155],{"type":45,"value":2156},"figma_apply_fills_template.js",{"type":45,"value":2158},": a fill-pass template for uploaded image hashes.",{"type":40,"tag":70,"props":2160,"children":2161},{},[2162,2168],{"type":40,"tag":76,"props":2163,"children":2165},{"className":2164},[],[2166],{"type":45,"value":2167},"figma_manifest.json",{"type":45,"value":2169},": execution order and upload instructions.",{"type":40,"tag":70,"props":2171,"children":2172},{},[2173,2179],{"type":40,"tag":76,"props":2174,"children":2176},{"className":2175},[],[2177],{"type":45,"value":2178},"run_manifest.json",{"type":45,"value":2180},": resumable status, selected moments, expected uploads, node\nIDs, image hashes, fill status, and verification status.",{"type":40,"tag":48,"props":2182,"children":2183},{},[2184,2186,2192,2194,2200],{"type":45,"value":2185},"The generated JavaScript does not embed image bytes and does not call\n",{"type":40,"tag":76,"props":2187,"children":2189},{"className":2188},[],[2190],{"type":45,"value":2191},"figma.createImage",{"type":45,"value":2193},". The storyboard script creates all screenshot containers,\nlabels, native annotations, and marker overlays in one call, then returns\n",{"type":40,"tag":76,"props":2195,"children":2197},{"className":2196},[],[2198],{"type":45,"value":2199},"uploadTargets",{"type":45,"value":2201}," containing Figma node IDs and local JPEG paths. In a newly created\nblank file, the script reuses and renames the default page instead of creating a\nsecond page.",{"type":40,"tag":250,"props":2203,"children":2205},{"id":2204},"_7-execute-in-figma-and-upload-assets",[2206],{"type":45,"value":2207},"7. Execute in Figma and Upload Assets",{"type":40,"tag":48,"props":2209,"children":2210},{},[2211,2213,2218],{"type":45,"value":2212},"Create a new Figma Design file or open the target Design file now. Run the generated\nfiles in ",{"type":40,"tag":76,"props":2214,"children":2216},{"className":2215},[],[2217],{"type":45,"value":2167},{"type":45,"value":893},{"type":40,"tag":2220,"props":2221,"children":2222},"ol",{},[2223,2233,2245],{"type":40,"tag":70,"props":2224,"children":2225},{},[2226,2227,2232],{"type":45,"value":658},{"type":40,"tag":76,"props":2228,"children":2230},{"className":2229},[],[2231],{"type":45,"value":2145},{"type":45,"value":173},{"type":40,"tag":70,"props":2234,"children":2235},{},[2236,2238,2243],{"type":45,"value":2237},"Call ",{"type":40,"tag":76,"props":2239,"children":2241},{"className":2240},[],[2242],{"type":45,"value":148},{"type":45,"value":2244}," against the target Design file with the full JavaScript content.",{"type":40,"tag":70,"props":2246,"children":2247},{},[2248],{"type":45,"value":2249},"Save the result JSON if practical, then update the run manifest:",{"type":40,"tag":270,"props":2251,"children":2253},{"className":272,"code":2252,"language":274,"meta":275,"style":275},"python \u003CSKILL_DIR>\u002Fscripts\u002Fupdate_run_manifest.py \\\n --run-manifest \u002Ftmp\u002Fvim_frames_\u003Ctimestamp>\u002Ffigma_calls\u002Frun_manifest.json \\\n --storyboard-result \u002Ftmp\u002Fvim_frames_\u003Ctimestamp>\u002Fstoryboard_result.json\n",[2254],{"type":40,"tag":76,"props":2255,"children":2256},{"__ignoreMap":275},[2257,2289,2326],{"type":40,"tag":281,"props":2258,"children":2259},{"class":283,"line":284},[2260,2264,2268,2272,2276,2280,2285],{"type":40,"tag":281,"props":2261,"children":2262},{"style":288},[2263],{"type":45,"value":358},{"type":40,"tag":281,"props":2265,"children":2266},{"style":361},[2267],{"type":45,"value":364},{"type":40,"tag":281,"props":2269,"children":2270},{"style":294},[2271],{"type":45,"value":369},{"type":40,"tag":281,"props":2273,"children":2274},{"style":372},[2275],{"type":45,"value":375},{"type":40,"tag":281,"props":2277,"children":2278},{"style":361},[2279],{"type":45,"value":380},{"type":40,"tag":281,"props":2281,"children":2282},{"style":294},[2283],{"type":45,"value":2284},"\u002Fscripts\u002Fupdate_run_manifest.py",{"type":40,"tag":281,"props":2286,"children":2287},{"style":372},[2288],{"type":45,"value":390},{"type":40,"tag":281,"props":2290,"children":2291},{"class":283,"line":393},[2292,2297,2301,2305,2309,2313,2317,2322],{"type":40,"tag":281,"props":2293,"children":2294},{"style":294},[2295],{"type":45,"value":2296}," --run-manifest",{"type":40,"tag":281,"props":2298,"children":2299},{"style":294},[2300],{"type":45,"value":432},{"type":40,"tag":281,"props":2302,"children":2303},{"style":361},[2304],{"type":45,"value":437},{"type":40,"tag":281,"props":2306,"children":2307},{"style":294},[2308],{"type":45,"value":442},{"type":40,"tag":281,"props":2310,"children":2311},{"style":372},[2312],{"type":45,"value":48},{"type":40,"tag":281,"props":2314,"children":2315},{"style":361},[2316],{"type":45,"value":380},{"type":40,"tag":281,"props":2318,"children":2319},{"style":294},[2320],{"type":45,"value":2321},"\u002Ffigma_calls\u002Frun_manifest.json",{"type":40,"tag":281,"props":2323,"children":2324},{"style":372},[2325],{"type":45,"value":390},{"type":40,"tag":281,"props":2327,"children":2328},{"class":283,"line":421},[2329,2334,2338,2342,2346,2350,2354],{"type":40,"tag":281,"props":2330,"children":2331},{"style":294},[2332],{"type":45,"value":2333}," --storyboard-result",{"type":40,"tag":281,"props":2335,"children":2336},{"style":294},[2337],{"type":45,"value":432},{"type":40,"tag":281,"props":2339,"children":2340},{"style":361},[2341],{"type":45,"value":437},{"type":40,"tag":281,"props":2343,"children":2344},{"style":294},[2345],{"type":45,"value":442},{"type":40,"tag":281,"props":2347,"children":2348},{"style":372},[2349],{"type":45,"value":48},{"type":40,"tag":281,"props":2351,"children":2352},{"style":361},[2353],{"type":45,"value":380},{"type":40,"tag":281,"props":2355,"children":2356},{"style":294},[2357],{"type":45,"value":2358},"\u002Fstoryboard_result.json\n",{"type":40,"tag":48,"props":2360,"children":2361},{},[2362,2364,2369],{"type":45,"value":2363},"For each returned ",{"type":40,"tag":76,"props":2365,"children":2367},{"className":2366},[],[2368],{"type":45,"value":2199},{"type":45,"value":2370}," item:",{"type":40,"tag":66,"props":2372,"children":2373},{},[2374,2413,2426],{"type":40,"tag":70,"props":2375,"children":2376},{},[2377,2378,2383,2385,2391,2392,2398,2399,2405,2406,2412],{"type":45,"value":2237},{"type":40,"tag":76,"props":2379,"children":2381},{"className":2380},[],[2382],{"type":45,"value":155},{"type":45,"value":2384}," with the target ",{"type":40,"tag":76,"props":2386,"children":2388},{"className":2387},[],[2389],{"type":45,"value":2390},"fileKey",{"type":45,"value":83},{"type":40,"tag":76,"props":2393,"children":2395},{"className":2394},[],[2396],{"type":45,"value":2397},"count: 1",{"type":45,"value":83},{"type":40,"tag":76,"props":2400,"children":2402},{"className":2401},[],[2403],{"type":45,"value":2404},"nodeId",{"type":45,"value":157},{"type":40,"tag":76,"props":2407,"children":2409},{"className":2408},[],[2410],{"type":45,"value":2411},"scaleMode: \"FILL\"",{"type":45,"value":173},{"type":40,"tag":70,"props":2414,"children":2415},{},[2416,2418,2424],{"type":45,"value":2417},"POST the local file at ",{"type":40,"tag":76,"props":2419,"children":2421},{"className":2420},[],[2422],{"type":45,"value":2423},"target.path",{"type":45,"value":2425}," to the returned upload URL.",{"type":40,"tag":70,"props":2427,"children":2428},{},[2429,2431,2437],{"type":45,"value":2430},"Record ",{"type":40,"tag":76,"props":2432,"children":2434},{"className":2433},[],[2435],{"type":45,"value":2436},"{ \"nodeId\": \"...\", \"imageHash\": \"...\", \"scaleMode\": \"FILL\" }",{"type":45,"value":2438}," in an\nuploads JSON file.",{"type":40,"tag":48,"props":2440,"children":2441},{},[2442],{"type":45,"value":2443},"Generate and run the fill pass:",{"type":40,"tag":270,"props":2445,"children":2447},{"className":272,"code":2446,"language":274,"meta":275,"style":275},"python \u003CSKILL_DIR>\u002Fscripts\u002Fupdate_run_manifest.py \\\n --run-manifest \u002Ftmp\u002Fvim_frames_\u003Ctimestamp>\u002Ffigma_calls\u002Frun_manifest.json \\\n --uploads-file \u002Ftmp\u002Fvim_frames_\u003Ctimestamp>\u002Fuploaded_images.json \\\n --write-fill-script \u002Ftmp\u002Fvim_frames_\u003Ctimestamp>\u002Ffigma_calls\u002Ffigma_apply_fills.js\n",[2448],{"type":40,"tag":76,"props":2449,"children":2450},{"__ignoreMap":275},[2451,2482,2517,2554],{"type":40,"tag":281,"props":2452,"children":2453},{"class":283,"line":284},[2454,2458,2462,2466,2470,2474,2478],{"type":40,"tag":281,"props":2455,"children":2456},{"style":288},[2457],{"type":45,"value":358},{"type":40,"tag":281,"props":2459,"children":2460},{"style":361},[2461],{"type":45,"value":364},{"type":40,"tag":281,"props":2463,"children":2464},{"style":294},[2465],{"type":45,"value":369},{"type":40,"tag":281,"props":2467,"children":2468},{"style":372},[2469],{"type":45,"value":375},{"type":40,"tag":281,"props":2471,"children":2472},{"style":361},[2473],{"type":45,"value":380},{"type":40,"tag":281,"props":2475,"children":2476},{"style":294},[2477],{"type":45,"value":2284},{"type":40,"tag":281,"props":2479,"children":2480},{"style":372},[2481],{"type":45,"value":390},{"type":40,"tag":281,"props":2483,"children":2484},{"class":283,"line":393},[2485,2489,2493,2497,2501,2505,2509,2513],{"type":40,"tag":281,"props":2486,"children":2487},{"style":294},[2488],{"type":45,"value":2296},{"type":40,"tag":281,"props":2490,"children":2491},{"style":294},[2492],{"type":45,"value":432},{"type":40,"tag":281,"props":2494,"children":2495},{"style":361},[2496],{"type":45,"value":437},{"type":40,"tag":281,"props":2498,"children":2499},{"style":294},[2500],{"type":45,"value":442},{"type":40,"tag":281,"props":2502,"children":2503},{"style":372},[2504],{"type":45,"value":48},{"type":40,"tag":281,"props":2506,"children":2507},{"style":361},[2508],{"type":45,"value":380},{"type":40,"tag":281,"props":2510,"children":2511},{"style":294},[2512],{"type":45,"value":2321},{"type":40,"tag":281,"props":2514,"children":2515},{"style":372},[2516],{"type":45,"value":390},{"type":40,"tag":281,"props":2518,"children":2519},{"class":283,"line":421},[2520,2525,2529,2533,2537,2541,2545,2550],{"type":40,"tag":281,"props":2521,"children":2522},{"style":294},[2523],{"type":45,"value":2524}," --uploads-file",{"type":40,"tag":281,"props":2526,"children":2527},{"style":294},[2528],{"type":45,"value":432},{"type":40,"tag":281,"props":2530,"children":2531},{"style":361},[2532],{"type":45,"value":437},{"type":40,"tag":281,"props":2534,"children":2535},{"style":294},[2536],{"type":45,"value":442},{"type":40,"tag":281,"props":2538,"children":2539},{"style":372},[2540],{"type":45,"value":48},{"type":40,"tag":281,"props":2542,"children":2543},{"style":361},[2544],{"type":45,"value":380},{"type":40,"tag":281,"props":2546,"children":2547},{"style":294},[2548],{"type":45,"value":2549},"\u002Fuploaded_images.json",{"type":40,"tag":281,"props":2551,"children":2552},{"style":372},[2553],{"type":45,"value":390},{"type":40,"tag":281,"props":2555,"children":2556},{"class":283,"line":462},[2557,2562,2566,2570,2574,2578,2582],{"type":40,"tag":281,"props":2558,"children":2559},{"style":294},[2560],{"type":45,"value":2561}," --write-fill-script",{"type":40,"tag":281,"props":2563,"children":2564},{"style":294},[2565],{"type":45,"value":432},{"type":40,"tag":281,"props":2567,"children":2568},{"style":361},[2569],{"type":45,"value":437},{"type":40,"tag":281,"props":2571,"children":2572},{"style":294},[2573],{"type":45,"value":442},{"type":40,"tag":281,"props":2575,"children":2576},{"style":372},[2577],{"type":45,"value":48},{"type":40,"tag":281,"props":2579,"children":2580},{"style":361},[2581],{"type":45,"value":380},{"type":40,"tag":281,"props":2583,"children":2584},{"style":294},[2585],{"type":45,"value":2586},"\u002Ffigma_calls\u002Ffigma_apply_fills.js\n",{"type":40,"tag":48,"props":2588,"children":2589},{},[2590,2592,2598,2600,2605],{"type":45,"value":2591},"Run ",{"type":40,"tag":76,"props":2593,"children":2595},{"className":2594},[],[2596],{"type":45,"value":2597},"figma_apply_fills.js",{"type":45,"value":2599}," once with ",{"type":40,"tag":76,"props":2601,"children":2603},{"className":2602},[],[2604],{"type":45,"value":148},{"type":45,"value":2606},". This explicit image-hash fill pass\nis preferred because it makes uploaded screenshots render reliably in the generated\ncontainers.",{"type":40,"tag":250,"props":2608,"children":2610},{"id":2609},"_8-verify",[2611],{"type":45,"value":2612},"8. Verify",{"type":40,"tag":48,"props":2614,"children":2615},{},[2616,2617,2622,2623,2629,2630,2635],{"type":45,"value":2591},{"type":40,"tag":76,"props":2618,"children":2620},{"className":2619},[],[2621],{"type":45,"value":163},{"type":45,"value":83},{"type":40,"tag":76,"props":2624,"children":2626},{"className":2625},[],[2627],{"type":45,"value":2628},"download_assets",{"type":45,"value":98},{"type":40,"tag":76,"props":2631,"children":2633},{"className":2632},[],[2634],{"type":45,"value":171},{"type":45,"value":2636}," to verify that:",{"type":40,"tag":66,"props":2638,"children":2639},{},[2640,2645,2650,2655],{"type":40,"tag":70,"props":2641,"children":2642},{},[2643],{"type":45,"value":2644},"Screenshots are visible and nonblank.",{"type":40,"tag":70,"props":2646,"children":2647},{},[2648],{"type":45,"value":2649},"Blue marker rings sit on the intended target\u002Fresult locations.",{"type":40,"tag":70,"props":2651,"children":2652},{},[2653],{"type":45,"value":2654},"Native annotations use human labels and do not expose coordinate values.",{"type":40,"tag":70,"props":2656,"children":2657},{},[2658,2660,2665],{"type":45,"value":2659},"Ambiguous or inferred targets are suppressed unless explicitly forced with\n",{"type":40,"tag":76,"props":2661,"children":2663},{"className":2662},[],[2664],{"type":45,"value":825},{"type":45,"value":173},{"type":40,"tag":48,"props":2667,"children":2668},{},[2669,2671,2676],{"type":45,"value":2670},"Update ",{"type":40,"tag":76,"props":2672,"children":2674},{"className":2673},[],[2675],{"type":45,"value":2178},{"type":45,"value":2677}," with verification artifacts when available:",{"type":40,"tag":270,"props":2679,"children":2681},{"className":272,"code":2680,"language":274,"meta":275,"style":275},"python \u003CSKILL_DIR>\u002Fscripts\u002Fupdate_run_manifest.py \\\n --run-manifest \u002Ftmp\u002Fvim_frames_\u003Ctimestamp>\u002Ffigma_calls\u002Frun_manifest.json \\\n --verification-screenshot \u002Ftmp\u002Fvim_frames_\u003Ctimestamp>\u002Ffigma_storyboard.png \\\n --verification-notes \"Screenshots and markers verified\"\n",[2682],{"type":40,"tag":76,"props":2683,"children":2684},{"__ignoreMap":275},[2685,2716,2751,2788],{"type":40,"tag":281,"props":2686,"children":2687},{"class":283,"line":284},[2688,2692,2696,2700,2704,2708,2712],{"type":40,"tag":281,"props":2689,"children":2690},{"style":288},[2691],{"type":45,"value":358},{"type":40,"tag":281,"props":2693,"children":2694},{"style":361},[2695],{"type":45,"value":364},{"type":40,"tag":281,"props":2697,"children":2698},{"style":294},[2699],{"type":45,"value":369},{"type":40,"tag":281,"props":2701,"children":2702},{"style":372},[2703],{"type":45,"value":375},{"type":40,"tag":281,"props":2705,"children":2706},{"style":361},[2707],{"type":45,"value":380},{"type":40,"tag":281,"props":2709,"children":2710},{"style":294},[2711],{"type":45,"value":2284},{"type":40,"tag":281,"props":2713,"children":2714},{"style":372},[2715],{"type":45,"value":390},{"type":40,"tag":281,"props":2717,"children":2718},{"class":283,"line":393},[2719,2723,2727,2731,2735,2739,2743,2747],{"type":40,"tag":281,"props":2720,"children":2721},{"style":294},[2722],{"type":45,"value":2296},{"type":40,"tag":281,"props":2724,"children":2725},{"style":294},[2726],{"type":45,"value":432},{"type":40,"tag":281,"props":2728,"children":2729},{"style":361},[2730],{"type":45,"value":437},{"type":40,"tag":281,"props":2732,"children":2733},{"style":294},[2734],{"type":45,"value":442},{"type":40,"tag":281,"props":2736,"children":2737},{"style":372},[2738],{"type":45,"value":48},{"type":40,"tag":281,"props":2740,"children":2741},{"style":361},[2742],{"type":45,"value":380},{"type":40,"tag":281,"props":2744,"children":2745},{"style":294},[2746],{"type":45,"value":2321},{"type":40,"tag":281,"props":2748,"children":2749},{"style":372},[2750],{"type":45,"value":390},{"type":40,"tag":281,"props":2752,"children":2753},{"class":283,"line":421},[2754,2759,2763,2767,2771,2775,2779,2784],{"type":40,"tag":281,"props":2755,"children":2756},{"style":294},[2757],{"type":45,"value":2758}," --verification-screenshot",{"type":40,"tag":281,"props":2760,"children":2761},{"style":294},[2762],{"type":45,"value":432},{"type":40,"tag":281,"props":2764,"children":2765},{"style":361},[2766],{"type":45,"value":437},{"type":40,"tag":281,"props":2768,"children":2769},{"style":294},[2770],{"type":45,"value":442},{"type":40,"tag":281,"props":2772,"children":2773},{"style":372},[2774],{"type":45,"value":48},{"type":40,"tag":281,"props":2776,"children":2777},{"style":361},[2778],{"type":45,"value":380},{"type":40,"tag":281,"props":2780,"children":2781},{"style":294},[2782],{"type":45,"value":2783},"\u002Ffigma_storyboard.png",{"type":40,"tag":281,"props":2785,"children":2786},{"style":372},[2787],{"type":45,"value":390},{"type":40,"tag":281,"props":2789,"children":2790},{"class":283,"line":462},[2791,2796,2800,2805],{"type":40,"tag":281,"props":2792,"children":2793},{"style":294},[2794],{"type":45,"value":2795}," --verification-notes",{"type":40,"tag":281,"props":2797,"children":2798},{"style":361},[2799],{"type":45,"value":404},{"type":40,"tag":281,"props":2801,"children":2802},{"style":294},[2803],{"type":45,"value":2804},"Screenshots and markers verified",{"type":40,"tag":281,"props":2806,"children":2807},{"style":361},[2808],{"type":45,"value":1356},{"type":40,"tag":54,"props":2810,"children":2812},{"id":2811},"output-expectations",[2813],{"type":45,"value":2814},"Output Expectations",{"type":40,"tag":48,"props":2816,"children":2817},{},[2818],{"type":45,"value":2819},"The storyboard layout is left-to-right:",{"type":40,"tag":270,"props":2821,"children":2825},{"className":2822,"code":2824,"language":45,"meta":275},[2823],"language-text","[Title block]\n\n[Before] [After] [Before] [After] [Before] [After]\nmoment 1 moment 2 moment 3\n\n\"Before state\" \"01 Dropdown menu opens\"\n Annotation text...\n",[2826],{"type":40,"tag":76,"props":2827,"children":2828},{"__ignoreMap":275},[2829],{"type":45,"value":2824},{"type":40,"tag":48,"props":2831,"children":2832},{},[2833],{"type":45,"value":2834},"Blue ring\u002Fdot overlays show the target and result locations when coordinates are\navailable and confident. Native Figma annotations attach to the marker nodes when\nmarkers exist; otherwise they attach to the relevant before\u002Fafter screenshot nodes.\nAnnotation labels should name the UI element or state change, never raw coordinate\npercentages.",{"type":40,"tag":48,"props":2836,"children":2837},{},[2838],{"type":45,"value":2839},"Report back with:",{"type":40,"tag":66,"props":2841,"children":2842},{},[2843,2848,2853,2858,2863],{"type":40,"tag":70,"props":2844,"children":2845},{},[2846],{"type":45,"value":2847},"The number of key moments mapped.",{"type":40,"tag":70,"props":2849,"children":2850},{},[2851],{"type":45,"value":2852},"The Figma file URL.",{"type":40,"tag":70,"props":2854,"children":2855},{},[2856],{"type":45,"value":2857},"Any moments whose trigger was ambiguous.",{"type":40,"tag":70,"props":2859,"children":2860},{},[2861],{"type":45,"value":2862},"Any uploads or frames that failed.",{"type":40,"tag":70,"props":2864,"children":2865},{},[2866],{"type":45,"value":2867},"The verification status and any inferred\u002Funcertain markers.",{"type":40,"tag":54,"props":2869,"children":2871},{"id":2870},"edge-cases",[2872],{"type":45,"value":2873},"Edge Cases",{"type":40,"tag":66,"props":2875,"children":2876},{},[2877,2882,2894,2899,2912,2924,2934],{"type":40,"tag":70,"props":2878,"children":2879},{},[2880],{"type":45,"value":2881},"Long video: ask for a time range or warn that processing can take longer.",{"type":40,"tag":70,"props":2883,"children":2884},{},[2885,2887,2892],{"type":45,"value":2886},"Too many moments: raise ",{"type":40,"tag":76,"props":2888,"children":2890},{"className":2889},[],[2891],{"type":45,"value":638},{"type":45,"value":2893}," or manually keep the most meaningful\n5 to 15 transitions.",{"type":40,"tag":70,"props":2895,"children":2896},{},[2897],{"type":45,"value":2898},"Mobile recording: keep the portrait default width of 900 px so text remains\nreadable without oversized assets.",{"type":40,"tag":70,"props":2900,"children":2901},{},[2902,2904,2910],{"type":45,"value":2903},"Missing trigger evidence: use ",{"type":40,"tag":76,"props":2905,"children":2907},{"className":2906},[],[2908],{"type":45,"value":2909},"Unknown trigger",{"type":45,"value":2911}," instead of guessing.",{"type":40,"tag":70,"props":2913,"children":2914},{},[2915,2917,2922],{"type":45,"value":2916},"Asset upload failure: retry the individual ",{"type":40,"tag":76,"props":2918,"children":2920},{"className":2919},[],[2921],{"type":45,"value":155},{"type":45,"value":2923}," target; the generated\nscreenshot container remains in the file and can be reused.",{"type":40,"tag":70,"props":2925,"children":2926},{},[2927,2932],{"type":40,"tag":76,"props":2928,"children":2930},{"className":2929},[],[2931],{"type":45,"value":155},{"type":45,"value":2933}," succeeds but images do not render: run the generated fill pass\nwith the returned image hashes.",{"type":40,"tag":70,"props":2935,"children":2936},{},[2937,2942,2944,2949],{"type":40,"tag":76,"props":2938,"children":2940},{"className":2939},[],[2941],{"type":45,"value":155},{"type":45,"value":2943}," is unavailable: warn that the fallback path is slower because it\nmust embed image data directly in ",{"type":40,"tag":76,"props":2945,"children":2947},{"className":2946},[],[2948],{"type":45,"value":148},{"type":45,"value":2950}," calls.",{"type":40,"tag":2952,"props":2953,"children":2954},"style",{},[2955],{"type":45,"value":2956},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":2958,"total":1226},[2959,2977,2991,3002,3013,3029,3043,3056,3078,3087,3103,3114],{"slug":2960,"name":2960,"fn":2961,"description":2962,"org":2963,"tags":2964,"stars":23,"repoUrl":24,"updatedAt":2976},"figma-code-connect","map Figma components to code snippets","Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create\u002Fupdate .figma.ts or .figma.js files.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2965,2966,2969,2970,2973],{"name":21,"slug":22,"type":15},{"name":2967,"slug":2968,"type":15},"Design System","design-system",{"name":9,"slug":8,"type":15},{"name":2971,"slug":2972,"type":15},"Frontend","frontend",{"name":2974,"slug":2975,"type":15},"UI Components","ui-components","2026-07-31T05:52:30.590302",{"slug":225,"name":225,"fn":2978,"description":2979,"org":2980,"tags":2981,"stars":23,"repoUrl":24,"updatedAt":2990},"create new Figma or FigJam files","**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `create_new_file` tool call. NEVER call `create_new_file` directly without loading this skill first. Trigger whenever the user wants a new blank Figma file — a new design, FigJam, or Slides file — or when you need a fresh file before calling `use_figma`. Usage — \u002Ffigma-create-new-file [editorType] [fileName] (e.g. \u002Ffigma-create-new-file figjam My Whiteboard, \u002Ffigma-create-new-file slides Q3 Review)",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2982,2983,2984,2987],{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":2985,"slug":2986,"type":15},"Ideation","ideation",{"name":2988,"slug":2989,"type":15},"MCP","mcp","2026-04-06T18:11:46.464282",{"slug":2992,"name":2992,"fn":2993,"description":2994,"org":2995,"tags":2996,"stars":23,"repoUrl":24,"updatedAt":3001},"figma-design-to-code","implement Figma designs as code","**MANDATORY prerequisite** — you MUST invoke this skill BEFORE calling the `get_design_context` Figma MCP tool. You MUST trigger this skill whenever the user wants to implement, build, port, or code up a Figma design as code. Example prompts (not exhaustive) are 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'design to code'. This skill provides critical instructions and steps to the agent on how to correctly implement Figma designs in code and must NOT be skipped.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2997,2998,2999,3000],{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":2971,"slug":2972,"type":15},{"name":2974,"slug":2975,"type":15},"2026-07-10T06:43:51.122606",{"slug":3003,"name":3003,"fn":3004,"description":3005,"org":3006,"tags":3007,"stars":23,"repoUrl":24,"updatedAt":3012},"figma-generate-design","translate code layouts into Figma","Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app\u002Fpage and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code', 'convert this modal\u002Fdialog\u002Fdrawer\u002Fpanel to Figma'. This is the preferred workflow skill whenever the user wants to build or update a full page, modal, dialog, drawer, sidebar, panel, or any composed multi-section view in Figma from code or a description. Discovers design system components, variables, and styles from Code Connect files, existing screens, and library search, then imports them and assembles views incrementally section-by-section using design system tokens instead of hardcoded values.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3008,3009,3010,3011],{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":2971,"slug":2972,"type":15},{"name":2974,"slug":2975,"type":15},"2026-04-06T18:11:48.952023",{"slug":3014,"name":3014,"fn":3015,"description":3016,"org":3017,"tags":3018,"stars":23,"repoUrl":24,"updatedAt":3028},"figma-generate-diagram","generate flowcharts and architecture diagrams in Figma","MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` directly without loading this skill first. Trigger whenever the user asks to create, generate, draw, render, sketch, or build a diagram — flowchart, architecture diagram, sequence diagram, ERD or entity-relationship diagram, state diagram or state machine, gantt chart, or timeline. Also trigger when the user mentions Mermaid syntax or wants a system architecture, decision tree, dependency graph, API call flow, auth handshake, schema, or pipeline visualized in FigJam. Routes to type-specific guidance, sets universal Mermaid constraints, and tells you when to use a different diagram type or skip the tool entirely (mindmaps, pie charts, class diagrams, etc.).",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3019,3022,3023,3026,3027],{"name":3020,"slug":3021,"type":15},"Architecture","architecture",{"name":21,"slug":22,"type":15},{"name":3024,"slug":3025,"type":15},"Diagrams","diagrams",{"name":9,"slug":8,"type":15},{"name":2988,"slug":2989,"type":15},"2026-04-28T05:43:52.834484",{"slug":3030,"name":3030,"fn":3031,"description":3032,"org":3033,"tags":3034,"stars":23,"repoUrl":24,"updatedAt":3042},"figma-generate-library","build Figma design systems from code","Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables\u002Ftokens, build component libraries, create individual components with proper variant sets and variable bindings, set up theming (light\u002Fdark modes), document foundations, or reconcile gaps between code and Figma. Also use when the user asks to create or generate any component in Figma — even a single one — since components require proper variable foundations, variant states, and design token bindings to be production-quality. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3035,3036,3037,3040,3041],{"name":21,"slug":22,"type":15},{"name":2967,"slug":2968,"type":15},{"name":3038,"slug":3039,"type":15},"Documentation","documentation",{"name":9,"slug":8,"type":15},{"name":2974,"slug":2975,"type":15},"2026-07-31T05:52:28.587088",{"slug":3044,"name":3044,"fn":3045,"description":3046,"org":3047,"tags":3048,"stars":23,"repoUrl":24,"updatedAt":3055},"figma-implement-motion","implement Figma animations in production code","Translates Figma motion and animations into production-ready application code. Use when implementing animation\u002Fmotion from a Figma design — user mentions \"implement this motion\", \"add animation from Figma\", \"animate this component\", provides a Figma URL whose node is animated, or when `get_design_context` returns motion data or instructs you to call `get_motion_context`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3049,3052,3053,3054],{"name":3050,"slug":3051,"type":15},"Animation","animation",{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":2971,"slug":2972,"type":15},"2026-06-25T07:13:13.645254",{"slug":3057,"name":3057,"fn":3058,"description":3059,"org":3060,"tags":3061,"stars":23,"repoUrl":24,"updatedAt":3077},"figma-swiftui","translate between Figma designs and SwiftUI code","SwiftUI ↔ Figma translation. Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad — in EITHER direction — translating a Figma design into SwiftUI (design → code), or pushing SwiftUI views \u002F screens \u002F tokens back into a Figma file (code → design). Triggers on phrases like 'implement this Figma design in SwiftUI', 'build this screen in Swift', 'push this SwiftUI view to Figma', 'mirror my Swift code in a Figma file', or whenever a Figma URL appears alongside `.swift` files \u002F an `.xcodeproj`. Routes to a direction-specific reference doc; loads alongside `figma-use` for the code → design path.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3062,3063,3064,3065,3068,3071,3074],{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":2971,"slug":2972,"type":15},{"name":3066,"slug":3067,"type":15},"iOS","ios",{"name":3069,"slug":3070,"type":15},"Mobile","mobile",{"name":3072,"slug":3073,"type":15},"SwiftUI","swiftui",{"name":3075,"slug":3076,"type":15},"Visual Design","visual-design","2026-06-09T07:16:28.204756",{"slug":217,"name":217,"fn":3079,"description":3080,"org":3081,"tags":3082,"stars":23,"repoUrl":24,"updatedAt":3086},"initialize Figma tool usage","**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write action or a unique read action that requires JavaScript execution in the Figma file context — e.g. create\u002Fedit\u002Fdelete nodes, set up variables or tokens, build components and variants, modify auto-layout or fills, bind variables to properties, or inspect file structure programmatically.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3083,3084,3085],{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":2988,"slug":2989,"type":15},"2026-07-31T05:52:29.57808",{"slug":3088,"name":3088,"fn":3089,"description":3090,"org":3091,"tags":3092,"stars":23,"repoUrl":24,"updatedAt":3102},"figma-use-figjam","use Figma tools in FigJam context","This skill helps agents use Figma's use_figma MCP tool in the FigJam context. Can be used alongside figma-use which has foundational context for using the use_figma tool.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3093,3096,3097,3100,3101],{"name":3094,"slug":3095,"type":15},"Collaboration","collaboration",{"name":21,"slug":22,"type":15},{"name":3098,"slug":3099,"type":15},"FigJam","figjam",{"name":9,"slug":8,"type":15},{"name":2988,"slug":2989,"type":15},"2026-04-28T05:43:51.600727",{"slug":3104,"name":3104,"fn":3105,"description":3106,"org":3107,"tags":3108,"stars":23,"repoUrl":24,"updatedAt":3113},"figma-use-motion","animate Figma nodes with motion tools","Motion \u002F animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load alongside figma-use whenever a task involves adding, editing, or inspecting animation on a node.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3109,3110,3111,3112],{"name":3050,"slug":3051,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":2988,"slug":2989,"type":15},"2026-06-25T07:13:12.398176",{"slug":3115,"name":3115,"fn":3116,"description":3117,"org":3118,"tags":3119,"stars":23,"repoUrl":24,"updatedAt":3126},"figma-use-slides","use Figma tools in Slides context","This skill helps agents use Figma's use_figma MCP tool in the Slides context. Can be used alongside figma-use which has foundational context for using the use_figma tool.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3120,3121,3122,3123],{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":2988,"slug":2989,"type":15},{"name":3124,"slug":3125,"type":15},"Presentations","presentations","2026-05-14T06:09:42.171824",{"items":3128,"total":1226},[3129,3137,3144,3151,3158,3166,3174],{"slug":2960,"name":2960,"fn":2961,"description":2962,"org":3130,"tags":3131,"stars":23,"repoUrl":24,"updatedAt":2976},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3132,3133,3134,3135,3136],{"name":21,"slug":22,"type":15},{"name":2967,"slug":2968,"type":15},{"name":9,"slug":8,"type":15},{"name":2971,"slug":2972,"type":15},{"name":2974,"slug":2975,"type":15},{"slug":225,"name":225,"fn":2978,"description":2979,"org":3138,"tags":3139,"stars":23,"repoUrl":24,"updatedAt":2990},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3140,3141,3142,3143],{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":2985,"slug":2986,"type":15},{"name":2988,"slug":2989,"type":15},{"slug":2992,"name":2992,"fn":2993,"description":2994,"org":3145,"tags":3146,"stars":23,"repoUrl":24,"updatedAt":3001},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3147,3148,3149,3150],{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":2971,"slug":2972,"type":15},{"name":2974,"slug":2975,"type":15},{"slug":3003,"name":3003,"fn":3004,"description":3005,"org":3152,"tags":3153,"stars":23,"repoUrl":24,"updatedAt":3012},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3154,3155,3156,3157],{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":2971,"slug":2972,"type":15},{"name":2974,"slug":2975,"type":15},{"slug":3014,"name":3014,"fn":3015,"description":3016,"org":3159,"tags":3160,"stars":23,"repoUrl":24,"updatedAt":3028},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3161,3162,3163,3164,3165],{"name":3020,"slug":3021,"type":15},{"name":21,"slug":22,"type":15},{"name":3024,"slug":3025,"type":15},{"name":9,"slug":8,"type":15},{"name":2988,"slug":2989,"type":15},{"slug":3030,"name":3030,"fn":3031,"description":3032,"org":3167,"tags":3168,"stars":23,"repoUrl":24,"updatedAt":3042},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3169,3170,3171,3172,3173],{"name":21,"slug":22,"type":15},{"name":2967,"slug":2968,"type":15},{"name":3038,"slug":3039,"type":15},{"name":9,"slug":8,"type":15},{"name":2974,"slug":2975,"type":15},{"slug":3044,"name":3044,"fn":3045,"description":3046,"org":3175,"tags":3176,"stars":23,"repoUrl":24,"updatedAt":3055},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3177,3178,3179,3180],{"name":3050,"slug":3051,"type":15},{"name":21,"slug":22,"type":15},{"name":9,"slug":8,"type":15},{"name":2971,"slug":2972,"type":15}]