SpacingRhythm [check] v1.0.0

Validates that margin/padding/gap values align to a 4px or 8px base grid (configurable). Off-grid values (e.g. 13px, 7px) break vertical rhythm and indicate ad-hoc spacing decisions.

signature: (css: string, context?: object) -> CheckResult predicate: // All margin/padding/gap values must align to an 8px (or 4px) base grid. // Allowed: 0, 1px hairline, multiples of 4 up to 96, multiples of 8 above. // Tolerated: rem multiples that resolve to grid-aligned px (0.25rem = 4px). BASE = context?.baseUnit ?? 4 spacingProps = /^(margin|padding|gap|row-gap|column-gap|top|right|bottom|left|inset)/ decls = parseCSS(css).filter(d => spacingProps.test(d.property)) for d in decls: values = d.value.split(/\s+/) for v in values: px = toPx(v) // resolve rem/em assuming 16px root if px === null: continue // calc(), var(), auto, etc. — skip if px === 0 || px === 1: continue if px % BASE !== 0: yield { selector: d.selector, prop: d.property, value: v, px, fail: 'off-grid', baseUnit: BASE } else if px > 96 && px % 8 !== 0: yield { selector: d.selector, prop: d.property, value: v, px, fail: 'large-value-not-8px-multiple' }

// Also check spacing tokens (--space-, --gap-) are powers of 2 / 4-multiples tokens = parseCSS(css).filter(d => /^--(space|gap|sp)-/.test(d.property)) for t in tokens: px = toPx(t.value) if px && px % BASE !== 0: yield { selector: ':root', prop: t.property, value: t.value, px, fail: 'token-off-grid' }

Validates

@community/rule-spacing-rhythm

Severity

medium

Failure Message Template

Selector '{selector}' uses off-grid {prop}: {value} ({px}px). Round to nearest {baseUnit}px multiple — e.g. {px}px → {suggested}px.

Evaluation Method

automated

Tools

• postcss
• regex
• @anthropic/claude-code

False Positive Rate

medium

SpacingRhythm [check] v1.0.0

Validates that margin/padding/gap values align to a 4px or 8px base grid (configurable). Off-grid values (e.g. 13px, 7px) break vertical rhythm and indicate ad-hoc spacing decisions.

signature: (css: string, context?: object) -> CheckResult predicate: // All margin/padding/gap values must align to an 8px (or 4px) base grid. // Allowed: 0, 1px hairline, multiples of 4 up to 96, multiples of 8 above. // Tolerated: rem multiples that resolve to grid-aligned px (0.25rem = 4px). BASE = context?.baseUnit ?? 4 spacingProps = /^(margin|padding|gap|row-gap|column-gap|top|right|bottom|left|inset)/ decls = parseCSS(css).filter(d => spacingProps.test(d.property)) for d in decls: values = d.value.split(/\s+/) for v in values: px = toPx(v) // resolve rem/em assuming 16px root if px === null: continue // calc(), var(), auto, etc. — skip if px === 0 || px === 1: continue if px % BASE !== 0: yield { selector: d.selector, prop: d.property, value: v, px, fail: 'off-grid', baseUnit: BASE } else if px > 96 && px % 8 !== 0: yield { selector: d.selector, prop: d.property, value: v, px, fail: 'large-value-not-8px-multiple' }

// Also check spacing tokens (--space-, --gap-) are powers of 2 / 4-multiples tokens = parseCSS(css).filter(d => /^--(space|gap|sp)-/.test(d.property)) for t in tokens: px = toPx(t.value) if px && px % BASE !== 0: yield { selector: ':root', prop: t.property, value: t.value, px, fail: 'token-off-grid' }

Validates

@community/rule-spacing-rhythm

Severity

medium

Failure Message Template

Selector '{selector}' uses off-grid {prop}: {value} ({px}px). Round to nearest {baseUnit}px multiple — e.g. {px}px → {suggested}px.

Evaluation Method

automated

Tools

• postcss
• regex
• @anthropic/claude-code

False Positive Rate

medium

Validates

@community/rule-spacing-rhythm

Severity

medium

Failure Message Template

Selector '{selector}' uses off-grid {prop}: {value} ({px}px). Round to nearest {baseUnit}px multiple — e.g. {px}px → {suggested}px.

Evaluation Method

automated

Tools

• postcss
• regex
• @anthropic/claude-code

False Positive Rate

medium