skills.rest
fefogarcia
fefogarciaCOMMUNITY
Explore all skills by this author →
GitHub

fluent2-design-system

Build React interfaces with Microsoft's Fluent 2 design system and Fluent UI v9 components.

1|Updated Feb 10, 2026
Search Tags:#design system#design tokens#ui development#react components#fluent ui#microsoft design#griffel
One-click install
npx skills add https://github.com/fefogarcia/approved-skills --skill fluent2-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fluent2-design-system
Source: https://github.com/fefogarcia/approved-skills/tree/main/skills/fluent2-design-system
Command: npx skills add https://github.com/fefogarcia/approved-skills --skill fluent2-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance and examples for building user interfaces using Microsoft's Fluent 2 design system, ensuring consistency and adherence to Microsoft's design language.

Core Features & Use Cases

  • Component Implementation: Learn how to use Fluent UI v9 React components for various UI elements.
  • Theming and Styling: Understand how to apply themes, use design tokens, and style components with Griffel.
  • Layout and Typography: Implement standard layout patterns and typography guidelines.
  • Accessibility: Ensure applications are accessible and adhere to WCAG standards.
  • Use Case: Develop a new feature for a Microsoft Teams-like application, ensuring it visually aligns with the Fluent 2 design system and uses its components correctly.

Quick Start

Import the FluentProvider and wrap your application with webLightTheme to get started.

Frequently Asked Questions about fluent2-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I start building a React UI with the Fluent 2 design system?▼

To build a React UI with the Fluent 2 design system, wrap your application with the FluentProvider and apply the webLightTheme. This establishes the base styling context for all v9 React components.

How does styling work in Fluent UI v9 components?▼

Styling in Fluent UI v9 components works by using Griffel, a CSS-in-JS engine, alongside makeStyles and design tokens to apply consistent visual properties directly within your React components.

Can I use Fluent UI v9 components to ensure accessibility and WCAG compliance?▼

Yes, Fluent UI v9 components are designed to ensure accessibility and adhere to WCAG standards, providing built-in support for semantic HTML, keyboard navigation, and screen reader compatibility.

What are design tokens in Microsoft's Fluent 2 design system?▼

Design tokens in the Fluent 2 design system are predefined variables representing color, typography, and spacing values, allowing you to maintain visual consistency and apply custom branding across React components.

Does this skill provide guidance for building a Microsoft Teams-like application?▼

Yes, it provides use cases for developing features for Microsoft Teams-like applications, ensuring your React components visually align with the Fluent 2 design system and implement correct layout patterns.

Related Skills

Explore More Design & Creative Skills→
tiantangcao1980-webtiantangcao1980-web
4

fluent-ui

Implement Microsoft Fluent UI components in React and web apps.

Community
Intermediate
chicanoandres702chicanoandres702

frontend-mobile-development-component-scaffold

Generates React components with TypeScript, tests, and Storybook from a formal spec.

Community
Advanced
pingqLINpingqLIN

pcf-fluent-modern-theming

Apply Fluent UI React v9 theming to Power Apps Component Framework controls.

Community
Intermediate
partme-aipartme-ai
610

ant-design-react

Guide Ant Design React component usage with TypeScript and design system support.

Official
Intermediate