Menu
Find the matching Fluent UI design token for a hardcoded CSS value (color, spacing, font size, border radius, shadow)
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| 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