·fluent2-design-system
*

fluent2-design-system

Créez des interfaces à l'aide du système de conception Fluent 2 de Microsoft via @fluentui/react-components (v9). À utiliser lorsque l'utilisateur demande une interface utilisateur créée avec Fluent UI, Fluent 2, le langage de conception Microsoft, une interface utilisateur de style Teams ou des interfaces de style Office. Couvre : utilisation des composants React, thème avec FluentProvider, style avec makeStyles/tokens/Griffel, application de jeton de conception, modèles de mise en page, typographie, système de couleurs, accessibilité, thèmes sombre/clair/à contraste élevé et personnalisation de la marque. Déclenche également : "faire ressembler à Teams/Outlook/Office", "utiliser Fluent", "Microsoft design system", "@fluentui" ou toute demande de création d'une interface utilisateur qui suit le langage de conception de Microsoft. Ne PAS utiliser pour Fluent UI v8 (@fluentui/react) à moins de migrer vers la v9.

7Installations·0Tendance·@dodatech

Installation

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

Comment installer fluent2-design-system

Installez rapidement le skill IA fluent2-design-system dans votre environnement de développement via la ligne de commande

  1. Ouvrir le Terminal: Ouvrez votre terminal ou outil de ligne de commande (Terminal, iTerm, Windows Terminal, etc.)
  2. Exécuter la commande d'installation: Copiez et exécutez cette commande : npx skills add https://github.com/dodatech/approved-skills --skill fluent2-design-system
  3. Vérifier l'installation: Une fois installé, le skill sera automatiquement configuré dans votre environnement de programmation IA et prêt à être utilisé dans Claude Code, Cursor ou OpenClaw

Source : 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.

Créez des interfaces à l'aide du système de conception Fluent 2 de Microsoft via @fluentui/react-components (v9). À utiliser lorsque l'utilisateur demande une interface utilisateur créée avec Fluent UI, Fluent 2, le langage de conception Microsoft, une interface utilisateur de style Teams ou des interfaces de style Office. Couvre : utilisation des composants React, thème avec FluentProvider, style avec makeStyles/tokens/Griffel, application de jeton de conception, modèles de mise en page, typographie, système de couleurs, accessibilité, thèmes sombre/clair/à contraste élevé et personnalisation de la marque. Déclenche également : "faire ressembler à Teams/Outlook/Office", "utiliser Fluent", "Microsoft design system", "@fluentui" ou toute demande de création d'une interface utilisateur qui suit le langage de conception de Microsoft. Ne PAS utiliser pour Fluent UI v8 (@fluentui/react) à moins de migrer vers la v9. Source : dodatech/approved-skills.

Faits (prêts à citer)

Champs et commandes stables pour les citations IA/recherche.

Commande d'installation
npx skills add https://github.com/dodatech/approved-skills --skill fluent2-design-system
Catégorie
*Créativité
Vérifié
Première apparition
2026-02-25
Mis à jour
2026-03-10

Browse more skills from dodatech/approved-skills

Réponses rapides

Qu'est-ce que fluent2-design-system ?

Créez des interfaces à l'aide du système de conception Fluent 2 de Microsoft via @fluentui/react-components (v9). À utiliser lorsque l'utilisateur demande une interface utilisateur créée avec Fluent UI, Fluent 2, le langage de conception Microsoft, une interface utilisateur de style Teams ou des interfaces de style Office. Couvre : utilisation des composants React, thème avec FluentProvider, style avec makeStyles/tokens/Griffel, application de jeton de conception, modèles de mise en page, typographie, système de couleurs, accessibilité, thèmes sombre/clair/à contraste élevé et personnalisation de la marque. Déclenche également : "faire ressembler à Teams/Outlook/Office", "utiliser Fluent", "Microsoft design system", "@fluentui" ou toute demande de création d'une interface utilisateur qui suit le langage de conception de Microsoft. Ne PAS utiliser pour Fluent UI v8 (@fluentui/react) à moins de migrer vers la v9. Source : dodatech/approved-skills.

Comment installer fluent2-design-system ?

Ouvrez votre terminal ou outil de ligne de commande (Terminal, iTerm, Windows Terminal, etc.) Copiez et exécutez cette commande : npx skills add https://github.com/dodatech/approved-skills --skill fluent2-design-system Une fois installé, le skill sera automatiquement configuré dans votre environnement de programmation IA et prêt à être utilisé dans Claude Code, Cursor ou OpenClaw

Où se trouve le dépôt source ?

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