token-lookup
Find the matching Fluent UI design token for a hardcoded CSS value (color, spacing, font size, border radius, shadow)
来源信息
- 仓库
- microsoft/fluentui
- 最近来源活动
- 2026年4月20日 14:10
- 检测到的 SKILL.md 语言
- 英语
- 星标
- 20,324
- 分支
- 2,947
安装方式
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
检查来源文件
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
正在显示 SKILL.md
SKILL.md
来源说明 · 只读预览- 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
# Design Token Lookup
Find the correct `@fluentui/react-theme` design token for the hardcoded value **$ARGUMENTS**.
## Steps
1. **Identify the value category:**
- Hex color / rgb / named color → color tokens
- px/rem spacing → spacing tokens
- px/rem font size → font size tokens
- px/rem border radius → border radius tokens
- Font weight (400, 600, bold) → font weight tokens
- Box shadow → shadow tokens
- Border width → stroke width tokens
- Duration (ms/s) → duration tokens
2. **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.
3. **Return the token name and usage:**
```tsx
// Instead of: color: '#0078d4'
// Use:
import { tokens } from '@fluentui/react-theme';
color: tokens.colorBrandBackground;
```
4. **If no exact match exists**, suggest the closest semantic token and explain the difference. Refer to [docs/architecture/design-tokens.md](docs/architecture/design-tokens.md) for token categories.
## Common Mappings
| 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.
在 GitHub 查看