·fluent2-design-system
*

fluent2-design-system

✓
dodatech/approved-skillsGitHub: dodatech/approved-skillsSource: dodatech/approved-skills

Build interfaces using Microsoft's Fluent 2 design system via @fluentui/react-components (v9). Use when the user requests UI built with Fluent UI, Fluent 2, Microsoft design language, Teams-style UI, or Office-style interfaces. Covers: React component usage, theming with FluentProvider, styling with makeStyles/tokens/Griffel, design token application, layout patterns, typography, color system, accessibility, dark/light/high-contrast themes, and custom branding. Also triggers for: "make it look like Teams/Outlook/Office", "use Fluent", "Microsoft design system", "@fluentui", or any request to build UI that follows Microsoft's design language. Do NOT use for Fluent UI v8 (@fluentui/react) unless migrating to v9.

dodatech·fluent2·design·system
7Installs·0Trend·@dodatech

Installation

GitHub: dodatech/approved-skills
$npx skills add https://github.com/dodatech/approved-skills --skill fluent2-design-system

How to Install fluent2-design-system

Quickly install fluent2-design-system AI skill to your development environment via command line

  1. Open Terminal: Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.)
  2. Run Installation Command: Copy and run this command: npx skills add https://github.com/dodatech/approved-skills --skill fluent2-design-system
  3. Verify Installation: Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Source: dodatech/approved-skills.

SKILL.md

View raw

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.

Build interfaces using Microsoft's Fluent 2 design system via @fluentui/react-components (v9). Use when the user requests UI built with Fluent UI, Fluent 2, Microsoft design language, Teams-style UI, or Office-style interfaces. Covers: React component usage, theming with FluentProvider, styling with makeStyles/tokens/Griffel, design token application, layout patterns, typography, color system, accessibility, dark/light/high-contrast themes, and custom branding. Also triggers for: "make it look like Teams/Outlook/Office", "use Fluent", "Microsoft design system", "@fluentui", or any request to build UI that follows Microsoft's design language. Do NOT use for Fluent UI v8 (@fluentui/react) unless migrating to v9. Source: dodatech/approved-skills.

Facts (cite-ready)

Stable fields and commands for AI/search citations.

Install command
npx skills add https://github.com/dodatech/approved-skills --skill fluent2-design-system
Source
dodatech/approved-skills
Category
*Creative Media
Verified
✓
First Seen
2026-02-25
Updated
2026-03-10
URL
https://www.learn-skills.dev/en/skills/dodatech/approved-skills/fluent2-design-system

Browse more skills from dodatech/approved-skills

Quick answers

What is fluent2-design-system?

Build interfaces using Microsoft's Fluent 2 design system via @fluentui/react-components (v9). Use when the user requests UI built with Fluent UI, Fluent 2, Microsoft design language, Teams-style UI, or Office-style interfaces. Covers: React component usage, theming with FluentProvider, styling with makeStyles/tokens/Griffel, design token application, layout patterns, typography, color system, accessibility, dark/light/high-contrast themes, and custom branding. Also triggers for: "make it look like Teams/Outlook/Office", "use Fluent", "Microsoft design system", "@fluentui", or any request to build UI that follows Microsoft's design language. Do NOT use for Fluent UI v8 (@fluentui/react) unless migrating to v9. Source: dodatech/approved-skills.

How do I install fluent2-design-system?

Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/dodatech/approved-skills --skill fluent2-design-system Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Where is the source repository?

https://github.com/dodatech/approved-skills

Details

Category
*Creative Media
Source
skills.sh
First Seen
2026-02-25

Related Skills

playwright-local
27 Installs
tremor-design-system
15 Installs
carbon-design-system
7 Installs
design-consistency-auditor
5 Installs
copy-editing
4 Installs
deep-debug
4 Installs