SGDS Spacing Utilities Skill

Helps developers use SGDS spacing utilities (margin, padding, gap) based on the 4px scale system.

Prerequisites

Required: Complete setup from sgds-utilities-setup skill first.

Spacing utilities require the utility CSS import but do NOT require theme files.

Core Concept

Base Unit: Every spacing value = multiplier × 4px

All SGDS spacing utilities use the sgds: prefix (Tailwind v4 @theme syntax).

Always prefer semantic spacing utilities over raw numeric utilities. SGDS provides purpose-named spacing tokens defined in responsive.css — they adapt across breakpoints and encode design intent. Only fall back to raw numeric utilities (sgds:p-4, sgds:gap-6, sgds:mb-3, etc.) when no semantic token fits.

Semantic Spacing Utilities (Always Prefer These)