·fluent2-design-system
*

fluent2-design-system

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

Costruisci interfacce utilizzando il sistema di progettazione Fluent 2 di Microsoft tramite @fluentui/react-components (v9). Da utilizzare quando l'utente richiede un'interfaccia utente creata con Fluent UI, Fluent 2, linguaggio di progettazione Microsoft, interfaccia utente in stile Teams o interfacce in stile Office. Copertine: utilizzo del componente React, creazione di temi con FluentProvider, styling con makeStyles/tokens/Griffel, applicazione di token di progettazione, modelli di layout, tipografia, sistema di colore, accessibilità, temi scuri/chiari/ad alto contrasto e branding personalizzato. Si attiva anche per: "fai in modo che assomigli a Teams/Outlook/Office", "usa Fluent", "Microsoft Design System", "@fluentui" o qualsiasi richiesta di creare un'interfaccia utente che segua il linguaggio di progettazione di Microsoft. NON utilizzare per Fluent UI v8 (@fluentui/react) a meno che non si effettui la migrazione a v9.

dodatech·fluent2·design·system
7Installazioni·0Tendenza·@dodatech

Installazione

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

Come installare fluent2-design-system

Installa rapidamente la skill AI fluent2-design-system nel tuo ambiente di sviluppo tramite riga di comando

  1. Apri il terminale: Apri il tuo terminale o strumento da riga di comando (Terminal, iTerm, Windows Terminal, ecc.)
  2. Esegui il comando di installazione: Copia ed esegui questo comando: npx skills add https://github.com/dodatech/approved-skills --skill fluent2-design-system
  3. Verifica l'installazione: Dopo l'installazione, la skill verrà configurata automaticamente nel tuo ambiente AI di coding e sarà pronta all'uso in Claude Code, Cursor o OpenClaw

Fonte: dodatech/approved-skills.

SKILL.md

Visualizza 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.

Costruisci interfacce utilizzando il sistema di progettazione Fluent 2 di Microsoft tramite @fluentui/react-components (v9). Da utilizzare quando l'utente richiede un'interfaccia utente creata con Fluent UI, Fluent 2, linguaggio di progettazione Microsoft, interfaccia utente in stile Teams o interfacce in stile Office. Copertine: utilizzo del componente React, creazione di temi con FluentProvider, styling con makeStyles/tokens/Griffel, applicazione di token di progettazione, modelli di layout, tipografia, sistema di colore, accessibilità, temi scuri/chiari/ad alto contrasto e branding personalizzato. Si attiva anche per: "fai in modo che assomigli a Teams/Outlook/Office", "usa Fluent", "Microsoft Design System", "@fluentui" o qualsiasi richiesta di creare un'interfaccia utente che segua il linguaggio di progettazione di Microsoft. NON utilizzare per Fluent UI v8 (@fluentui/react) a meno che non si effettui la migrazione a v9. Fonte: dodatech/approved-skills.

Fatti (pronti per citazione)

Campi e comandi stabili per citazioni AI/ricerca.

Comando di installazione
npx skills add https://github.com/dodatech/approved-skills --skill fluent2-design-system
Fonte
dodatech/approved-skills
Categoria
*Creatività
Verificato
✓
Prima apparizione
2026-02-25
Aggiornato
2026-03-10
URL
https://www.learn-skills.dev/it/skills/dodatech/approved-skills/fluent2-design-system

Browse more skills from dodatech/approved-skills

Risposte rapide

Che cos'è fluent2-design-system?

Costruisci interfacce utilizzando il sistema di progettazione Fluent 2 di Microsoft tramite @fluentui/react-components (v9). Da utilizzare quando l'utente richiede un'interfaccia utente creata con Fluent UI, Fluent 2, linguaggio di progettazione Microsoft, interfaccia utente in stile Teams o interfacce in stile Office. Copertine: utilizzo del componente React, creazione di temi con FluentProvider, styling con makeStyles/tokens/Griffel, applicazione di token di progettazione, modelli di layout, tipografia, sistema di colore, accessibilità, temi scuri/chiari/ad alto contrasto e branding personalizzato. Si attiva anche per: "fai in modo che assomigli a Teams/Outlook/Office", "usa Fluent", "Microsoft Design System", "@fluentui" o qualsiasi richiesta di creare un'interfaccia utente che segua il linguaggio di progettazione di Microsoft. NON utilizzare per Fluent UI v8 (@fluentui/react) a meno che non si effettui la migrazione a v9. Fonte: dodatech/approved-skills.

Come installo fluent2-design-system?

Apri il tuo terminale o strumento da riga di comando (Terminal, iTerm, Windows Terminal, ecc.) Copia ed esegui questo comando: npx skills add https://github.com/dodatech/approved-skills --skill fluent2-design-system Dopo l'installazione, la skill verrà configurata automaticamente nel tuo ambiente AI di coding e sarà pronta all'uso in Claude Code, Cursor o OpenClaw

Dov'è il repository sorgente?

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

Dettagli

Categoria
*Creatività
Fonte
skills.sh
Prima apparizione
2026-02-25

Skills correlate

playwright-local
27 Installazioni
tremor-design-system
15 Installazioni
design-consistency-auditor
5 Installazioni
copy-editing
4 Installazioni
deep-debug
4 Installazioni
information-architecture
4 Installazioni