Fluent Ui Plugin

fluent-ui: build token-accurate Fluent 2 UIs, automatically

[](https://github.com/ArasaniRohithReddy/fluent-ui-plugin/actions/workflows/ci.yml) [](https://github.com/ArasaniRohithReddy/fluent-ui-plugin/releases/latest) [](LICENSE) [](CONTRIBUTING.md) [](https://github.com/ArasaniRohithReddy/fluent-ui-plugin/discussions)

> Agents · Skills · MCP tools that help developers, designers, and UI engineers implement Microsoft Fluent 2 (Fluent UI 2.0) correctly and fast, across Web, Power BI, Power Platform, and native iOS / Android / Windows, from any AI IDE.

🌐 Live site (itself a Fluent UI React v9 app, built with this plugin): arasanirohithreddy.github.io/fluent-ui-plugin · [Install & usage guide](GUIDE.md) · [Per-host matrix](hosts/README.md)

Version: 1.0.0 · License: MIT · Fluent 2 is the core of everything here: every surface applies the same design language (tokens, Segoe UI type ramp, spacing, corner radius, elevation, motion, accessibility).

---

Why this exists

Fluent 2 is large and precise: the right component, the right token, the right theme, and accessibility, every time. Doing that by hand is slow and error-prone. fluent-ui turns the official Fluent 2 design system into grounded, executable help: apply the design-language foundations (color, typography, layout, elevation, iconography, motion, shapes, material, content, responsible AI), look up real components and token values, generate brand themes, produce valid Power BI themes and PBIP/PBIR projects, and get Power Apps / Power Pages / PCF guidance, so users get token-accurate, accessible Fluent 2 without doing it manually.

Beyond greenfield, it also:

• Adopt/migrate existing UIs to Fluent 2: Fluent UI v8 to v9 (keeps Fluent 1 alongside Fluent 2), from other design systems, and hardcoded values to tokens.
• Support Fluent 1 (v8) as a first-class target, not just a migration source — including the collision traps where v8 and v9 export the same name for different components, so a wrong import compiles cleanly and misbehaves at runtime.
• Cover the native platforms: real iOS, Android and Windows types, imports and API. The same component name maps to a different type on every platform — and on Android both Fluent generations ship in the same Maven artifacts, separated only by Kotlin package — so native code can't safely be inferred from the web API.
• Find the right icon: 2,976 Fluent icon families searchable by meaning, returning the exact verified export and import. Fluent names icons for the object, not the function — so a guessed name (Refresh24Regular, Logout24Regular) is a compile error, while the real ones are ArrowSync24Regular and SignOut24Regular.
• Chart with Fluent: the 27 @fluentui/react-charts components plus DataVizPalette, wired into the Power BI theme generator so a Fluent-themed report and a Fluent-themed React chart use the same series colours.
• Bridge design names to code tokens: the Fluent 2 site's names are offset from the code tokens — the site's "Large" corner radius (8px) is borderRadiusXLarge, because borderRadiusLarge is 6px. Every design name resolves to the token that actually produces its value.
• Optional user presets (fluent.config.json) + persistent memory: agents honor your brand/accessibility/shape/size presets and remember your decisions; fully zero-config by default (no setup required).

What's inside

🤖 Agents (agents/)

| Agent | Role | |---|---| | fluent-ui-builder | Primary router that builds and delegates across all surfaces | | fluent-web-engineer | Fluent 2 web apps (React v9 / Web Components) | | fluent-powerbi-designer | Fluent themes + PBIP/PBIR reports | | fluent-power-platform-engineer | Power Apps, Power Pages, PCF | | fluent-native-engineer | Fluent on iOS, Android and Windows (SwiftUI/UIKit, Compose, WinUI 3, WPF) | | fluent-migration-engineer | Adopts/migrates existing UI to Fluent 2 (Fluent UI v8 to v9, other design systems, hardcoded to tokens) | | fluent-design-reviewer | Audits UI against Fluent 2 + a11y |

📚 Skills (skills/)

fluent-web-ui · fluent-theming · fluent-design-tokens · fluent-design-language · fluent-accessibility · fluent-ai-copilot-ui · fluent-powerbi-theme · fluent-pbip-report · fluent-powerbi-adopt · fluent-powerapps · fluent-powerpages · fluent-pcf-component · fluent-migration · fluent-design-review · fluent-config · fluent-v8 · fluent-native · fluent-figma

🛠️ MCP tools (mcp/, Node + TypeScript)

| Tool | Does | |---|---| | fluent_search_components / fluent_get_component | Search the catalog; get real props, imports, a11y, samples, usage do/don't | | fluent_list_tokens / fluent_get_token | Exact token values (color/type/spacing/radius/shadow/motion), light/dark/HC | | fluent_generate_theme | Brand hex to Fluent BrandVariants ramp + createLightTheme/createDarkTheme | | fluent_generate_powerbi_theme | Valid, Fluent-aligned Power BI report theme JSON | | fluent_scaffold_pbip | Fluent-themed PBIP/PBIR Power BI project | | fluent_pbir_audit | Read-only census of an existing PBIR report: pages + per-page canvas, visual/type/schema histograms, theme wiring, inline-override counts, inline fonts, hardcoded colors, bookmarks that captured formatting, geometry, effectiveness matrix | | fluent_pbir_apply_theme | Register a theme in an existing PBIR report (append the CustomTheme item, computed reportVersionAtImport) | | fluent_pbir_normalize_inline | Delete the inline overrides that make a theme inert, with a full ledger (dry run by default) | | fluent_pbir_verify | Assertions V1-V9 including the theme-effectiveness ratio (target >= 0.90) | | fluent_powerbi_visuals | Every Power BI visual + its Learn doc URL + Fluent 2 base-theme styling (mapped to the 21-page showcase) | | fluent_powerplatform_guidance | Power Apps / Power Pages / PCF Fluent guidance | | fluent_generate_code | Fluent web scaffolds (React v9 / Web Components) | | fluent_accessibility_checklist | Fluent 2 WCAG 2.1 AA checklist | | fluent_design_guidance | Fluent 2 design-language foundations: color, typography, layout, elevation, iconography, motion, shapes, material, content, responsible AI | | fluent_migration_guidance | Adopt/migrate to Fluent 2: Fluent UI v8 to v9, from another design system, hardcoded to tokens, per-surface | | fluent_get_images | Direct URLs to official Fluent 2 visuals (anatomy diagrams, do/don't examples, state/type illustrations, Motion demo videos) for any component or topic (show a diagram or hand over a source link) | | fluent_icon_search | Find the right Fluent icon by meaning and get its exact verified export name + import | | fluent_get_config / fluent_recall | Load the user's resolved presets (config > memory > default) + the recorded decision log | | fluent_init_config / fluent_set_config | Scaffold (first-run) or update the user's fluent.config.json presets | | fluent_remember | Record a design decision to .fluent/memory.json (append-only) | | fluent_v8_lookup / fluent_v8_guidance | Fluent 1 (Fluent UI React v8 / Office UI Fabric): real v8 symbols, the per-component v8 to v9 map, and the collision traps where v8 and v9 export the same name | | fluent_native_component / fluent_native_guidance | Native iOS / Android / Windows: real type names, imports and namespaces, key API and samples, plus which generation is current vs frozen | | fluent_figma_guidance | Figma MCP design-to-code: entitlements (rate limits per seat and plan), the client-catalog gate, remote vs desktop server, and Figma-variable to Fluent-token mapping. Credential-free |

Host coverage

The MCP server is a standard stdio server; agents/skills/instructions fan out via AGENTS.md, CLAUDE.md, and .github/. node hosts/register-mcp.mjs auto-registers 9 hosts across 10 config locations; 3 MCP dialects cover everything else. Priority hosts: GitHub Copilot CLI, VS Code, VS Code Insiders, Visual Studio, GitHub Copilot desktop app; also Cursor, Claude, Gemini, Antigravity, Windsurf, Cline. See [hosts/README.md](hosts/README.md) for copy-paste configs.

Quickstart

# 1) Clone and build the MCP server
git clone https://github.com/ArasaniRohithReddy/fluent-ui-plugin.git
cd fluent-ui-plugin/mcp
npm install
npm run build            # -> mcp/dist/index.js

# 2) Register it in your IDE (pick the matching template)
#    Copilot dialect   -> hosts/mcp.copilot.json
#    VS Code / VS       -> hosts/mcp.vscode.json
#    Claude-style       -> hosts/mcp.claude-style.json
#    Or register every installed host at once:
#    node hosts/register-mcp.mjs

Did it work? Restart your host, then ask it to run fluent_accessibility_checklist. A grounded Fluent 2 checklist back means the server is live; "tool not found" means the config path is wrong.

Then ask your assistant things like:

• "Build a Fluent 2 sign-in form with dark mode."
• "Generate a Power BI theme from brand #742774 and scaffold a PBIP report."
• "What's borderRadiusMedium? Give me a Fluent Combobox with a label."
• "Make my Power Apps canvas app match Fluent 2."
• "Review this component against Fluent 2 and accessibility."

Grounding & provenance (why it's trustworthy)

• Design system: crawled the official fluent2.microsoft.design — 121 of its 132 sitemap routes are referenced, with zero dead links. A small number of pages sit behind a Microsoft employee sign-in; their guidance text is not redistributed here (see [NOTICE](NOTICE)) — those records carry the facts, the official docUrl, and a note saying where to read the rest.
• Components: generated from the Fluent UI React Storybook's machine-readable API — 353 records with real props, slots, defaults, deprecations and maturity tiers, each carrying its sourceUrl. Plus 61 components with deep usage guidance from the design site.
• Tokens: extracted from installed @fluentui/react-theme / @fluentui/tokens / @fluentui/react-components source (real values, not guesses), and cross-checked against the site's published alias tables with zero conflicts.
• Icons: every name validated against @fluentui/react-icons' own export manifest at build time — the build fails rather than ship a name it can't prove.
• Themes: fluent_generate_theme reproduces Microsoft's Theme Designer output exactly (verified stop-for-stop against the live tool).
• Power BI: theme JSON schema-validated against reportThemeSchema-2.156; PBIP/PBIR scaffold validated against the official Fabric item schemas.
• Power Platform & host integration: grounded in Microsoft Learn with cited sources.

Repo layout

plugin.json            # plugin manifest (+ mirrors in .claude-plugin/.codex-plugin/.github)
.mcp.json              # bundled MCP server registration (Copilot dialect)
AGENTS.md · CLAUDE.md  # portable instructions (fan out to most hosts)
agents/                # 7 agents (*.agent.md)
skills/                # 18 skills (SKILL.md)
mcp/                   # MCP server: 29 tools (src/, dist/, data/)
templates/pbip/        # PBIP/PBIR project template
hosts/                 # per-IDE MCP config templates + install guide
assets/                # sample configs/apps + the fluent.config JSON schema
scripts/               # PBIR engine + data-build scripts
site/                  # the live site (Fluent UI React v9 app)
docs/                  # architecture · presentation · coverage + the published site build
.github/               # CI workflows, issue/PR templates, Copilot instructions

> Not published: research/ (grounded research notes) and assets/screenshots/ (Fluent 2 site captures) are gitignored local-only working folders — they hold gated/copyright Microsoft content, so they are not in the repository.

Docs

• [GUIDE.md](GUIDE.md): install it, then use it — per-host setup and worked examples.
• [docs/architecture.md](docs/architecture.md): how the pieces fit together.
• [docs/COVERAGE.md](docs/COVERAGE.md): what's covered, measured against the source of truth.
• [docs/presentation.md](docs/presentation.md): leadership presentation outline.
• [CHANGELOG.md](CHANGELOG.md): what changed in each release.
• [NOTICE](NOTICE): attribution, trademarks, and how sign-in-gated Microsoft material is handled.

Contributing and community

This is an open-source project (MIT) and contributions are welcome.

• Bugs: open a bug report.
• Features: open a feature request.
• Questions and ideas: join GitHub Discussions.
• Pull requests: see [CONTRIBUTING.md](CONTRIBUTING.md) for the dev setup and process.
• Security: please follow the [Security Policy](SECURITY.md).

By participating you agree to the [Code of Conduct](CODEOFCONDUCT.md).

License

MIT © Rohith Reddy Arasani. Fluent, Fluent 2, Power BI, and Power Platform are trademarks of Microsoft.

Source & license

This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: ArasaniRohithReddy
• Source: ArasaniRohithReddy/fluent-ui-plugin
• License: MIT
• Homepage: https://arasanirohithreddy.github.io/fluent-ui-plugin/

Install and usage instructions live in the source repository linked above.