[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-openai-uml-and-software-architecture-visualization":3,"mdc--achvx6-key":36,"related-repo-openai-uml-and-software-architecture-visualization":792,"related-org-openai-uml-and-software-architecture-visualization":915},{"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},"uml-and-software-architecture-visualization","design and implement software architecture diagrams","Design, critique, read, write, render, and implement UML and UML-like software diagrams. Use when the user mentions UML, sequence diagrams, class diagrams, activity diagrams, state machines, use case diagrams, component diagrams, deployment diagrams, object diagrams, package diagrams, profile diagrams, timing diagrams, communication diagrams, interaction overview diagrams, composite structure diagrams, ERDs, database schema diagrams, C4, BPMN, swimlanes, flowcharts, network diagrams, application architecture diagrams, software architecture diagrams, diagram-as-code, model-as-code, XMI, UMLDI, PlantUML, Mermaid, Graphviz DOT, D2, Structurizr, DBML, diagrams.net\u002Fdraw.io, Kroki, or interactive diagram editors and explorers.",{"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},"Architecture","architecture","tag",{"name":17,"slug":18,"type":15},"System Design","system-design",{"name":20,"slug":21,"type":15},"Visualization","visualization",{"name":23,"slug":24,"type":15},"Diagrams","diagrams",3992,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fplugins","2026-06-30T19:00:57.102",null,465,[],{"repoUrl":26,"stars":25,"forks":29,"topics":32,"description":33},[],"OpenAI Plugins","https:\u002F\u002Fgithub.com\u002Fopenai\u002Fplugins\u002Ftree\u002FHEAD\u002Fplugins\u002Fbuild-web-data-visualization\u002Fskills\u002Fuml-and-software-architecture-visualization","---\nname: uml-and-software-architecture-visualization\ndescription: Design, critique, read, write, render, and implement UML and UML-like software diagrams. Use when the user mentions UML, sequence diagrams, class diagrams, activity diagrams, state machines, use case diagrams, component diagrams, deployment diagrams, object diagrams, package diagrams, profile diagrams, timing diagrams, communication diagrams, interaction overview diagrams, composite structure diagrams, ERDs, database schema diagrams, C4, BPMN, swimlanes, flowcharts, network diagrams, application architecture diagrams, software architecture diagrams, diagram-as-code, model-as-code, XMI, UMLDI, PlantUML, Mermaid, Graphviz DOT, D2, Structurizr, DBML, diagrams.net\u002Fdraw.io, Kroki, or interactive diagram editors and explorers.\n---\n\n# UML and Software Architecture Visualization\n\n## Overview\n\nUse this skill when the visualization is about system structure, behavior, process, state, data models, dependencies, architecture, or interactions rather than numeric charting alone. The job is to choose the clearest notation, source format, renderer, and interaction model for the audience.\n\nDefault assumption: use formal UML when notation precision, methodology alignment, or model interchange matters. Use a UML-like diagram such as C4, ERD, BPMN, flowchart, swimlane, dependency graph, or architecture map when that communicates the user's actual question with less ceremony.\n\nWhen the main challenge is automatic placement, crossing reduction, routing style, overlap removal, or layout stability rather than notation selection, route through `..\u002Fnode-link-and-diagram-layout\u002FSKILL.md` before locking in a renderer.\n\nFor browser or app diagrams, use `..\u002F..\u002Freferences\u002Ffoundations\u002Fmobile-first-responsive-visualization.md` so mobile portrait, optional landscape, touch, keyboard, search, and main-diagram visibility are planned before implementation.\n\nFor architecture consoles, schema explorers, state-machine inspectors, dependency maps, or other dense repeated-use diagram products, also use `..\u002F..\u002Freferences\u002Ffoundations\u002Foperational-visualization-workspaces.md` so the shell, outline, inspector, command bar, mobile panels, URL state, and pan\u002Fzoom behavior are designed as part of the diagram.\n\n## Core Workflow\n\n1. Identify the modeling job:\n   - static structure, runtime interaction, workflow, lifecycle state, deployment topology, dependency graph, database schema, architecture context, or implementation detail\n2. Identify the audience:\n   - business stakeholder, analyst, product owner, architect, developer, operator, auditor, or onboarding reader\n3. Choose formal UML or a UML-like alternative:\n   - formal UML for standard semantics, XMI, UMLDI, or tooling interchange\n   - C4 for layered software architecture communication\n   - ERD or DBML for relational schemas and data model documentation\n   - BPMN or swimlane activity diagrams for business processes and handoffs\n   - flowcharts or state machines for control flow and lifecycle logic\n   - network or dependency diagrams for topology, coupling, and impact analysis\n4. Select the diagram family and scope:\n   - one primary question per diagram\n   - one abstraction level per view unless the user explicitly needs a bridge diagram\n   - source IDs, names, stereotypes, technologies, and relationship labels preserved when available\n5. Choose the source or interchange format:\n   - XMI\u002FUMLDI for formal model exchange\n   - PlantUML, Mermaid, DOT, D2, Structurizr DSL, DBML, or BPMN XML for source-backed documentation and CI\n   - JSON graph models when building a product renderer or interactive editor\n6. Choose the layout strategy when automatic arrangement matters:\n   - route to `..\u002Fnode-link-and-diagram-layout\u002FSKILL.md` for layered, tree, force, radial, planarization, routing, overlap, and stability decisions\n   - preserve source order, port order, and grouping constraints when they are semantically meaningful\n7. Choose the renderer or editor stack:\n   - static image generation, documentation embed, notebook\u002Fscript, web component, interactive explorer, or editable diagramming product\n8. Define the normalized model contract before rendering:\n   - nodes, edges, compartments, ports, lanes, groups, hierarchy, labels, metadata, source IDs, layout hints, and validation diagnostics\n9. Plan export, accessibility, and tests:\n   - SVG\u002FPNG\u002FPDF\u002FHTML outputs, text alternatives, keyboard paths, deterministic layout fixtures, semantic validation, and visual regression where layout matters\n10. For multi-view architecture explorers, choose a calm default reading state:\n   - show one dense subdiagram at a time, especially for schemas and state machines\n   - keep side panels as compact controls and outlines, not nested cards\n   - render all relationships quietly by default, then emphasize hover and selection paths\n   - use a synced navigation tree so users can jump among topology entities, tables, states, and transitions without hunting inside the canvas\n   - prefer scrollable intrinsic canvases over shrinking node text below readable size\n   - on mobile, show a focused default subdiagram or outline plus detail path instead of stacking every control above the diagram\n   - use mobile landscape for wide schema, sequence, or dependency inspection when it improves legibility, while preserving a useful portrait entry point\n   - use compact command bars, synchronized outlines, central scrollable canvases, and inspector rails instead of equal-weight cards\n\n## Diagram Selection Defaults\n\n- Sequence diagram: message order across actors, services, or objects.\n- Communication diagram: collaboration topology when the object network matters as much as ordering.\n- Activity diagram or swimlane: workflow, branching, parallel work, ownership, and handoffs.\n- State machine: lifecycle rules, event-driven behavior, allowed transitions, and invalid states.\n- Class or object diagram: code-level structure, interfaces, relationships, snapshots, and domain object shape.\n- Component, package, deployment, or C4 diagram: architecture structure at the right abstraction level.\n- Use case diagram: actor goals and system boundary, usually early requirements or stakeholder alignment.\n- ERD, DBML, or database schema diagram: tables, relationships, keys, constraints, and schema ownership.\n- BPMN: business process execution semantics, events, gateways, pools, tasks, and process interchange.\n- Flowchart: lightweight control flow when UML activity or BPMN would be too formal.\n- Network or dependency diagram: topology, coupling, blast radius, graph traversal, and modularity.\n\n## Stack Defaults\n\n- Documentation-first static diagrams: prefer PlantUML or Mermaid, with SVG export when labels must stay crisp.\n- Formal UML exchange: use XMI plus UMLDI where diagram geometry must travel with model semantics; expect vendor-specific gaps.\n- Architecture model-as-code: prefer Structurizr DSL for C4; use C4-PlantUML or Mermaid C4 when docs integration is more important than a reusable model.\n- Database schema diagrams: prefer DBML, SQL-derived ERD tooling, Mermaid ER, or PlantUML IE\u002FER.\n- Diagram source rendering: use Mermaid, PlantUML, D2, Graphviz DOT, Structurizr DSL, DBML, BPMN XML, or Kroki when text DSL rendering is needed.\n- TypeScript or web rendering: use Mermaid for simple docs, React Flow for editable node-edge UIs, Cytoscape.js for graph analysis and larger networks, Sprotty for model-driven diagram tools, JointJS or GoJS for full-featured diagram editors, and ELK or Dagre for auto-layout.\n- Bespoke SVG\u002FD3: use only when the diagram needs custom annotation, visual polish, or product-specific composition that diagram DSLs cannot express cleanly.\n- For dense topology, ERD, or state-machine explorers, route layout choice through `..\u002Fnode-link-and-diagram-layout\u002FSKILL.md`, then prefer ELK or Dagre when adding a dependency is acceptable; if staying bespoke, implement an explicit layered layout, stable ranks, non-overlap spacing, routed edges, and focus-state filtering instead of relying on hand-placed nodes.\n\n## Reference Guide\n\n- Read `references\u002Fuml-diagram-types-and-selection.md` for formal UML diagram types, alternatives, and selection heuristics.\n- Read `..\u002Fnode-link-and-diagram-layout\u002FSKILL.md` when the main issue is node placement, crossing reduction, routing style, or overlap management.\n- Read `references\u002Fformats-and-interchange.md` before reading, writing, converting, or round-tripping diagram formats.\n- Read `references\u002Ftypescript-web-rendering.md` for browser, TypeScript, React, and interactive renderer choices.\n- Read `references\u002Finteractive-diagram-patterns.md` before designing interactive explorers or diagram editors.\n- Read `references\u002Fquality-accessibility-export-testing.md` for semantic checks, accessibility, export, and QA.\n\n## Output Expectations\n\n- State the recommended diagram type and one fallback, with the reason tied to audience and modeling job.\n- State whether the output is formal UML, UML-like, architecture model-as-code, graph visualization, or an editable diagram product.\n- Identify the source format, renderer, export path, and any required conversion or validation.\n- For generated diagrams, preserve source IDs and call out inferred relationships rather than presenting them as source truth.\n- For interactive diagrams, define selection, pan\u002Fzoom, search, filtering, drill-down, editing, layout recalculation, keyboard access, export, and source round-tripping.\n- For architecture views, keep abstraction levels consistent and label relationships with verbs or data\u002Fprotocol semantics.\n- For class and schema diagrams, control detail level so attributes, methods, constraints, and relationships do not overwhelm the primary question.\n- For ERDs and database schemas, route foreign keys in dedicated gutters or ports; never let connectors run underneath table boxes or column text.\n- Include a testing and accessibility plan when the diagram is part of a product surface or durable documentation workflow.\n- For mobile diagrams, state portrait and optional landscape behavior, touch\u002Fpan\u002Fzoom ownership, search or step-through path, keyboard-open behavior, and how controls return users to the diagram.\n- For explorer-style diagram products, state the workspace shell, navigation tree, default selection, inspector synchronization, URL state, pan\u002Fzoom\u002Freset controls, and mobile command-panel behavior.\n\n## Adjacent Skills\n\n- Use `..\u002Fvisualization-strategy-and-critique\u002FSKILL.md` when deciding whether a UML-like diagram is the right visual form.\n- Use `..\u002Fnode-link-and-diagram-layout\u002FSKILL.md` for graph-family classification, layout algorithms, routing, overlap removal, and stability.\n- Use `..\u002Ftypescript-data-visualization-engineering\u002FSKILL.md` for typed graph models, renderer contracts, and browser architecture.\n- Use `..\u002Freact-and-nextjs-data-visualization\u002FSKILL.md` for React or Next.js integration.\n- Use `..\u002Fd3-data-visualization\u002FSKILL.md` for bespoke SVG geometry, annotation, and polish.\n- Use `..\u002Faccessibility-and-inclusive-visualization\u002FSKILL.md` for text alternatives, keyboard paths, contrast, and export accessibility.\n- Use `..\u002Ftesting-data-visualizations\u002FSKILL.md` for visual regression, interaction, and export test strategy.\n- Use `..\u002Freports-pdfs-and-slide-automation\u002FSKILL.md` for PDFs, decks, and document embedding.\n- Use `..\u002F..\u002Freferences\u002Ffoundations\u002Fmobile-first-responsive-visualization.md` for mobile diagram layout, touch, keyboard, and responsive QA.\n- Use `..\u002F..\u002Freferences\u002Ffoundations\u002Foperational-visualization-workspaces.md` for architecture consoles, schema explorers, state-machine inspectors, and repeated-use diagram workspaces.\n\n## Representative Prompts\n\n- \"Choose the right UML or UML-like diagram for this system, process, or data model.\"\n- \"Read this XMI and summarize the class model.\"\n- \"Create a sequence diagram for OAuth login.\"\n- \"Make an interactive React dependency diagram.\"\n- \"Visualize my PostgreSQL schema.\"\n- \"Turn this PostgreSQL schema into an ERD or DBML diagram.\"\n- \"Which diagram should explain this checkout workflow?\"\n- \"Compare Mermaid, PlantUML, Graphviz, D2, and Structurizr for this documentation site.\"\n- \"Make a state machine diagram and test invalid transitions.\"\n- \"Design a C4 model for this application architecture.\"\n",{"data":37,"body":38},{"name":4,"description":6},{"type":39,"children":40},"root",[41,49,56,62,67,81,94,107,113,298,341,347,405,411,461,467,542,548,606,612,733,739],{"type":42,"tag":43,"props":44,"children":45},"element","h1",{"id":4},[46],{"type":47,"value":48},"text","UML and Software Architecture Visualization",{"type":42,"tag":50,"props":51,"children":53},"h2",{"id":52},"overview",[54],{"type":47,"value":55},"Overview",{"type":42,"tag":57,"props":58,"children":59},"p",{},[60],{"type":47,"value":61},"Use this skill when the visualization is about system structure, behavior, process, state, data models, dependencies, architecture, or interactions rather than numeric charting alone. The job is to choose the clearest notation, source format, renderer, and interaction model for the audience.",{"type":42,"tag":57,"props":63,"children":64},{},[65],{"type":47,"value":66},"Default assumption: use formal UML when notation precision, methodology alignment, or model interchange matters. Use a UML-like diagram such as C4, ERD, BPMN, flowchart, swimlane, dependency graph, or architecture map when that communicates the user's actual question with less ceremony.",{"type":42,"tag":57,"props":68,"children":69},{},[70,72,79],{"type":47,"value":71},"When the main challenge is automatic placement, crossing reduction, routing style, overlap removal, or layout stability rather than notation selection, route through ",{"type":42,"tag":73,"props":74,"children":76},"code",{"className":75},[],[77],{"type":47,"value":78},"..\u002Fnode-link-and-diagram-layout\u002FSKILL.md",{"type":47,"value":80}," before locking in a renderer.",{"type":42,"tag":57,"props":82,"children":83},{},[84,86,92],{"type":47,"value":85},"For browser or app diagrams, use ",{"type":42,"tag":73,"props":87,"children":89},{"className":88},[],[90],{"type":47,"value":91},"..\u002F..\u002Freferences\u002Ffoundations\u002Fmobile-first-responsive-visualization.md",{"type":47,"value":93}," so mobile portrait, optional landscape, touch, keyboard, search, and main-diagram visibility are planned before implementation.",{"type":42,"tag":57,"props":95,"children":96},{},[97,99,105],{"type":47,"value":98},"For architecture consoles, schema explorers, state-machine inspectors, dependency maps, or other dense repeated-use diagram products, also use ",{"type":42,"tag":73,"props":100,"children":102},{"className":101},[],[103],{"type":47,"value":104},"..\u002F..\u002Freferences\u002Ffoundations\u002Foperational-visualization-workspaces.md",{"type":47,"value":106}," so the shell, outline, inspector, command bar, mobile panels, URL state, and pan\u002Fzoom behavior are designed as part of the diagram.",{"type":42,"tag":50,"props":108,"children":110},{"id":109},"core-workflow",[111],{"type":47,"value":112},"Core Workflow",{"type":42,"tag":114,"props":115,"children":116},"ol",{},[117,132,145,183,206,229,254,267,280,293],{"type":42,"tag":118,"props":119,"children":120},"li",{},[121,123],{"type":47,"value":122},"Identify the modeling job:\n",{"type":42,"tag":124,"props":125,"children":126},"ul",{},[127],{"type":42,"tag":118,"props":128,"children":129},{},[130],{"type":47,"value":131},"static structure, runtime interaction, workflow, lifecycle state, deployment topology, dependency graph, database schema, architecture context, or implementation detail",{"type":42,"tag":118,"props":133,"children":134},{},[135,137],{"type":47,"value":136},"Identify the audience:\n",{"type":42,"tag":124,"props":138,"children":139},{},[140],{"type":42,"tag":118,"props":141,"children":142},{},[143],{"type":47,"value":144},"business stakeholder, analyst, product owner, architect, developer, operator, auditor, or onboarding reader",{"type":42,"tag":118,"props":146,"children":147},{},[148,150],{"type":47,"value":149},"Choose formal UML or a UML-like alternative:\n",{"type":42,"tag":124,"props":151,"children":152},{},[153,158,163,168,173,178],{"type":42,"tag":118,"props":154,"children":155},{},[156],{"type":47,"value":157},"formal UML for standard semantics, XMI, UMLDI, or tooling interchange",{"type":42,"tag":118,"props":159,"children":160},{},[161],{"type":47,"value":162},"C4 for layered software architecture communication",{"type":42,"tag":118,"props":164,"children":165},{},[166],{"type":47,"value":167},"ERD or DBML for relational schemas and data model documentation",{"type":42,"tag":118,"props":169,"children":170},{},[171],{"type":47,"value":172},"BPMN or swimlane activity diagrams for business processes and handoffs",{"type":42,"tag":118,"props":174,"children":175},{},[176],{"type":47,"value":177},"flowcharts or state machines for control flow and lifecycle logic",{"type":42,"tag":118,"props":179,"children":180},{},[181],{"type":47,"value":182},"network or dependency diagrams for topology, coupling, and impact analysis",{"type":42,"tag":118,"props":184,"children":185},{},[186,188],{"type":47,"value":187},"Select the diagram family and scope:\n",{"type":42,"tag":124,"props":189,"children":190},{},[191,196,201],{"type":42,"tag":118,"props":192,"children":193},{},[194],{"type":47,"value":195},"one primary question per diagram",{"type":42,"tag":118,"props":197,"children":198},{},[199],{"type":47,"value":200},"one abstraction level per view unless the user explicitly needs a bridge diagram",{"type":42,"tag":118,"props":202,"children":203},{},[204],{"type":47,"value":205},"source IDs, names, stereotypes, technologies, and relationship labels preserved when available",{"type":42,"tag":118,"props":207,"children":208},{},[209,211],{"type":47,"value":210},"Choose the source or interchange format:\n",{"type":42,"tag":124,"props":212,"children":213},{},[214,219,224],{"type":42,"tag":118,"props":215,"children":216},{},[217],{"type":47,"value":218},"XMI\u002FUMLDI for formal model exchange",{"type":42,"tag":118,"props":220,"children":221},{},[222],{"type":47,"value":223},"PlantUML, Mermaid, DOT, D2, Structurizr DSL, DBML, or BPMN XML for source-backed documentation and CI",{"type":42,"tag":118,"props":225,"children":226},{},[227],{"type":47,"value":228},"JSON graph models when building a product renderer or interactive editor",{"type":42,"tag":118,"props":230,"children":231},{},[232,234],{"type":47,"value":233},"Choose the layout strategy when automatic arrangement matters:\n",{"type":42,"tag":124,"props":235,"children":236},{},[237,249],{"type":42,"tag":118,"props":238,"children":239},{},[240,242,247],{"type":47,"value":241},"route to ",{"type":42,"tag":73,"props":243,"children":245},{"className":244},[],[246],{"type":47,"value":78},{"type":47,"value":248}," for layered, tree, force, radial, planarization, routing, overlap, and stability decisions",{"type":42,"tag":118,"props":250,"children":251},{},[252],{"type":47,"value":253},"preserve source order, port order, and grouping constraints when they are semantically meaningful",{"type":42,"tag":118,"props":255,"children":256},{},[257,259],{"type":47,"value":258},"Choose the renderer or editor stack:\n",{"type":42,"tag":124,"props":260,"children":261},{},[262],{"type":42,"tag":118,"props":263,"children":264},{},[265],{"type":47,"value":266},"static image generation, documentation embed, notebook\u002Fscript, web component, interactive explorer, or editable diagramming product",{"type":42,"tag":118,"props":268,"children":269},{},[270,272],{"type":47,"value":271},"Define the normalized model contract before rendering:\n",{"type":42,"tag":124,"props":273,"children":274},{},[275],{"type":42,"tag":118,"props":276,"children":277},{},[278],{"type":47,"value":279},"nodes, edges, compartments, ports, lanes, groups, hierarchy, labels, metadata, source IDs, layout hints, and validation diagnostics",{"type":42,"tag":118,"props":281,"children":282},{},[283,285],{"type":47,"value":284},"Plan export, accessibility, and tests:\n",{"type":42,"tag":124,"props":286,"children":287},{},[288],{"type":42,"tag":118,"props":289,"children":290},{},[291],{"type":47,"value":292},"SVG\u002FPNG\u002FPDF\u002FHTML outputs, text alternatives, keyboard paths, deterministic layout fixtures, semantic validation, and visual regression where layout matters",{"type":42,"tag":118,"props":294,"children":295},{},[296],{"type":47,"value":297},"For multi-view architecture explorers, choose a calm default reading state:",{"type":42,"tag":124,"props":299,"children":300},{},[301,306,311,316,321,326,331,336],{"type":42,"tag":118,"props":302,"children":303},{},[304],{"type":47,"value":305},"show one dense subdiagram at a time, especially for schemas and state machines",{"type":42,"tag":118,"props":307,"children":308},{},[309],{"type":47,"value":310},"keep side panels as compact controls and outlines, not nested cards",{"type":42,"tag":118,"props":312,"children":313},{},[314],{"type":47,"value":315},"render all relationships quietly by default, then emphasize hover and selection paths",{"type":42,"tag":118,"props":317,"children":318},{},[319],{"type":47,"value":320},"use a synced navigation tree so users can jump among topology entities, tables, states, and transitions without hunting inside the canvas",{"type":42,"tag":118,"props":322,"children":323},{},[324],{"type":47,"value":325},"prefer scrollable intrinsic canvases over shrinking node text below readable size",{"type":42,"tag":118,"props":327,"children":328},{},[329],{"type":47,"value":330},"on mobile, show a focused default subdiagram or outline plus detail path instead of stacking every control above the diagram",{"type":42,"tag":118,"props":332,"children":333},{},[334],{"type":47,"value":335},"use mobile landscape for wide schema, sequence, or dependency inspection when it improves legibility, while preserving a useful portrait entry point",{"type":42,"tag":118,"props":337,"children":338},{},[339],{"type":47,"value":340},"use compact command bars, synchronized outlines, central scrollable canvases, and inspector rails instead of equal-weight cards",{"type":42,"tag":50,"props":342,"children":344},{"id":343},"diagram-selection-defaults",[345],{"type":47,"value":346},"Diagram Selection Defaults",{"type":42,"tag":124,"props":348,"children":349},{},[350,355,360,365,370,375,380,385,390,395,400],{"type":42,"tag":118,"props":351,"children":352},{},[353],{"type":47,"value":354},"Sequence diagram: message order across actors, services, or objects.",{"type":42,"tag":118,"props":356,"children":357},{},[358],{"type":47,"value":359},"Communication diagram: collaboration topology when the object network matters as much as ordering.",{"type":42,"tag":118,"props":361,"children":362},{},[363],{"type":47,"value":364},"Activity diagram or swimlane: workflow, branching, parallel work, ownership, and handoffs.",{"type":42,"tag":118,"props":366,"children":367},{},[368],{"type":47,"value":369},"State machine: lifecycle rules, event-driven behavior, allowed transitions, and invalid states.",{"type":42,"tag":118,"props":371,"children":372},{},[373],{"type":47,"value":374},"Class or object diagram: code-level structure, interfaces, relationships, snapshots, and domain object shape.",{"type":42,"tag":118,"props":376,"children":377},{},[378],{"type":47,"value":379},"Component, package, deployment, or C4 diagram: architecture structure at the right abstraction level.",{"type":42,"tag":118,"props":381,"children":382},{},[383],{"type":47,"value":384},"Use case diagram: actor goals and system boundary, usually early requirements or stakeholder alignment.",{"type":42,"tag":118,"props":386,"children":387},{},[388],{"type":47,"value":389},"ERD, DBML, or database schema diagram: tables, relationships, keys, constraints, and schema ownership.",{"type":42,"tag":118,"props":391,"children":392},{},[393],{"type":47,"value":394},"BPMN: business process execution semantics, events, gateways, pools, tasks, and process interchange.",{"type":42,"tag":118,"props":396,"children":397},{},[398],{"type":47,"value":399},"Flowchart: lightweight control flow when UML activity or BPMN would be too formal.",{"type":42,"tag":118,"props":401,"children":402},{},[403],{"type":47,"value":404},"Network or dependency diagram: topology, coupling, blast radius, graph traversal, and modularity.",{"type":42,"tag":50,"props":406,"children":408},{"id":407},"stack-defaults",[409],{"type":47,"value":410},"Stack Defaults",{"type":42,"tag":124,"props":412,"children":413},{},[414,419,424,429,434,439,444,449],{"type":42,"tag":118,"props":415,"children":416},{},[417],{"type":47,"value":418},"Documentation-first static diagrams: prefer PlantUML or Mermaid, with SVG export when labels must stay crisp.",{"type":42,"tag":118,"props":420,"children":421},{},[422],{"type":47,"value":423},"Formal UML exchange: use XMI plus UMLDI where diagram geometry must travel with model semantics; expect vendor-specific gaps.",{"type":42,"tag":118,"props":425,"children":426},{},[427],{"type":47,"value":428},"Architecture model-as-code: prefer Structurizr DSL for C4; use C4-PlantUML or Mermaid C4 when docs integration is more important than a reusable model.",{"type":42,"tag":118,"props":430,"children":431},{},[432],{"type":47,"value":433},"Database schema diagrams: prefer DBML, SQL-derived ERD tooling, Mermaid ER, or PlantUML IE\u002FER.",{"type":42,"tag":118,"props":435,"children":436},{},[437],{"type":47,"value":438},"Diagram source rendering: use Mermaid, PlantUML, D2, Graphviz DOT, Structurizr DSL, DBML, BPMN XML, or Kroki when text DSL rendering is needed.",{"type":42,"tag":118,"props":440,"children":441},{},[442],{"type":47,"value":443},"TypeScript or web rendering: use Mermaid for simple docs, React Flow for editable node-edge UIs, Cytoscape.js for graph analysis and larger networks, Sprotty for model-driven diagram tools, JointJS or GoJS for full-featured diagram editors, and ELK or Dagre for auto-layout.",{"type":42,"tag":118,"props":445,"children":446},{},[447],{"type":47,"value":448},"Bespoke SVG\u002FD3: use only when the diagram needs custom annotation, visual polish, or product-specific composition that diagram DSLs cannot express cleanly.",{"type":42,"tag":118,"props":450,"children":451},{},[452,454,459],{"type":47,"value":453},"For dense topology, ERD, or state-machine explorers, route layout choice through ",{"type":42,"tag":73,"props":455,"children":457},{"className":456},[],[458],{"type":47,"value":78},{"type":47,"value":460},", then prefer ELK or Dagre when adding a dependency is acceptable; if staying bespoke, implement an explicit layered layout, stable ranks, non-overlap spacing, routed edges, and focus-state filtering instead of relying on hand-placed nodes.",{"type":42,"tag":50,"props":462,"children":464},{"id":463},"reference-guide",[465],{"type":47,"value":466},"Reference Guide",{"type":42,"tag":124,"props":468,"children":469},{},[470,483,494,506,518,530],{"type":42,"tag":118,"props":471,"children":472},{},[473,475,481],{"type":47,"value":474},"Read ",{"type":42,"tag":73,"props":476,"children":478},{"className":477},[],[479],{"type":47,"value":480},"references\u002Fuml-diagram-types-and-selection.md",{"type":47,"value":482}," for formal UML diagram types, alternatives, and selection heuristics.",{"type":42,"tag":118,"props":484,"children":485},{},[486,487,492],{"type":47,"value":474},{"type":42,"tag":73,"props":488,"children":490},{"className":489},[],[491],{"type":47,"value":78},{"type":47,"value":493}," when the main issue is node placement, crossing reduction, routing style, or overlap management.",{"type":42,"tag":118,"props":495,"children":496},{},[497,498,504],{"type":47,"value":474},{"type":42,"tag":73,"props":499,"children":501},{"className":500},[],[502],{"type":47,"value":503},"references\u002Fformats-and-interchange.md",{"type":47,"value":505}," before reading, writing, converting, or round-tripping diagram formats.",{"type":42,"tag":118,"props":507,"children":508},{},[509,510,516],{"type":47,"value":474},{"type":42,"tag":73,"props":511,"children":513},{"className":512},[],[514],{"type":47,"value":515},"references\u002Ftypescript-web-rendering.md",{"type":47,"value":517}," for browser, TypeScript, React, and interactive renderer choices.",{"type":42,"tag":118,"props":519,"children":520},{},[521,522,528],{"type":47,"value":474},{"type":42,"tag":73,"props":523,"children":525},{"className":524},[],[526],{"type":47,"value":527},"references\u002Finteractive-diagram-patterns.md",{"type":47,"value":529}," before designing interactive explorers or diagram editors.",{"type":42,"tag":118,"props":531,"children":532},{},[533,534,540],{"type":47,"value":474},{"type":42,"tag":73,"props":535,"children":537},{"className":536},[],[538],{"type":47,"value":539},"references\u002Fquality-accessibility-export-testing.md",{"type":47,"value":541}," for semantic checks, accessibility, export, and QA.",{"type":42,"tag":50,"props":543,"children":545},{"id":544},"output-expectations",[546],{"type":47,"value":547},"Output Expectations",{"type":42,"tag":124,"props":549,"children":550},{},[551,556,561,566,571,576,581,586,591,596,601],{"type":42,"tag":118,"props":552,"children":553},{},[554],{"type":47,"value":555},"State the recommended diagram type and one fallback, with the reason tied to audience and modeling job.",{"type":42,"tag":118,"props":557,"children":558},{},[559],{"type":47,"value":560},"State whether the output is formal UML, UML-like, architecture model-as-code, graph visualization, or an editable diagram product.",{"type":42,"tag":118,"props":562,"children":563},{},[564],{"type":47,"value":565},"Identify the source format, renderer, export path, and any required conversion or validation.",{"type":42,"tag":118,"props":567,"children":568},{},[569],{"type":47,"value":570},"For generated diagrams, preserve source IDs and call out inferred relationships rather than presenting them as source truth.",{"type":42,"tag":118,"props":572,"children":573},{},[574],{"type":47,"value":575},"For interactive diagrams, define selection, pan\u002Fzoom, search, filtering, drill-down, editing, layout recalculation, keyboard access, export, and source round-tripping.",{"type":42,"tag":118,"props":577,"children":578},{},[579],{"type":47,"value":580},"For architecture views, keep abstraction levels consistent and label relationships with verbs or data\u002Fprotocol semantics.",{"type":42,"tag":118,"props":582,"children":583},{},[584],{"type":47,"value":585},"For class and schema diagrams, control detail level so attributes, methods, constraints, and relationships do not overwhelm the primary question.",{"type":42,"tag":118,"props":587,"children":588},{},[589],{"type":47,"value":590},"For ERDs and database schemas, route foreign keys in dedicated gutters or ports; never let connectors run underneath table boxes or column text.",{"type":42,"tag":118,"props":592,"children":593},{},[594],{"type":47,"value":595},"Include a testing and accessibility plan when the diagram is part of a product surface or durable documentation workflow.",{"type":42,"tag":118,"props":597,"children":598},{},[599],{"type":47,"value":600},"For mobile diagrams, state portrait and optional landscape behavior, touch\u002Fpan\u002Fzoom ownership, search or step-through path, keyboard-open behavior, and how controls return users to the diagram.",{"type":42,"tag":118,"props":602,"children":603},{},[604],{"type":47,"value":605},"For explorer-style diagram products, state the workspace shell, navigation tree, default selection, inspector synchronization, URL state, pan\u002Fzoom\u002Freset controls, and mobile command-panel behavior.",{"type":42,"tag":50,"props":607,"children":609},{"id":608},"adjacent-skills",[610],{"type":47,"value":611},"Adjacent Skills",{"type":42,"tag":124,"props":613,"children":614},{},[615,628,639,651,663,675,687,699,711,722],{"type":42,"tag":118,"props":616,"children":617},{},[618,620,626],{"type":47,"value":619},"Use ",{"type":42,"tag":73,"props":621,"children":623},{"className":622},[],[624],{"type":47,"value":625},"..\u002Fvisualization-strategy-and-critique\u002FSKILL.md",{"type":47,"value":627}," when deciding whether a UML-like diagram is the right visual form.",{"type":42,"tag":118,"props":629,"children":630},{},[631,632,637],{"type":47,"value":619},{"type":42,"tag":73,"props":633,"children":635},{"className":634},[],[636],{"type":47,"value":78},{"type":47,"value":638}," for graph-family classification, layout algorithms, routing, overlap removal, and stability.",{"type":42,"tag":118,"props":640,"children":641},{},[642,643,649],{"type":47,"value":619},{"type":42,"tag":73,"props":644,"children":646},{"className":645},[],[647],{"type":47,"value":648},"..\u002Ftypescript-data-visualization-engineering\u002FSKILL.md",{"type":47,"value":650}," for typed graph models, renderer contracts, and browser architecture.",{"type":42,"tag":118,"props":652,"children":653},{},[654,655,661],{"type":47,"value":619},{"type":42,"tag":73,"props":656,"children":658},{"className":657},[],[659],{"type":47,"value":660},"..\u002Freact-and-nextjs-data-visualization\u002FSKILL.md",{"type":47,"value":662}," for React or Next.js integration.",{"type":42,"tag":118,"props":664,"children":665},{},[666,667,673],{"type":47,"value":619},{"type":42,"tag":73,"props":668,"children":670},{"className":669},[],[671],{"type":47,"value":672},"..\u002Fd3-data-visualization\u002FSKILL.md",{"type":47,"value":674}," for bespoke SVG geometry, annotation, and polish.",{"type":42,"tag":118,"props":676,"children":677},{},[678,679,685],{"type":47,"value":619},{"type":42,"tag":73,"props":680,"children":682},{"className":681},[],[683],{"type":47,"value":684},"..\u002Faccessibility-and-inclusive-visualization\u002FSKILL.md",{"type":47,"value":686}," for text alternatives, keyboard paths, contrast, and export accessibility.",{"type":42,"tag":118,"props":688,"children":689},{},[690,691,697],{"type":47,"value":619},{"type":42,"tag":73,"props":692,"children":694},{"className":693},[],[695],{"type":47,"value":696},"..\u002Ftesting-data-visualizations\u002FSKILL.md",{"type":47,"value":698}," for visual regression, interaction, and export test strategy.",{"type":42,"tag":118,"props":700,"children":701},{},[702,703,709],{"type":47,"value":619},{"type":42,"tag":73,"props":704,"children":706},{"className":705},[],[707],{"type":47,"value":708},"..\u002Freports-pdfs-and-slide-automation\u002FSKILL.md",{"type":47,"value":710}," for PDFs, decks, and document embedding.",{"type":42,"tag":118,"props":712,"children":713},{},[714,715,720],{"type":47,"value":619},{"type":42,"tag":73,"props":716,"children":718},{"className":717},[],[719],{"type":47,"value":91},{"type":47,"value":721}," for mobile diagram layout, touch, keyboard, and responsive QA.",{"type":42,"tag":118,"props":723,"children":724},{},[725,726,731],{"type":47,"value":619},{"type":42,"tag":73,"props":727,"children":729},{"className":728},[],[730],{"type":47,"value":104},{"type":47,"value":732}," for architecture consoles, schema explorers, state-machine inspectors, and repeated-use diagram workspaces.",{"type":42,"tag":50,"props":734,"children":736},{"id":735},"representative-prompts",[737],{"type":47,"value":738},"Representative Prompts",{"type":42,"tag":124,"props":740,"children":741},{},[742,747,752,757,762,767,772,777,782,787],{"type":42,"tag":118,"props":743,"children":744},{},[745],{"type":47,"value":746},"\"Choose the right UML or UML-like diagram for this system, process, or data model.\"",{"type":42,"tag":118,"props":748,"children":749},{},[750],{"type":47,"value":751},"\"Read this XMI and summarize the class model.\"",{"type":42,"tag":118,"props":753,"children":754},{},[755],{"type":47,"value":756},"\"Create a sequence diagram for OAuth login.\"",{"type":42,"tag":118,"props":758,"children":759},{},[760],{"type":47,"value":761},"\"Make an interactive React dependency diagram.\"",{"type":42,"tag":118,"props":763,"children":764},{},[765],{"type":47,"value":766},"\"Visualize my PostgreSQL schema.\"",{"type":42,"tag":118,"props":768,"children":769},{},[770],{"type":47,"value":771},"\"Turn this PostgreSQL schema into an ERD or DBML diagram.\"",{"type":42,"tag":118,"props":773,"children":774},{},[775],{"type":47,"value":776},"\"Which diagram should explain this checkout workflow?\"",{"type":42,"tag":118,"props":778,"children":779},{},[780],{"type":47,"value":781},"\"Compare Mermaid, PlantUML, Graphviz, D2, and Structurizr for this documentation site.\"",{"type":42,"tag":118,"props":783,"children":784},{},[785],{"type":47,"value":786},"\"Make a state machine diagram and test invalid transitions.\"",{"type":42,"tag":118,"props":788,"children":789},{},[790],{"type":47,"value":791},"\"Design a C4 model for this application architecture.\"",{"items":793,"total":914},[794,812,828,840,860,882,902],{"slug":795,"name":795,"fn":796,"description":797,"org":798,"tags":799,"stars":25,"repoUrl":26,"updatedAt":27},"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},[800,803,806,809],{"name":801,"slug":802,"type":15},"Accessibility","accessibility",{"name":804,"slug":805,"type":15},"Charts","charts",{"name":807,"slug":808,"type":15},"Data Visualization","data-visualization",{"name":810,"slug":811,"type":15},"Design","design",{"slug":813,"name":813,"fn":814,"description":815,"org":816,"tags":817,"stars":25,"repoUrl":26,"updatedAt":827},"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},[818,821,824],{"name":819,"slug":820,"type":15},"Agents","agents",{"name":822,"slug":823,"type":15},"Browser Automation","browser-automation",{"name":825,"slug":826,"type":15},"Testing","testing","2026-04-06T18:41:03.44016",{"slug":829,"name":829,"fn":830,"description":831,"org":832,"tags":833,"stars":25,"repoUrl":26,"updatedAt":839},"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},[834,835,838],{"name":822,"slug":823,"type":15},{"name":836,"slug":837,"type":15},"Local Development","local-development",{"name":825,"slug":826,"type":15},"2026-04-06T18:41:17.526867",{"slug":841,"name":841,"fn":842,"description":843,"org":844,"tags":845,"stars":25,"repoUrl":26,"updatedAt":859},"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},[846,847,850,853,856],{"name":819,"slug":820,"type":15},{"name":848,"slug":849,"type":15},"Cloudflare Workers","cloudflare-workers",{"name":851,"slug":852,"type":15},"SDK","sdk",{"name":854,"slug":855,"type":15},"Serverless","serverless",{"name":857,"slug":858,"type":15},"WebSockets","websockets","2026-04-06T18:39:51.717063",{"slug":861,"name":861,"fn":862,"description":863,"org":864,"tags":865,"stars":25,"repoUrl":26,"updatedAt":881},"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},[866,869,872,875,878],{"name":867,"slug":868,"type":15},"Frontend","frontend",{"name":870,"slug":871,"type":15},"React","react",{"name":873,"slug":874,"type":15},"shadcn\u002Fui","shadcn-ui",{"name":876,"slug":877,"type":15},"UI Components","ui-components",{"name":879,"slug":880,"type":15},"Vercel","vercel","2026-04-06T18:40:59.619419",{"slug":883,"name":883,"fn":884,"description":885,"org":886,"tags":887,"stars":25,"repoUrl":26,"updatedAt":901},"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},[888,891,894,897,900],{"name":889,"slug":890,"type":15},"AI Infrastructure","ai-infrastructure",{"name":892,"slug":893,"type":15},"Cost Optimization","cost-optimization",{"name":895,"slug":896,"type":15},"LLM","llm",{"name":898,"slug":899,"type":15},"Performance","performance",{"name":879,"slug":880,"type":15},"2026-04-06T18:40:44.377464",{"slug":903,"name":903,"fn":904,"description":905,"org":906,"tags":907,"stars":25,"repoUrl":26,"updatedAt":913},"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},[908,909,912],{"name":892,"slug":893,"type":15},{"name":910,"slug":911,"type":15},"Database","database",{"name":895,"slug":896,"type":15},"2026-04-06T18:41:08.513425",600,{"items":916,"total":1113},[917,938,961,978,994,1011,1030,1042,1056,1070,1082,1097],{"slug":918,"name":918,"fn":919,"description":920,"org":921,"tags":922,"stars":935,"repoUrl":936,"updatedAt":937},"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},[923,926,929,932],{"name":924,"slug":925,"type":15},"Documents","documents",{"name":927,"slug":928,"type":15},"Healthcare","healthcare",{"name":930,"slug":931,"type":15},"Insurance","insurance",{"name":933,"slug":934,"type":15},"Regulatory Compliance","regulatory-compliance",28169,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fopenai-agents-python","2026-04-16T05:11:39.180399",{"slug":939,"name":939,"fn":940,"description":941,"org":942,"tags":943,"stars":958,"repoUrl":959,"updatedAt":960},"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},[944,947,949,952,955],{"name":945,"slug":946,"type":15},".NET","dotnet",{"name":948,"slug":939,"type":15},"ASP.NET Core",{"name":950,"slug":951,"type":15},"Blazor","blazor",{"name":953,"slug":954,"type":15},"C#","csharp",{"name":956,"slug":957,"type":15},"Web Development","web-development",23787,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fskills","2026-04-12T05:07:02.819491",{"slug":962,"name":962,"fn":963,"description":964,"org":965,"tags":966,"stars":958,"repoUrl":959,"updatedAt":977},"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},[967,970,973,976],{"name":968,"slug":969,"type":15},"Apps SDK","apps-sdk",{"name":971,"slug":972,"type":15},"ChatGPT","chatgpt",{"name":974,"slug":975,"type":15},"MCP","mcp",{"name":9,"slug":8,"type":15},"2026-04-12T05:07:05.468097",{"slug":979,"name":979,"fn":980,"description":981,"org":982,"tags":983,"stars":958,"repoUrl":959,"updatedAt":993},"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},[984,987,990],{"name":985,"slug":986,"type":15},"API Development","api-development",{"name":988,"slug":989,"type":15},"CLI","cli",{"name":991,"slug":992,"type":15},"Codex","codex","2026-04-12T05:07:04.132762",{"slug":995,"name":995,"fn":996,"description":997,"org":998,"tags":999,"stars":958,"repoUrl":959,"updatedAt":1010},"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},[1000,1003,1006,1007],{"name":1001,"slug":1002,"type":15},"Cloudflare","cloudflare",{"name":1004,"slug":1005,"type":15},"Cloudflare Pages","cloudflare-pages",{"name":848,"slug":849,"type":15},{"name":1008,"slug":1009,"type":15},"Deployment","deployment","2026-04-12T05:07:14.275118",{"slug":1012,"name":1012,"fn":1013,"description":1014,"org":1015,"tags":1016,"stars":958,"repoUrl":959,"updatedAt":1029},"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},[1017,1020,1023,1026],{"name":1018,"slug":1019,"type":15},"Productivity","productivity",{"name":1021,"slug":1022,"type":15},"Project Management","project-management",{"name":1024,"slug":1025,"type":15},"Strategy","strategy",{"name":1027,"slug":1028,"type":15},"Task Management","task-management","2026-05-23T06:17:16.870838",{"slug":1031,"name":1031,"fn":1032,"description":1033,"org":1034,"tags":1035,"stars":958,"repoUrl":959,"updatedAt":1041},"figma","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},[1036,1037,1039,1040],{"name":810,"slug":811,"type":15},{"name":1038,"slug":1031,"type":15},"Figma",{"name":867,"slug":868,"type":15},{"name":974,"slug":975,"type":15},"2026-04-12T05:06:47.939943",{"slug":1043,"name":1043,"fn":1044,"description":1045,"org":1046,"tags":1047,"stars":958,"repoUrl":959,"updatedAt":1055},"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},[1048,1049,1052,1053,1054],{"name":810,"slug":811,"type":15},{"name":1050,"slug":1051,"type":15},"Design System","design-system",{"name":1038,"slug":1031,"type":15},{"name":867,"slug":868,"type":15},{"name":876,"slug":877,"type":15},"2026-05-10T05:59:52.971881",{"slug":1057,"name":1057,"fn":1058,"description":1059,"org":1060,"tags":1061,"stars":958,"repoUrl":959,"updatedAt":1069},"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},[1062,1063,1064,1067,1068],{"name":810,"slug":811,"type":15},{"name":1050,"slug":1051,"type":15},{"name":1065,"slug":1066,"type":15},"Documentation","documentation",{"name":1038,"slug":1031,"type":15},{"name":867,"slug":868,"type":15},"2026-05-16T06:07:47.821474",{"slug":1071,"name":1071,"fn":1072,"description":1073,"org":1074,"tags":1075,"stars":958,"repoUrl":959,"updatedAt":1081},"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},[1076,1077,1078,1079,1080],{"name":810,"slug":811,"type":15},{"name":1038,"slug":1031,"type":15},{"name":867,"slug":868,"type":15},{"name":876,"slug":877,"type":15},{"name":956,"slug":957,"type":15},"2026-05-16T06:07:40.583615",{"slug":1083,"name":1083,"fn":1084,"description":1085,"org":1086,"tags":1087,"stars":958,"repoUrl":959,"updatedAt":1096},"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},[1088,1091,1092,1095],{"name":1089,"slug":1090,"type":15},"Animation","animation",{"name":991,"slug":992,"type":15},{"name":1093,"slug":1094,"type":15},"Creative","creative",{"name":810,"slug":811,"type":15},"2026-05-02T05:31:48.48485",{"slug":1098,"name":1098,"fn":1099,"description":1100,"org":1101,"tags":1102,"stars":958,"repoUrl":959,"updatedAt":1112},"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},[1103,1104,1105,1108,1111],{"name":1093,"slug":1094,"type":15},{"name":810,"slug":811,"type":15},{"name":1106,"slug":1107,"type":15},"Image Generation","image-generation",{"name":1109,"slug":1110,"type":15},"Images","images",{"name":9,"slug":8,"type":15},"2026-05-15T06:23:24.312127",675]