spacing-layout-system
CommunityBuild consistent, premium spacing with CSS Grid.
Design & Creative#subgrid#css grid#container queries#spacing tokens#layout architecture#whitespace strategy
Authorandersoncollab
Version1.0.0
Installs0
System Documentation
What problem does it solve?
It solves inconsistent spacing and layout drift by providing a repeatable spacing scale and layout architecture that keeps UI rhythm uniform across components, sections, and whole pages.
Core Features & Use Cases
- Spacing scales & tokens: Establishes a 4px-based system (e.g., space-1..space-32) and guidance for mapping tokens to padding, gaps, and section rhythm.
- Whitespace strategy & hierarchy: Defines micro/component/section/module spacing ranges and practical rules for when to use more or less whitespace.
- CSS Grid patterns: Covers named areas, auto-responsive card grids, and subgrid for aligning card internals without manual height hacks.
- Flexbox composition + container queries: Recommends Flexbox for 1D UI patterns and uses container queries for component-level responsiveness.
- Production-ready code snippets: Provides ready-to-adapt CSS examples for tokens, layouts, grids, subgrid cards, sticky “holy grail” scaffolds, and vertical rhythm.
Quick Start
Use the spacing-layout-system skill to generate a CSS spacing token file and a Grid-based page scaffold using named grid areas and container-query-aware cards.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: spacing-layout-system Download link: https://github.com/andersoncollab/design-agent/archive/main.zip#spacing-layout-system Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.