[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-figma-figma-generate-diagram":3,"mdc--6ednpd-key":37,"related-org-figma-figma-generate-diagram":1140,"related-repo-figma-figma-generate-diagram":1301},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":26,"repoUrl":27,"updatedAt":28,"license":29,"forks":30,"topics":31,"repo":32,"sourceUrl":35,"mdContent":36},"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},"figma","Figma","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Ffigma.png",[12,16,19,22,23],{"name":13,"slug":14,"type":15},"Architecture","architecture","tag",{"name":17,"slug":18,"type":15},"MCP","mcp",{"name":20,"slug":21,"type":15},"Diagrams","diagrams",{"name":9,"slug":8,"type":15},{"name":24,"slug":25,"type":15},"Design","design",1805,"https:\u002F\u002Fgithub.com\u002Ffigma\u002Fmcp-server-guide","2026-04-28T05:43:52.834484",null,164,[],{"repoUrl":27,"stars":26,"forks":30,"topics":33,"description":34},[],"A guide on how to use the Figma MCP server","https:\u002F\u002Fgithub.com\u002Ffigma\u002Fmcp-server-guide\u002Ftree\u002FHEAD\u002Fskills\u002Ffigma-generate-diagram","---\nname: figma-generate-diagram\ndescription: \"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.).\"\n---\n\n# generate-diagram\n\n**You MUST load this skill before every `generate_diagram` tool call.** Skipping it causes preventable rendering failures and low-quality output.\n\n`generate_diagram` takes Mermaid.js syntax and produces an editable FigJam diagram. This skill routes you to the right per-type guidance and sets universal constraints.\n\n## Step 1: Is `generate_diagram` the right tool?\n\n### Supported diagram types\n\n`flowchart`, `sequenceDiagram`, `stateDiagram` \u002F `stateDiagram-v2`, `gantt`, `erDiagram`.\n\n### Unsupported — don't call the tool\n\nIf the user wants any of these, tell them directly that `generate_diagram` doesn't support it instead of calling the tool and failing:\n- **Pie chart, mindmap, venn diagram, class diagram, journey, timeline, quadrant, C4, git graph, requirement diagram**\n\n### When to push the user to edit in Figma\n\nThe tool cannot:\n- Change fonts on an existing diagram\n- Move individual shapes\n- Edit a diagram node-by-node after generation\n\nIf the user asks for any of those on an existing diagram, recommend they open the diagram in Figma and edit there. For content-level changes, it's usually faster to regenerate.\n\n## Step 2: Pick the diagram type\n\nLightweight routing — use the first match.\n\n| User wants… | Type | Next step |\n|---|---|---|\n| Services + datastores + queues + integrations | **Architecture flowchart** | Read [references\u002Farchitecture.md](.\u002Freferences\u002Farchitecture.md) |\n| Decision tree, process flow, pipeline, dependency graph, user journey | **Flowchart** | Read [references\u002Fflowchart.md](.\u002Freferences\u002Fflowchart.md) |\n| Interactions between parties over time (API calls, auth, messaging) | **Sequence diagram** | Read [references\u002Fsequence.md](.\u002Freferences\u002Fsequence.md) |\n| Data model, tables, keys, cardinality | **ER diagram** | Read [references\u002Ferd.md](.\u002Freferences\u002Ferd.md) |\n| Named states with transitions between them | **State diagram** | Read [references\u002Fstate.md](.\u002Freferences\u002Fstate.md) |\n| Project schedule with dates, milestones | **Gantt chart** | Read [references\u002Fgantt.md](.\u002Freferences\u002Fgantt.md) |\n\nIf a flowchart is requested and it describes software infrastructure (services, datastores, queues, external integrations), route to `architecture.md` — not `flowchart.md`. When in doubt, ask the user.\n\n## Step 3: Universal constraints (apply to every diagram type)\n\n1. **No emojis** in any part of the Mermaid source. The tool rejects them.\n2. **No `\\n`** in labels. Use newlines only when absolutely required and only via actual line breaks (not the escape sequence).\n3. **No HTML tags** in labels.\n4. **Reserved words** — don't use `end`, `subgraph`, `graph` as node IDs.\n5. **Node IDs**: camelCase (`userService`), no spaces. Underscores can break edge routing in some processors.\n6. **Special characters in labels** must be wrapped in quotes: `A[\"Process (main)\"]`, `-->|\"O(1) lookup\"|`.\n7. **Sequence diagrams** — Mermaid `Note over X` \u002F `Note left of X` \u002F `Note right of X` are silently stripped by the renderer; don't put them in the source. If the user wants annotations on a sequence diagram, generate the base diagram first and add stickies\u002Ftext via the hybrid workflow ([references\u002Fworkflow.md](references\u002Fworkflow.md)).\n8. **Gantt charts** — `classDef`, `class`, and any other styling are stripped by preprocessing; the rendered chart will not have colors. If the user wants color-coded phases, milestones, or tasks, generate the base chart first and add color\u002Fannotations via the hybrid workflow ([references\u002Fworkflow.md](references\u002Fworkflow.md)) — or, for diagrams that fundamentally need styling, build the timeline directly with `use_figma` instead (see [references\u002Fgantt.md](references\u002Fgantt.md) §11).\n9. **Use FigJam-only APIs in any `use_figma` extension.** `generate_diagram` output lands in a FigJam file (`figma.com\u002Fboard\u002F...`), so hybrid extensions must stick to FigJam-supported APIs. Do NOT call `figma.createPage()` — it's Design-only (`figma.com\u002Fdesign\u002F...`) and throws `TypeError: figma.createPage no such property 'createPage' on the figma global object` in FigJam. Organize content with FigJam sections instead (see [figma-use-figjam](..\u002Ffigma-use-figjam\u002FSKILL.md)).\n\n## Step 4: Garbage in, garbage out\n\nThe quality of the generated diagram is bounded by the quality of the Mermaid you produce, which is bounded by the context you have. Before writing Mermaid, make sure you have enough real information to describe the subject accurately — and use whatever the current environment gives you to gather it.\n\nDepending on what's available, useful sources of context include:\n\n- **Source code** — grep\u002Fread the relevant files so the diagram reflects real service names, real edge labels, real data stores, real entry points. Walking actual routes\u002Fhandlers\u002Fconsumers beats recreating from memory.\n- **User-provided documents** — a PRD, spec, meeting notes, transcript, research synthesis, onboarding doc, process write-up. Ask the user to paste or attach it if the subject isn't code.\n- **Existing Figma or FigJam files** — if the new diagram should align with one the user already has, read it with `get_figjam` or `get_design_context` (see the `figma-use` and `figma-use-figjam` skills).\n- **Other MCP servers or tools you have available** — issue trackers, docs sites, CRMs, analytics, internal wikis, design systems, database schemas, etc. If a connected tool holds the ground truth for what you're diagramming, pull from it rather than guessing.\n- **The user themselves** — when the description is thin or ambiguous (unclear direction of flow, unclear scope, unclear which entities matter), ask one or two focused questions before generating. Examples: \"What are the 3–5 main steps?\", \"Who owns each step?\", \"What triggers the next step?\". One good question beats one wasted diagram.\n\nDon't invent edges, labels, or entities to \"round out\" a diagram. Missing information is better than hallucinated information — leave a gap and flag it to the user.\n\n## Step 5: Will the diagram need more than Mermaid can express?\n\nMermaid can't do everything. Sticky-note annotations tied to specific nodes, per-node domain coloring on ERDs, callouts with attached data — these all require composing `generate_diagram` with `use_figma` (via the [figma-use-figjam](..\u002Ffigma-use-figjam\u002FSKILL.md) skill). This is the **hybrid workflow**.\n\nIt's a judgment call, not a default. Deploy it when the user's ask clearly benefits — skip it when the base diagram is obviously enough. Signals that say yes: user explicitly asked for notes, colors, callouts, or \"X attached to each node\"; they shared data that maps to specific nodes; the diagram is a shareable artifact, not a thinking sketch. Signals that say no: short\u002Fself-explanatory request, small diagram, user exploring or testing.\n\n**If hybrid is warranted, read [references\u002Fworkflow.md](.\u002Freferences\u002Fworkflow.md) before calling `generate_diagram`** — it covers the pattern, two core recipes (annotations + color-coding), communication style, and failure handling. If not, proceed directly to Step 6.\n\n## Step 6: Calling the tool\n\nRequired:\n- `name`: a descriptive title (shown to the user)\n- `mermaidSyntax`: the Mermaid source\n\nOptional:\n- `userIntent`: a short sentence describing what the user is trying to accomplish — helps telemetry and downstream tuning\n- `useArchitectureLayoutCode`: **only for architecture diagrams**; value is specified in `references\u002Farchitecture.md`\n- `fileKey`: if the user wants the diagram added to an existing FigJam file instead of a new one\n\nDo **not** call `create_new_file` before `generate_diagram` — the tool creates its own file.\n\n## Step 7: After generation\n\n- The tool returns a link (or widget) the user can click to open the diagram in FigJam. Show it as a markdown link unless the client renders an inline widget.\n- If extensions are warranted (see Step 5), compose with `use_figma` now — the pattern and recipes are in [references\u002Fworkflow.md](.\u002Freferences\u002Fworkflow.md).\n- If the user is dissatisfied after 2 attempts at the same diagram, stop regenerating. Ask what specifically is wrong, or suggest they open it in Figma and edit manually rather than burning more tool calls.\n\n### Reuse the same file when iterating or adding related diagrams\n\nEvery call to `generate_diagram` without a `fileKey` creates a new FigJam file in the user's drafts. Regenerating 4 times = 4 draft files to clean up. Prefer reusing the existing file when:\n\n- The user is iterating on the same diagram (\"try again with…\", \"change the labels…\").\n- The user wants a follow-up diagram that lives alongside the first (e.g. a sequence diagram next to a flowchart of the same system).\n\nHow to reuse:\n\n1. **Pass `fileKey`** on subsequent `generate_diagram` calls. Extract from a `figma.com\u002Fboard\u002F{fileKey}\u002F...` URL. The diagram is added to the existing file rather than creating a new one.\n2. If you want to replace the previous diagram rather than adding next to it, use the `use_figma` tool (see the `figma-use-figjam` skill) to delete the old diagram's nodes first, then call `generate_diagram` with the same `fileKey`. Or leave the old diagram and place the new one beside it — readers often benefit from seeing the history of attempts.\n\nAsk the user which they prefer the first time you iterate — \"regenerate over the old one, or keep both side-by-side?\" — and remember their answer for subsequent iterations in the session.\n",{"data":38,"body":39},{"name":4,"description":6},{"type":40,"children":41},"root",[42,50,71,81,95,102,150,156,168,181,187,192,210,215,221,226,417,438,444,705,711,716,721,805,810,816,847,852,874,880,885,910,915,963,990,996,1026,1032,1051,1064,1069,1135],{"type":43,"tag":44,"props":45,"children":47},"element","h1",{"id":46},"generate-diagram",[48],{"type":49,"value":46},"text",{"type":43,"tag":51,"props":52,"children":53},"p",{},[54,69],{"type":43,"tag":55,"props":56,"children":57},"strong",{},[58,60,67],{"type":49,"value":59},"You MUST load this skill before every ",{"type":43,"tag":61,"props":62,"children":64},"code",{"className":63},[],[65],{"type":49,"value":66},"generate_diagram",{"type":49,"value":68}," tool call.",{"type":49,"value":70}," Skipping it causes preventable rendering failures and low-quality output.",{"type":43,"tag":51,"props":72,"children":73},{},[74,79],{"type":43,"tag":61,"props":75,"children":77},{"className":76},[],[78],{"type":49,"value":66},{"type":49,"value":80}," takes Mermaid.js syntax and produces an editable FigJam diagram. This skill routes you to the right per-type guidance and sets universal constraints.",{"type":43,"tag":82,"props":83,"children":85},"h2",{"id":84},"step-1-is-generate_diagram-the-right-tool",[86,88,93],{"type":49,"value":87},"Step 1: Is ",{"type":43,"tag":61,"props":89,"children":91},{"className":90},[],[92],{"type":49,"value":66},{"type":49,"value":94}," the right tool?",{"type":43,"tag":96,"props":97,"children":99},"h3",{"id":98},"supported-diagram-types",[100],{"type":49,"value":101},"Supported diagram types",{"type":43,"tag":51,"props":103,"children":104},{},[105,111,113,119,120,126,128,134,135,141,142,148],{"type":43,"tag":61,"props":106,"children":108},{"className":107},[],[109],{"type":49,"value":110},"flowchart",{"type":49,"value":112},", ",{"type":43,"tag":61,"props":114,"children":116},{"className":115},[],[117],{"type":49,"value":118},"sequenceDiagram",{"type":49,"value":112},{"type":43,"tag":61,"props":121,"children":123},{"className":122},[],[124],{"type":49,"value":125},"stateDiagram",{"type":49,"value":127}," \u002F ",{"type":43,"tag":61,"props":129,"children":131},{"className":130},[],[132],{"type":49,"value":133},"stateDiagram-v2",{"type":49,"value":112},{"type":43,"tag":61,"props":136,"children":138},{"className":137},[],[139],{"type":49,"value":140},"gantt",{"type":49,"value":112},{"type":43,"tag":61,"props":143,"children":145},{"className":144},[],[146],{"type":49,"value":147},"erDiagram",{"type":49,"value":149},".",{"type":43,"tag":96,"props":151,"children":153},{"id":152},"unsupported-dont-call-the-tool",[154],{"type":49,"value":155},"Unsupported — don't call the tool",{"type":43,"tag":51,"props":157,"children":158},{},[159,161,166],{"type":49,"value":160},"If the user wants any of these, tell them directly that ",{"type":43,"tag":61,"props":162,"children":164},{"className":163},[],[165],{"type":49,"value":66},{"type":49,"value":167}," doesn't support it instead of calling the tool and failing:",{"type":43,"tag":169,"props":170,"children":171},"ul",{},[172],{"type":43,"tag":173,"props":174,"children":175},"li",{},[176],{"type":43,"tag":55,"props":177,"children":178},{},[179],{"type":49,"value":180},"Pie chart, mindmap, venn diagram, class diagram, journey, timeline, quadrant, C4, git graph, requirement diagram",{"type":43,"tag":96,"props":182,"children":184},{"id":183},"when-to-push-the-user-to-edit-in-figma",[185],{"type":49,"value":186},"When to push the user to edit in Figma",{"type":43,"tag":51,"props":188,"children":189},{},[190],{"type":49,"value":191},"The tool cannot:",{"type":43,"tag":169,"props":193,"children":194},{},[195,200,205],{"type":43,"tag":173,"props":196,"children":197},{},[198],{"type":49,"value":199},"Change fonts on an existing diagram",{"type":43,"tag":173,"props":201,"children":202},{},[203],{"type":49,"value":204},"Move individual shapes",{"type":43,"tag":173,"props":206,"children":207},{},[208],{"type":49,"value":209},"Edit a diagram node-by-node after generation",{"type":43,"tag":51,"props":211,"children":212},{},[213],{"type":49,"value":214},"If the user asks for any of those on an existing diagram, recommend they open the diagram in Figma and edit there. For content-level changes, it's usually faster to regenerate.",{"type":43,"tag":82,"props":216,"children":218},{"id":217},"step-2-pick-the-diagram-type",[219],{"type":49,"value":220},"Step 2: Pick the diagram type",{"type":43,"tag":51,"props":222,"children":223},{},[224],{"type":49,"value":225},"Lightweight routing — use the first match.",{"type":43,"tag":227,"props":228,"children":229},"table",{},[230,254],{"type":43,"tag":231,"props":232,"children":233},"thead",{},[234],{"type":43,"tag":235,"props":236,"children":237},"tr",{},[238,244,249],{"type":43,"tag":239,"props":240,"children":241},"th",{},[242],{"type":49,"value":243},"User wants…",{"type":43,"tag":239,"props":245,"children":246},{},[247],{"type":49,"value":248},"Type",{"type":43,"tag":239,"props":250,"children":251},{},[252],{"type":49,"value":253},"Next step",{"type":43,"tag":255,"props":256,"children":257},"tbody",{},[258,287,313,339,365,391],{"type":43,"tag":235,"props":259,"children":260},{},[261,267,275],{"type":43,"tag":262,"props":263,"children":264},"td",{},[265],{"type":49,"value":266},"Services + datastores + queues + integrations",{"type":43,"tag":262,"props":268,"children":269},{},[270],{"type":43,"tag":55,"props":271,"children":272},{},[273],{"type":49,"value":274},"Architecture flowchart",{"type":43,"tag":262,"props":276,"children":277},{},[278,280],{"type":49,"value":279},"Read ",{"type":43,"tag":281,"props":282,"children":284},"a",{"href":283},".\u002Freferences\u002Farchitecture.md",[285],{"type":49,"value":286},"references\u002Farchitecture.md",{"type":43,"tag":235,"props":288,"children":289},{},[290,295,303],{"type":43,"tag":262,"props":291,"children":292},{},[293],{"type":49,"value":294},"Decision tree, process flow, pipeline, dependency graph, user journey",{"type":43,"tag":262,"props":296,"children":297},{},[298],{"type":43,"tag":55,"props":299,"children":300},{},[301],{"type":49,"value":302},"Flowchart",{"type":43,"tag":262,"props":304,"children":305},{},[306,307],{"type":49,"value":279},{"type":43,"tag":281,"props":308,"children":310},{"href":309},".\u002Freferences\u002Fflowchart.md",[311],{"type":49,"value":312},"references\u002Fflowchart.md",{"type":43,"tag":235,"props":314,"children":315},{},[316,321,329],{"type":43,"tag":262,"props":317,"children":318},{},[319],{"type":49,"value":320},"Interactions between parties over time (API calls, auth, messaging)",{"type":43,"tag":262,"props":322,"children":323},{},[324],{"type":43,"tag":55,"props":325,"children":326},{},[327],{"type":49,"value":328},"Sequence diagram",{"type":43,"tag":262,"props":330,"children":331},{},[332,333],{"type":49,"value":279},{"type":43,"tag":281,"props":334,"children":336},{"href":335},".\u002Freferences\u002Fsequence.md",[337],{"type":49,"value":338},"references\u002Fsequence.md",{"type":43,"tag":235,"props":340,"children":341},{},[342,347,355],{"type":43,"tag":262,"props":343,"children":344},{},[345],{"type":49,"value":346},"Data model, tables, keys, cardinality",{"type":43,"tag":262,"props":348,"children":349},{},[350],{"type":43,"tag":55,"props":351,"children":352},{},[353],{"type":49,"value":354},"ER diagram",{"type":43,"tag":262,"props":356,"children":357},{},[358,359],{"type":49,"value":279},{"type":43,"tag":281,"props":360,"children":362},{"href":361},".\u002Freferences\u002Ferd.md",[363],{"type":49,"value":364},"references\u002Ferd.md",{"type":43,"tag":235,"props":366,"children":367},{},[368,373,381],{"type":43,"tag":262,"props":369,"children":370},{},[371],{"type":49,"value":372},"Named states with transitions between them",{"type":43,"tag":262,"props":374,"children":375},{},[376],{"type":43,"tag":55,"props":377,"children":378},{},[379],{"type":49,"value":380},"State diagram",{"type":43,"tag":262,"props":382,"children":383},{},[384,385],{"type":49,"value":279},{"type":43,"tag":281,"props":386,"children":388},{"href":387},".\u002Freferences\u002Fstate.md",[389],{"type":49,"value":390},"references\u002Fstate.md",{"type":43,"tag":235,"props":392,"children":393},{},[394,399,407],{"type":43,"tag":262,"props":395,"children":396},{},[397],{"type":49,"value":398},"Project schedule with dates, milestones",{"type":43,"tag":262,"props":400,"children":401},{},[402],{"type":43,"tag":55,"props":403,"children":404},{},[405],{"type":49,"value":406},"Gantt chart",{"type":43,"tag":262,"props":408,"children":409},{},[410,411],{"type":49,"value":279},{"type":43,"tag":281,"props":412,"children":414},{"href":413},".\u002Freferences\u002Fgantt.md",[415],{"type":49,"value":416},"references\u002Fgantt.md",{"type":43,"tag":51,"props":418,"children":419},{},[420,422,428,430,436],{"type":49,"value":421},"If a flowchart is requested and it describes software infrastructure (services, datastores, queues, external integrations), route to ",{"type":43,"tag":61,"props":423,"children":425},{"className":424},[],[426],{"type":49,"value":427},"architecture.md",{"type":49,"value":429}," — not ",{"type":43,"tag":61,"props":431,"children":433},{"className":432},[],[434],{"type":49,"value":435},"flowchart.md",{"type":49,"value":437},". When in doubt, ask the user.",{"type":43,"tag":82,"props":439,"children":441},{"id":440},"step-3-universal-constraints-apply-to-every-diagram-type",[442],{"type":49,"value":443},"Step 3: Universal constraints (apply to every diagram type)",{"type":43,"tag":445,"props":446,"children":447},"ol",{},[448,458,474,484,516,534,558,597,642],{"type":43,"tag":173,"props":449,"children":450},{},[451,456],{"type":43,"tag":55,"props":452,"children":453},{},[454],{"type":49,"value":455},"No emojis",{"type":49,"value":457}," in any part of the Mermaid source. The tool rejects them.",{"type":43,"tag":173,"props":459,"children":460},{},[461,472],{"type":43,"tag":55,"props":462,"children":463},{},[464,466],{"type":49,"value":465},"No ",{"type":43,"tag":61,"props":467,"children":469},{"className":468},[],[470],{"type":49,"value":471},"\\n",{"type":49,"value":473}," in labels. Use newlines only when absolutely required and only via actual line breaks (not the escape sequence).",{"type":43,"tag":173,"props":475,"children":476},{},[477,482],{"type":43,"tag":55,"props":478,"children":479},{},[480],{"type":49,"value":481},"No HTML tags",{"type":49,"value":483}," in labels.",{"type":43,"tag":173,"props":485,"children":486},{},[487,492,494,500,501,507,508,514],{"type":43,"tag":55,"props":488,"children":489},{},[490],{"type":49,"value":491},"Reserved words",{"type":49,"value":493}," — don't use ",{"type":43,"tag":61,"props":495,"children":497},{"className":496},[],[498],{"type":49,"value":499},"end",{"type":49,"value":112},{"type":43,"tag":61,"props":502,"children":504},{"className":503},[],[505],{"type":49,"value":506},"subgraph",{"type":49,"value":112},{"type":43,"tag":61,"props":509,"children":511},{"className":510},[],[512],{"type":49,"value":513},"graph",{"type":49,"value":515}," as node IDs.",{"type":43,"tag":173,"props":517,"children":518},{},[519,524,526,532],{"type":43,"tag":55,"props":520,"children":521},{},[522],{"type":49,"value":523},"Node IDs",{"type":49,"value":525},": camelCase (",{"type":43,"tag":61,"props":527,"children":529},{"className":528},[],[530],{"type":49,"value":531},"userService",{"type":49,"value":533},"), no spaces. Underscores can break edge routing in some processors.",{"type":43,"tag":173,"props":535,"children":536},{},[537,542,544,550,551,557],{"type":43,"tag":55,"props":538,"children":539},{},[540],{"type":49,"value":541},"Special characters in labels",{"type":49,"value":543}," must be wrapped in quotes: ",{"type":43,"tag":61,"props":545,"children":547},{"className":546},[],[548],{"type":49,"value":549},"A[\"Process (main)\"]",{"type":49,"value":112},{"type":43,"tag":61,"props":552,"children":554},{"className":553},[],[555],{"type":49,"value":556},"-->|\"O(1) lookup\"|",{"type":49,"value":149},{"type":43,"tag":173,"props":559,"children":560},{},[561,566,568,574,575,581,582,588,590,595],{"type":43,"tag":55,"props":562,"children":563},{},[564],{"type":49,"value":565},"Sequence diagrams",{"type":49,"value":567}," — Mermaid ",{"type":43,"tag":61,"props":569,"children":571},{"className":570},[],[572],{"type":49,"value":573},"Note over X",{"type":49,"value":127},{"type":43,"tag":61,"props":576,"children":578},{"className":577},[],[579],{"type":49,"value":580},"Note left of X",{"type":49,"value":127},{"type":43,"tag":61,"props":583,"children":585},{"className":584},[],[586],{"type":49,"value":587},"Note right of X",{"type":49,"value":589}," are silently stripped by the renderer; don't put them in the source. If the user wants annotations on a sequence diagram, generate the base diagram first and add stickies\u002Ftext via the hybrid workflow (",{"type":43,"tag":281,"props":591,"children":593},{"href":592},"references\u002Fworkflow.md",[594],{"type":49,"value":592},{"type":49,"value":596},").",{"type":43,"tag":173,"props":598,"children":599},{},[600,605,607,613,614,620,622,626,628,634,636,640],{"type":43,"tag":55,"props":601,"children":602},{},[603],{"type":49,"value":604},"Gantt charts",{"type":49,"value":606}," — ",{"type":43,"tag":61,"props":608,"children":610},{"className":609},[],[611],{"type":49,"value":612},"classDef",{"type":49,"value":112},{"type":43,"tag":61,"props":615,"children":617},{"className":616},[],[618],{"type":49,"value":619},"class",{"type":49,"value":621},", and any other styling are stripped by preprocessing; the rendered chart will not have colors. If the user wants color-coded phases, milestones, or tasks, generate the base chart first and add color\u002Fannotations via the hybrid workflow (",{"type":43,"tag":281,"props":623,"children":624},{"href":592},[625],{"type":49,"value":592},{"type":49,"value":627},") — or, for diagrams that fundamentally need styling, build the timeline directly with ",{"type":43,"tag":61,"props":629,"children":631},{"className":630},[],[632],{"type":49,"value":633},"use_figma",{"type":49,"value":635}," instead (see ",{"type":43,"tag":281,"props":637,"children":638},{"href":416},[639],{"type":49,"value":416},{"type":49,"value":641}," §11).",{"type":43,"tag":173,"props":643,"children":644},{},[645,657,659,664,666,672,674,680,682,688,690,696,698,704],{"type":43,"tag":55,"props":646,"children":647},{},[648,650,655],{"type":49,"value":649},"Use FigJam-only APIs in any ",{"type":43,"tag":61,"props":651,"children":653},{"className":652},[],[654],{"type":49,"value":633},{"type":49,"value":656}," extension.",{"type":49,"value":658}," ",{"type":43,"tag":61,"props":660,"children":662},{"className":661},[],[663],{"type":49,"value":66},{"type":49,"value":665}," output lands in a FigJam file (",{"type":43,"tag":61,"props":667,"children":669},{"className":668},[],[670],{"type":49,"value":671},"figma.com\u002Fboard\u002F...",{"type":49,"value":673},"), so hybrid extensions must stick to FigJam-supported APIs. Do NOT call ",{"type":43,"tag":61,"props":675,"children":677},{"className":676},[],[678],{"type":49,"value":679},"figma.createPage()",{"type":49,"value":681}," — it's Design-only (",{"type":43,"tag":61,"props":683,"children":685},{"className":684},[],[686],{"type":49,"value":687},"figma.com\u002Fdesign\u002F...",{"type":49,"value":689},") and throws ",{"type":43,"tag":61,"props":691,"children":693},{"className":692},[],[694],{"type":49,"value":695},"TypeError: figma.createPage no such property 'createPage' on the figma global object",{"type":49,"value":697}," in FigJam. Organize content with FigJam sections instead (see ",{"type":43,"tag":281,"props":699,"children":701},{"href":700},"..\u002Ffigma-use-figjam\u002FSKILL.md",[702],{"type":49,"value":703},"figma-use-figjam",{"type":49,"value":596},{"type":43,"tag":82,"props":706,"children":708},{"id":707},"step-4-garbage-in-garbage-out",[709],{"type":49,"value":710},"Step 4: Garbage in, garbage out",{"type":43,"tag":51,"props":712,"children":713},{},[714],{"type":49,"value":715},"The quality of the generated diagram is bounded by the quality of the Mermaid you produce, which is bounded by the context you have. Before writing Mermaid, make sure you have enough real information to describe the subject accurately — and use whatever the current environment gives you to gather it.",{"type":43,"tag":51,"props":717,"children":718},{},[719],{"type":49,"value":720},"Depending on what's available, useful sources of context include:",{"type":43,"tag":169,"props":722,"children":723},{},[724,734,744,785,795],{"type":43,"tag":173,"props":725,"children":726},{},[727,732],{"type":43,"tag":55,"props":728,"children":729},{},[730],{"type":49,"value":731},"Source code",{"type":49,"value":733}," — grep\u002Fread the relevant files so the diagram reflects real service names, real edge labels, real data stores, real entry points. Walking actual routes\u002Fhandlers\u002Fconsumers beats recreating from memory.",{"type":43,"tag":173,"props":735,"children":736},{},[737,742],{"type":43,"tag":55,"props":738,"children":739},{},[740],{"type":49,"value":741},"User-provided documents",{"type":49,"value":743}," — a PRD, spec, meeting notes, transcript, research synthesis, onboarding doc, process write-up. Ask the user to paste or attach it if the subject isn't code.",{"type":43,"tag":173,"props":745,"children":746},{},[747,752,754,760,762,768,770,776,778,783],{"type":43,"tag":55,"props":748,"children":749},{},[750],{"type":49,"value":751},"Existing Figma or FigJam files",{"type":49,"value":753}," — if the new diagram should align with one the user already has, read it with ",{"type":43,"tag":61,"props":755,"children":757},{"className":756},[],[758],{"type":49,"value":759},"get_figjam",{"type":49,"value":761}," or ",{"type":43,"tag":61,"props":763,"children":765},{"className":764},[],[766],{"type":49,"value":767},"get_design_context",{"type":49,"value":769}," (see the ",{"type":43,"tag":61,"props":771,"children":773},{"className":772},[],[774],{"type":49,"value":775},"figma-use",{"type":49,"value":777}," and ",{"type":43,"tag":61,"props":779,"children":781},{"className":780},[],[782],{"type":49,"value":703},{"type":49,"value":784}," skills).",{"type":43,"tag":173,"props":786,"children":787},{},[788,793],{"type":43,"tag":55,"props":789,"children":790},{},[791],{"type":49,"value":792},"Other MCP servers or tools you have available",{"type":49,"value":794}," — issue trackers, docs sites, CRMs, analytics, internal wikis, design systems, database schemas, etc. If a connected tool holds the ground truth for what you're diagramming, pull from it rather than guessing.",{"type":43,"tag":173,"props":796,"children":797},{},[798,803],{"type":43,"tag":55,"props":799,"children":800},{},[801],{"type":49,"value":802},"The user themselves",{"type":49,"value":804}," — when the description is thin or ambiguous (unclear direction of flow, unclear scope, unclear which entities matter), ask one or two focused questions before generating. Examples: \"What are the 3–5 main steps?\", \"Who owns each step?\", \"What triggers the next step?\". One good question beats one wasted diagram.",{"type":43,"tag":51,"props":806,"children":807},{},[808],{"type":49,"value":809},"Don't invent edges, labels, or entities to \"round out\" a diagram. Missing information is better than hallucinated information — leave a gap and flag it to the user.",{"type":43,"tag":82,"props":811,"children":813},{"id":812},"step-5-will-the-diagram-need-more-than-mermaid-can-express",[814],{"type":49,"value":815},"Step 5: Will the diagram need more than Mermaid can express?",{"type":43,"tag":51,"props":817,"children":818},{},[819,821,826,828,833,835,839,841,846],{"type":49,"value":820},"Mermaid can't do everything. Sticky-note annotations tied to specific nodes, per-node domain coloring on ERDs, callouts with attached data — these all require composing ",{"type":43,"tag":61,"props":822,"children":824},{"className":823},[],[825],{"type":49,"value":66},{"type":49,"value":827}," with ",{"type":43,"tag":61,"props":829,"children":831},{"className":830},[],[832],{"type":49,"value":633},{"type":49,"value":834}," (via the ",{"type":43,"tag":281,"props":836,"children":837},{"href":700},[838],{"type":49,"value":703},{"type":49,"value":840}," skill). This is the ",{"type":43,"tag":55,"props":842,"children":843},{},[844],{"type":49,"value":845},"hybrid workflow",{"type":49,"value":149},{"type":43,"tag":51,"props":848,"children":849},{},[850],{"type":49,"value":851},"It's a judgment call, not a default. Deploy it when the user's ask clearly benefits — skip it when the base diagram is obviously enough. Signals that say yes: user explicitly asked for notes, colors, callouts, or \"X attached to each node\"; they shared data that maps to specific nodes; the diagram is a shareable artifact, not a thinking sketch. Signals that say no: short\u002Fself-explanatory request, small diagram, user exploring or testing.",{"type":43,"tag":51,"props":853,"children":854},{},[855,872],{"type":43,"tag":55,"props":856,"children":857},{},[858,860,865,867],{"type":49,"value":859},"If hybrid is warranted, read ",{"type":43,"tag":281,"props":861,"children":863},{"href":862},".\u002Freferences\u002Fworkflow.md",[864],{"type":49,"value":592},{"type":49,"value":866}," before calling ",{"type":43,"tag":61,"props":868,"children":870},{"className":869},[],[871],{"type":49,"value":66},{"type":49,"value":873}," — it covers the pattern, two core recipes (annotations + color-coding), communication style, and failure handling. If not, proceed directly to Step 6.",{"type":43,"tag":82,"props":875,"children":877},{"id":876},"step-6-calling-the-tool",[878],{"type":49,"value":879},"Step 6: Calling the tool",{"type":43,"tag":51,"props":881,"children":882},{},[883],{"type":49,"value":884},"Required:",{"type":43,"tag":169,"props":886,"children":887},{},[888,899],{"type":43,"tag":173,"props":889,"children":890},{},[891,897],{"type":43,"tag":61,"props":892,"children":894},{"className":893},[],[895],{"type":49,"value":896},"name",{"type":49,"value":898},": a descriptive title (shown to the user)",{"type":43,"tag":173,"props":900,"children":901},{},[902,908],{"type":43,"tag":61,"props":903,"children":905},{"className":904},[],[906],{"type":49,"value":907},"mermaidSyntax",{"type":49,"value":909},": the Mermaid source",{"type":43,"tag":51,"props":911,"children":912},{},[913],{"type":49,"value":914},"Optional:",{"type":43,"tag":169,"props":916,"children":917},{},[918,929,952],{"type":43,"tag":173,"props":919,"children":920},{},[921,927],{"type":43,"tag":61,"props":922,"children":924},{"className":923},[],[925],{"type":49,"value":926},"userIntent",{"type":49,"value":928},": a short sentence describing what the user is trying to accomplish — helps telemetry and downstream tuning",{"type":43,"tag":173,"props":930,"children":931},{},[932,938,940,945,947],{"type":43,"tag":61,"props":933,"children":935},{"className":934},[],[936],{"type":49,"value":937},"useArchitectureLayoutCode",{"type":49,"value":939},": ",{"type":43,"tag":55,"props":941,"children":942},{},[943],{"type":49,"value":944},"only for architecture diagrams",{"type":49,"value":946},"; value is specified in ",{"type":43,"tag":61,"props":948,"children":950},{"className":949},[],[951],{"type":49,"value":286},{"type":43,"tag":173,"props":953,"children":954},{},[955,961],{"type":43,"tag":61,"props":956,"children":958},{"className":957},[],[959],{"type":49,"value":960},"fileKey",{"type":49,"value":962},": if the user wants the diagram added to an existing FigJam file instead of a new one",{"type":43,"tag":51,"props":964,"children":965},{},[966,968,973,975,981,983,988],{"type":49,"value":967},"Do ",{"type":43,"tag":55,"props":969,"children":970},{},[971],{"type":49,"value":972},"not",{"type":49,"value":974}," call ",{"type":43,"tag":61,"props":976,"children":978},{"className":977},[],[979],{"type":49,"value":980},"create_new_file",{"type":49,"value":982}," before ",{"type":43,"tag":61,"props":984,"children":986},{"className":985},[],[987],{"type":49,"value":66},{"type":49,"value":989}," — the tool creates its own file.",{"type":43,"tag":82,"props":991,"children":993},{"id":992},"step-7-after-generation",[994],{"type":49,"value":995},"Step 7: After generation",{"type":43,"tag":169,"props":997,"children":998},{},[999,1004,1021],{"type":43,"tag":173,"props":1000,"children":1001},{},[1002],{"type":49,"value":1003},"The tool returns a link (or widget) the user can click to open the diagram in FigJam. Show it as a markdown link unless the client renders an inline widget.",{"type":43,"tag":173,"props":1005,"children":1006},{},[1007,1009,1014,1016,1020],{"type":49,"value":1008},"If extensions are warranted (see Step 5), compose with ",{"type":43,"tag":61,"props":1010,"children":1012},{"className":1011},[],[1013],{"type":49,"value":633},{"type":49,"value":1015}," now — the pattern and recipes are in ",{"type":43,"tag":281,"props":1017,"children":1018},{"href":862},[1019],{"type":49,"value":592},{"type":49,"value":149},{"type":43,"tag":173,"props":1022,"children":1023},{},[1024],{"type":49,"value":1025},"If the user is dissatisfied after 2 attempts at the same diagram, stop regenerating. Ask what specifically is wrong, or suggest they open it in Figma and edit manually rather than burning more tool calls.",{"type":43,"tag":96,"props":1027,"children":1029},{"id":1028},"reuse-the-same-file-when-iterating-or-adding-related-diagrams",[1030],{"type":49,"value":1031},"Reuse the same file when iterating or adding related diagrams",{"type":43,"tag":51,"props":1033,"children":1034},{},[1035,1037,1042,1044,1049],{"type":49,"value":1036},"Every call to ",{"type":43,"tag":61,"props":1038,"children":1040},{"className":1039},[],[1041],{"type":49,"value":66},{"type":49,"value":1043}," without a ",{"type":43,"tag":61,"props":1045,"children":1047},{"className":1046},[],[1048],{"type":49,"value":960},{"type":49,"value":1050}," creates a new FigJam file in the user's drafts. Regenerating 4 times = 4 draft files to clean up. Prefer reusing the existing file when:",{"type":43,"tag":169,"props":1052,"children":1053},{},[1054,1059],{"type":43,"tag":173,"props":1055,"children":1056},{},[1057],{"type":49,"value":1058},"The user is iterating on the same diagram (\"try again with…\", \"change the labels…\").",{"type":43,"tag":173,"props":1060,"children":1061},{},[1062],{"type":49,"value":1063},"The user wants a follow-up diagram that lives alongside the first (e.g. a sequence diagram next to a flowchart of the same system).",{"type":43,"tag":51,"props":1065,"children":1066},{},[1067],{"type":49,"value":1068},"How to reuse:",{"type":43,"tag":445,"props":1070,"children":1071},{},[1072,1102],{"type":43,"tag":173,"props":1073,"children":1074},{},[1075,1085,1087,1092,1094,1100],{"type":43,"tag":55,"props":1076,"children":1077},{},[1078,1080],{"type":49,"value":1079},"Pass ",{"type":43,"tag":61,"props":1081,"children":1083},{"className":1082},[],[1084],{"type":49,"value":960},{"type":49,"value":1086}," on subsequent ",{"type":43,"tag":61,"props":1088,"children":1090},{"className":1089},[],[1091],{"type":49,"value":66},{"type":49,"value":1093}," calls. Extract from a ",{"type":43,"tag":61,"props":1095,"children":1097},{"className":1096},[],[1098],{"type":49,"value":1099},"figma.com\u002Fboard\u002F{fileKey}\u002F...",{"type":49,"value":1101}," URL. The diagram is added to the existing file rather than creating a new one.",{"type":43,"tag":173,"props":1103,"children":1104},{},[1105,1107,1112,1114,1119,1121,1126,1128,1133],{"type":49,"value":1106},"If you want to replace the previous diagram rather than adding next to it, use the ",{"type":43,"tag":61,"props":1108,"children":1110},{"className":1109},[],[1111],{"type":49,"value":633},{"type":49,"value":1113}," tool (see the ",{"type":43,"tag":61,"props":1115,"children":1117},{"className":1116},[],[1118],{"type":49,"value":703},{"type":49,"value":1120}," skill) to delete the old diagram's nodes first, then call ",{"type":43,"tag":61,"props":1122,"children":1124},{"className":1123},[],[1125],{"type":49,"value":66},{"type":49,"value":1127}," with the same ",{"type":43,"tag":61,"props":1129,"children":1131},{"className":1130},[],[1132],{"type":49,"value":960},{"type":49,"value":1134},". Or leave the old diagram and place the new one beside it — readers often benefit from seeing the history of attempts.",{"type":43,"tag":51,"props":1136,"children":1137},{},[1138],{"type":49,"value":1139},"Ask the user which they prefer the first time you iterate — \"regenerate over the old one, or keep both side-by-side?\" — and remember their answer for subsequent iterations in the session.",{"items":1141,"total":1300},[1142,1160,1173,1184,1195,1203,1217,1230,1252,1261,1276,1287],{"slug":1143,"name":1143,"fn":1144,"description":1145,"org":1146,"tags":1147,"stars":26,"repoUrl":27,"updatedAt":1159},"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},[1148,1149,1152,1153,1156],{"name":24,"slug":25,"type":15},{"name":1150,"slug":1151,"type":15},"Design System","design-system",{"name":9,"slug":8,"type":15},{"name":1154,"slug":1155,"type":15},"Frontend","frontend",{"name":1157,"slug":1158,"type":15},"UI Components","ui-components","2026-07-31T05:52:30.590302",{"slug":1161,"name":1161,"fn":1162,"description":1163,"org":1164,"tags":1165,"stars":26,"repoUrl":27,"updatedAt":1172},"figma-create-new-file","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},[1166,1167,1168,1171],{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":1169,"slug":1170,"type":15},"Ideation","ideation",{"name":17,"slug":18,"type":15},"2026-04-06T18:11:46.464282",{"slug":1174,"name":1174,"fn":1175,"description":1176,"org":1177,"tags":1178,"stars":26,"repoUrl":27,"updatedAt":1183},"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},[1179,1180,1181,1182],{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":1154,"slug":1155,"type":15},{"name":1157,"slug":1158,"type":15},"2026-07-10T06:43:51.122606",{"slug":1185,"name":1185,"fn":1186,"description":1187,"org":1188,"tags":1189,"stars":26,"repoUrl":27,"updatedAt":1194},"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},[1190,1191,1192,1193],{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":1154,"slug":1155,"type":15},{"name":1157,"slug":1158,"type":15},"2026-04-06T18:11:48.952023",{"slug":4,"name":4,"fn":5,"description":6,"org":1196,"tags":1197,"stars":26,"repoUrl":27,"updatedAt":28},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1198,1199,1200,1201,1202],{"name":13,"slug":14,"type":15},{"name":24,"slug":25,"type":15},{"name":20,"slug":21,"type":15},{"name":9,"slug":8,"type":15},{"name":17,"slug":18,"type":15},{"slug":1204,"name":1204,"fn":1205,"description":1206,"org":1207,"tags":1208,"stars":26,"repoUrl":27,"updatedAt":1216},"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},[1209,1210,1211,1214,1215],{"name":24,"slug":25,"type":15},{"name":1150,"slug":1151,"type":15},{"name":1212,"slug":1213,"type":15},"Documentation","documentation",{"name":9,"slug":8,"type":15},{"name":1157,"slug":1158,"type":15},"2026-07-31T05:52:28.587088",{"slug":1218,"name":1218,"fn":1219,"description":1220,"org":1221,"tags":1222,"stars":26,"repoUrl":27,"updatedAt":1229},"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},[1223,1226,1227,1228],{"name":1224,"slug":1225,"type":15},"Animation","animation",{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":1154,"slug":1155,"type":15},"2026-06-25T07:13:13.645254",{"slug":1231,"name":1231,"fn":1232,"description":1233,"org":1234,"tags":1235,"stars":26,"repoUrl":27,"updatedAt":1251},"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},[1236,1237,1238,1239,1242,1245,1248],{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":1154,"slug":1155,"type":15},{"name":1240,"slug":1241,"type":15},"iOS","ios",{"name":1243,"slug":1244,"type":15},"Mobile","mobile",{"name":1246,"slug":1247,"type":15},"SwiftUI","swiftui",{"name":1249,"slug":1250,"type":15},"Visual Design","visual-design","2026-06-09T07:16:28.204756",{"slug":775,"name":775,"fn":1253,"description":1254,"org":1255,"tags":1256,"stars":26,"repoUrl":27,"updatedAt":1260},"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},[1257,1258,1259],{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":17,"slug":18,"type":15},"2026-07-31T05:52:29.57808",{"slug":703,"name":703,"fn":1262,"description":1263,"org":1264,"tags":1265,"stars":26,"repoUrl":27,"updatedAt":1275},"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},[1266,1269,1270,1273,1274],{"name":1267,"slug":1268,"type":15},"Collaboration","collaboration",{"name":24,"slug":25,"type":15},{"name":1271,"slug":1272,"type":15},"FigJam","figjam",{"name":9,"slug":8,"type":15},{"name":17,"slug":18,"type":15},"2026-04-28T05:43:51.600727",{"slug":1277,"name":1277,"fn":1278,"description":1279,"org":1280,"tags":1281,"stars":26,"repoUrl":27,"updatedAt":1286},"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},[1282,1283,1284,1285],{"name":1224,"slug":1225,"type":15},{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":17,"slug":18,"type":15},"2026-06-25T07:13:12.398176",{"slug":1288,"name":1288,"fn":1289,"description":1290,"org":1291,"tags":1292,"stars":26,"repoUrl":27,"updatedAt":1299},"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},[1293,1294,1295,1296],{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":17,"slug":18,"type":15},{"name":1297,"slug":1298,"type":15},"Presentations","presentations","2026-05-14T06:09:42.171824",14,{"items":1302,"total":1300},[1303,1311,1318,1325,1332,1340,1348],{"slug":1143,"name":1143,"fn":1144,"description":1145,"org":1304,"tags":1305,"stars":26,"repoUrl":27,"updatedAt":1159},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1306,1307,1308,1309,1310],{"name":24,"slug":25,"type":15},{"name":1150,"slug":1151,"type":15},{"name":9,"slug":8,"type":15},{"name":1154,"slug":1155,"type":15},{"name":1157,"slug":1158,"type":15},{"slug":1161,"name":1161,"fn":1162,"description":1163,"org":1312,"tags":1313,"stars":26,"repoUrl":27,"updatedAt":1172},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1314,1315,1316,1317],{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":1169,"slug":1170,"type":15},{"name":17,"slug":18,"type":15},{"slug":1174,"name":1174,"fn":1175,"description":1176,"org":1319,"tags":1320,"stars":26,"repoUrl":27,"updatedAt":1183},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1321,1322,1323,1324],{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":1154,"slug":1155,"type":15},{"name":1157,"slug":1158,"type":15},{"slug":1185,"name":1185,"fn":1186,"description":1187,"org":1326,"tags":1327,"stars":26,"repoUrl":27,"updatedAt":1194},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1328,1329,1330,1331],{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":1154,"slug":1155,"type":15},{"name":1157,"slug":1158,"type":15},{"slug":4,"name":4,"fn":5,"description":6,"org":1333,"tags":1334,"stars":26,"repoUrl":27,"updatedAt":28},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1335,1336,1337,1338,1339],{"name":13,"slug":14,"type":15},{"name":24,"slug":25,"type":15},{"name":20,"slug":21,"type":15},{"name":9,"slug":8,"type":15},{"name":17,"slug":18,"type":15},{"slug":1204,"name":1204,"fn":1205,"description":1206,"org":1341,"tags":1342,"stars":26,"repoUrl":27,"updatedAt":1216},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1343,1344,1345,1346,1347],{"name":24,"slug":25,"type":15},{"name":1150,"slug":1151,"type":15},{"name":1212,"slug":1213,"type":15},{"name":9,"slug":8,"type":15},{"name":1157,"slug":1158,"type":15},{"slug":1218,"name":1218,"fn":1219,"description":1220,"org":1349,"tags":1350,"stars":26,"repoUrl":27,"updatedAt":1229},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1351,1352,1353,1354],{"name":1224,"slug":1225,"type":15},{"name":24,"slug":25,"type":15},{"name":9,"slug":8,"type":15},{"name":1154,"slug":1155,"type":15}]