# Fluent Ui Plugin

> Agents + skills + MCP tools to build and adopt Microsoft Fluent 2 (Fluent UI 2.0) across Web, Power BI, and Power Platform. Works in Copilot CLI, VS Code, Visual Studio, Cursor, Claude, Gemini, and more.

- **Type:** MCP server
- **Install:** `agentstack add mcp-arasanirohithreddy-fluent-ui-plugin`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [ArasaniRohithReddy](https://agentstack.voostack.com/s/arasanirohithreddy)
- **Installs:** 0
- **Category:** [Developer Tools](https://agentstack.voostack.com/c/developer-tools)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [ArasaniRohithReddy](https://github.com/ArasaniRohithReddy)
- **Source:** https://github.com/ArasaniRohithReddy/fluent-ui-plugin
- **Website:** https://arasanirohithreddy.github.io/fluent-ui-plugin/

## Install

```sh
agentstack add mcp-arasanirohithreddy-fluent-ui-plugin
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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](https://arasanirohithreddy.github.io/fluent-ui-plugin/)** · **[Install & usage guide](GUIDE.md)** · **[Per-host matrix](hosts/README.md)**

**Version:** [1.0.0](https://github.com/ArasaniRohithReddy/fluent-ui-plugin/releases/latest) · **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
```bash
# 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](https://github.com/ArasaniRohithReddy/fluent-ui-plugin/issues/new?template=bug_report.yml).
- **Features:** open a [feature request](https://github.com/ArasaniRohithReddy/fluent-ui-plugin/issues/new?template=feature_request.yml).
- **Questions and ideas:** join [GitHub Discussions](https://github.com/ArasaniRohithReddy/fluent-ui-plugin/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](CODE_OF_CONDUCT.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](https://github.com/ArasaniRohithReddy)
- **Source:** [ArasaniRohithReddy/fluent-ui-plugin](https://github.com/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.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/mcp-arasanirohithreddy-fluent-ui-plugin
- Seller: https://agentstack.voostack.com/s/arasanirohithreddy
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.