Claude Code Plugins

Community-maintained marketplace

Feedback

layout-spacing-checker

@CANTAGESTUDIO/CosmicAtlasPacker
1
0

[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'.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

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