[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M69B9PSGVC2P792Y7XY5FHA3":3,"skill-same:01M69B9PSGVC2P792Y7XY5FHA3":76},{"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":25,"linkOnly":26,"markdownContent":27,"markdownBody":28,"frontMatter":29,"refName":30,"commitSha":31,"skillDirectory":32,"forksCount":33,"repositoryHtmlUrl":34,"repositoryHomepageUrl":35,"ownerHtmlUrl":36,"ownerBlogUrl":37,"ownerDescription":38,"updatedAt":39,"install":40,"resources":53},"01M69B9PSGVC2P792Y7XY5FHA3","griffel-styling",null,"Author and debug Fluent UI v9 styles built on the Griffel CSS-in-JS engine. Use when writing or fixing makeStyles, makeResetStyles, mergeClasses, shorthands, tokens, custom style hooks (useXStyles_unstable \u002F CustomStyleHooksProvider_unstable), RendererProvider, CSS Modules cascade layers, Griffel patches, RTL\u002F@noflip handling, build-time style transforms, or when diagnosing override-precedence and class-collision bugs. IGNORE and DO NOT use when editing .\u002Fapps\u002Fprototype","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\u002F.github\u002Fskills\u002Fgriffel-styling\u002FSKILL.md",[],[19,20,21,22,23,24],"griffel styling","writing","css","prototype","fluent","debug","2026-11-10 10:12:30",false,"---\nname: griffel-styling\ndescription: 'Author and debug Fluent UI v9 styles built on the Griffel CSS-in-JS engine. Use when writing or fixing makeStyles, makeResetStyles, mergeClasses, shorthands, tokens, custom style hooks (useXStyles_unstable \u002F CustomStyleHooksProvider_unstable), RendererProvider, CSS Modules cascade layers, Griffel patches, RTL\u002F@noflip handling, build-time style transforms, or when diagnosing override-precedence and class-collision bugs. IGNORE and DO NOT use when editing .\u002Fapps\u002Fprototype'\n---\n\nGriffel is Fluent UI v9's CSS-in-JS engine. Read the relevant doc below before writing or debugging `makeStyles`\u002F`mergeClasses` code — do not guess at API shape or merge semantics.\n\n## Docs index\n\n- [Styles Handbook](.\u002Fstyles-handbook.md) — The core reference. Explains Griffel's atomic-CSS model, `makeStyles` (and its lack of CSS shorthand support, use `shorthands.*` instead), `mergeClasses` (Object.assign-like, **last argument wins per CSS property**, never concatenate class strings), `makeResetStyles` (single monolithic class for base styles, avoids \"rule explosion\" from nested selectors\u002Fpseudo-classes), RTL auto-flipping (and the `@noflip` escape hatch + CSS-variable caveat), selector-complexity\u002Fperformance guidance (avoid wide selectors like `> *`), and best practices (use `tokens` not literal colors, avoid `!important`, call `mergeClasses` once per element).\n\n- [Styling Components (Basics)](.\u002Fstyling-components-basics.md) — Quick-start intro to `makeStyles`\u002F`mergeClasses`. Covers the fundamental rule that **argument order in `mergeClasses` determines precedence** (later args win), how to merge parent-passed `className` correctly (`mergeClasses(classes.root, props.className)` — props last so callers can override), applying theme tokens, common anti-patterns (string concatenation, wrong merge order), the Griffel DevTools extension for debugging, and how to override styles on stock Fluent components from consumer code via `className`\u002Fslot props.\n\n- [Advanced Styling Techniques](.\u002Fadvanced-styling-techniques.md) — How Fluent v9 components call `useXStyles_unstable(state)` then `useCustomStyleHook_unstable('useXStyles_unstable')(state)`, letting an app-level `CustomStyleHooksProvider_unstable` inject theme-wide overrides per component type. **Critical rule**: custom style hooks must merge as `mergeClasses(state.root.className, themeStyles.root, getSlotClassNameProp_unstable(state.root))` — theme styles are NOT last; the slot's original `className` prop is re-applied after theme styles so a caller's `className` always wins. Also covers why nested `CustomStyleHooksProvider_unstable` providers replace (not merge) values, and the pattern for composing multiple custom style hook sets (\"Smart\" + \"Fancy\" → \"Smancy\") by calling them in sequence, last-called-wins.\n\n- [Build-Time Styles](.\u002Fbuild-time-styles.md) — How to move Griffel's runtime style-resolution cost to build time via `@griffel\u002Fwebpack-loader` (apps) or `@griffel\u002Fbabel-preset` (libraries), including TypeScript preset config and using a custom `moduleSource` when `makeStyles` is re-exported from a third-party package (relevant for `@coreai-ds\u002Freact-components`'s own re-export). Explains what the transform actually does (replaces `makeStyles` calls with a lightweight `__styles` call + precomputed atomic CSS) and Linaria-based build-time evaluation of style helper code.\n\n- [Unprocessed Styles (Raw Modules)](.\u002Funprocessed-styles.md) — Explains the multi-bundle CSS class-collision problem when several bundles each ship pre-processed Griffel styles (e.g. micro-frontends, CDN bundles), and the `.raw.js` raw-module bundler-resolution mechanism (Webpack\u002FVite `resolve.extensions`) that lets each bundle prefix its own class names instead of colliding. Includes a package support-status table for which Fluent packages ship raw modules today.\n\n## Known gotchas relevant to this repo\n\nFor CSS Modules override\u002Flayering work:\n\n1. Read [Styling with CSS Modules](..\u002F..\u002F..\u002Fapps\u002Fstorybook\u002Fsrc\u002Fstories\u002Fdocs\u002FStylingWithCssModules.mdx).\n2. Use an app-owned renderer through `RendererProvider`; do not patch shared\n   `node_modules` or add a global Griffel override.\n3. Preserve buckets and tuple metadata, and create the renderer once above\n   `CoreAIFluentProvider`.\n4. Check the installed insertion API after Griffel\u002FFluent upgrades.\n5. Verify actual computed overrides, responsive rules, and portals in development\n   and production preview. Layer extracted static CSS separately when applicable.\n\n- `mergeClasses` is **not** real CSS cascade — it resolves per-CSS-property conflicts via `Object.assign`-style last-argument-wins, before the browser ever sees the CSS. A losing class's declarations are dropped entirely, even if written with `!important`.\n- The canonical, documented merge order for a custom style hook's root slot is `mergeClasses(state.root.className, themeClasses, getSlotClassNameProp_unstable(state.root))` per [Advanced Styling Techniques](.\u002Fadvanced-styling-techniques.md) — re-applying the slot's original className last so instance-level overrides win over theme styles. Compare this against any `applyToRoot`-style helpers in `packages\u002Freact-components\u002Fsrc\u002Fcomponents\u002F*.styles.ts` when debugging override-precedence bugs.\n- This 3-argument pattern gives a full **stock default \u003C CoreAI theme \u003C instance className** priority, including for properties that stock Fluent's own base styles also set (e.g. Table's `borderCollapse`) — `getSlotClassNameProp_unstable` recovers only the consumer's original className (captured before Fluent fuses default+instance), so re-applying it last always lets it win regardless of what the fused blob or theme classes contain.\n\n## This repo's styling convention\n\nSee [`packages\u002Freact-components\u002Fcode-conventions.md`](..\u002F..\u002F..\u002Fpackages\u002Freact-components\u002Fcode-conventions.md)\nfor the mandatory `mergeClasses` order used by every custom style hook in\n`packages\u002Freact-components\u002Fsrc\u002Fcomponents\u002F*.styles.ts`, plus the two\n\"wrong\" 2-tier patterns to avoid.\n","Griffel is Fluent UI v9's CSS-in-JS engine. Read the relevant doc below before writing or debugging `makeStyles`\u002F`mergeClasses` code — do not guess at API shape or merge semantics.\n\n## Docs index\n\n- [Styles Handbook](.\u002Fstyles-handbook.md) — The core reference. Explains Griffel's atomic-CSS model, `makeStyles` (and its lack of CSS shorthand support, use `shorthands.*` instead), `mergeClasses` (Object.assign-like, **last argument wins per CSS property**, never concatenate class strings), `makeResetStyles` (single monolithic class for base styles, avoids \"rule explosion\" from nested selectors\u002Fpseudo-classes), RTL auto-flipping (and the `@noflip` escape hatch + CSS-variable caveat), selector-complexity\u002Fperformance guidance (avoid wide selectors like `> *`), and best practices (use `tokens` not literal colors, avoid `!important`, call `mergeClasses` once per element).\n\n- [Styling Components (Basics)](.\u002Fstyling-components-basics.md) — Quick-start intro to `makeStyles`\u002F`mergeClasses`. Covers the fundamental rule that **argument order in `mergeClasses` determines precedence** (later args win), how to merge parent-passed `className` correctly (`mergeClasses(classes.root, props.className)` — props last so callers can override), applying theme tokens, common anti-patterns (string concatenation, wrong merge order), the Griffel DevTools extension for debugging, and how to override styles on stock Fluent components from consumer code via `className`\u002Fslot props.\n\n- [Advanced Styling Techniques](.\u002Fadvanced-styling-techniques.md) — How Fluent v9 components call `useXStyles_unstable(state)` then `useCustomStyleHook_unstable('useXStyles_unstable')(state)`, letting an app-level `CustomStyleHooksProvider_unstable` inject theme-wide overrides per component type. **Critical rule**: custom style hooks must merge as `mergeClasses(state.root.className, themeStyles.root, getSlotClassNameProp_unstable(state.root))` — theme styles are NOT last; the slot's original `className` prop is re-applied after theme styles so a caller's `className` always wins. Also covers why nested `CustomStyleHooksProvider_unstable` providers replace (not merge) values, and the pattern for composing multiple custom style hook sets (\"Smart\" + \"Fancy\" → \"Smancy\") by calling them in sequence, last-called-wins.\n\n- [Build-Time Styles](.\u002Fbuild-time-styles.md) — How to move Griffel's runtime style-resolution cost to build time via `@griffel\u002Fwebpack-loader` (apps) or `@griffel\u002Fbabel-preset` (libraries), including TypeScript preset config and using a custom `moduleSource` when `makeStyles` is re-exported from a third-party package (relevant for `@coreai-ds\u002Freact-components`'s own re-export). Explains what the transform actually does (replaces `makeStyles` calls with a lightweight `__styles` call + precomputed atomic CSS) and Linaria-based build-time evaluation of style helper code.\n\n- [Unprocessed Styles (Raw Modules)](.\u002Funprocessed-styles.md) — Explains the multi-bundle CSS class-collision problem when several bundles each ship pre-processed Griffel styles (e.g. micro-frontends, CDN bundles), and the `.raw.js` raw-module bundler-resolution mechanism (Webpack\u002FVite `resolve.extensions`) that lets each bundle prefix its own class names instead of colliding. Includes a package support-status table for which Fluent packages ship raw modules today.\n\n## Known gotchas relevant to this repo\n\nFor CSS Modules override\u002Flayering work:\n\n1. Read [Styling with CSS Modules](..\u002F..\u002F..\u002Fapps\u002Fstorybook\u002Fsrc\u002Fstories\u002Fdocs\u002FStylingWithCssModules.mdx).\n2. Use an app-owned renderer through `RendererProvider`; do not patch shared\n   `node_modules` or add a global Griffel override.\n3. Preserve buckets and tuple metadata, and create the renderer once above\n   `CoreAIFluentProvider`.\n4. Check the installed insertion API after Griffel\u002FFluent upgrades.\n5. Verify actual computed overrides, responsive rules, and portals in development\n   and production preview. Layer extracted static CSS separately when applicable.\n\n- `mergeClasses` is **not** real CSS cascade — it resolves per-CSS-property conflicts via `Object.assign`-style last-argument-wins, before the browser ever sees the CSS. A losing class's declarations are dropped entirely, even if written with `!important`.\n- The canonical, documented merge order for a custom style hook's root slot is `mergeClasses(state.root.className, themeClasses, getSlotClassNameProp_unstable(state.root))` per [Advanced Styling Techniques](.\u002Fadvanced-styling-techniques.md) — re-applying the slot's original className last so instance-level overrides win over theme styles. Compare this against any `applyToRoot`-style helpers in `packages\u002Freact-components\u002Fsrc\u002Fcomponents\u002F*.styles.ts` when debugging override-precedence bugs.\n- This 3-argument pattern gives a full **stock default \u003C CoreAI theme \u003C instance className** priority, including for properties that stock Fluent's own base styles also set (e.g. Table's `borderCollapse`) — `getSlotClassNameProp_unstable` recovers only the consumer's original className (captured before Fluent fuses default+instance), so re-applying it last always lets it win regardless of what the fused blob or theme classes contain.\n\n## This repo's styling convention\n\nSee [`packages\u002Freact-components\u002Fcode-conventions.md`](..\u002F..\u002F..\u002Fpackages\u002Freact-components\u002Fcode-conventions.md)\nfor the mandatory `mergeClasses` order used by every custom style hook in\n`packages\u002Freact-components\u002Fsrc\u002Fcomponents\u002F*.styles.ts`, plus the two\n\"wrong\" 2-tier patterns to avoid.\n",{"name":5,"description":7},"main","9e7876c47c30a6c44ca79915991bd5541d58764c",".github\u002Fskills\u002Fgriffel-styling",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":41,"prompt":51,"zipAvailable":52},[42,45,48],{"tool":43,"command":44},"npx","npx skills add microsoft\u002Fcoreai-design-system --skill griffel-styling",{"tool":46,"command":47},"bunx","bunx skills add microsoft\u002Fcoreai-design-system --skill griffel-styling",{"tool":49,"command":50},"pnpm","pnpm dlx skills add microsoft\u002Fcoreai-design-system --skill griffel-styling","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fcoreai-design-system\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fgriffel-styling\u002FSKILL.md",true,[54,60,64,68,72],{"path":55,"resourceType":56,"resourceTypeDesc":57,"sizeBytes":58,"sourceHtmlUrl":59},"advanced-styling-techniques.md","REFERENCE","参考文档",7078,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fcoreai-design-system\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fgriffel-styling\u002Fadvanced-styling-techniques.md",{"path":61,"resourceType":56,"resourceTypeDesc":57,"sizeBytes":62,"sourceHtmlUrl":63},"build-time-styles.md",8252,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fcoreai-design-system\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fgriffel-styling\u002Fbuild-time-styles.md",{"path":65,"resourceType":56,"resourceTypeDesc":57,"sizeBytes":66,"sourceHtmlUrl":67},"styles-handbook.md",25926,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fcoreai-design-system\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fgriffel-styling\u002Fstyles-handbook.md",{"path":69,"resourceType":56,"resourceTypeDesc":57,"sizeBytes":70,"sourceHtmlUrl":71},"styling-components-basics.md",6838,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fcoreai-design-system\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fgriffel-styling\u002Fstyling-components-basics.md",{"path":73,"resourceType":56,"resourceTypeDesc":57,"sizeBytes":74,"sourceHtmlUrl":75},"unprocessed-styles.md",5940,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fcoreai-design-system\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fgriffel-styling\u002Funprocessed-styles.md",[77,98,108,118,125,135],{"skillNo":78,"name":79,"nameZh":6,"description":80,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":81,"categories":82,"keywords":91,"publishedAt":25},"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",[83,88],{"categoryNo":84,"categoryName":85,"taxonomyType":86,"taxonomyTypeDesc":87},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":89,"categoryName":90,"taxonomyType":86,"taxonomyTypeDesc":87},"01JBSEEDCAT000000000000023","Skill与智能体开发",[92,93,94,95,96,97],"coreai ds fluentui react","react","documentation","components","troubleshoot","MCP",{"skillNo":99,"name":100,"nameZh":6,"description":101,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":102,"categories":103,"keywords":104,"publishedAt":25},"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",[],[105,106,107],"state management","component","sandbox",{"skillNo":109,"name":110,"nameZh":6,"description":111,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":112,"categories":113,"keywords":114,"publishedAt":25},"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",[],[115,107,116,117],"start app","run","launch",{"skillNo":119,"name":120,"nameZh":6,"description":121,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":122,"categories":123,"keywords":124,"publishedAt":25},"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",[],[120,93],{"skillNo":126,"name":127,"nameZh":6,"description":128,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":129,"categories":130,"keywords":133,"publishedAt":25},"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",[131,132],{"categoryNo":84,"categoryName":85,"taxonomyType":86,"taxonomyTypeDesc":87},{"categoryNo":89,"categoryName":90,"taxonomyType":86,"taxonomyTypeDesc":87},[95,93,134,94,106,107,20,97],"react components",{"skillNo":136,"name":137,"nameZh":6,"description":138,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":139,"categories":140,"keywords":144,"publishedAt":25},"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",[141],{"categoryNo":142,"categoryName":143,"taxonomyType":86,"taxonomyTypeDesc":87},"01JBSEEDCAT000000000000015","视觉设计",[145,146,147],"new variant","design","create"]