skills.rest
CANTAGESTUDIO
CANTAGESTUDIOCOMMUNITY
Explore all skills by this author →
GitHub

layout-spacing-checker

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
One-click install
npx skills add https://github.com/CANTAGESTUDIO/CosmicAtlasPacker --skill layout-spacing-checker
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
Intension-usIntension-us

design-consultation

Generate a DESIGN.md documenting typography, color, spacing, layout, and motion guidelines.

Official
Advanced
spartDevspartDev
6

Design System Violation Detector

Detect design-system violations in React components against DESIGN_GUIDELINES.md.

Community
Advanced
t-stringst-strings

Frontend CSS

Enforce frontend CSS standards for consistent styling and maintainability.

Official
Basic
jpoindexterjpoindexter
1

grid-and-spacing

Guide grid and spacing systems with 8pt scales and CSS Grid/Flexbox.

Community
Advanced