fluent2-design-system

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-comComponents(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.