Audit React and Vite codebases for design system inconsistencies via static analysis.
npx skills add https://github.com/strongeron/storybook-workbench --skill sb-health
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
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.
Run the sb-health skill to validate your design system and generate a health report for the current project.
High-intent search queries and answers about installing and using this skill.
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.
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.
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.
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.
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.
LeoTechProSet up React, TypeScript, Vite, Tailwind CSS, and shadcn/ui projects and bundle them into a single HTML file.
aRustyDevCreate and manage production Grafana dashboards for real-time metric visualization.
TheBushidoCollectiveAutomate creation and publishing of custom ESLint rules and plugins.
googleGuide Angular component structure, styling, and architecture for Pinpoint Web UI contributions.
