通过 @fluentui/react-components (v9) 使用 Microsoft 的 Fluent 2 设计系统构建界面。当用户请求使用 Fluent UI、Fluent 2、Microsoft 设计语言、Teams 风格的 UI 或 Office 风格界面构建的 UI 时使用。涵盖：React 组件使用、FluentProvider 主题、makeStyles/tokens/Griffel 样式、设计令牌应用程序、布局模式、排版、颜色系统、可访问性、深色/浅色/高对比度主题和自定义品牌。还会触发：“使其看起来像 Teams/Outlook/Office”、“使用 Fluent”、“Microsoft 设计系统”、“@ Fluentui”或任何构建遵循 Microsoft 设计语言的 UI 的请求。除非迁移到 v9，否则请勿用于 Fluent UI v8 (@fluentui/react)。
通过命令行快速安装 fluent2-design-system AI 技能到你的开发环境
来源：dodatech/approved-skills。
Build production-grade interfaces using Microsoft's Fluent 2 design system with @fluentui/react-components (v9).
Every Fluent 2 React app requires a FluentProvider wrapping the component tree with a theme:
Use makeStyles (from @fluentui/react-components) — never inline styles or external CSS for token-aware styling.
通过 @fluentui/react-components (v9) 使用 Microsoft 的 Fluent 2 设计系统构建界面。当用户请求使用 Fluent UI、Fluent 2、Microsoft 设计语言、Teams 风格的 UI 或 Office 风格界面构建的 UI 时使用。涵盖：React 组件使用、FluentProvider 主题、makeStyles/tokens/Griffel 样式、设计令牌应用程序、布局模式、排版、颜色系统、可访问性、深色/浅色/高对比度主题和自定义品牌。还会触发：“使其看起来像 Teams/Outlook/Office”、“使用 Fluent”、“Microsoft 设计系统”、“@ Fluentui”或任何构建遵循 Microsoft 设计语言的 UI 的请求。除非迁移到 v9，否则请勿用于 Fluent UI v8 (@fluentui/react)。 来源：dodatech/approved-skills。
为搜索与 AI 引用准备的稳定字段与命令。
npx skills add https://github.com/dodatech/approved-skills --skill fluent2-design-system通过 @fluentui/react-components (v9) 使用 Microsoft 的 Fluent 2 设计系统构建界面。当用户请求使用 Fluent UI、Fluent 2、Microsoft 设计语言、Teams 风格的 UI 或 Office 风格界面构建的 UI 时使用。涵盖：React 组件使用、FluentProvider 主题、makeStyles/tokens/Griffel 样式、设计令牌应用程序、布局模式、排版、颜色系统、可访问性、深色/浅色/高对比度主题和自定义品牌。还会触发：“使其看起来像 Teams/Outlook/Office”、“使用 Fluent”、“Microsoft 设计系统”、“@ Fluentui”或任何构建遵循 Microsoft 设计语言的 UI 的请求。除非迁移到 v9，否则请勿用于 Fluent UI v8 (@fluentui/react)。 来源：dodatech/approved-skills。
打开你的终端或命令行工具（如 Terminal、iTerm、Windows Terminal 等） 复制并运行以下命令：npx skills add https://github.com/dodatech/approved-skills --skill fluent2-design-system 安装完成后，技能将自动配置到你的 AI 编程环境中，可以在 Claude Code、Cursor 或 OpenClaw 中使用
https://github.com/dodatech/approved-skills