Detect hardcoded visual values in UI code and suggest design token replacements.
npx skills add https://github.com/kaelig/react-craft --skill token-validator
Please help me install this Agent Skill. Skill: token-validator Source: https://github.com/kaelig/react-craft/tree/main/react-craft/skills/token-validator Command: npx skills add https://github.com/kaelig/react-craft --skill token-validator
This Skill identifies and flags hardcoded visual values (like colors, spacing, and typography) in UI code, promoting the consistent use of design tokens.
#333333 instead of the design system's color.text.primary token. The Token Validator flags this, suggests the correct token, and provides a confidence score.Scan the project for hardcoded values and suggest design token replacements.
High-intent search queries and answers about installing and using this skill.
To detect hardcoded visual values in React UI components, this solution scans your codebase for direct uses of colors, spacing, typography, and border-radius. It then flags these instances and recommends matching design token replacements.
Design token suggestion works by analyzing hardcoded CSS values against your token definitions. It recommends matching replacements and provides confidence scores to indicate the accuracy of the suggested token mapping for your UI code.
Yes, the design token validator supports DTCG, CSS Custom Properties, and Storybook MCP formats. This allows it to accurately recognize and map hardcoded values to your specific token naming conventions across different frontend setups.
To avoid false positives when scanning frontend code, the validator filters suggestions based on context and specific exclusions. This ensures only relevant hardcoded visual values are flagged for design token replacement, improving code quality.
The best way to enforce design tokens in UI development is to scan your project for hardcoded visual values and replace them with suggested tokens. This promotes visual consistency and maintainability across your frontend codebase.
shawn-sandyExtract design tokens from Figma and generate CSS, SCSS, JSON, TypeScript, and DTCG files.
endlessblinkReplace hardcoded values with design tokens and standardize UI components.
mgd34msuDevelop, document, and test UI components in isolation with Storybook.
tanujsutariaAudit SwiftUI views for hardcoded colors, spacing, and typography.