Does this skill support Tailwind CSS?

No, this skill is specifically designed to enforce a strict BEM methodology and prohibits utility-first frameworks like Tailwind to ensure component-scoped CSS architecture.

How does it handle hardcoded color values?

It identifies hex, RGB, or named colors and replaces them with the corresponding semantic CSS custom properties defined in your design system.

Which file formats can this skill audit?

It supports Astro component styles (.astro), SolidJS component stylesheets (.tsx), global CSS files, and component-specific CSS files.

Will this skill break my existing layout?

The skill is designed to preserve visual intent while normalizing the underlying code structure. However, it is recommended to review the proposed refactors in a development environment.

CSS BEM Auditor & Refactor Tool

Name: CSS BEM Auditor & Refactor Tool
Author: njculpin

bynjculpin

デザインツール

Audits and refactors CSS to ensure strict compliance with BEM methodology and design system tokens.

概要

The CSS BEM Auditor is a specialized skill designed to maintain high standards of CSS architecture by enforcing the Block-Element-Modifier (BEM) methodology. It automatically identifies non-compliant selectors, hardcoded values, and prohibited utility-first patterns (like Tailwind), converting them into structured, scalable, and maintainable styles. By integrating deeply with a project's design system, it ensures all colors, spacing, and typography use authorized CSS custom properties, providing a consistent UI across Astro components, SolidJS islands, and global stylesheets.

主な機能

Automated enforcement of BEM naming conventions for blocks, elements, and modifiers.
Selective refactoring across Astro, SolidJS, and global CSS files.
Conversion of hardcoded CSS values into semantic design system tokens.
Audit reports for identifying naming collisions and orphaned selectors.
Detection and removal of prohibited utility-first and nested CSS patterns.
0 GitHub stars

ユースケース

Standardizing CSS contributions from multiple developers to prevent specificity wars.
Migrating a legacy codebase from utility-first CSS to a structured BEM system.
Ensuring design system consistency across a multi-framework project.

概要

主な機能

Automated enforcement of BEM naming conventions for blocks, elements, and modifiers.
Selective refactoring across Astro, SolidJS, and global CSS files.
Conversion of hardcoded CSS values into semantic design system tokens.
Audit reports for identifying naming collisions and orphaned selectors.
Detection and removal of prohibited utility-first and nested CSS patterns.
0 GitHub stars

ユースケース

Standardizing CSS contributions from multiple developers to prevent specificity wars.
Migrating a legacy codebase from utility-first CSS to a structured BEM system.
Ensuring design system consistency across a multi-framework project.