Enforces Hearthstone design system compliance by auditing typography, CSS variables, and animation tokens.
The Heartbeat Hearthstone Audit skill is a specialized tool designed to maintain visual consistency and brand integrity within the Heartbeat project. It automates the process of identifying legacy styles, such as banned fonts (Inter, Roboto) and hardcoded hex colors, and facilitates their migration to the Hearthstone design system's CSS variables and ember-themed animations. By providing structured grep-based auditing commands and a clear remediation workflow, this skill ensures that React components and stylesheets adhere to specific UI tokens for light/dark modes, border radii, and motion patterns.
Key Features
01Identifies hardcoded hex and RGB colors for replacement with CSS variables
025 GitHub stars
03Automated detection of banned fonts like Inter, Roboto, and Space Grotesk
04Provides pre-configured grep commands for rapid codebase scanning
05Enforces standardized border radius tokens (6px to 16px) across components
06Maps legacy Kyoto Moss and Zen animations to Hearthstone ember effects
Use Cases
01Conducting automated design reviews during the development of new React components
02Refactoring hardcoded styles into a maintainable, themeable CSS variable architecture
03Migrating legacy UI components to the new Hearthstone design system tokens
