layout-spacing-checker
[Design System] Validate margin/padding/gap values against spacing scale and grid rules. Use when (1) checking if spacing values follow the design system scale, (2) finding off-scale or inconsistent spacing, (3) auditing layout consistency across components, (4) user asks to 'check spacing', 'validate layout', 'audit margins/padding', or 'find off-scale values'.
When & Why to Use This Skill
This Claude skill automates the validation of layout spacing, margins, and padding against predefined design system scales. It helps developers and designers maintain UI consistency by identifying off-scale values, inconsistent gaps, and layout discrepancies across various codebases including CSS, SCSS, and SwiftUI, ensuring every component adheres to brand-specific grid rules.
Use Cases
- Design System Auditing: Automatically scan large codebases to identify hardcoded pixel values that deviate from the official spacing tokens.
- UI Consistency Checks: Ensure uniform layout behavior across different components by detecting inconsistent margin and padding usage.
- Refactoring Support: Streamline the migration from legacy styles to a token-based design system by finding and suggesting corrections for off-scale spacing values.
- Automated QA: Integrate spacing validation into the development workflow to catch layout regressions and 'pixel-pushing' errors before they reach production.
| name | layout-spacing-checker |
|---|---|
| description | "[Design System] Validate margin/padding/gap values against spacing scale and grid rules. Use when (1) checking if spacing values follow the design system scale, (2) finding off-scale or inconsistent spacing, (3) auditing layout consistency across components, (4) user asks to 'check spacing', 'validate layout', 'audit margins/padding', or 'find off-scale values'." |
Layout & Spacing Scale Checker
Validate spacing values against a defined scale and find inconsistencies.
Quick Start
python3 scripts/check_spacing.py --scale spacing.yml --source src/
Issue Types
| Type | Severity | Description |
|---|---|---|
off-scale |
warning | Value not in spacing scale |
inconsistent |
info | Different spacing for similar components |
zero-spacing |
info | Potentially missing spacing |
excessive |
warning | Unusually large spacing value |
Detection Examples
CSS/SCSS
/* off-scale: 17px not in scale */
.card { padding: 17px; }
/* Suggested: 16px (md) or 20px */
SwiftUI
// off-scale: 15 not in scale
.padding(15)
// Suggested: .padding(16) or spacing token .md