ironmind-styling

What problem does it solve?

UI consistency across multiple themes is hard to maintain; a lack of unified styling leads to visual drift and inconsistent user experiences. This skill provides a centralized system of design tokens and theme-aware CSS variables to keep IRONMIND components looking cohesive across light, dark, and custom themes.

Core Features & Use Cases

• Design tokens and CSS variables provide a single source of truth for colors, typography, spacing, and components.
• Theme switching safety: ensure components gracefully adapt when data-theme changes without breaking layout or accessibility.
• Reusable patterns: a library of classes and tokens (buttons, panels, cards, badges, typography) that can be applied across the app to maintain consistency.
• Use case: quickly prototype a new screen by applying the established tokens to ensure visual parity with existing components.

Quick Start

Apply the styling patterns to your components by importing the design tokens and using the CSS variables for colors, borders, and typography, then validate across themes.