sb-health

Audit React and Vite codebases for design system inconsistencies via static analysis.

18|Updated Jun 16, 2026

Search Tags:#linting #react #design system #audit #vite #tokens

Ready to run

npx skills add https://github.com/strongeron/storybook-workbench --skill sb-health

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: sb-health
Source: https://github.com/strongeron/storybook-workbench/tree/main/skills/sb-health
Command: npx skills add https://github.com/strongeron/storybook-workbench --skill sb-health

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires bash, python3, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill identifies design system drift, such as hardcoded color literals, unused tokens, and inconsistent naming, ensuring your React+Vite application remains maintainable and visually consistent.

Core Features & Use Cases

Design System Audit: Detects raw hex/rgba literals, undefined tokens, and scale gaps in your codebase.
Property-Token Governance: Enforces designer-defined rules to ensure tokens are used on the correct CSS properties (e.g., preventing container tokens from being used as text colors).
Use Case: Use this Skill to scan your project for hardcoded colors that should be design tokens, then automatically generate a report that maps these findings to specific files and lines for easy refactoring.

Quick Start

Run the sb-health skill to validate your design system and generate a health report for the current project.

Frequently Asked Questions about sb-health

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I audit my React design system for hardcoded colors and undefined tokens?▼

You can audit your React design system by running static analysis on your CSS and component files to detect raw hex/rgba literals, undefined tokens, and scale gaps. This generates a structured JSON report mapping findings to specific files and lines for refactoring.

What is design system drift and how do I find it in a Vite project?▼

Design system drift is the accumulation of hardcoded color literals, unused tokens, and inconsistent naming in your codebase. You can find it by scanning your React and Vite project files to identify property-token family mismatches and raw values that should be tokens.

Does the design system audit support enforcing property-token governance rules?▼

Yes, the audit enforces property-token governance by checking designer-defined rules to ensure tokens are used on the correct CSS properties. This prevents issues like using container tokens as text colors during static analysis.

Do I need bash and python3 to run a design system health check?▼

Yes, you need bash and python3 installed in your environment to execute the validation scripts. These dependencies are required to perform the static analysis and generate the structured JSON health report.

What's the best way to map design token inconsistencies to specific files for refactoring?▼

The best way to map token inconsistencies is to run an automated audit that generates a structured JSON report. This report connects identified raw literals and mismatches directly to specific files and lines, enabling easy refactoring.