ui4-review
UI4 Review
Reviews CSS changes and auto-fixes token violations.
Important: Palette vs Semantic Tokens
--ramp-* tokens are the raw color palette (e.g., --ramp-white-1000, --ramp-blue-500). These are used only in colors.css to define semantic tokens.
--color-* tokens are context-aware semantic tokens (e.g., --color-bg, --color-text-brand). These handle light/dark theming automatically.
Components and elements should ALWAYS use --color-* semantic tokens, never --ramp-* palette tokens directly.
/* ❌ BAD - using raw palette */
background: var(--ramp-white-1000);
More from payloadcms/payload
payload
Use when working with Payload CMS projects (payload.config.ts, collections, fields, hooks, access control, Payload API). Use when debugging validation errors, security issues, relationship queries, transactions, or hook behavior.
584generate-translations
Use when new translation keys are added to packages to generate new translations strings
385triage-ci-flake
Use when CI tests fail on main branch after PR merge, or when investigating flaky test failures in CI environments
232audit-dependencies
Use when fixing dependency vulnerabilities, running pnpm audit, or when the audit-dependencies CI check fails
42