Detect hardcoded colors, spacing, and fonts in Vue or CSS projects.
npx skills add https://github.com/ChenyCHENYU/wl-skills-ui --skill token-chenychenyu
Please help me install this Agent Skill. Skill: 设计 Token 使用规范 Source: https://github.com/ChenyCHENYU/wl-skills-ui/tree/main/skills/runtime/design-tokens Command: npx skills add https://github.com/ChenyCHENYU/wl-skills-ui --skill token-chenychenyu
This Skill enforces the consistent application of design tokens, ensuring all colors, spacing, and fonts are referenced via CSS variables, thereby maintaining uniform UI style across projects.
Use the design tokens skill to scan your project directory for any hardcoded color values and replace them with the CSS variables defined in the style guide.
High-intent search queries and answers about installing and using this skill.
To replace hardcoded color hex values with CSS variables, scan your project directory to detect hardcoded values in stylesheets, templates, and scripts, then substitute them with predefined CSS design tokens to ensure visual consistency.
Design tokens enforce UI consistency by centralizing predefined colors, spacing, and fonts into CSS variables. Referencing these tokens across a codebase guarantees that all UI elements maintain a uniform style and adhere to the design system.
Yes, you can use this design tokens approach to scan large Vue projects. It is specifically designed to analyze style files and source code within large Vue or CSS projects to identify hardcoded values and enforce strict style adherence.
The best way to maintain style consistency when updating a large codebase is to enforce design tokens by detecting hardcoded color hex values in stylesheets and scripts, replacing them with standardized CSS variables for colors and spacing.
Your UI style looks inconsistent because components likely contain hardcoded color hex values instead of using CSS variables. Scanning the codebase to enforce design tokens ensures all colors, spacing, and fonts reference a unified style guide.
WesleySmitsDetect hard-coded values and enforce design tokens in CSS and component code.
anderskevConfigure Tailwind CSS v4 themes using @theme directives and OKLCH colors.
transporte-terrestreManage global CSS styles and typography for Angular applications using CSS variables.
shawn-sandyConvert inline HTML and JSX styles into reusable CSS classes with variables.
