[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M77MWJ9CYX70FJS8MBMJ67A3":3,"skill-same:01M77MWJ9CYX70FJS8MBMJ67A3":46},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":24,"commitSha":25,"skillDirectory":26,"forksCount":27,"repositoryHtmlUrl":28,"repositoryHomepageUrl":6,"ownerHtmlUrl":29,"ownerBlogUrl":30,"ownerDescription":6,"updatedAt":31,"install":32,"resources":45},"01M77MWJ9CYX70FJS8MBMJ67A3","mcp-create-adaptive-cards",null,"Skill converted from mcp-create-adaptive-cards.prompt.md","Reihantt6\u002Fsns-myagent","Reihantt6","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F219822095?v=4","01M77KK94PV8B7C2D9XWXNS8DJ","Mohamad Reihan tegar prasetya","01M77KK958QFMTHYXGXFV7KZ79",2,"MIT","https:\u002F\u002Fgithub.com\u002FReihantt6\u002Fsns-myagent\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fmcp-create-adaptive-cards\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: mcp-create-adaptive-cards\ndescription: 'Skill converted from mcp-create-adaptive-cards.prompt.md'\n---\n\n````prompt\n---\nmode: 'agent'\ntools: ['changes', 'search\u002Fcodebase', 'edit\u002FeditFiles', 'problems']\ndescription: 'Add Adaptive Card response templates to MCP-based API plugins for visual data presentation in Microsoft 365 Copilot'\nmodel: 'gpt-4.1'\ntags: [mcp, adaptive-cards, m365-copilot, api-plugin, response-templates]\n---\n\n# Create Adaptive Cards for MCP Plugins\n\nAdd Adaptive Card response templates to MCP-based API plugins to enhance how data is presented visually in Microsoft 365 Copilot.\n\n## Adaptive Card Types\n\n### Static Response Templates\nUse when API always returns items of the same type and format doesn't change often.\n\nDefine in `response_semantics.static_template` in ai-plugin.json:\n\n```json\n{\n  \"functions\": [\n    {\n      \"name\": \"GetBudgets\",\n      \"description\": \"Returns budget details including name and available funds\",\n      \"capabilities\": {\n        \"response_semantics\": {\n          \"data_path\": \"$\",\n          \"properties\": {\n            \"title\": \"$.name\",\n            \"subtitle\": \"$.availableFunds\"\n          },\n          \"static_template\": {\n            \"type\": \"AdaptiveCard\",\n            \"$schema\": \"http:\u002F\u002Fadaptivecards.io\u002Fschemas\u002Fadaptive-card.json\",\n            \"version\": \"1.5\",\n            \"body\": [\n              {\n                \"type\": \"Container\",\n                \"$data\": \"${$root}\",\n                \"items\": [\n                  {\n                    \"type\": \"TextBlock\",\n                    \"text\": \"Name: ${if(name, name, 'N\u002FA')}\",\n                    \"wrap\": true\n                  },\n                  {\n                    \"type\": \"TextBlock\",\n                    \"text\": \"Available funds: ${if(availableFunds, formatNumber(availableFunds, 2), 'N\u002FA')}\",\n                    \"wrap\": true\n                  }\n                ]\n              }\n            ]\n          }\n        }\n      }\n    }\n  ]\n}\n```\n\n### Dynamic Response Templates\nUse when API returns multiple types and each item needs a different template.\n\n**ai-plugin.json configuration:**\n```json\n{\n  \"name\": \"GetTransactions\",\n  \"description\": \"Returns transaction details with dynamic templates\",\n  \"capabilities\": {\n    \"response_semantics\": {\n      \"data_path\": \"$.transactions\",\n      \"properties\": {\n        \"template_selector\": \"$.displayTemplate\"\n      }\n    }\n  }\n}\n```\n\n**API Response with Embedded Templates:**\n```json\n{\n  \"transactions\": [\n    {\n      \"budgetName\": \"Fourth Coffee lobby renovation\",\n      \"amount\": -2000,\n      \"description\": \"Property survey for permit application\",\n      \"expenseCategory\": \"permits\",\n      \"displayTemplate\": \"$.templates.debit\"\n    },\n    {\n      \"budgetName\": \"Fourth Coffee lobby renovation\",\n      \"amount\": 5000,\n      \"description\": \"Additional funds to cover cost overruns\",\n      \"expenseCategory\": null,\n      \"displayTemplate\": \"$.templates.credit\"\n    }\n  ],\n  \"templates\": {\n    \"debit\": {\n      \"type\": \"AdaptiveCard\",\n      \"version\": \"1.5\",\n      \"body\": [\n        {\n          \"type\": \"TextBlock\",\n          \"size\": \"medium\",\n          \"weight\": \"bolder\",\n          \"color\": \"attention\",\n          \"text\": \"Debit\"\n        },\n        {\n          \"type\": \"FactSet\",\n          \"facts\": [\n            {\n              \"title\": \"Budget\",\n              \"value\": \"${budgetName}\"\n            },\n            {\n              \"title\": \"Amount\",\n              \"value\": \"${formatNumber(amount, 2)}\"\n            },\n            {\n              \"title\": \"Category\",\n              \"value\": \"${if(expenseCategory, expenseCategory, 'N\u002FA')}\"\n            },\n            {\n              \"title\": \"Description\",\n              \"value\": \"${if(description, description, 'N\u002FA')}\"\n            }\n          ]\n        }\n      ],\n      \"$schema\": \"http:\u002F\u002Fadaptivecards.io\u002Fschemas\u002Fadaptive-card.json\"\n    },\n    \"credit\": {\n      \"type\": \"AdaptiveCard\",\n      \"version\": \"1.5\",\n      \"body\": [\n        {\n          \"type\": \"TextBlock\",\n          \"size\": \"medium\",\n          \"weight\": \"bolder\",\n          \"color\": \"good\",\n          \"text\": \"Credit\"\n        },\n        {\n          \"type\": \"FactSet\",\n          \"facts\": [\n            {\n              \"title\": \"Budget\",\n              \"value\": \"${budgetName}\"\n            },\n            {\n              \"title\": \"Amount\",\n              \"value\": \"${formatNumber(amount, 2)}\"\n            },\n            {\n              \"title\": \"Description\",\n              \"value\": \"${if(description, description, 'N\u002FA')}\"\n            }\n          ]\n        }\n      ],\n      \"$schema\": \"http:\u002F\u002Fadaptivecards.io\u002Fschemas\u002Fadaptive-card.json\"\n    }\n  }\n}\n```\n\n### Combined Static and Dynamic Templates\nUse static template as default when item doesn't have template_selector or when value doesn't resolve.\n\n```json\n{\n  \"capabilities\": {\n    \"response_semantics\": {\n      \"data_path\": \"$.items\",\n      \"properties\": {\n        \"title\": \"$.name\",\n        \"template_selector\": \"$.templateId\"\n      },\n      \"static_template\": {\n        \"type\": \"AdaptiveCard\",\n        \"version\": \"1.5\",\n        \"body\": [\n          {\n            \"type\": \"TextBlock\",\n            \"text\": \"Default: ${name}\",\n            \"wrap\": true\n          }\n        ]\n      }\n    }\n  }\n}\n```\n\n## Response Semantics Properties\n\n### data_path\nJSONPath query indicating where data resides in API response:\n```json\n\"data_path\": \"$\"           \u002F\u002F Root of response\n\"data_path\": \"$.results\"   \u002F\u002F In results property\n\"data_path\": \"$.data.items\"\u002F\u002F Nested path\n```\n\n### properties\nMap response fields for Copilot citations:\n```json\n\"properties\": {\n  \"title\": \"$.name\",            \u002F\u002F Citation title\n  \"subtitle\": \"$.description\",  \u002F\u002F Citation subtitle\n  \"url\": \"$.link\"               \u002F\u002F Citation link\n}\n```\n\n### template_selector\nProperty on each item indicating which template to use:\n```json\n\"template_selector\": \"$.displayTemplate\"\n```\n\n## Adaptive Card Template Language\n\n### Conditional Rendering\n```json\n{\n  \"type\": \"TextBlock\",\n  \"text\": \"${if(field, field, 'N\u002FA')}\"  \u002F\u002F Show field or 'N\u002FA'\n}\n```\n\n### Number Formatting\n```json\n{\n  \"type\": \"TextBlock\",\n  \"text\": \"${formatNumber(amount, 2)}\"  \u002F\u002F Two decimal places\n}\n```\n\n### Data Binding\n```json\n{\n  \"type\": \"Container\",\n  \"$data\": \"${$root}\",  \u002F\u002F Break to root context\n  \"items\": [ ... ]\n}\n```\n\n### Conditional Display\n```json\n{\n  \"type\": \"Image\",\n  \"url\": \"${imageUrl}\",\n  \"$when\": \"${imageUrl != null}\"  \u002F\u002F Only show if imageUrl exists\n}\n```\n\n## Card Elements\n\n### TextBlock\n```json\n{\n  \"type\": \"TextBlock\",\n  \"text\": \"Text content\",\n  \"size\": \"medium\",      \u002F\u002F small, default, medium, large, extraLarge\n  \"weight\": \"bolder\",    \u002F\u002F lighter, default, bolder\n  \"color\": \"attention\",  \u002F\u002F default, dark, light, accent, good, warning, attention\n  \"wrap\": true\n}\n```\n\n### FactSet\n```json\n{\n  \"type\": \"FactSet\",\n  \"facts\": [\n    {\n      \"title\": \"Label\",\n      \"value\": \"Value\"\n    }\n  ]\n}\n```\n\n### Image\n```json\n{\n  \"type\": \"Image\",\n  \"url\": \"https:\u002F\u002Fexample.com\u002Fimage.png\",\n  \"size\": \"medium\",  \u002F\u002F auto, stretch, small, medium, large\n  \"style\": \"default\" \u002F\u002F default, person\n}\n```\n\n### Container\n```json\n{\n  \"type\": \"Container\",\n  \"$data\": \"${items}\",  \u002F\u002F Iterate over array\n  \"items\": [\n    {\n      \"type\": \"TextBlock\",\n      \"text\": \"${name}\"\n    }\n  ]\n}\n```\n\n### ColumnSet\n```json\n{\n  \"type\": \"ColumnSet\",\n  \"columns\": [\n    {\n      \"type\": \"Column\",\n      \"width\": \"auto\",\n      \"items\": [ ... ]\n    },\n    {\n      \"type\": \"Column\",\n      \"width\": \"stretch\",\n      \"items\": [ ... ]\n    }\n  ]\n}\n```\n\n### Actions\n```json\n{\n  \"type\": \"Action.OpenUrl\",\n  \"title\": \"View Details\",\n  \"url\": \"https:\u002F\u002Fexample.com\u002Fitem\u002F${id}\"\n}\n```\n\n## Responsive Design Best Practices\n\n### Single-Column Layouts\n- Use single columns for narrow viewports\n- Avoid multi-column layouts when possible\n- Ensure cards work at minimum viewport width\n\n### Flexible Widths\n- Don't assign fixed widths to elements\n- Use \"auto\" or \"stretch\" for width properties\n- Allow elements to resize with viewport\n- Fixed widths OK for icons\u002Favatars only\n\n### Text and Images\n- Avoid placing text and images in same row\n- Exception: Small icons or avatars\n- Use \"wrap\": true for text content\n- Test at various viewport widths\n\n### Test Across Hubs\nValidate cards in:\n- Teams (desktop and mobile)\n- Word\n- PowerPoint\n- Various viewport widths (contract\u002Fexpand UI)\n\n## Complete Example\n\n**ai-plugin.json:**\n```json\n{\n  \"functions\": [\n    {\n      \"name\": \"SearchProjects\",\n      \"description\": \"Search for projects with status and details\",\n      \"capabilities\": {\n        \"response_semantics\": {\n          \"data_path\": \"$.projects\",\n          \"properties\": {\n            \"title\": \"$.name\",\n            \"subtitle\": \"$.status\",\n            \"url\": \"$.projectUrl\"\n          },\n          \"static_template\": {\n            \"type\": \"AdaptiveCard\",\n            \"$schema\": \"http:\u002F\u002Fadaptivecards.io\u002Fschemas\u002Fadaptive-card.json\",\n            \"version\": \"1.5\",\n            \"body\": [\n              {\n                \"type\": \"Container\",\n                \"$data\": \"${$root}\",\n                \"items\": [\n                  {\n                    \"type\": \"TextBlock\",\n                    \"size\": \"medium\",\n                    \"weight\": \"bolder\",\n                    \"text\": \"${if(name, name, 'Untitled Project')}\",\n                    \"wrap\": true\n                  },\n                  {\n                    \"type\": \"FactSet\",\n                    \"facts\": [\n                      {\n                        \"title\": \"Status\",\n                        \"value\": \"${status}\"\n                      },\n                      {\n                        \"title\": \"Owner\",\n                        \"value\": \"${if(owner, owner, 'Unassigned')}\"\n                      },\n                      {\n                        \"title\": \"Due Date\",\n                        \"value\": \"${if(dueDate, dueDate, 'Not set')}\"\n                      },\n                      {\n                        \"title\": \"Budget\",\n                        \"value\": \"${if(budget, formatNumber(budget, 2), 'N\u002FA')}\"\n                      }\n                    ]\n                  },\n                  {\n                    \"type\": \"TextBlock\",\n                    \"text\": \"${if(description, description, 'No description')}\",\n                    \"wrap\": true,\n                    \"separator\": true\n                  }\n                ]\n              }\n            ],\n            \"actions\": [\n              {\n                \"type\": \"Action.OpenUrl\",\n                \"title\": \"View Project\",\n                \"url\": \"${projectUrl}\"\n              }\n            ]\n          }\n        }\n      }\n    }\n  ]\n}\n```\n\n## Workflow\n\nAsk the user:\n1. What type of data does the API return?\n2. Are all items the same type (static) or different types (dynamic)?\n3. What fields should appear in the card?\n4. Should there be actions (e.g., \"View Details\")?\n5. Are there multiple states or categories requiring different templates?\n\nThen generate:\n- Appropriate response_semantics configuration\n- Static template, dynamic templates, or both\n- Proper data binding with conditional rendering\n- Responsive single-column layout\n- Test scenarios for validation\n\n## Resources\n\n- [Adaptive Card Designer](https:\u002F\u002Fadaptivecards.microsoft.com\u002Fdesigner) - Visual design tool\n- [Adaptive Card Schema](https:\u002F\u002Fadaptivecards.io\u002Fschemas\u002Fadaptive-card.json) - Full schema reference\n- [Template Language](https:\u002F\u002Flearn.microsoft.com\u002Fen-us\u002Fadaptive-cards\u002Ftemplating\u002Flanguage) - Binding syntax guide\n- [JSONPath](https:\u002F\u002Fwww.rfc-editor.org\u002Frfc\u002Frfc9535) - Path query syntax\n\n## Common Patterns\n\n### List with Images\n```json\n{\n  \"type\": \"Container\",\n  \"$data\": \"${items}\",\n  \"items\": [\n    {\n      \"type\": \"ColumnSet\",\n      \"columns\": [\n        {\n          \"type\": \"Column\",\n          \"width\": \"auto\",\n          \"items\": [\n            {\n              \"type\": \"Image\",\n              \"url\": \"${thumbnailUrl}\",\n              \"size\": \"small\",\n              \"$when\": \"${thumbnailUrl != null}\"\n            }\n          ]\n        },\n        {\n          \"type\": \"Column\",\n          \"width\": \"stretch\",\n          \"items\": [\n            {\n              \"type\": \"TextBlock\",\n              \"text\": \"${title}\",\n              \"weight\": \"bolder\",\n              \"wrap\": true\n            }\n          ]\n        }\n      ]\n    }\n  ]\n}\n```\n\n### Status Indicators\n```json\n{\n  \"type\": \"TextBlock\",\n  \"text\": \"${status}\",\n  \"color\": \"${if(status == 'Completed', 'good', if(status == 'In Progress', 'attention', 'default'))}\"\n}\n```\n\n### Currency Formatting\n```json\n{\n  \"type\": \"TextBlock\",\n  \"text\": \"$${formatNumber(amount, 2)}\"\n}\n```\n\n````\n","````prompt\n---\nmode: 'agent'\ntools: ['changes', 'search\u002Fcodebase', 'edit\u002FeditFiles', 'problems']\ndescription: 'Add Adaptive Card response templates to MCP-based API plugins for visual data presentation in Microsoft 365 Copilot'\nmodel: 'gpt-4.1'\ntags: [mcp, adaptive-cards, m365-copilot, api-plugin, response-templates]\n---\n\n# Create Adaptive Cards for MCP Plugins\n\nAdd Adaptive Card response templates to MCP-based API plugins to enhance how data is presented visually in Microsoft 365 Copilot.\n\n## Adaptive Card Types\n\n### Static Response Templates\nUse when API always returns items of the same type and format doesn't change often.\n\nDefine in `response_semantics.static_template` in ai-plugin.json:\n\n```json\n{\n  \"functions\": [\n    {\n      \"name\": \"GetBudgets\",\n      \"description\": \"Returns budget details including name and available funds\",\n      \"capabilities\": {\n        \"response_semantics\": {\n          \"data_path\": \"$\",\n          \"properties\": {\n            \"title\": \"$.name\",\n            \"subtitle\": \"$.availableFunds\"\n          },\n          \"static_template\": {\n            \"type\": \"AdaptiveCard\",\n            \"$schema\": \"http:\u002F\u002Fadaptivecards.io\u002Fschemas\u002Fadaptive-card.json\",\n            \"version\": \"1.5\",\n            \"body\": [\n              {\n                \"type\": \"Container\",\n                \"$data\": \"${$root}\",\n                \"items\": [\n                  {\n                    \"type\": \"TextBlock\",\n                    \"text\": \"Name: ${if(name, name, 'N\u002FA')}\",\n                    \"wrap\": true\n                  },\n                  {\n                    \"type\": \"TextBlock\",\n                    \"text\": \"Available funds: ${if(availableFunds, formatNumber(availableFunds, 2), 'N\u002FA')}\",\n                    \"wrap\": true\n                  }\n                ]\n              }\n            ]\n          }\n        }\n      }\n    }\n  ]\n}\n```\n\n### Dynamic Response Templates\nUse when API returns multiple types and each item needs a different template.\n\n**ai-plugin.json configuration:**\n```json\n{\n  \"name\": \"GetTransactions\",\n  \"description\": \"Returns transaction details with dynamic templates\",\n  \"capabilities\": {\n    \"response_semantics\": {\n      \"data_path\": \"$.transactions\",\n      \"properties\": {\n        \"template_selector\": \"$.displayTemplate\"\n      }\n    }\n  }\n}\n```\n\n**API Response with Embedded Templates:**\n```json\n{\n  \"transactions\": [\n    {\n      \"budgetName\": \"Fourth Coffee lobby renovation\",\n      \"amount\": -2000,\n      \"description\": \"Property survey for permit application\",\n      \"expenseCategory\": \"permits\",\n      \"displayTemplate\": \"$.templates.debit\"\n    },\n    {\n      \"budgetName\": \"Fourth Coffee lobby renovation\",\n      \"amount\": 5000,\n      \"description\": \"Additional funds to cover cost overruns\",\n      \"expenseCategory\": null,\n      \"displayTemplate\": \"$.templates.credit\"\n    }\n  ],\n  \"templates\": {\n    \"debit\": {\n      \"type\": \"AdaptiveCard\",\n      \"version\": \"1.5\",\n      \"body\": [\n        {\n          \"type\": \"TextBlock\",\n          \"size\": \"medium\",\n          \"weight\": \"bolder\",\n          \"color\": \"attention\",\n          \"text\": \"Debit\"\n        },\n        {\n          \"type\": \"FactSet\",\n          \"facts\": [\n            {\n              \"title\": \"Budget\",\n              \"value\": \"${budgetName}\"\n            },\n            {\n              \"title\": \"Amount\",\n              \"value\": \"${formatNumber(amount, 2)}\"\n            },\n            {\n              \"title\": \"Category\",\n              \"value\": \"${if(expenseCategory, expenseCategory, 'N\u002FA')}\"\n            },\n            {\n              \"title\": \"Description\",\n              \"value\": \"${if(description, description, 'N\u002FA')}\"\n            }\n          ]\n        }\n      ],\n      \"$schema\": \"http:\u002F\u002Fadaptivecards.io\u002Fschemas\u002Fadaptive-card.json\"\n    },\n    \"credit\": {\n      \"type\": \"AdaptiveCard\",\n      \"version\": \"1.5\",\n      \"body\": [\n        {\n          \"type\": \"TextBlock\",\n          \"size\": \"medium\",\n          \"weight\": \"bolder\",\n          \"color\": \"good\",\n          \"text\": \"Credit\"\n        },\n        {\n          \"type\": \"FactSet\",\n          \"facts\": [\n            {\n              \"title\": \"Budget\",\n              \"value\": \"${budgetName}\"\n            },\n            {\n              \"title\": \"Amount\",\n              \"value\": \"${formatNumber(amount, 2)}\"\n            },\n            {\n              \"title\": \"Description\",\n              \"value\": \"${if(description, description, 'N\u002FA')}\"\n            }\n          ]\n        }\n      ],\n      \"$schema\": \"http:\u002F\u002Fadaptivecards.io\u002Fschemas\u002Fadaptive-card.json\"\n    }\n  }\n}\n```\n\n### Combined Static and Dynamic Templates\nUse static template as default when item doesn't have template_selector or when value doesn't resolve.\n\n```json\n{\n  \"capabilities\": {\n    \"response_semantics\": {\n      \"data_path\": \"$.items\",\n      \"properties\": {\n        \"title\": \"$.name\",\n        \"template_selector\": \"$.templateId\"\n      },\n      \"static_template\": {\n        \"type\": \"AdaptiveCard\",\n        \"version\": \"1.5\",\n        \"body\": [\n          {\n            \"type\": \"TextBlock\",\n            \"text\": \"Default: ${name}\",\n            \"wrap\": true\n          }\n        ]\n      }\n    }\n  }\n}\n```\n\n## Response Semantics Properties\n\n### data_path\nJSONPath query indicating where data resides in API response:\n```json\n\"data_path\": \"$\"           \u002F\u002F Root of response\n\"data_path\": \"$.results\"   \u002F\u002F In results property\n\"data_path\": \"$.data.items\"\u002F\u002F Nested path\n```\n\n### properties\nMap response fields for Copilot citations:\n```json\n\"properties\": {\n  \"title\": \"$.name\",            \u002F\u002F Citation title\n  \"subtitle\": \"$.description\",  \u002F\u002F Citation subtitle\n  \"url\": \"$.link\"               \u002F\u002F Citation link\n}\n```\n\n### template_selector\nProperty on each item indicating which template to use:\n```json\n\"template_selector\": \"$.displayTemplate\"\n```\n\n## Adaptive Card Template Language\n\n### Conditional Rendering\n```json\n{\n  \"type\": \"TextBlock\",\n  \"text\": \"${if(field, field, 'N\u002FA')}\"  \u002F\u002F Show field or 'N\u002FA'\n}\n```\n\n### Number Formatting\n```json\n{\n  \"type\": \"TextBlock\",\n  \"text\": \"${formatNumber(amount, 2)}\"  \u002F\u002F Two decimal places\n}\n```\n\n### Data Binding\n```json\n{\n  \"type\": \"Container\",\n  \"$data\": \"${$root}\",  \u002F\u002F Break to root context\n  \"items\": [ ... ]\n}\n```\n\n### Conditional Display\n```json\n{\n  \"type\": \"Image\",\n  \"url\": \"${imageUrl}\",\n  \"$when\": \"${imageUrl != null}\"  \u002F\u002F Only show if imageUrl exists\n}\n```\n\n## Card Elements\n\n### TextBlock\n```json\n{\n  \"type\": \"TextBlock\",\n  \"text\": \"Text content\",\n  \"size\": \"medium\",      \u002F\u002F small, default, medium, large, extraLarge\n  \"weight\": \"bolder\",    \u002F\u002F lighter, default, bolder\n  \"color\": \"attention\",  \u002F\u002F default, dark, light, accent, good, warning, attention\n  \"wrap\": true\n}\n```\n\n### FactSet\n```json\n{\n  \"type\": \"FactSet\",\n  \"facts\": [\n    {\n      \"title\": \"Label\",\n      \"value\": \"Value\"\n    }\n  ]\n}\n```\n\n### Image\n```json\n{\n  \"type\": \"Image\",\n  \"url\": \"https:\u002F\u002Fexample.com\u002Fimage.png\",\n  \"size\": \"medium\",  \u002F\u002F auto, stretch, small, medium, large\n  \"style\": \"default\" \u002F\u002F default, person\n}\n```\n\n### Container\n```json\n{\n  \"type\": \"Container\",\n  \"$data\": \"${items}\",  \u002F\u002F Iterate over array\n  \"items\": [\n    {\n      \"type\": \"TextBlock\",\n      \"text\": \"${name}\"\n    }\n  ]\n}\n```\n\n### ColumnSet\n```json\n{\n  \"type\": \"ColumnSet\",\n  \"columns\": [\n    {\n      \"type\": \"Column\",\n      \"width\": \"auto\",\n      \"items\": [ ... ]\n    },\n    {\n      \"type\": \"Column\",\n      \"width\": \"stretch\",\n      \"items\": [ ... ]\n    }\n  ]\n}\n```\n\n### Actions\n```json\n{\n  \"type\": \"Action.OpenUrl\",\n  \"title\": \"View Details\",\n  \"url\": \"https:\u002F\u002Fexample.com\u002Fitem\u002F${id}\"\n}\n```\n\n## Responsive Design Best Practices\n\n### Single-Column Layouts\n- Use single columns for narrow viewports\n- Avoid multi-column layouts when possible\n- Ensure cards work at minimum viewport width\n\n### Flexible Widths\n- Don't assign fixed widths to elements\n- Use \"auto\" or \"stretch\" for width properties\n- Allow elements to resize with viewport\n- Fixed widths OK for icons\u002Favatars only\n\n### Text and Images\n- Avoid placing text and images in same row\n- Exception: Small icons or avatars\n- Use \"wrap\": true for text content\n- Test at various viewport widths\n\n### Test Across Hubs\nValidate cards in:\n- Teams (desktop and mobile)\n- Word\n- PowerPoint\n- Various viewport widths (contract\u002Fexpand UI)\n\n## Complete Example\n\n**ai-plugin.json:**\n```json\n{\n  \"functions\": [\n    {\n      \"name\": \"SearchProjects\",\n      \"description\": \"Search for projects with status and details\",\n      \"capabilities\": {\n        \"response_semantics\": {\n          \"data_path\": \"$.projects\",\n          \"properties\": {\n            \"title\": \"$.name\",\n            \"subtitle\": \"$.status\",\n            \"url\": \"$.projectUrl\"\n          },\n          \"static_template\": {\n            \"type\": \"AdaptiveCard\",\n            \"$schema\": \"http:\u002F\u002Fadaptivecards.io\u002Fschemas\u002Fadaptive-card.json\",\n            \"version\": \"1.5\",\n            \"body\": [\n              {\n                \"type\": \"Container\",\n                \"$data\": \"${$root}\",\n                \"items\": [\n                  {\n                    \"type\": \"TextBlock\",\n                    \"size\": \"medium\",\n                    \"weight\": \"bolder\",\n                    \"text\": \"${if(name, name, 'Untitled Project')}\",\n                    \"wrap\": true\n                  },\n                  {\n                    \"type\": \"FactSet\",\n                    \"facts\": [\n                      {\n                        \"title\": \"Status\",\n                        \"value\": \"${status}\"\n                      },\n                      {\n                        \"title\": \"Owner\",\n                        \"value\": \"${if(owner, owner, 'Unassigned')}\"\n                      },\n                      {\n                        \"title\": \"Due Date\",\n                        \"value\": \"${if(dueDate, dueDate, 'Not set')}\"\n                      },\n                      {\n                        \"title\": \"Budget\",\n                        \"value\": \"${if(budget, formatNumber(budget, 2), 'N\u002FA')}\"\n                      }\n                    ]\n                  },\n                  {\n                    \"type\": \"TextBlock\",\n                    \"text\": \"${if(description, description, 'No description')}\",\n                    \"wrap\": true,\n                    \"separator\": true\n                  }\n                ]\n              }\n            ],\n            \"actions\": [\n              {\n                \"type\": \"Action.OpenUrl\",\n                \"title\": \"View Project\",\n                \"url\": \"${projectUrl}\"\n              }\n            ]\n          }\n        }\n      }\n    }\n  ]\n}\n```\n\n## Workflow\n\nAsk the user:\n1. What type of data does the API return?\n2. Are all items the same type (static) or different types (dynamic)?\n3. What fields should appear in the card?\n4. Should there be actions (e.g., \"View Details\")?\n5. Are there multiple states or categories requiring different templates?\n\nThen generate:\n- Appropriate response_semantics configuration\n- Static template, dynamic templates, or both\n- Proper data binding with conditional rendering\n- Responsive single-column layout\n- Test scenarios for validation\n\n## Resources\n\n- [Adaptive Card Designer](https:\u002F\u002Fadaptivecards.microsoft.com\u002Fdesigner) - Visual design tool\n- [Adaptive Card Schema](https:\u002F\u002Fadaptivecards.io\u002Fschemas\u002Fadaptive-card.json) - Full schema reference\n- [Template Language](https:\u002F\u002Flearn.microsoft.com\u002Fen-us\u002Fadaptive-cards\u002Ftemplating\u002Flanguage) - Binding syntax guide\n- [JSONPath](https:\u002F\u002Fwww.rfc-editor.org\u002Frfc\u002Frfc9535) - Path query syntax\n\n## Common Patterns\n\n### List with Images\n```json\n{\n  \"type\": \"Container\",\n  \"$data\": \"${items}\",\n  \"items\": [\n    {\n      \"type\": \"ColumnSet\",\n      \"columns\": [\n        {\n          \"type\": \"Column\",\n          \"width\": \"auto\",\n          \"items\": [\n            {\n              \"type\": \"Image\",\n              \"url\": \"${thumbnailUrl}\",\n              \"size\": \"small\",\n              \"$when\": \"${thumbnailUrl != null}\"\n            }\n          ]\n        },\n        {\n          \"type\": \"Column\",\n          \"width\": \"stretch\",\n          \"items\": [\n            {\n              \"type\": \"TextBlock\",\n              \"text\": \"${title}\",\n              \"weight\": \"bolder\",\n              \"wrap\": true\n            }\n          ]\n        }\n      ]\n    }\n  ]\n}\n```\n\n### Status Indicators\n```json\n{\n  \"type\": \"TextBlock\",\n  \"text\": \"${status}\",\n  \"color\": \"${if(status == 'Completed', 'good', if(status == 'In Progress', 'attention', 'default'))}\"\n}\n```\n\n### Currency Formatting\n```json\n{\n  \"type\": \"TextBlock\",\n  \"text\": \"$${formatNumber(amount, 2)}\"\n}\n```\n\n````\n",{"name":5,"description":7},"main","58843b159d7a4050d6b785a98b908cce505c0b92",".agents\u002Fskills\u002Fmcp-create-adaptive-cards",0,"https:\u002F\u002Fgithub.com\u002FReihantt6\u002Fsns-myagent","https:\u002F\u002Fgithub.com\u002FReihantt6","reihsns.web.id","2026-08-19 20:08:18",{"source":8,"skillName":5,"commands":33,"prompt":43,"zipAvailable":44},[34,37,40],{"tool":35,"command":36},"npx","npx skills add Reihantt6\u002Fsns-myagent --skill mcp-create-adaptive-cards",{"tool":38,"command":39},"bunx","bunx skills add Reihantt6\u002Fsns-myagent --skill mcp-create-adaptive-cards",{"tool":41,"command":42},"pnpm","pnpm dlx skills add Reihantt6\u002Fsns-myagent --skill mcp-create-adaptive-cards","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FReihantt6\u002Fsns-myagent\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fmcp-create-adaptive-cards\u002FSKILL.md",true,[],[47,54,61,68,75,82],{"skillNo":48,"name":49,"nameZh":6,"description":50,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":51,"categories":52,"keywords":53,"publishedAt":19},"01M77XDCYZ407XYMF2T4P6F7VT","youtube-transcript","Extract transcripts from YouTube videos. Use when the user asks for a transcript, subtitles, or captions of a YouTube video and provides a YouTube URL (youtube.com\u002Fwatch?v=, youtu.be\u002F, or similar). Supports output with or without timestamps.","https:\u002F\u002Fgithub.com\u002FReihantt6\u002Fsns-myagent\u002Fblob\u002Fmain\u002Fagent\u002Fskills\u002Fyoutube-transcript\u002FSKILL.md",[],[],{"skillNo":55,"name":56,"nameZh":6,"description":57,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":58,"categories":59,"keywords":60,"publishedAt":19},"01M77XD7PBC98J6MXGJJ2TJ8DX","youtube-thumbnail-design","YouTube thumbnail design with specific dimensions, contrast rules, and mobile preview optimization. Covers safe zones, text placement, face expression psychology, and A\u002FB testing. Use for: YouTube thumbnails, video cover images, click-through optimization. Triggers: youtube thumbnail, thumbnail design, video thumbnail, click through rate, ctr optimization, youtube cover, video cover image, thumbnail maker, thumbnail tips, youtube design, video preview image","https:\u002F\u002Fgithub.com\u002FReihantt6\u002Fsns-myagent\u002Fblob\u002Fmain\u002Fagent\u002Fskills\u002Fyoutube-thumbnail-design\u002FSKILL.md",[],[],{"skillNo":62,"name":63,"nameZh":6,"description":64,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":65,"categories":66,"keywords":67,"publishedAt":19},"01M77XD2541C8HXJ6RHYZP4NGJ","youtube-short-maker","Make YouTube Shorts that hold attention with Pexo — vertical 9:16, fast-paced, hook in the first 3 seconds. Describe your topic and Pexo writes the script, generates the shots, picks the models, and assembles a finished Short with music and captions. Use for YouTube Shorts: \"youtube short\", \"make a youtube short\", \"shorts video\", \"short-form video\". NOT for long-form or landscape video.","https:\u002F\u002Fgithub.com\u002FReihantt6\u002Fsns-myagent\u002Fblob\u002Fmain\u002Fagent\u002Fskills\u002Fyoutube-short-maker\u002FSKILL.md",[],[],{"skillNo":69,"name":70,"nameZh":6,"description":71,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":72,"categories":73,"keywords":74,"publishedAt":19},"01M77XCXKVSYK7KTZ3PQBVVGFD","xcode-project-setup","Safely modifies Xcode projects (.pbxproj) to add Swift Packages and link files. Use this skill whenever an iOS project needs dependencies installed (e.g. Firebase, Alamofire).","https:\u002F\u002Fgithub.com\u002FReihantt6\u002Fsns-myagent\u002Fblob\u002Fmain\u002Fagent\u002Fskills\u002Fxcode-project-setup\u002FSKILL.md",[],[],{"skillNo":76,"name":77,"nameZh":6,"description":78,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":79,"categories":80,"keywords":81,"publishedAt":19},"01M77XCR1DV8ZQK2NHWKVY4EWX","x402","Set up Browser Use Cloud payments with x402 — pay per request from a crypto wallet (USDC on Base mainnet), no signup or API key. Two setups it works out up front — \"just use it\" (set up a wallet so you or Claude Code can run cloud browser tasks paid from the wallet — Claude writes and runs throwaway scripts, nothing touches your codebase) or \"build it in\" (install the SDK and write the key + code into your project). Walks through wallet setup, funding, .env, and a ~$1 test run. Use when the user asks about x402, pay-per-use, USDC payments, or wants Browser Use Cloud without an API key. For the free-tier signup (reverse-CAPTCHA → API key), use `browser-use cloud signup` or the `cloud` skill instead.","https:\u002F\u002Fgithub.com\u002FReihantt6\u002Fsns-myagent\u002Fblob\u002Fmain\u002Fagent\u002Fskills\u002Fx402\u002FSKILL.md",[],[],{"skillNo":83,"name":84,"nameZh":6,"description":85,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":86,"categories":87,"keywords":88,"publishedAt":19},"01M77XCMD3R3ZBZQQSW6E0793B","x-twitter-scraper","Build GitHub Copilot workflows with Xquik X API SDKs, REST endpoints, hosted Apify Actor runs, MCP tools, TweetClaw OpenClaw plugin installs, signed webhooks, tweet search, user lookup, follower exports, media actions, and agent automation.","https:\u002F\u002Fgithub.com\u002FReihantt6\u002Fsns-myagent\u002Fblob\u002Fmain\u002Fagent\u002Fskills\u002Fx-twitter-scraper\u002FSKILL.md",[],[]]