Menu
Find the matching Fluent UI design token for a hardcoded CSS value (color, spacing, font size, border radius, shadow)
| name | token-lookup |
| description | Find the matching Fluent UI design token for a hardcoded CSS value (color, spacing, font size, border radius, shadow) |
| argument-hint | <css-value> |
| allowed-tools | Read Grep Glob |
Find the correct @fluentui/react-theme design token for the hardcoded value $ARGUMENTS.
Identify the value category:
Search the theme source for matching values:
packages/react-components/react-theme/library/src/
Look in the relevant theme files (e.g., colorPalette*.ts, global/, alias/) to find tokens that map to the given value.
Return the token name and usage:
// Instead of: color: '#0078d4'
// Use:
import { tokens } from '@fluentui/react-theme';
color: tokens.colorBrandBackground;
If no exact match exists, suggest the closest semantic token and explain the difference. Refer to docs/architecture/design-tokens.md for token categories.
| Hardcoded | Token |
|---|---|
#0078d4 | tokens.colorBrandBackground |
#323130 | tokens.colorNeutralForeground1 |
#ffffff | tokens.colorNeutralBackground1 |
4px border-radius | tokens.borderRadiusMedium |
8px padding | tokens.spacingHorizontalS or tokens.spacingVerticalS |
14px font-size | tokens.fontSizeBase300 |
600 font-weight | tokens.fontWeightSemibold |
These are approximate — always verify against the actual theme source.
Review a PR for correctness, pattern compliance, testing, accessibility, and safety. Produces a confidence score for merge readiness.
Triage newly-filed GitHub issues on the Fluent UI repo (microsoft/fluentui) following the Shield triage guidelines. Fetches open issues labeled `Needs: Triage :mag:` via the `gh` CLI, classifies each (bug vs feature, product area, partner ask, repro quality, a11y), recommends label changes and area-owner assignment, and then applies the approved changes. Use this skill whenever the user asks to triage issues, run shield triage, go through the triage queue, process needs-triage, or any variation -- even if they don't mention "Fluent UI" or "GitHub" explicitly, since that's the project context here.
Visually verify a component by launching its Storybook story and taking a screenshot with playwright-cli. Use after making visual changes to a component.
Create a beachball change file for the current changes. Determines change type (patch/minor) and generates a description from the diff.
Run lint on affected packages, parse errors, and auto-fix common issues (design tokens, React.FC, SSR safety, import restrictions)
Quick lookup for a Fluent UI package — path, dependencies, owner team, Nx project details, and relevant docs