spacing-system

To audit inconsistent CSS spacing values, this skill provides an evidence-based framework that identifies off-scale margins and padding, mapping them to a standardized tokenized 4px-base scale for visual coherence.

A tokenized 4px-base scale for layout spacing is a standardized system that eliminates arbitrary gaps by enforcing a unified rhythm, mapping values to semantic roles like attachment, control, task, group, region, and chapter.

To transition hardcoded CSS pixels to semantic spacing tokens, use this skill to remediate off-scale values and generate an evidence table mapping layout primitives to specific semantic roles.

Yes, you can establish a content-derived spacing hierarchy without external dependencies, as this skill operates independently to deliver standardized layout primitives and gap consistency through its internal tokenized scale.

The best way to standardize layout rhythm for frontend refactoring is enforcing a unified 4px-base scale with semantic tokenization, ensuring every margin and padding choice is intentional and evidence-backed.

You should not use a 4px-base spacing system when your interface requires highly custom, non-standard spacing rhythms that cannot conform to a unified scale, as this skill enforces strict remediation of off-scale values.