Agent skill
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'.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/layout-spacing-checker
SKILL.md
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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?