[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M69BPS82T2AXW77WG257W204":3,"skill-same:01M69BPS82T2AXW77WG257W204":55},{"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":21,"linkOnly":22,"markdownContent":23,"markdownBody":24,"frontMatter":25,"refName":26,"commitSha":27,"skillDirectory":28,"forksCount":29,"repositoryHtmlUrl":30,"repositoryHomepageUrl":6,"ownerHtmlUrl":31,"ownerBlogUrl":32,"ownerDescription":33,"updatedAt":34,"install":35,"resources":48},"01M69BPS82T2AXW77WG257W204","gui-designer",null,"Design the GUI tab only for systems with a graphical user experience.","microsoft\u002FTandem","microsoft","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F6154722?v=4","01M698VYDXZ6JW5WH3CRV650R8","Microsoft","01M69BPCSX0M4XSS5Z9SN4S28W",8,"MIT","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002FTandem\u002Fblob\u002Fmain\u002F.github\u002Fextensions\u002Ftandem\u002Fstage2\u002Fskills\u002Fgui-designer\u002FSKILL.md",[],[19,20],"gui designer","design","2026-11-10 10:12:30",false,"---\r\nname: gui-designer\r\ndescription: \"Design the GUI tab only for systems with a graphical user experience.\"\r\nuser-invocable: false\r\n---\r\n\r\n# GUI Designer\r\n\r\nUse this tab only when a graphical user interface is part of the requested system. Omit it for CLI,\r\nAPI-only, service, library, or backend-only work.\r\n\r\nProduce one to three low-fidelity screen sketches in `guiSketches`. Each sketch must:\r\n\r\n- link to one or more existing Use case IDs;\r\n- state the screen purpose;\r\n- divide the screen into only the meaningful `top`, `left`, `center`, `right`, or `bottom`\r\n  regions, using each placement at most once and always including `center`;\r\n- put a few user-visible elements in each region, typed as `text`, `action`, `input`,\r\n  `list-item`, `card`, or `status`.\r\n\r\nDescribe semantics and coarse placement only. Do not generate HTML, SVG, coordinates, dimensions,\r\ncolors, themes, or framework components. The frontend owns the deterministic wireframe rendering.\r\nAlso produce one concise `gui` aspect summary linked to the same Use case names.\r\n\r\nUse the words an end user would expect to see on the screen. Region and element labels must remain\r\nclear without design-system terminology or implementation context, so a non-experienced reviewer\r\ncan understand the screen purpose, available actions, and resulting status at a glance.\r\n\r\nAttach zero to three Attention items directly to the relevant GUI sketch or region, only for\r\nconsequential ambiguity in screen structure or interaction layout. Each item has `id`, `impact`,\r\n`question`, `whyItMatters`, and two or three `{ option, implication }` alternatives.\r\n\r\nPersist `{ guiSketches }` through `submit_gui_block`. For initial design, an omitted method submits\r\nan empty `guiSketches` array. On revision, the inherited block, including embedded Attention,\r\nneeds no submission unless this perspective changes.\r\n","# GUI Designer\r\n\r\nUse this tab only when a graphical user interface is part of the requested system. Omit it for CLI,\r\nAPI-only, service, library, or backend-only work.\r\n\r\nProduce one to three low-fidelity screen sketches in `guiSketches`. Each sketch must:\r\n\r\n- link to one or more existing Use case IDs;\r\n- state the screen purpose;\r\n- divide the screen into only the meaningful `top`, `left`, `center`, `right`, or `bottom`\r\n  regions, using each placement at most once and always including `center`;\r\n- put a few user-visible elements in each region, typed as `text`, `action`, `input`,\r\n  `list-item`, `card`, or `status`.\r\n\r\nDescribe semantics and coarse placement only. Do not generate HTML, SVG, coordinates, dimensions,\r\ncolors, themes, or framework components. The frontend owns the deterministic wireframe rendering.\r\nAlso produce one concise `gui` aspect summary linked to the same Use case names.\r\n\r\nUse the words an end user would expect to see on the screen. Region and element labels must remain\r\nclear without design-system terminology or implementation context, so a non-experienced reviewer\r\ncan understand the screen purpose, available actions, and resulting status at a glance.\r\n\r\nAttach zero to three Attention items directly to the relevant GUI sketch or region, only for\r\nconsequential ambiguity in screen structure or interaction layout. Each item has `id`, `impact`,\r\n`question`, `whyItMatters`, and two or three `{ option, implication }` alternatives.\r\n\r\nPersist `{ guiSketches }` through `submit_gui_block`. For initial design, an omitted method submits\r\nan empty `guiSketches` array. On revision, the inherited block, including embedded Attention,\r\nneeds no submission unless this perspective changes.\r\n",{"name":5,"description":7,"user-invocable":22},"main","c3a12ac559c6e322fa4ee3b27784de9a119dba83",".github\u002Fextensions\u002Ftandem\u002Fstage2\u002Fskills\u002Fgui-designer",1,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002FTandem","https:\u002F\u002Fgithub.com\u002Fmicrosoft","https:\u002F\u002Fopensource.microsoft.com","Open source projects and samples from Microsoft","2026-11-02 18:26:54",{"source":8,"skillName":5,"commands":36,"prompt":46,"zipAvailable":47},[37,40,43],{"tool":38,"command":39},"npx","npx skills add microsoft\u002FTandem --skill gui-designer",{"tool":41,"command":42},"bunx","bunx skills add microsoft\u002FTandem --skill gui-designer",{"tool":44,"command":45},"pnpm","pnpm dlx skills add microsoft\u002FTandem --skill gui-designer","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002FTandem\u002Fblob\u002Fmain\u002F.github\u002Fextensions\u002Ftandem\u002Fstage2\u002Fskills\u002Fgui-designer\u002FSKILL.md",true,[49],{"path":50,"resourceType":51,"resourceTypeDesc":52,"sizeBytes":53,"sourceHtmlUrl":54},"references\u002Fconventional-commits-guide.md","REFERENCE","参考文档",4130,"https:\u002F\u002Fgithub.com\u002Fgithub\u002Fawesome-copilot\u002Fblob\u002Fmain\u002Fskills\u002Fcommit-message-storyteller\u002Freferences\u002Fconventional-commits-guide.md",[56,83,107,115,129,137],{"skillNo":57,"name":58,"nameZh":6,"description":59,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":60,"categories":61,"keywords":62,"publishedAt":21},"01M6EWXWQXH5TEKHW5GK37TT8N","brainstorm-whiteboard","An Excalidraw-powered, two-way brainstorming whiteboard that both the agent and the human can edit, annotate and seal as peers. Use it when a user can show an idea or feedback more easily than type it, or when a sketch helps the agent explain, explore or compare ideas. Read and interpret human sketches as well as creating your own; proactively use shapes, diagrams and annotations without waiting for a drawing request. Keep chat self-contained so viewing the board is never required to understand the response.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002FTandem\u002Fblob\u002Fmain\u002Fskills\u002Fbrainstorm-whiteboard\u002FSKILL.md",[],[63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82],"brainstorm whiteboard","brainstorm","diagrams","explain","show","annotate","chat","self","human","drawing","ideas","as","type","compare","keep","never","use","feedback","explore","brainstorming",{"skillNo":84,"name":85,"nameZh":6,"description":86,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":87,"categories":88,"keywords":102,"publishedAt":21},"01M69BQJBH2TQX1F69VH1P662Z","tandem","Optional Q&A and prototype discovery, or direct native Development for Design, implementation and Review.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002FTandem\u002Fblob\u002Fmain\u002Fskills\u002Ftandem\u002FSKILL.md",[89,94,97],{"categoryNo":90,"categoryName":91,"taxonomyType":92,"taxonomyTypeDesc":93},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":95,"categoryName":96,"taxonomyType":92,"taxonomyTypeDesc":93},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":98,"categoryName":99,"taxonomyType":100,"taxonomyTypeDesc":101},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[85,103,104,105,20,106],"development","prototype","review","frontend",{"skillNo":108,"name":109,"nameZh":6,"description":110,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":111,"categories":112,"keywords":113,"publishedAt":21},"01M69BQFXM4VQG92TDS894XZN0","use-case-designer","Design the PM-level Use case tab and selectable user journeys.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002FTandem\u002Fblob\u002Fmain\u002Fdevelopment\u002Ftandem\u002Fskills\u002Fuse-case-designer\u002FSKILL.md",[],[114,20],"use case designer",{"skillNo":116,"name":117,"nameZh":6,"description":118,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":119,"categories":120,"keywords":124,"publishedAt":21},"01M69BQDZKN17P8207KHQPZHEC","storage-contract-designer","Design memory, database, file, object-store, or cache contracts inside Contract.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002FTandem\u002Fblob\u002Fmain\u002Fdevelopment\u002Ftandem\u002Fskills\u002Fstorage-contract-designer\u002FSKILL.md",[121],{"categoryNo":122,"categoryName":123,"taxonomyType":100,"taxonomyTypeDesc":101},"01JBSEEDCAT000000000000037","律师与法务",[125,126,127,128,20],"storage","contract designer","storage contract designer","memory",{"skillNo":130,"name":131,"nameZh":6,"description":132,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":133,"categories":134,"keywords":135,"publishedAt":21},"01M69BQCCTZVRHW4DAHK0YDEV1","stack-designer","Design the layered technology stack shown in the System tab.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002FTandem\u002Fblob\u002Fmain\u002Fdevelopment\u002Ftandem\u002Fskills\u002Fstack-designer\u002FSKILL.md",[],[136,20],"stack designer",{"skillNo":138,"name":139,"nameZh":6,"description":140,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":141,"categories":142,"keywords":143,"publishedAt":21},"01M69BQB0EBWW8W9WZ60KRVP55","module-designer","Refine responsibilities in the layered System technology stack.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002FTandem\u002Fblob\u002Fmain\u002Fdevelopment\u002Ftandem\u002Fskills\u002Fmodule-designer\u002FSKILL.md",[],[144],"module designer"]