[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M69BAMEC7F9FER25BYEPN97D":3,"skill-same:01M69BAMEC7F9FER25BYEPN97D":58},{"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":23,"publishedAt":29,"linkOnly":30,"markdownContent":31,"markdownBody":32,"frontMatter":33,"refName":34,"commitSha":35,"skillDirectory":36,"forksCount":37,"repositoryHtmlUrl":38,"repositoryHomepageUrl":39,"ownerHtmlUrl":40,"ownerBlogUrl":41,"ownerDescription":42,"updatedAt":43,"install":44,"resources":57},"01M69BAMEC7F9FER25BYEPN97D","interpreting-html",null,"Map rendered\u002Fpasted HTML class names back to source code (CSS Modules, Fluent UI, Griffel). USE WHEN: inspecting Playwright DOM output, debugging styles in the browser, or reverse-engineering pasted HTML.","microsoft\u002Fcoreai-design-system","microsoft","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F6154722?v=4","01M698VYDXZ6JW5WH3CRV650R8","Microsoft","01M69B9ED3TGFRHF93Y8JF1Y18",2,"CC-BY-4.0","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fcoreai-design-system\u002Fblob\u002Fmain\u002Fapps\u002Fprototype\u002F.github\u002Fskills\u002Finterpreting-html\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[24,25,26,27,28],"interpreting html","css","playwright","fluent","debugging","2026-11-10 10:12:30",false,"---\nname: interpreting-html\ndescription: 'Map rendered\u002Fpasted HTML class names back to source code (CSS Modules, Fluent UI, Griffel). USE WHEN: inspecting Playwright DOM output, debugging styles in the browser, or reverse-engineering pasted HTML.'\n---\n\n# How to Interpret Pasted HTML Code\n\nWhen the site is rendered to HTML, you can identify several aspects of the app code via HTML properties:\n\n- Class names with the pattern `_camelCase_123ab_45` correspond to class names applied from CSS Modules.\n  - For example, `class=\"_headerWrapper_16arl_15\"` in HTML comes from `className={styles.headerWrapper}` in React.\n- Class names prefixed with `fui-` are derived from Fluent UI components.\n  - These are Fluent component root elements. For example, `fui-Button` is a `\u003CButton\u002F>`.\n  - These are Fluent component sub-elements if they contain the `__` delimiter (BEM style). For example, `fui-Button__icon` comes from `\u003CButton icon={\u003CSomeIcon20Regular\u002F>}\u002F>`.\n- Class names that follow the pattern `f123abc` are Griffel-generated atomic classes. Reset classes use an `r…` hash, and sequence classes start with `___`. These are auto-generated and are not authored source identifiers. For example: `class=\"f11589ue f1q5o8ev f1pdflbu fkfq4zb\"`. Do not search these hashes to locate authored styles.\n- `data-*` attributes may be authored in React, generated by a framework, or derived from dynamic state. Verify their origin before using them to locate source; do not assume their values are static.\n- `aria-label` attributes and text content often appear as literal strings in this prototype, so searching them can help locate the corresponding JSX. For example, `Create agent` appears directly in the agents route. Values may also come from props, data, or localization, so a rendered string does not always have an exact literal match in source.\n\n## Interpreting React Grab Context\n\nThe prototype's customized React Grab context is not raw DOM output. It decodes CSS Module class names to their local names and omits Fluent\u002FGriffel classes. A cleaned class such as `brandLink` can therefore correspond to a hashed CSS Module class in the browser.\n\nThe `in Component (path:line:column)` entries describe component usage or rendering ancestry, not necessarily component definitions. Components that render passed-in children may appear in the ancestry even when another component created that JSX. Use the reported location to inspect the relevant call site or component body before deciding which source to edit.\n","# How to Interpret Pasted HTML Code\n\nWhen the site is rendered to HTML, you can identify several aspects of the app code via HTML properties:\n\n- Class names with the pattern `_camelCase_123ab_45` correspond to class names applied from CSS Modules.\n  - For example, `class=\"_headerWrapper_16arl_15\"` in HTML comes from `className={styles.headerWrapper}` in React.\n- Class names prefixed with `fui-` are derived from Fluent UI components.\n  - These are Fluent component root elements. For example, `fui-Button` is a `\u003CButton\u002F>`.\n  - These are Fluent component sub-elements if they contain the `__` delimiter (BEM style). For example, `fui-Button__icon` comes from `\u003CButton icon={\u003CSomeIcon20Regular\u002F>}\u002F>`.\n- Class names that follow the pattern `f123abc` are Griffel-generated atomic classes. Reset classes use an `r…` hash, and sequence classes start with `___`. These are auto-generated and are not authored source identifiers. For example: `class=\"f11589ue f1q5o8ev f1pdflbu fkfq4zb\"`. Do not search these hashes to locate authored styles.\n- `data-*` attributes may be authored in React, generated by a framework, or derived from dynamic state. Verify their origin before using them to locate source; do not assume their values are static.\n- `aria-label` attributes and text content often appear as literal strings in this prototype, so searching them can help locate the corresponding JSX. For example, `Create agent` appears directly in the agents route. Values may also come from props, data, or localization, so a rendered string does not always have an exact literal match in source.\n\n## Interpreting React Grab Context\n\nThe prototype's customized React Grab context is not raw DOM output. It decodes CSS Module class names to their local names and omits Fluent\u002FGriffel classes. A cleaned class such as `brandLink` can therefore correspond to a hashed CSS Module class in the browser.\n\nThe `in Component (path:line:column)` entries describe component usage or rendering ancestry, not necessarily component definitions. Components that render passed-in children may appear in the ancestry even when another component created that JSX. Use the reported location to inspect the relevant call site or component body before deciding which source to edit.\n",{"name":5,"description":7},"main","9e7876c47c30a6c44ca79915991bd5541d58764c","apps\u002Fprototype\u002F.github\u002Fskills\u002Finterpreting-html",1,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fcoreai-design-system","https:\u002F\u002Fcoreai-ds.azurewebsites.net","https:\u002F\u002Fgithub.com\u002Fmicrosoft","https:\u002F\u002Fopensource.microsoft.com","Open source projects and samples from Microsoft","2026-11-06 05:33:55",{"source":8,"skillName":5,"commands":45,"prompt":55,"zipAvailable":56},[46,49,52],{"tool":47,"command":48},"npx","npx skills add microsoft\u002Fcoreai-design-system --skill interpreting-html",{"tool":50,"command":51},"bunx","bunx skills add microsoft\u002Fcoreai-design-system --skill interpreting-html",{"tool":53,"command":54},"pnpm","pnpm dlx skills add microsoft\u002Fcoreai-design-system --skill interpreting-html","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fcoreai-design-system\u002Fblob\u002Fmain\u002Fapps\u002Fprototype\u002F.github\u002Fskills\u002Finterpreting-html\u002FSKILL.md",true,[],[59,76,86,96,103,114],{"skillNo":60,"name":61,"nameZh":6,"description":62,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":63,"categories":64,"keywords":69,"publishedAt":29},"01M69BB0EA71EEW0TWV6DDMF5S","coreai-ds-fluentui-react","MANDATORY for @coreai-ds\u002Freact-components work. Use the CoreAI documentation MCP to discover components, props, stories, templates, and implementation patterns. If the MCP is unavailable, stop and ask the user to enable or troubleshoot it with you.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fcoreai-design-system\u002Fblob\u002Fmain\u002Fpackages\u002Freact-components\u002Fagent\u002FSKILL.md",[65,66],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":67,"categoryName":68,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[70,71,72,73,74,75],"coreai ds fluentui react","react","documentation","components","troubleshoot","MCP",{"skillNo":77,"name":78,"nameZh":6,"description":79,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":80,"categories":81,"keywords":82,"publishedAt":29},"01M69BAYVCBBZE7HY5RF871G5J","state-management","CoreAI Sandbox's simplified TanStack Query + mock-JSON data layer. USE WHEN: editing data-fetching hooks (`app\u002Fhooks\u002Fuse*.ts`), adding mock data in `app\u002Fdata\u002F`, or wiring a component to query state.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fcoreai-design-system\u002Fblob\u002Fmain\u002Fapps\u002Fprototype\u002F.github\u002Fskills\u002Fstate-management\u002FSKILL.md",[],[83,84,85],"state management","component","sandbox",{"skillNo":87,"name":88,"nameZh":6,"description":89,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":90,"categories":91,"keywords":92,"publishedAt":29},"01M69BAX7PT3JC7V84DVTSRWN4","start-app","Start the CoreAI Sandbox dev server and open it using available browser tools. USE WHEN: the user asks you to \"start the app\", \"run the dev server\", \"open the app\", or \"launch CoreAI Sandbox\".","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fcoreai-design-system\u002Fblob\u002Fmain\u002Fapps\u002Fprototype\u002F.github\u002Fskills\u002Fstart-app\u002FSKILL.md",[],[93,85,94,95],"start app","run","launch",{"skillNo":97,"name":98,"nameZh":6,"description":99,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":100,"categories":101,"keywords":102,"publishedAt":29},"01M69BAVXDBYFNKF45DQ1FPN40","routing","React Router v7 routing conventions for this SPA. USE WHEN: editing `app\u002Froutes.ts`, adding\u002Fremoving a route, or changing navigation.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fcoreai-design-system\u002Fblob\u002Fmain\u002Fapps\u002Fprototype\u002F.github\u002Fskills\u002Frouting\u002FSKILL.md",[],[98,71],{"skillNo":104,"name":105,"nameZh":6,"description":106,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":107,"categories":108,"keywords":111,"publishedAt":29},"01M69BASXQZQTQB2GH2V79FZ6Y","react-components","CoreAI Sandbox component usage: import boundaries, CoreAI MCP documentation, and local adapter inspection. USE WHEN: editing any `*.tsx` file, picking a component, or writing component imports.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fcoreai-design-system\u002Fblob\u002Fmain\u002Fapps\u002Fprototype\u002F.github\u002Fskills\u002Freact-components\u002FSKILL.md",[109,110],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":67,"categoryName":68,"taxonomyType":21,"taxonomyTypeDesc":22},[73,71,112,72,84,85,113,75],"react components","writing",{"skillNo":115,"name":116,"nameZh":6,"description":117,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":118,"categories":119,"keywords":123,"publishedAt":29},"01M69BAR4147BKNY7H41DYMPGP","new-variant","Create a new design variant or alternative for a page using the built-in feature\u002Fvariant system. USE WHEN: a designer wants to try a different layout, create an \"option B\" or \"version 2\", compare designs side by side, add an A\u002FB alternative, or explore an alternate version. Do NOT build a custom toggle solution.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fcoreai-design-system\u002Fblob\u002Fmain\u002Fapps\u002Fprototype\u002F.github\u002Fskills\u002Fnew-variant\u002FSKILL.md",[120],{"categoryNo":121,"categoryName":122,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",[124,125,126],"new variant","design","create"]