agentleFS
Sign inStart free
blendsdkblendsdk/fluentui-mcp/.agents/skills/fluentui/SKILL.md

fluentui

Skill5 starsChanged 49 days agoMITView on GitHub

Use when building React user interfaces with FluentUI React v9 (for example Button, Input, Dialog, DataGrid, FluentProvider, makeStyles, tokens). Covers setup, theming, styling, accessibility, component APIs, and task recipes, with verified examples from the real package.

1 other project uses a version of this.

Adopted by

Most recently taken up by

  • Other versions1 project uses a version of this.

    Word for word · 0

    None found.

    Edited · 0

    None found.

    Wrote their own version · 1

    1. microsoft/vscode-documentdb★ 33same name

    How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.

  • In this repositoryOne other file it gives its agents.

The file

We split this skill into the rules it gives an agent

9 rules. About 0 are common, 4 are distinctive, and 5 are very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈4

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 5

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Very specific:

    Check the installed version first: Run npm ls @fluentui/react-components (or read package.json) before writing code.

    line 20
  2. Very specific:

    Never invent a prop: If a prop is not listed on the component's reference page, do not pass it.

    line 26
  3. Very specific:

    Style with Griffel and tokens: Use makeStyles and the design tokens in tokens, not hard-coded colors or spacing.

    line 33
  4. Very specific:

    Accessibility is part of the task: Every interactive element needs a label, keyboard support, and correct roles.

    line 36
  5. Distinctive:

    not covered by this skill version: instead of guessing.

    line 43
  6. Distinctive:

    Read the reference page before writing component code.

    line 102
  7. Distinctive:

    Keep imports at the top and use the public entry points.

    line 103
  8. Distinctive:

    Prefer composition and tokens over custom CSS.

    line 104
  9. Very specific:

    When unsure, search references/index.md for the component or task name.

    line 105

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

FluentUI React v9

This skill teaches you to build user interfaces with FluentUI React v9. The knowledge base is bundled offline: every component page, category guide, and task recipe lives under references/ next to this file. Read the relevant reference before writing code, and copy patterns from the verified examples rather than guessing.

Hard rules

  1. Check the installed version first. Run npm ls @fluentui/react-components (or read package.json) before writing code. This skill targets v9.
  2. Import from the documented entry points. Components come from @fluentui/react-components; icons come from @fluentui/react-icons. Do not import from an internal @fluentui/react-* package unless a reference page says to.
  3. Never invent a prop. If a prop is not listed on the component's reference page, do not pass it. Look up the real name in references/components/<component>.md.
  4. Prefer the verified examples. Each component page renders examples taken from FluentUI's own Storybook source. Start from one of those and adapt it.
  5. Wrap the tree in FluentProvider. Theming, tokens, and right-to-left all depend on it. See references/foundation/fluent-provider.md.
  6. Style with Griffel and tokens. Use makeStyles and the design tokens in tokens, not hard-coded colors or spacing. See references/foundation/styling-griffel.md.
  7. Accessibility is part of the task. Every interactive element needs a label, keyboard support, and correct roles. See references/foundation/accessibility.md.
  8. Disclose the covered version and stay inside it. Answer from what this skill version covers — see ## Source & versions in references/index.md. State the covered Fluent UI version, list the reference files you used, and if a component, prop, or API is not present in the references, say it is not covered by this skill version instead of guessing.

How to route a task

If the task is about…Read
Setting up a project, imports, or the providerreferences/foundation/getting-started.md, references/foundation/fluent-provider.md
Theming, dark mode, tokens, or RTLreferences/foundation/theming.md, references/quick-reference/styling-tokens.md
Writing styles with Griffelreferences/foundation/styling-griffel.md
A specific component's props or examplesreferences/components/<component>.md
A whole class of controls (all buttons, all inputs)references/categories/<category>.md
A concrete job such as a login form or a data tablereferences/recipes/<group>/<recipe>.md
A short cheat sheet or checklistreferences/quick-reference/<topic>.md
An overview of everything availablereferences/index.md

Component map

Components are grouped into eight categories. Read the category page for shared guidance, then the component page for exact props and examples.

CategoryReferenceTypical components
Buttonsreferences/categories/buttons.mdButton, CompoundButton, MenuButton, SplitButton, ToggleButton
Formsreferences/categories/forms.mdInput, Textarea, Checkbox, Radio, Select, Switch, Slider
Navigationreferences/categories/navigation.mdTabList, Breadcrumb, Link, NavDrawer
Data displayreferences/categories/data-display.mdDataGrid, Table, Tree, Badge, Avatar
Feedbackreferences/categories/feedback.mdSpinner, ProgressBar, Toast, MessageBar
Overlaysreferences/categories/overlays.mdDialog, Drawer, Menu, Popover, Tooltip
Layoutreferences/categories/layout.mdCard, Divider, Grid, Toolbar
Utilitiesreferences/categories/utilities.mdAccordion, Portal, and remaining components

The full, always-current list is generated into references/index.md.

Common recipes

These walk through a complete, working composition. Each lists the components it uses and renders full examples.

  • references/recipes/forms/login-form.md — a labelled, validated login form.
  • references/recipes/data/data-table.md — a sortable, paginated data table.
  • references/recipes/navigation/tabs.md — tabbed in-page navigation.
  • references/recipes/modals/confirm-dialog.md — a confirmation dialog with a focus trap.
  • references/recipes/layout/dashboard-shell.md — an application shell with a sidebar and content area.

The complete set of nineteen recipes is indexed in references/index.md.

Assets

assets/templates/ holds starting points you can copy into a project:

  • minimal-app.md — the smallest correct FluentUI app.
  • form.md — a form with validation.
  • dashboard-shell.md — an app shell with navigation.
  • admin-crud.md — a list-and-edit admin screen.

Working agreement

  • Read the reference page before writing component code.
  • Keep imports at the top and use the public entry points.
  • Prefer composition and tokens over custom CSS.
  • When unsure, search references/index.md for the component or task name.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free