tokyo-megacorp/sync
skills/sync/SKILL.md
Refresh snapshots and search index for tracked Figma files. Fetches current state from Figma, generates frame.md documents, and updates the QMD search index. Use when the user runs /figma-differ:sync or says "sync Figma", "refresh snapshots", "update the Figma index", or "re-sync tracked files".
documentation
Updated Apr 23, 2026
$ install --global
skillsauthnpx skillsauth add tokyo-megacorp/figma-differ syncInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 23, 2026, 7:54 PM139.1s1 file scanned
SKILL.md
- name:
- sync
- description:
- >
- index. Use when the user runs /figma-differ:
- sync or says "sync Figma",
- argument-hint:
- [<figma-file-url>]
Sync Tracked Figma Files
1. Determine which files to sync
If a URL is provided: extract fileKey and sync only that file.
If no URL: read ~/.figma-differ/tracked.json and sync all tracked files. If no tracked files exist, tell the user to run /figma-differ:track <url> first.
2. Orchestration pattern
For each file, create tasks and dispatch haiku subagents per phase. The main conversation shows only task progress and a final summary. Raw output stays in forked agents.
TaskCreate("Fetch file tree", activeForm: "Fetching <fileName> from Figma API...")
TaskCreate("Index all frames", activeForm: "Cataloging frames and sections...")
TaskCreate("Extract screen flows", activeForm: "Mapping connector lines and transitions...")
TaskCreate("Generate frame docs", activeForm: "Extracting text, colors, buttons, layout...")
TaskCreate("Update search index", activeForm: "Indexing frames for semantic search...")
Execute each phase sequentially — each depends on the previous. Mark tasks in_progress before starting, completed when done.
Data discipline
- NEVER keep raw API responses, JSON trees, or large frame content in the conversation context
- ALWAYS write intermediate data to disk (temp files or
~/.figma-differ/) - Subagent prompts MUST include: "Write results to <path>. Report only counts and file paths."
- Final summary to user: counts, paths, and actionable next steps only
3. Phase execution
Task lifecycle:
- Create ALL tasks upfront (pending)
- Before each phase:
TaskUpdate(taskId, status: "in_progress") - Dispatch
Agent(model: "haiku")— agent reports only counts, never raw output - After agent returns:
TaskUpdate(taskId, status: "completed") - After ALL phases: verify no tasks left in_progress — every task must be completed or deleted before the final summary
Phase 1: Fetch file tree
Agent(model: "haiku", prompt: "
Fetch the Figma file tree for <fileKey>.
Run: bash $CLAUDE_PLUGIN_ROOT/scripts/figma-api.sh fetch_file_tree <fileKey> > /tmp/figma-tree-<fileKey>.json
Report: file size in bytes
")
Phase 2: Index frames
Agent(model: "haiku", prompt: "
Walk /tmp/figma-tree-<fileKey>.json and extract FRAME/SECTION/COMPONENT_SET nodes.
Write ~/.figma-differ/<fileKey>/index.json.
Report: total frame count
")
Phase 3: Extract flows
Agent(model: "haiku", prompt: "
Run: node $CLAUDE_PLUGIN_ROOT/scripts/extract-flows.js <fileKey> /tmp/figma-tree-<fileKey>.json
Report: connector count, prototype count, frames with flows
")
Phase 4: Generate frame docs
Agent(model: "haiku", prompt: "
Run: node $CLAUDE_PLUGIN_ROOT/scripts/generate-frame-md.js <fileKey>
Report: generated count, skipped count
")
Phase 5: Update search index
Agent(model: "haiku", prompt: "
Run: source $CLAUDE_PLUGIN_ROOT/scripts/lib/qmd.sh && qmd_reindex
Report: new docs indexed, chunks embedded
")
After all phases: clean up temp tree file, update tracked.json with lastSynced timestamp.
4. Report
After all tasks complete, print a single summary:
Sync complete — <fileName> (<fileKey>)
Frames: F indexed
Flows: C connectors, P prototype
Docs: G generated (S skipped)
Search: N new chunks embedded
Last synced: <timestamp>
/figma-differ:search "query" to find frames
/figma-differ:diff-all <url> to check changes
Related Skills
tokyo-megacorp/track
testing
VerifiedTrustedCommunity
Subscribe to a Figma file for automatic syncing and semantic search. Adds the file to tracked.json, runs initial index + snapshot-all + frame.md generation, and initializes the QMD search collection. Use when the user runs /figma-differ:track or says "track this Figma file", "subscribe to Figma", "watch this design file", or "add to tracked files".
SKILL.mdUpdated Apr 23, 2026
tokyo-megacorp/snapshot
tools
VerifiedTrustedCommunity
Takes a snapshot of a Figma node — fetches its JSON structure and PNG screenshot and stores both to ~/.figma-differ/ for later diffing. Use when the user runs /figma-differ:snapshot with a Figma URL, or says "snapshot this Figma frame", "save a Figma baseline", or "take a Figma snapshot".
SKILL.mdUpdated Apr 23, 2026
tokyo-megacorp/snapshot-all
development
VerifiedTrustedCommunity
Bulk snapshots every frame in a Figma file — fetches all node JSONs, exports PNGs, and stores comments. Uses a single API call for the tree and batched image exports. Use when the user runs /figma-differ:snapshot-all with a Figma file URL, or says "snapshot all frames", "bulk snapshot", "baseline the whole file", or "snapshot everything in this Figma file".
SKILL.mdUpdated Apr 23, 2026
tokyo-megacorp/search
content-media
VerifiedTrustedCommunity
Semantic search across all tracked Figma frames using QMD hybrid search. Finds frames by content, component names, text strings, or natural language queries like "the login screen" or "frames with portfolio charts". Use when the user runs /figma-differ:search or says "find the Figma frame for", "which frame has", "search Figma frames", or "find frames with".
SKILL.mdUpdated Apr 23, 2026