fluent-ui-v9

Fetches authoritative Fluent UI v9 docs, API types, and examples from the microsoft/fluentui GitHub repo.

Updated Jul 4, 2025
One-click install
npx skills add https://github.com/milespossing/nixdots --skill fluent-ui-v9-milespossing
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fluent-ui-v9
Source: https://github.com/milespossing/nixdots/tree/main/modules/agents/_skills/fluent-ui-v9
Command: npx skills add https://github.com/milespossing/nixdots --skill fluent-ui-v9-milespossing

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Finding accurate, up-to-date documentation for Microsoft Fluent UI v9 (@fluentui/react-components) is hard because props, slots, and tokens change every commit. This Skill routes the agent directly to the canonical source files in the microsoft/fluentui GitHub repository instead of relying on stale or mirrored docs. ## Core Features & Use Cases - Canonical API lookups: Reads auto-generated *.api.md files for exact prop, slot, and type signatures of any v9 component package. - Specs, migration guides, and examples: Fetches SPEC.md, MIGRATION.md, best-practices docs, and *.stories.tsx usage examples per component. - Design token resolution: Locates primitive tokens in @fluentui/tokens and semantic tokens in @fluentui/react-theme for use in makeStyles. - Use Case: When asked "What props does Dialog take?", the agent runs gh api against the react-dialog package's API report and returns the exact TypeScript signatures from the live upstream repo. ## Quick Start Ask the agent what props the Fluent UI v9 Dialog component accepts and have it fetch the answer from the microsoft/fluentui repository.

Frequently Asked Questions about fluent-ui-v9

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

FAQPage Schema
How do I find the props and types for a Fluent UI v9 component?▼

Fetch the component package's auto-generated API report at packages/react-components/<pkg>/library/etc/<pkg>.api.md from the microsoft/fluentui repo using gh api or raw.githubusercontent.com. This file lists every exported Props and Slots type with full TypeScript signatures.

How do I find Fluent UI v9 component usage examples?▼

List the variants under packages/react-components/<pkg>/stories/src/<Name>/ in the microsoft/fluentui repo, then fetch the relevant <Name><Variant>.stories.tsx file. These story files are the canonical usage examples for each component.

Where are Fluent UI v9 design tokens defined?▼

Primitive tokens like color ramps live in packages/tokens/src/global/ in the microsoft/fluentui repo, while semantic tokens used in makeStyles (e.g. tokens.colorNeutralForeground1) live in packages/react-components/react-theme/library/src/global/ with light, dark, and highContrast variants.

Does this work with the Fluent UI MCP server?▼

Yes, if the fluent-agent MCP server at https://chat.fluentui.dev/mcp/server/ is connected, its tools are tried first for component, token, and example lookups. The GitHub file paths are the fallback when the MCP is unavailable or when raw source files are needed verbatim.

Why does GitHub API access to microsoft/fluentui fail with some tokens?▼

The repo enforces a 90-day maximum lifetime on fine-grained PATs at the enterprise level, and some GitHub MCP server tokens may be blocked. The gh CLI with classic or device-flow tokens works reliably, so use gh api when other methods fail.