[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-openai-figma-generate-diagram":3,"mdc--6ednpd-key":36,"related-repo-openai-figma-generate-diagram":1139,"related-org-openai-figma-generate-diagram":1261},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":25,"repoUrl":26,"updatedAt":27,"license":28,"forks":29,"topics":30,"repo":31,"sourceUrl":34,"mdContent":35},"figma-generate-diagram","generate 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},"openai","OpenAI","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fopenai.png",[12,16,19,22],{"name":13,"slug":14,"type":15},"Diagrams","diagrams","tag",{"name":17,"slug":18,"type":15},"Visual Design","visual-design",{"name":20,"slug":21,"type":15},"Figma","figma",{"name":23,"slug":24,"type":15},"Design","design",3992,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fplugins","2026-05-16T06:07:56.735042",null,465,[],{"repoUrl":26,"stars":25,"forks":29,"topics":32,"description":33},[],"OpenAI Plugins","https:\u002F\u002Fgithub.com\u002Fopenai\u002Fplugins\u002Ftree\u002FHEAD\u002Fplugins\u002Ffigma\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":37,"body":38},{"name":4,"description":6},{"type":39,"children":40},"root",[41,49,70,80,94,101,149,155,167,180,186,191,209,214,220,225,416,437,443,704,710,715,720,804,809,815,846,851,873,879,884,909,914,962,989,995,1025,1031,1050,1063,1068,1134],{"type":42,"tag":43,"props":44,"children":46},"element","h1",{"id":45},"generate-diagram",[47],{"type":48,"value":45},"text",{"type":42,"tag":50,"props":51,"children":52},"p",{},[53,68],{"type":42,"tag":54,"props":55,"children":56},"strong",{},[57,59,66],{"type":48,"value":58},"You MUST load this skill before every ",{"type":42,"tag":60,"props":61,"children":63},"code",{"className":62},[],[64],{"type":48,"value":65},"generate_diagram",{"type":48,"value":67}," tool call.",{"type":48,"value":69}," Skipping it causes preventable rendering failures and low-quality output.",{"type":42,"tag":50,"props":71,"children":72},{},[73,78],{"type":42,"tag":60,"props":74,"children":76},{"className":75},[],[77],{"type":48,"value":65},{"type":48,"value":79}," 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":42,"tag":81,"props":82,"children":84},"h2",{"id":83},"step-1-is-generate_diagram-the-right-tool",[85,87,92],{"type":48,"value":86},"Step 1: Is ",{"type":42,"tag":60,"props":88,"children":90},{"className":89},[],[91],{"type":48,"value":65},{"type":48,"value":93}," the right tool?",{"type":42,"tag":95,"props":96,"children":98},"h3",{"id":97},"supported-diagram-types",[99],{"type":48,"value":100},"Supported diagram types",{"type":42,"tag":50,"props":102,"children":103},{},[104,110,112,118,119,125,127,133,134,140,141,147],{"type":42,"tag":60,"props":105,"children":107},{"className":106},[],[108],{"type":48,"value":109},"flowchart",{"type":48,"value":111},", ",{"type":42,"tag":60,"props":113,"children":115},{"className":114},[],[116],{"type":48,"value":117},"sequenceDiagram",{"type":48,"value":111},{"type":42,"tag":60,"props":120,"children":122},{"className":121},[],[123],{"type":48,"value":124},"stateDiagram",{"type":48,"value":126}," \u002F ",{"type":42,"tag":60,"props":128,"children":130},{"className":129},[],[131],{"type":48,"value":132},"stateDiagram-v2",{"type":48,"value":111},{"type":42,"tag":60,"props":135,"children":137},{"className":136},[],[138],{"type":48,"value":139},"gantt",{"type":48,"value":111},{"type":42,"tag":60,"props":142,"children":144},{"className":143},[],[145],{"type":48,"value":146},"erDiagram",{"type":48,"value":148},".",{"type":42,"tag":95,"props":150,"children":152},{"id":151},"unsupported-dont-call-the-tool",[153],{"type":48,"value":154},"Unsupported — don't call the tool",{"type":42,"tag":50,"props":156,"children":157},{},[158,160,165],{"type":48,"value":159},"If the user wants any of these, tell them directly that ",{"type":42,"tag":60,"props":161,"children":163},{"className":162},[],[164],{"type":48,"value":65},{"type":48,"value":166}," doesn't support it instead of calling the tool and failing:",{"type":42,"tag":168,"props":169,"children":170},"ul",{},[171],{"type":42,"tag":172,"props":173,"children":174},"li",{},[175],{"type":42,"tag":54,"props":176,"children":177},{},[178],{"type":48,"value":179},"Pie chart, mindmap, venn diagram, class diagram, journey, timeline, quadrant, C4, git graph, requirement diagram",{"type":42,"tag":95,"props":181,"children":183},{"id":182},"when-to-push-the-user-to-edit-in-figma",[184],{"type":48,"value":185},"When to push the user to edit in Figma",{"type":42,"tag":50,"props":187,"children":188},{},[189],{"type":48,"value":190},"The tool cannot:",{"type":42,"tag":168,"props":192,"children":193},{},[194,199,204],{"type":42,"tag":172,"props":195,"children":196},{},[197],{"type":48,"value":198},"Change fonts on an existing diagram",{"type":42,"tag":172,"props":200,"children":201},{},[202],{"type":48,"value":203},"Move individual shapes",{"type":42,"tag":172,"props":205,"children":206},{},[207],{"type":48,"value":208},"Edit a diagram node-by-node after generation",{"type":42,"tag":50,"props":210,"children":211},{},[212],{"type":48,"value":213},"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":42,"tag":81,"props":215,"children":217},{"id":216},"step-2-pick-the-diagram-type",[218],{"type":48,"value":219},"Step 2: Pick the diagram type",{"type":42,"tag":50,"props":221,"children":222},{},[223],{"type":48,"value":224},"Lightweight routing — use the first match.",{"type":42,"tag":226,"props":227,"children":228},"table",{},[229,253],{"type":42,"tag":230,"props":231,"children":232},"thead",{},[233],{"type":42,"tag":234,"props":235,"children":236},"tr",{},[237,243,248],{"type":42,"tag":238,"props":239,"children":240},"th",{},[241],{"type":48,"value":242},"User wants…",{"type":42,"tag":238,"props":244,"children":245},{},[246],{"type":48,"value":247},"Type",{"type":42,"tag":238,"props":249,"children":250},{},[251],{"type":48,"value":252},"Next step",{"type":42,"tag":254,"props":255,"children":256},"tbody",{},[257,286,312,338,364,390],{"type":42,"tag":234,"props":258,"children":259},{},[260,266,274],{"type":42,"tag":261,"props":262,"children":263},"td",{},[264],{"type":48,"value":265},"Services + datastores + queues + integrations",{"type":42,"tag":261,"props":267,"children":268},{},[269],{"type":42,"tag":54,"props":270,"children":271},{},[272],{"type":48,"value":273},"Architecture flowchart",{"type":42,"tag":261,"props":275,"children":276},{},[277,279],{"type":48,"value":278},"Read ",{"type":42,"tag":280,"props":281,"children":283},"a",{"href":282},".\u002Freferences\u002Farchitecture.md",[284],{"type":48,"value":285},"references\u002Farchitecture.md",{"type":42,"tag":234,"props":287,"children":288},{},[289,294,302],{"type":42,"tag":261,"props":290,"children":291},{},[292],{"type":48,"value":293},"Decision tree, process flow, pipeline, dependency graph, user journey",{"type":42,"tag":261,"props":295,"children":296},{},[297],{"type":42,"tag":54,"props":298,"children":299},{},[300],{"type":48,"value":301},"Flowchart",{"type":42,"tag":261,"props":303,"children":304},{},[305,306],{"type":48,"value":278},{"type":42,"tag":280,"props":307,"children":309},{"href":308},".\u002Freferences\u002Fflowchart.md",[310],{"type":48,"value":311},"references\u002Fflowchart.md",{"type":42,"tag":234,"props":313,"children":314},{},[315,320,328],{"type":42,"tag":261,"props":316,"children":317},{},[318],{"type":48,"value":319},"Interactions between parties over time (API calls, auth, messaging)",{"type":42,"tag":261,"props":321,"children":322},{},[323],{"type":42,"tag":54,"props":324,"children":325},{},[326],{"type":48,"value":327},"Sequence diagram",{"type":42,"tag":261,"props":329,"children":330},{},[331,332],{"type":48,"value":278},{"type":42,"tag":280,"props":333,"children":335},{"href":334},".\u002Freferences\u002Fsequence.md",[336],{"type":48,"value":337},"references\u002Fsequence.md",{"type":42,"tag":234,"props":339,"children":340},{},[341,346,354],{"type":42,"tag":261,"props":342,"children":343},{},[344],{"type":48,"value":345},"Data model, tables, keys, cardinality",{"type":42,"tag":261,"props":347,"children":348},{},[349],{"type":42,"tag":54,"props":350,"children":351},{},[352],{"type":48,"value":353},"ER diagram",{"type":42,"tag":261,"props":355,"children":356},{},[357,358],{"type":48,"value":278},{"type":42,"tag":280,"props":359,"children":361},{"href":360},".\u002Freferences\u002Ferd.md",[362],{"type":48,"value":363},"references\u002Ferd.md",{"type":42,"tag":234,"props":365,"children":366},{},[367,372,380],{"type":42,"tag":261,"props":368,"children":369},{},[370],{"type":48,"value":371},"Named states with transitions between them",{"type":42,"tag":261,"props":373,"children":374},{},[375],{"type":42,"tag":54,"props":376,"children":377},{},[378],{"type":48,"value":379},"State diagram",{"type":42,"tag":261,"props":381,"children":382},{},[383,384],{"type":48,"value":278},{"type":42,"tag":280,"props":385,"children":387},{"href":386},".\u002Freferences\u002Fstate.md",[388],{"type":48,"value":389},"references\u002Fstate.md",{"type":42,"tag":234,"props":391,"children":392},{},[393,398,406],{"type":42,"tag":261,"props":394,"children":395},{},[396],{"type":48,"value":397},"Project schedule with dates, milestones",{"type":42,"tag":261,"props":399,"children":400},{},[401],{"type":42,"tag":54,"props":402,"children":403},{},[404],{"type":48,"value":405},"Gantt chart",{"type":42,"tag":261,"props":407,"children":408},{},[409,410],{"type":48,"value":278},{"type":42,"tag":280,"props":411,"children":413},{"href":412},".\u002Freferences\u002Fgantt.md",[414],{"type":48,"value":415},"references\u002Fgantt.md",{"type":42,"tag":50,"props":417,"children":418},{},[419,421,427,429,435],{"type":48,"value":420},"If a flowchart is requested and it describes software infrastructure (services, datastores, queues, external integrations), route to ",{"type":42,"tag":60,"props":422,"children":424},{"className":423},[],[425],{"type":48,"value":426},"architecture.md",{"type":48,"value":428}," — not ",{"type":42,"tag":60,"props":430,"children":432},{"className":431},[],[433],{"type":48,"value":434},"flowchart.md",{"type":48,"value":436},". When in doubt, ask the user.",{"type":42,"tag":81,"props":438,"children":440},{"id":439},"step-3-universal-constraints-apply-to-every-diagram-type",[441],{"type":48,"value":442},"Step 3: Universal constraints (apply to every diagram type)",{"type":42,"tag":444,"props":445,"children":446},"ol",{},[447,457,473,483,515,533,557,596,641],{"type":42,"tag":172,"props":448,"children":449},{},[450,455],{"type":42,"tag":54,"props":451,"children":452},{},[453],{"type":48,"value":454},"No emojis",{"type":48,"value":456}," in any part of the Mermaid source. The tool rejects them.",{"type":42,"tag":172,"props":458,"children":459},{},[460,471],{"type":42,"tag":54,"props":461,"children":462},{},[463,465],{"type":48,"value":464},"No ",{"type":42,"tag":60,"props":466,"children":468},{"className":467},[],[469],{"type":48,"value":470},"\\n",{"type":48,"value":472}," in labels. Use newlines only when absolutely required and only via actual line breaks (not the escape sequence).",{"type":42,"tag":172,"props":474,"children":475},{},[476,481],{"type":42,"tag":54,"props":477,"children":478},{},[479],{"type":48,"value":480},"No HTML tags",{"type":48,"value":482}," in labels.",{"type":42,"tag":172,"props":484,"children":485},{},[486,491,493,499,500,506,507,513],{"type":42,"tag":54,"props":487,"children":488},{},[489],{"type":48,"value":490},"Reserved words",{"type":48,"value":492}," — don't use ",{"type":42,"tag":60,"props":494,"children":496},{"className":495},[],[497],{"type":48,"value":498},"end",{"type":48,"value":111},{"type":42,"tag":60,"props":501,"children":503},{"className":502},[],[504],{"type":48,"value":505},"subgraph",{"type":48,"value":111},{"type":42,"tag":60,"props":508,"children":510},{"className":509},[],[511],{"type":48,"value":512},"graph",{"type":48,"value":514}," as node IDs.",{"type":42,"tag":172,"props":516,"children":517},{},[518,523,525,531],{"type":42,"tag":54,"props":519,"children":520},{},[521],{"type":48,"value":522},"Node IDs",{"type":48,"value":524},": camelCase (",{"type":42,"tag":60,"props":526,"children":528},{"className":527},[],[529],{"type":48,"value":530},"userService",{"type":48,"value":532},"), no spaces. Underscores can break edge routing in some processors.",{"type":42,"tag":172,"props":534,"children":535},{},[536,541,543,549,550,556],{"type":42,"tag":54,"props":537,"children":538},{},[539],{"type":48,"value":540},"Special characters in labels",{"type":48,"value":542}," must be wrapped in quotes: ",{"type":42,"tag":60,"props":544,"children":546},{"className":545},[],[547],{"type":48,"value":548},"A[\"Process (main)\"]",{"type":48,"value":111},{"type":42,"tag":60,"props":551,"children":553},{"className":552},[],[554],{"type":48,"value":555},"-->|\"O(1) lookup\"|",{"type":48,"value":148},{"type":42,"tag":172,"props":558,"children":559},{},[560,565,567,573,574,580,581,587,589,594],{"type":42,"tag":54,"props":561,"children":562},{},[563],{"type":48,"value":564},"Sequence diagrams",{"type":48,"value":566}," — Mermaid ",{"type":42,"tag":60,"props":568,"children":570},{"className":569},[],[571],{"type":48,"value":572},"Note over X",{"type":48,"value":126},{"type":42,"tag":60,"props":575,"children":577},{"className":576},[],[578],{"type":48,"value":579},"Note left of X",{"type":48,"value":126},{"type":42,"tag":60,"props":582,"children":584},{"className":583},[],[585],{"type":48,"value":586},"Note right of X",{"type":48,"value":588}," 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":42,"tag":280,"props":590,"children":592},{"href":591},"references\u002Fworkflow.md",[593],{"type":48,"value":591},{"type":48,"value":595},").",{"type":42,"tag":172,"props":597,"children":598},{},[599,604,606,612,613,619,621,625,627,633,635,639],{"type":42,"tag":54,"props":600,"children":601},{},[602],{"type":48,"value":603},"Gantt charts",{"type":48,"value":605}," — ",{"type":42,"tag":60,"props":607,"children":609},{"className":608},[],[610],{"type":48,"value":611},"classDef",{"type":48,"value":111},{"type":42,"tag":60,"props":614,"children":616},{"className":615},[],[617],{"type":48,"value":618},"class",{"type":48,"value":620},", 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":42,"tag":280,"props":622,"children":623},{"href":591},[624],{"type":48,"value":591},{"type":48,"value":626},") — or, for diagrams that fundamentally need styling, build the timeline directly with ",{"type":42,"tag":60,"props":628,"children":630},{"className":629},[],[631],{"type":48,"value":632},"use_figma",{"type":48,"value":634}," instead (see ",{"type":42,"tag":280,"props":636,"children":637},{"href":415},[638],{"type":48,"value":415},{"type":48,"value":640}," §11).",{"type":42,"tag":172,"props":642,"children":643},{},[644,656,658,663,665,671,673,679,681,687,689,695,697,703],{"type":42,"tag":54,"props":645,"children":646},{},[647,649,654],{"type":48,"value":648},"Use FigJam-only APIs in any ",{"type":42,"tag":60,"props":650,"children":652},{"className":651},[],[653],{"type":48,"value":632},{"type":48,"value":655}," extension.",{"type":48,"value":657}," ",{"type":42,"tag":60,"props":659,"children":661},{"className":660},[],[662],{"type":48,"value":65},{"type":48,"value":664}," output lands in a FigJam file (",{"type":42,"tag":60,"props":666,"children":668},{"className":667},[],[669],{"type":48,"value":670},"figma.com\u002Fboard\u002F...",{"type":48,"value":672},"), so hybrid extensions must stick to FigJam-supported APIs. Do NOT call ",{"type":42,"tag":60,"props":674,"children":676},{"className":675},[],[677],{"type":48,"value":678},"figma.createPage()",{"type":48,"value":680}," — it's Design-only (",{"type":42,"tag":60,"props":682,"children":684},{"className":683},[],[685],{"type":48,"value":686},"figma.com\u002Fdesign\u002F...",{"type":48,"value":688},") and throws ",{"type":42,"tag":60,"props":690,"children":692},{"className":691},[],[693],{"type":48,"value":694},"TypeError: figma.createPage no such property 'createPage' on the figma global object",{"type":48,"value":696}," in FigJam. Organize content with FigJam sections instead (see ",{"type":42,"tag":280,"props":698,"children":700},{"href":699},"..\u002Ffigma-use-figjam\u002FSKILL.md",[701],{"type":48,"value":702},"figma-use-figjam",{"type":48,"value":595},{"type":42,"tag":81,"props":705,"children":707},{"id":706},"step-4-garbage-in-garbage-out",[708],{"type":48,"value":709},"Step 4: Garbage in, garbage out",{"type":42,"tag":50,"props":711,"children":712},{},[713],{"type":48,"value":714},"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":42,"tag":50,"props":716,"children":717},{},[718],{"type":48,"value":719},"Depending on what's available, useful sources of context include:",{"type":42,"tag":168,"props":721,"children":722},{},[723,733,743,784,794],{"type":42,"tag":172,"props":724,"children":725},{},[726,731],{"type":42,"tag":54,"props":727,"children":728},{},[729],{"type":48,"value":730},"Source code",{"type":48,"value":732}," — 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":42,"tag":172,"props":734,"children":735},{},[736,741],{"type":42,"tag":54,"props":737,"children":738},{},[739],{"type":48,"value":740},"User-provided documents",{"type":48,"value":742}," — 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":42,"tag":172,"props":744,"children":745},{},[746,751,753,759,761,767,769,775,777,782],{"type":42,"tag":54,"props":747,"children":748},{},[749],{"type":48,"value":750},"Existing Figma or FigJam files",{"type":48,"value":752}," — if the new diagram should align with one the user already has, read it with ",{"type":42,"tag":60,"props":754,"children":756},{"className":755},[],[757],{"type":48,"value":758},"get_figjam",{"type":48,"value":760}," or ",{"type":42,"tag":60,"props":762,"children":764},{"className":763},[],[765],{"type":48,"value":766},"get_design_context",{"type":48,"value":768}," (see the ",{"type":42,"tag":60,"props":770,"children":772},{"className":771},[],[773],{"type":48,"value":774},"figma-use",{"type":48,"value":776}," and ",{"type":42,"tag":60,"props":778,"children":780},{"className":779},[],[781],{"type":48,"value":702},{"type":48,"value":783}," skills).",{"type":42,"tag":172,"props":785,"children":786},{},[787,792],{"type":42,"tag":54,"props":788,"children":789},{},[790],{"type":48,"value":791},"Other MCP servers or tools you have available",{"type":48,"value":793}," — 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":42,"tag":172,"props":795,"children":796},{},[797,802],{"type":42,"tag":54,"props":798,"children":799},{},[800],{"type":48,"value":801},"The user themselves",{"type":48,"value":803}," — 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":42,"tag":50,"props":805,"children":806},{},[807],{"type":48,"value":808},"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":42,"tag":81,"props":810,"children":812},{"id":811},"step-5-will-the-diagram-need-more-than-mermaid-can-express",[813],{"type":48,"value":814},"Step 5: Will the diagram need more than Mermaid can express?",{"type":42,"tag":50,"props":816,"children":817},{},[818,820,825,827,832,834,838,840,845],{"type":48,"value":819},"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":42,"tag":60,"props":821,"children":823},{"className":822},[],[824],{"type":48,"value":65},{"type":48,"value":826}," with ",{"type":42,"tag":60,"props":828,"children":830},{"className":829},[],[831],{"type":48,"value":632},{"type":48,"value":833}," (via the ",{"type":42,"tag":280,"props":835,"children":836},{"href":699},[837],{"type":48,"value":702},{"type":48,"value":839}," skill). This is the ",{"type":42,"tag":54,"props":841,"children":842},{},[843],{"type":48,"value":844},"hybrid workflow",{"type":48,"value":148},{"type":42,"tag":50,"props":847,"children":848},{},[849],{"type":48,"value":850},"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":42,"tag":50,"props":852,"children":853},{},[854,871],{"type":42,"tag":54,"props":855,"children":856},{},[857,859,864,866],{"type":48,"value":858},"If hybrid is warranted, read ",{"type":42,"tag":280,"props":860,"children":862},{"href":861},".\u002Freferences\u002Fworkflow.md",[863],{"type":48,"value":591},{"type":48,"value":865}," before calling ",{"type":42,"tag":60,"props":867,"children":869},{"className":868},[],[870],{"type":48,"value":65},{"type":48,"value":872}," — it covers the pattern, two core recipes (annotations + color-coding), communication style, and failure handling. If not, proceed directly to Step 6.",{"type":42,"tag":81,"props":874,"children":876},{"id":875},"step-6-calling-the-tool",[877],{"type":48,"value":878},"Step 6: Calling the tool",{"type":42,"tag":50,"props":880,"children":881},{},[882],{"type":48,"value":883},"Required:",{"type":42,"tag":168,"props":885,"children":886},{},[887,898],{"type":42,"tag":172,"props":888,"children":889},{},[890,896],{"type":42,"tag":60,"props":891,"children":893},{"className":892},[],[894],{"type":48,"value":895},"name",{"type":48,"value":897},": a descriptive title (shown to the user)",{"type":42,"tag":172,"props":899,"children":900},{},[901,907],{"type":42,"tag":60,"props":902,"children":904},{"className":903},[],[905],{"type":48,"value":906},"mermaidSyntax",{"type":48,"value":908},": the Mermaid source",{"type":42,"tag":50,"props":910,"children":911},{},[912],{"type":48,"value":913},"Optional:",{"type":42,"tag":168,"props":915,"children":916},{},[917,928,951],{"type":42,"tag":172,"props":918,"children":919},{},[920,926],{"type":42,"tag":60,"props":921,"children":923},{"className":922},[],[924],{"type":48,"value":925},"userIntent",{"type":48,"value":927},": a short sentence describing what the user is trying to accomplish — helps telemetry and downstream tuning",{"type":42,"tag":172,"props":929,"children":930},{},[931,937,939,944,946],{"type":42,"tag":60,"props":932,"children":934},{"className":933},[],[935],{"type":48,"value":936},"useArchitectureLayoutCode",{"type":48,"value":938},": ",{"type":42,"tag":54,"props":940,"children":941},{},[942],{"type":48,"value":943},"only for architecture diagrams",{"type":48,"value":945},"; value is specified in ",{"type":42,"tag":60,"props":947,"children":949},{"className":948},[],[950],{"type":48,"value":285},{"type":42,"tag":172,"props":952,"children":953},{},[954,960],{"type":42,"tag":60,"props":955,"children":957},{"className":956},[],[958],{"type":48,"value":959},"fileKey",{"type":48,"value":961},": if the user wants the diagram added to an existing FigJam file instead of a new one",{"type":42,"tag":50,"props":963,"children":964},{},[965,967,972,974,980,982,987],{"type":48,"value":966},"Do ",{"type":42,"tag":54,"props":968,"children":969},{},[970],{"type":48,"value":971},"not",{"type":48,"value":973}," call ",{"type":42,"tag":60,"props":975,"children":977},{"className":976},[],[978],{"type":48,"value":979},"create_new_file",{"type":48,"value":981}," before ",{"type":42,"tag":60,"props":983,"children":985},{"className":984},[],[986],{"type":48,"value":65},{"type":48,"value":988}," — the tool creates its own file.",{"type":42,"tag":81,"props":990,"children":992},{"id":991},"step-7-after-generation",[993],{"type":48,"value":994},"Step 7: After generation",{"type":42,"tag":168,"props":996,"children":997},{},[998,1003,1020],{"type":42,"tag":172,"props":999,"children":1000},{},[1001],{"type":48,"value":1002},"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":42,"tag":172,"props":1004,"children":1005},{},[1006,1008,1013,1015,1019],{"type":48,"value":1007},"If extensions are warranted (see Step 5), compose with ",{"type":42,"tag":60,"props":1009,"children":1011},{"className":1010},[],[1012],{"type":48,"value":632},{"type":48,"value":1014}," now — the pattern and recipes are in ",{"type":42,"tag":280,"props":1016,"children":1017},{"href":861},[1018],{"type":48,"value":591},{"type":48,"value":148},{"type":42,"tag":172,"props":1021,"children":1022},{},[1023],{"type":48,"value":1024},"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":42,"tag":95,"props":1026,"children":1028},{"id":1027},"reuse-the-same-file-when-iterating-or-adding-related-diagrams",[1029],{"type":48,"value":1030},"Reuse the same file when iterating or adding related diagrams",{"type":42,"tag":50,"props":1032,"children":1033},{},[1034,1036,1041,1043,1048],{"type":48,"value":1035},"Every call to ",{"type":42,"tag":60,"props":1037,"children":1039},{"className":1038},[],[1040],{"type":48,"value":65},{"type":48,"value":1042}," without a ",{"type":42,"tag":60,"props":1044,"children":1046},{"className":1045},[],[1047],{"type":48,"value":959},{"type":48,"value":1049}," 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":42,"tag":168,"props":1051,"children":1052},{},[1053,1058],{"type":42,"tag":172,"props":1054,"children":1055},{},[1056],{"type":48,"value":1057},"The user is iterating on the same diagram (\"try again with…\", \"change the labels…\").",{"type":42,"tag":172,"props":1059,"children":1060},{},[1061],{"type":48,"value":1062},"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":42,"tag":50,"props":1064,"children":1065},{},[1066],{"type":48,"value":1067},"How to reuse:",{"type":42,"tag":444,"props":1069,"children":1070},{},[1071,1101],{"type":42,"tag":172,"props":1072,"children":1073},{},[1074,1084,1086,1091,1093,1099],{"type":42,"tag":54,"props":1075,"children":1076},{},[1077,1079],{"type":48,"value":1078},"Pass ",{"type":42,"tag":60,"props":1080,"children":1082},{"className":1081},[],[1083],{"type":48,"value":959},{"type":48,"value":1085}," on subsequent ",{"type":42,"tag":60,"props":1087,"children":1089},{"className":1088},[],[1090],{"type":48,"value":65},{"type":48,"value":1092}," calls. Extract from a ",{"type":42,"tag":60,"props":1094,"children":1096},{"className":1095},[],[1097],{"type":48,"value":1098},"figma.com\u002Fboard\u002F{fileKey}\u002F...",{"type":48,"value":1100}," URL. The diagram is added to the existing file rather than creating a new one.",{"type":42,"tag":172,"props":1102,"children":1103},{},[1104,1106,1111,1113,1118,1120,1125,1127,1132],{"type":48,"value":1105},"If you want to replace the previous diagram rather than adding next to it, use the ",{"type":42,"tag":60,"props":1107,"children":1109},{"className":1108},[],[1110],{"type":48,"value":632},{"type":48,"value":1112}," tool (see the ",{"type":42,"tag":60,"props":1114,"children":1116},{"className":1115},[],[1117],{"type":48,"value":702},{"type":48,"value":1119}," skill) to delete the old diagram's nodes first, then call ",{"type":42,"tag":60,"props":1121,"children":1123},{"className":1122},[],[1124],{"type":48,"value":65},{"type":48,"value":1126}," with the same ",{"type":42,"tag":60,"props":1128,"children":1130},{"className":1129},[],[1131],{"type":48,"value":959},{"type":48,"value":1133},". Or leave the old diagram and place the new one beside it — readers often benefit from seeing the history of attempts.",{"type":42,"tag":50,"props":1135,"children":1136},{},[1137],{"type":48,"value":1138},"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":1140,"total":1260},[1141,1158,1174,1186,1206,1228,1248],{"slug":1142,"name":1142,"fn":1143,"description":1144,"org":1145,"tags":1146,"stars":25,"repoUrl":26,"updatedAt":1157},"accessibility-and-inclusive-visualization","make data visualizations accessible","Make data visualizations accessible and inclusive. Use when the user needs chart or diagram accessibility guidance, text alternatives for complex visuals, color and contrast review, keyboard support, reduced-motion behavior for animation or parallax, or an accessibility QA workflow for exported figures, UML-like diagrams, and dashboards.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1147,1150,1153,1156],{"name":1148,"slug":1149,"type":15},"Accessibility","accessibility",{"name":1151,"slug":1152,"type":15},"Charts","charts",{"name":1154,"slug":1155,"type":15},"Data Visualization","data-visualization",{"name":23,"slug":24,"type":15},"2026-06-30T19:00:57.102",{"slug":1159,"name":1159,"fn":1160,"description":1161,"org":1162,"tags":1163,"stars":25,"repoUrl":26,"updatedAt":1173},"agent-browser","automate browser interactions for agents","Browser automation CLI for AI agents. Use when the user needs to interact with websites, verify dev server output, test web apps, navigate pages, fill forms, click buttons, take screenshots, extract data, or automate any browser task. Also triggers when a dev server starts so you can verify it visually.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1164,1167,1170],{"name":1165,"slug":1166,"type":15},"Agents","agents",{"name":1168,"slug":1169,"type":15},"Browser Automation","browser-automation",{"name":1171,"slug":1172,"type":15},"Testing","testing","2026-04-06T18:41:03.44016",{"slug":1175,"name":1175,"fn":1176,"description":1177,"org":1178,"tags":1179,"stars":25,"repoUrl":26,"updatedAt":1185},"agent-browser-verify","verify dev server output with automated browser","Automated browser verification for dev servers. Triggers when a dev server starts to run a visual gut-check with agent-browser — verifies the page loads, checks for console errors, validates key UI elements, and reports pass\u002Ffail before continuing.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1180,1181,1184],{"name":1168,"slug":1169,"type":15},{"name":1182,"slug":1183,"type":15},"Local Development","local-development",{"name":1171,"slug":1172,"type":15},"2026-04-06T18:41:17.526867",{"slug":1187,"name":1187,"fn":1188,"description":1189,"org":1190,"tags":1191,"stars":25,"repoUrl":26,"updatedAt":1205},"agents-sdk","build AI agents on Cloudflare Workers","Build AI agents on Cloudflare Workers using the Agents SDK. Load when creating stateful agents, durable workflows, real-time WebSocket apps, scheduled tasks, MCP servers, or chat applications. Covers Agent class, state management, callable RPC, Workflows integration, and React hooks. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1192,1193,1196,1199,1202],{"name":1165,"slug":1166,"type":15},{"name":1194,"slug":1195,"type":15},"Cloudflare Workers","cloudflare-workers",{"name":1197,"slug":1198,"type":15},"SDK","sdk",{"name":1200,"slug":1201,"type":15},"Serverless","serverless",{"name":1203,"slug":1204,"type":15},"WebSockets","websockets","2026-04-06T18:39:51.717063",{"slug":1207,"name":1207,"fn":1208,"description":1209,"org":1210,"tags":1211,"stars":25,"repoUrl":26,"updatedAt":1227},"ai-elements","build chat UIs with AI Elements","AI Elements component library guidance — pre-built React components for AI interfaces built on shadcn\u002Fui. Use when building chat UIs, message displays, tool call rendering, streaming responses, reasoning panels, or any AI-native interface with the AI SDK.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1212,1215,1218,1221,1224],{"name":1213,"slug":1214,"type":15},"Frontend","frontend",{"name":1216,"slug":1217,"type":15},"React","react",{"name":1219,"slug":1220,"type":15},"shadcn\u002Fui","shadcn-ui",{"name":1222,"slug":1223,"type":15},"UI Components","ui-components",{"name":1225,"slug":1226,"type":15},"Vercel","vercel","2026-04-06T18:40:59.619419",{"slug":1229,"name":1229,"fn":1230,"description":1231,"org":1232,"tags":1233,"stars":25,"repoUrl":26,"updatedAt":1247},"ai-gateway","configure Vercel AI Gateway","Vercel AI Gateway expert guidance. Use when configuring model routing, provider failover, cost tracking, or managing multiple AI providers through a unified API.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1234,1237,1240,1243,1246],{"name":1235,"slug":1236,"type":15},"AI Infrastructure","ai-infrastructure",{"name":1238,"slug":1239,"type":15},"Cost Optimization","cost-optimization",{"name":1241,"slug":1242,"type":15},"LLM","llm",{"name":1244,"slug":1245,"type":15},"Performance","performance",{"name":1225,"slug":1226,"type":15},"2026-04-06T18:40:44.377464",{"slug":1249,"name":1249,"fn":1250,"description":1251,"org":1252,"tags":1253,"stars":25,"repoUrl":26,"updatedAt":1259},"ai-generation-persistence","implement persistence patterns for AI generations","AI generation persistence patterns — unique IDs, addressable URLs, database storage, and cost tracking for every LLM generation",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1254,1255,1258],{"name":1238,"slug":1239,"type":15},{"name":1256,"slug":1257,"type":15},"Database","database",{"name":1241,"slug":1242,"type":15},"2026-04-06T18:41:08.513425",600,{"items":1262,"total":1457},[1263,1284,1307,1324,1340,1357,1376,1386,1400,1414,1426,1441],{"slug":1264,"name":1264,"fn":1265,"description":1266,"org":1267,"tags":1268,"stars":1281,"repoUrl":1282,"updatedAt":1283},"prior-auth-packet-builder","build healthcare prior authorization packets","Build a concise prior authorization packet from local case files and payer policy docs.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1269,1272,1275,1278],{"name":1270,"slug":1271,"type":15},"Documents","documents",{"name":1273,"slug":1274,"type":15},"Healthcare","healthcare",{"name":1276,"slug":1277,"type":15},"Insurance","insurance",{"name":1279,"slug":1280,"type":15},"Regulatory Compliance","regulatory-compliance",28169,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fopenai-agents-python","2026-04-16T05:11:39.180399",{"slug":1285,"name":1285,"fn":1286,"description":1287,"org":1288,"tags":1289,"stars":1304,"repoUrl":1305,"updatedAt":1306},"aspnet-core","build ASP.NET Core web applications","Build, review, refactor, or architect ASP.NET Core web applications using current official guidance for .NET web development. Use when working on Blazor Web Apps, Razor Pages, MVC, Minimal APIs, controller-based Web APIs, SignalR, gRPC, middleware, dependency injection, configuration, authentication, authorization, testing, performance, deployment, or ASP.NET Core upgrades.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1290,1293,1295,1298,1301],{"name":1291,"slug":1292,"type":15},".NET","dotnet",{"name":1294,"slug":1285,"type":15},"ASP.NET Core",{"name":1296,"slug":1297,"type":15},"Blazor","blazor",{"name":1299,"slug":1300,"type":15},"C#","csharp",{"name":1302,"slug":1303,"type":15},"Web Development","web-development",23787,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fskills","2026-04-12T05:07:02.819491",{"slug":1308,"name":1308,"fn":1309,"description":1310,"org":1311,"tags":1312,"stars":1304,"repoUrl":1305,"updatedAt":1323},"chatgpt-apps","build ChatGPT Apps SDK applications","Build, scaffold, refactor, and troubleshoot ChatGPT Apps SDK applications that combine an MCP server and widget UI. Use when Codex needs to design tools, register UI resources, wire the MCP Apps bridge or ChatGPT compatibility APIs, apply Apps SDK metadata or CSP or domain settings, or produce a docs-aligned project scaffold. Prefer a docs-first workflow by invoking the openai-docs skill or OpenAI developer docs MCP tools before generating code.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1313,1316,1319,1322],{"name":1314,"slug":1315,"type":15},"Apps SDK","apps-sdk",{"name":1317,"slug":1318,"type":15},"ChatGPT","chatgpt",{"name":1320,"slug":1321,"type":15},"MCP","mcp",{"name":9,"slug":8,"type":15},"2026-04-12T05:07:05.468097",{"slug":1325,"name":1325,"fn":1326,"description":1327,"org":1328,"tags":1329,"stars":1304,"repoUrl":1305,"updatedAt":1339},"cli-creator","build CLIs from API docs","Build a composable CLI for Codex from API docs, an OpenAPI spec, existing curl examples, an SDK, a web app, an admin tool, or a local script. Use when the user wants Codex to create a command-line tool that can run from any repo, expose composable read\u002Fwrite commands, return stable JSON, manage auth, and pair with a companion skill.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1330,1333,1336],{"name":1331,"slug":1332,"type":15},"API Development","api-development",{"name":1334,"slug":1335,"type":15},"CLI","cli",{"name":1337,"slug":1338,"type":15},"Codex","codex","2026-04-12T05:07:04.132762",{"slug":1341,"name":1341,"fn":1342,"description":1343,"org":1344,"tags":1345,"stars":1304,"repoUrl":1305,"updatedAt":1356},"cloudflare-deploy","deploy projects to Cloudflare","Deploy applications and infrastructure to Cloudflare using Workers, Pages, and related platform services. Use when the user asks to deploy, host, publish, or set up a project on Cloudflare.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1346,1349,1352,1353],{"name":1347,"slug":1348,"type":15},"Cloudflare","cloudflare",{"name":1350,"slug":1351,"type":15},"Cloudflare Pages","cloudflare-pages",{"name":1194,"slug":1195,"type":15},{"name":1354,"slug":1355,"type":15},"Deployment","deployment","2026-04-12T05:07:14.275118",{"slug":1358,"name":1358,"fn":1359,"description":1360,"org":1361,"tags":1362,"stars":1304,"repoUrl":1305,"updatedAt":1375},"define-goal","define and set measurable project goals","Help the user define a concrete, measurable goal before starting work, especially when they ask to use the goal tool, create a goal, set an objective, clarify success criteria, or turn a fuzzy intention into a quantitative outcome. Use this skill for goal creation and goal refinement only; it does not manage durable snapshots, decision logs, or long-running execution artifacts.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1363,1366,1369,1372],{"name":1364,"slug":1365,"type":15},"Productivity","productivity",{"name":1367,"slug":1368,"type":15},"Project Management","project-management",{"name":1370,"slug":1371,"type":15},"Strategy","strategy",{"name":1373,"slug":1374,"type":15},"Task Management","task-management","2026-05-23T06:17:16.870838",{"slug":21,"name":21,"fn":1377,"description":1378,"org":1379,"tags":1380,"stars":1304,"repoUrl":1305,"updatedAt":1385},"translate Figma designs into code","Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1381,1382,1383,1384],{"name":23,"slug":24,"type":15},{"name":20,"slug":21,"type":15},{"name":1213,"slug":1214,"type":15},{"name":1320,"slug":1321,"type":15},"2026-04-12T05:06:47.939943",{"slug":1387,"name":1387,"fn":1388,"description":1389,"org":1390,"tags":1391,"stars":1304,"repoUrl":1305,"updatedAt":1399},"figma-code-connect-components","connect Figma designs to code components","Connects Figma design components to code components using Code Connect mapping tools. Use when user says \"code connect\", \"connect this component to code\", \"map this component\", \"link component to code\", \"create code connect mapping\", or wants to establish mappings between Figma designs and code implementations. For canvas writes via `use_figma`, use `figma-use`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1392,1393,1396,1397,1398],{"name":23,"slug":24,"type":15},{"name":1394,"slug":1395,"type":15},"Design System","design-system",{"name":20,"slug":21,"type":15},{"name":1213,"slug":1214,"type":15},{"name":1222,"slug":1223,"type":15},"2026-05-10T05:59:52.971881",{"slug":1401,"name":1401,"fn":1402,"description":1403,"org":1404,"tags":1405,"stars":1304,"repoUrl":1305,"updatedAt":1413},"figma-create-design-system-rules","generate design system rules from Figma","Generates custom design system rules for the user's codebase. Use when user says \"create design system rules\", \"generate rules for my project\", \"set up design rules\", \"customize design system guidelines\", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1406,1407,1408,1411,1412],{"name":23,"slug":24,"type":15},{"name":1394,"slug":1395,"type":15},{"name":1409,"slug":1410,"type":15},"Documentation","documentation",{"name":20,"slug":21,"type":15},{"name":1213,"slug":1214,"type":15},"2026-05-16T06:07:47.821474",{"slug":1415,"name":1415,"fn":1416,"description":1417,"org":1418,"tags":1419,"stars":1304,"repoUrl":1305,"updatedAt":1425},"figma-implement-design","translate Figma designs into application code","Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions \"implement design\", \"generate code\", \"implement component\", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1420,1421,1422,1423,1424],{"name":23,"slug":24,"type":15},{"name":20,"slug":21,"type":15},{"name":1213,"slug":1214,"type":15},{"name":1222,"slug":1223,"type":15},{"name":1302,"slug":1303,"type":15},"2026-05-16T06:07:40.583615",{"slug":1427,"name":1427,"fn":1428,"description":1429,"org":1430,"tags":1431,"stars":1304,"repoUrl":1305,"updatedAt":1440},"hatch-pet","create animated pets for Codex","Create, repair, validate, visually QA, and package Codex-compatible animated pets and pet spritesheets from character art, generated images, company or prospect brand cues, or visual references. Use when a user wants a lightweight-worker Codex pet workflow, a non-pixel custom pet style, a prospect or company mascot pet, or a full 8x9 animated pet atlas with transparent unused cells, QA contact sheets, and pet.json packaging. This skill composes the installed $imagegen system skill for visual generation and uses bundled scripts for deterministic spritesheet assembly.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1432,1435,1436,1439],{"name":1433,"slug":1434,"type":15},"Animation","animation",{"name":1337,"slug":1338,"type":15},{"name":1437,"slug":1438,"type":15},"Creative","creative",{"name":23,"slug":24,"type":15},"2026-05-02T05:31:48.48485",{"slug":1442,"name":1442,"fn":1443,"description":1444,"org":1445,"tags":1446,"stars":1304,"repoUrl":1305,"updatedAt":1456},"imagegen","generate and edit raster images","Generate or edit raster images when the task benefits from AI-created bitmap visuals such as photos, illustrations, textures, sprites, mockups, or transparent-background cutouts. Use when Codex should create a brand-new image, transform an existing image, or derive visual variants from references, and the output should be a bitmap asset rather than repo-native code or vector. Do not use when the task is better handled by editing existing SVG\u002Fvector\u002Fcode-native assets, extending an established icon or logo system, or building the visual directly in HTML\u002FCSS\u002Fcanvas.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1447,1448,1449,1452,1455],{"name":1437,"slug":1438,"type":15},{"name":23,"slug":24,"type":15},{"name":1450,"slug":1451,"type":15},"Image Generation","image-generation",{"name":1453,"slug":1454,"type":15},"Images","images",{"name":9,"slug":8,"type":15},"2026-05-15T06:23:24.312127",675]