Does this skill help with web accessibility?

Yes, it checks for reduced-motion handling in animations, ARIA labels on status indicators, and proper semantic HTML usage.

How does it handle Tailwind CSS arbitrary values?

The skill flags 'bg-[#...]' and 'text-[#...]' patterns as violations and suggests semantic replacements like 'bg-up' or 'bg-degraded'.

What does the Heartbeat skill actually audit?

It scans your code for design system violations including incorrect token usage, banned UI patterns, typography errors, and missing accessibility attributes.

Why are left-border alerts banned in this system?

Kyoto Moss specifically forbids the combination of left-border accents with rounded corners, preferring icon-led designs or full outlines for better visual consistency.

Kyoto Moss Design System Auditor

Name: Kyoto Moss Design System Auditor
Author: phrazzld

byphrazzld

•

Design Tools

Audits Heartbeat UI components for strict compliance with the Kyoto Moss design system and semantic token conventions.

The Heartbeat Design System Auditor is a specialized tool designed to enforce the Kyoto Moss design language across your codebase. It performs deep scans of components to identify design token violations, such as hardcoded hex values or unmapped Tailwind defaults, while flagging banned UI patterns like specific alert styles. Beyond visual consistency, the skill evaluates typography, animation performance, and accessibility requirements, providing structured feedback with severity ratings and suggested fixes to ensure a cohesive and accessible user interface.

Key Features

01Detects banned UI patterns like left-border accents on rounded alerts

02Checks animations for reduced-motion handling and duration limits

03Identifies hardcoded color values and arbitrary Tailwind classes

04Audits typography for correct font-body and text-balance usage

05Enforces semantic status naming conventions (up, degraded, down)

065 GitHub stars

Use Cases

01Migrating legacy UI components to the Kyoto Moss semantic token system

02Automating design system compliance checks during the PR review process

03Ensuring new frontend features meet accessibility and performance standards

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add phrazzld/claude-config heartbeat

For use in Claude.ai and ChatGPT

Download Skill