Automate UI4 CSS migration reviews and auto-correct token violations.
npx skills add https://github.com/payloadcms/payload --skill ui4-review
Please help me install this Agent Skill. Skill: ui4-review Source: https://github.com/payloadcms/payload/tree/main/.claude/skills/ui4-review Command: npx skills add https://github.com/payloadcms/payload --skill ui4-review
This Skill automates the review and auto-fixing of CSS migrations for proper token usage in UI4, ensuring that CSS variables are used instead of hardcoded values.
Run the ui4-review skill on the changed CSS files after migration to automatically fix token violations.
High-intent search queries and answers about installing and using this skill.
To automate CSS token migration checks, you can run the ui4-review skill on changed component CSS files. It detects hardcoded values and raw palette tokens, automatically replacing them with appropriate semantic tokens while generating detailed violation reports.
The best way to ensure UI4 CSS migrations use semantic tokens is to run an automated review script that detects raw palette values. This process corrects token violations by replacing them with appropriate semantic CSS variables, reducing manual effort.
Auto-fixing token violations works by scanning component CSS files to identify hardcoded values and raw palette tokens. The script automatically replaces these violations with proper UI4 semantic tokens and provides a detailed report of all corrections made.
Yes, you can review CSS changes for token usage violations without manual inspection by running an automated review script. It checks component CSS files for hardcoded values and raw palette tokens, automatically applying fixes and generating detailed violation reports.
No, the ui4-review skill does not require any external dependencies to run. It operates as a standalone script that directly processes your component CSS files to detect and auto-correct token usage violations during UI4 migrations.
imsaifScan Tailwind UI components for hardcoded colors and design token violations.
facebookRun yarn prettier and yarn linc to fix linting and formatting issues.
calvingitOrganize token architecture, component specifications, and slide generation into a design system.
Eng0AIBuild a React 19 landing page with GSAP scroll animations and Tailwind CSS 4.
