Enforces Fluent UI v9 as the component library for all frontend work. Covers theming, component selection, styling patterns, and the MCP server for looking up components. Use this when building or modifying any client UI.
This repo has a Fluent UI MCP server configured in .vscode/mcp.json:
{
"servers": {
"fluent-ui": {
"command": "npx.cmd",
"args": ["mcp-fluent-ui"]
}
}
}
Use the mcp-fluent-ui MCP server tools when you need to:
@fluentui/react-iconsAlways consult the MCP server before reaching for custom implementations. If Fluent UI has a component for it, use it.
@fluentui/react-components # All UI components + theming
@fluentui/react-icons # Icon set
Do not install @fluentui/react (v8) — the project uses v9 exclusively.
The app uses a custom GitHub-style dark theme defined in apps/client/src/theme.ts.
Key colors:
| Token | Value | Usage |
|---|---|---|
colorNeutralBackground1 | #0d1117 | Page background |
colorNeutralBackground2 | #161b22 | Cards, sidebar, surfaces |
colorNeutralBackground3 | #21262d | Hover states, elevated surfaces |
colorNeutralStroke1 | #30363d | Borders |
colorNeutralForeground1 | #e6edf3 | Primary text |
colorNeutralForeground2 | #8b949e | Secondary text |
colorBrandForegroundLink | #58a6ff | Links, brand accent |
The brand ramp is built around #58a6ff (GitHub blue).
tokens from @fluentui/react-components for colors — never hardcode colors unless extending the theme.<FluentProvider theme={contosoTheme}> in main.tsx.Use makeStyles from @fluentui/react-components for all custom styles.
import { makeStyles, tokens } from "@fluentui/react-components";
const useStyles = makeStyles({
container: {
padding: "16px",
backgroundColor: tokens.colorNeutralBackground2,
borderRadius: "8px",
border: `1px solid ${tokens.colorNeutralStroke1}`,
},
});
makeStyles — not CSS files, inline styles, or other CSS-in-JS libraries.tokens.colorNeutralBackground1, etc.) instead of raw hex values.theme.ts.Use Fluent text components — not raw HTML headings or <p> tags:
import { Title1, Title2, Title3, Subtitle1, Text } from '@fluentui/react-components'
<Title1>Page Title</Title1>
<Text size={300}>Description text</Text>
Import from @fluentui/react-icons. Use Regular weight by default, Filled for active states:
import { BoardRegular, BoardFilled } from "@fluentui/react-icons";
Use Fluent primitives and makeStyles with flexbox — not CSS grid frameworks or layout libraries.
@fluentui/react (v8) — we use v9 (@fluentui/react-components)makeStylestokens<h1>, <button>, <input>) when a Fluent component exists