design-tokens

Design tokens provide a centralized system of predefined semantic colors, spacing values, and component patterns that enforce consistency across your React UI. This Skill creates and maintains those tokens—colors for success, warning, error states; a 4px-based spacing grid; and patterns for badges and cards—with integrated ESLint rules that block raw Tailwind colors and non-standard spacing.

Yes. This Skill integrates with Tailwind by defining semantic color and spacing tokens, then enforcing their use through ESLint rules that prevent raw Tailwind colors and odd spacing values. It works within your existing Tailwind setup to maintain design system compliance.

Use a design token system to centralize colors, spacing, and component patterns in one place, then enforce adoption through linting rules. This Skill supplies ready-to-use patterns for badges and cards, semantic color states, and a strict 4px spacing grid to keep all dashboard components aligned.

This Skill defines and enforces a 4px-based spacing grid as part of its design token system. It integrates ESLint rules that block spacing values that don't align with the grid, ensuring visual consistency without manual calculation or review.

Design tokens can be enforced automatically through ESLint rules. This Skill includes built-in rules that block raw Tailwind colors, misaligned spacing, and non-standard heroicons, removing the need for manual code review to catch design system violations.

The integrated ESLint rules will flag violations—raw Tailwind colors, non-4px spacing, and unauthorized icons—during development. This prevents inconsistencies from reaching production and helps your team stay within the defined design system boundaries.