layout-spacing-checker

Name: layout-spacing-checker
Availability: InStock
Author: cantagestudio

Audit CSS/SCSS and SwiftUI layouts for off-scale and inconsistent spacing values.

3|Updated Dec 22, 2025

Search Tags:#layout #audit #design-system #spacing #grid

Ready to run

npx skills add https://github.com/CANTAGESTUDIO/CosmicAtlasPacker --skill layout-spacing-checker

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: layout-spacing-checker
Source: https://github.com/CANTAGESTUDIO/CosmicAtlasPacker/tree/main/.claude/skills/layout-spacing-checker
Command: npx skills add https://github.com/CANTAGESTUDIO/CosmicAtlasPacker --skill layout-spacing-checker

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Validates margin/padding/gap values against a spacing scale and grid rules to ensure layout consistency.

Core Features & Use Cases

Quick Start: Run spacing checker against source to surface off-scale and inconsistent values.
Issue Types: off-scale, inconsistent, zero-spacing, excessive.

Quick Start

python3 scripts/check_spacing.py --scale spacing.yml --source src/

Frequently Asked Questions about layout-spacing-checker

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I validate spacing values against a design system scale?▼

Spacing validation compares margin, padding, and gap values in your UI layouts against a predefined spacing scale to ensure design consistency. Run the checker with your spacing scale file and source directory to identify values that deviate from the scale.

Can I audit CSS and SwiftUI projects for spacing inconsistencies?▼

Yes, the spacing checker audits both CSS/SCSS and SwiftUI projects. It detects off-scale, inconsistent, zero-spacing, and excessive values across component margins, padding, and gaps in both frameworks.

What types of spacing issues does the checker identify?▼

The checker classifies spacing problems into four categories: off-scale values that don't match your design scale, inconsistent values that vary unnecessarily, zero-spacing gaps, and excessive spacing that breaks layout intent.

How do I run the spacing checker from the command line?▼

Execute the checker using: python3 scripts/check_spacing.py --scale spacing.yml --source src/. Provide your spacing scale file and the source directory containing your UI components to audit.

What input format does the spacing scale require?▼

The spacing scale is defined in a YAML file (e.g., spacing.yml) that specifies the valid spacing tokens and values. This scale becomes the reference standard against which all layout spacing is validated.

Do I need a design system to use the spacing checker?▼

Yes, you need a defined spacing scale or design system tokens. The checker validates your layout against this scale, so having documented spacing rules is prerequisite for effective auditing.