What is the 8-point spacing system used for?

The 8-point system provides a constrained scale for all gutters, margins, and padding, ensuring a consistent visual rhythm and eliminating the use of arbitrary pixel values.

Does it support responsive web design?

Yes, it utilizes fluid grid techniques including CSS Grid auto-fit with minmax(), percentage-based widths, and viewport-specific layout collapse rules.

How does this skill choose between CSS Grid and Flexbox?

It follows a specific decision matrix: CSS Grid is used for two-dimensional page-level layouts and card grids, while Flexbox is prioritized for one-dimensional component alignment like navigation bars and button groups.

Can this skill help review existing code for design flaws?

Absolutely. It includes an audit checklist to identify misaligned elements, inconsistent spacing, hardcoded pixel widths, and overly nested grid structures.

Layout & Spatial Structure

Name: Layout & Spatial Structure
Author: oborchers

byoborchers

•

Design Tools

Architects professional, responsive layouts and grid systems using industry-standard structural principles and modern CSS techniques.

This skill empowers Claude to design and audit complex web interfaces based on rigorous structural foundations. It enforces a 12-column grid architecture and an 8-point spacing system to ensure visual consistency and predictability across all devices. By applying Gestalt proximity rules and strategic scanning patterns, the skill helps developers make informed decisions between CSS Grid and Flexbox, ensuring that layout choices support both technical performance and user experience while eliminating common anti-patterns like arbitrary pixel widths.

Key Features

0112-Column Grid Implementation

029 GitHub stars

038-Point Spacing Scale Adherence

04Gestalt Proximity Rule Application

05Responsive Card & Container Logic

06CSS Grid vs. Flexbox Decision Logic

Use Cases

01Refactoring legacy CSS into a standardized, responsive 12-column system

02Building a complex SaaS dashboard with card-based widget snapping

03Designing mobile-first layouts that collapse predictably across viewports

Key Features

0112-Column Grid Implementation

029 GitHub stars

038-Point Spacing Scale Adherence

04Gestalt Proximity Rule Application

05Responsive Card & Container Logic

06CSS Grid vs. Flexbox Decision Logic

Use Cases

01Refactoring legacy CSS into a standardized, responsive 12-column system

02Building a complex SaaS dashboard with card-based widget snapping

03Designing mobile-first layouts that collapse predictably across viewports