semantic-theming

The semantic-theming skill is designed to enforce the use of semantic CSS variable theming in Tailwind projects. It helps maintain consistency in design by preventing raw colors, such as hex, RGB, or HSL values, and ensures that only theme-compliant classes are used. This skill is crucial in projects that rely on semantic design tokens, CSS custom properties, or custom ESLint theming rules, facilitating a standardized approach to styling across the entire codebase. By leveraging predefined semantic tokens instead of arbitrary colors, teams can enforce a unified and scalable design system that is easy to maintain and adapt over time.

Key features of this skill include the automatic detection of raw colors and non-semantic Tailwind classes using ESLint rules and other project-specific indicators, such as `docs/THEMING.md` or custom CSS variables in `src/index.css`. Developers can quickly transition to using semantic tokens like `bg-surface`, `text-primary`, and `border-primary` without worrying about manually adjusting styles. It also integrates with ESLint to provide real-time feedback on improper styling during development, pre-commit hooks, and in CI/CD pipelines. The skill supports various utilities like `cn()`, `clsx()`, and `cva()` to facilitate the use of semantic tokens in React components and class composition.

This skill is particularly useful for frontend developers working in Tailwind CSS projects, especially those focused on React components. It ensures that styles are aligned with a project's design system, providing cleaner, more maintainable code. It is also essential for teams that want to enforce consistency in their user interfaces and reduce the risk of introducing design inconsistencies due to raw color usage or incorrect class names.