What files does the Heartbeat Hearthstone Audit scan?

The skill specifically targets React components (.tsx), TypeScript files (.ts), and CSS files within the /Users/phaedrus/Development/heartbeat directory.

Does it support dark mode migration?

Absolutely. The skill provides a comprehensive map of CSS variable tokens for both Light Mode and Dark Mode surfaces to ensure accessibility and theme support.

How does it handle banned typography?

It scans the codebase for non-compliant fonts like Inter or Roboto and guides the user to replace them with the approved Lora, Nunito, or IBM Plex Mono fonts.

Can it detect hardcoded colors in TypeScript files?

Yes, it uses specialized grep patterns to find hex codes and RGB values in .tsx and .ts files while ignoring existing CSS variable usage.

Heartbeat Hearthstone Audit

Name: Heartbeat Hearthstone Audit
Author: phrazzld

byphrazzld

•

设计工具

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.

主要功能

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

使用场景

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

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add phrazzld/claude-config heartbeat-hearthstone-audit

For use in Claude.ai and ChatGPT

Download Skill