Motion & Animation

spacing-rhythm-consistency

Detect stacks that mix spacing tokens from different sub-scales.

Flags vertical stacks where the spacing tokens drift across sub-scales (mt-3 next to mt-5 next to mt-7) inside the same section. A strong tell-tale of AI-assembled layouts; off by default, enable once your design system has stabilised.

Behavior

• Fixable: No.
• Suggestions: No.

Examples

Bad:

<section>
  <h2 className="mt-3">A</h2>
  <p className="mt-5">B</p>
  <p className="mt-7">C</p>
</section>

Good:

<section className="space-y-4">
  <h2>A</h2>
  <p>B</p>
  <p>C</p>
</section>

Related rules

• no-arbitrary-spacingDisallow arbitrary spacing values like p-[13px] in Tailwind classes.
• consistent-component-spacingDetect inconsistent spacing patterns across similar components.
• consistent-border-radiusDetect inconsistent border-radius across similar components.

Use it

Enable spacing-rhythm-consistency in your eslint.config.js:

import deslint from '@deslint/eslint-plugin';

export default [
  {
    plugins: { deslint },
    rules: {
      'deslint/spacing-rhythm-consistency': 'error',
    },
  },
];

Found a false positive? Report it on GitHub →

← Back to all rules