AgentSkillsCN

layout-spacing-checker

【设计系统】验证边距/填充/间隙值是否符合间距比例和网格规则。当(1)检查间距值是否遵循设计系统比例、(2)寻找超出比例或不一致的间距、(3)审计组件间布局一致性、(4)用户要求‘检查间距’、‘验证布局’、‘审计边距/填充’或‘查找超出比例的值’时使用。

SKILL.md
--- frontmatter
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

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

Issue Types

TypeSeverityDescription
off-scalewarningValue not in spacing scale
inconsistentinfoDifferent spacing for similar components
zero-spacinginfoPotentially missing spacing
excessivewarningUnusually large spacing value

Detection Examples

CSS/SCSS

css
/* off-scale: 17px not in scale */
.card { padding: 17px; }
/* Suggested: 16px (md) or 20px */

SwiftUI

swift
// off-scale: 15 not in scale
.padding(15)
// Suggested: .padding(16) or spacing token .md