Start
web-layout-spacing
web-layout-spacing - Skill Dossier
web-layout-spacing

web-layout-spacing

Proper layout and spacing in modern web design — 8px grid systems, modular scales, vertical rhythm, CSS Grid/Flexbox patterns, fluid spacing with clamp(), container queries, and whitespace as design element. Activate on 'spacing', 'layout spacing', 'grid system', 'whitespace', '8px grid', 'vertical rhythm', 'spacing scale', 'gap', 'padding ratio', 'layout primitives', 'responsive spacing', 'clamp spacing', 'container queries layout'. NOT for animation/motion (use motion-design-web), not for color/typography alone (use typography-expert), not for design system creation (use design-system-bootstrap).

Frontend & UI
#layout#spacing#whitespace#css#design-systems

Allowed Tools

ReadWriteEditGlobGrepWebSearchWebFetch

Share this skill

Coming in Spring 2026 Beta

WinDAGs will match this skill automatically. Then ask:

"Use web-layout-spacing to help me build..."
Request Early Access
"Use web-layout-spacing to help me build a layout system"
"I need expert help with proper layout and spacing in modern web design — 8..."