token-lookup Skill
Find the matching Fluent UI design token for a hardcoded CSS value (color, spacing, font size, border radius, shadow) Published by microsoft in fluentui.
What is token-lookup Skill?
Find the matching Fluent UI design token for a hardcoded CSS value (color, spacing, font size, border radius, shadow) Published by microsoft in fluentui. This profile combines repository metadata with install, compatibility, and usage signals so developers can quickly decide whether it fits their agent workflow before opening the source repository.
Automated repository signals based on public metadata such as recency, license, installation evidence, and adoption. These are not a security audit or endorsement.
Key capabilities
- Includes SKILL.md support
- Reusable instructions support
- Documentation
- Design and media
- Research
- Documentation use cases
- Design and media use cases
Technical details
- Install or run with Copy skill directory
When to use token-lookup Skill
- Use it for documentation.
- Use it for design and media.
- Use it for research.
Built with
Editorial notes
Source
- Creator: microsoft
- Repository: microsoft/fluentui
- Skill file: .agents/skills/token-lookup/SKILL.md
What it does
Find the matching Fluent UI design token for a hardcoded CSS value (color, spacing, font size, border radius, shadow)
Skill instructions
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 for token categorie
Explore related resources
Frequently asked questions
What is token-lookup?
token-lookup is a open-source AI agent skill with Copy skill directory. Find the matching Fluent UI design token for a hardcoded CSS value (color, spacing, font size, border radius, shadow)
Who is token-lookup best for?
token-lookup is best for reusing agent instructions, scripts, and references, documentation workflows, design and media workflows, research workflows.
How do I install token-lookup?
Install or run token-lookup using Copy skill directory. Check token-lookup for the latest setup command.
Is token-lookup actively maintained?
token-lookup may need a closer maintenance check before production use.
Auto-fetched from GitHub.
