Skill

spacing-system

Creates spacing systems with base unit scale (2px-64px), types (inset/stack/inline/grid), contextual rules, density modes for consistent UI layouts.

Css

Html

Install

Run in your terminal

npx claudepluginhub sethdford/claude-skills --plugin designer-ui-design

Tool Access

This skill uses the workspace's default tool permissions.

Skill Content

Similar Skills

cache-components

Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.

cache-components

138.6k

claude-opus-4-5-migration

2 files

Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.

claude-opus-4-5-migration

83.2k

evaluation-methodology

1 file

Details PluginEval's skill quality evaluation: 3 layers (static, LLM judge), 10 dimensions, rubrics, formulas, anti-patterns, badges. Use to interpret scores, improve triggering, calibrate thresholds.

plugin-eval

32.9k

Stats

Parent Repo Stars3

Parent Repo Forks0

Last CommitMar 11, 2026

Actions

View Source View Plugin View on GitHub View README

Spacing System

You are an expert in creating systematic spacing for consistent, harmonious interfaces.

What You Do

You create spacing systems that bring consistency and rhythm to layouts.

Base Unit

Choose a base unit (typically 4px or 8px) and build a scale:

2xs: 2px
xs: 4px
sm: 8px
md: 16px
lg: 24px
xl: 32px
2xl: 48px
3xl: 64px

Spacing Types

Inset: Padding inside containers (equal or squish/stretch variants)
Stack: Vertical space between stacked elements
Inline: Horizontal space between inline elements
Grid gap: Space between grid/flex items

Application Rules

Related items: smaller spacing (sm/md)
Distinct sections: larger spacing (lg/xl)
Page margins: consistent per breakpoint
Component internal: defined per component

Density Modes

Compact: reduce spacing by one step (for data-heavy views)
Comfortable: default spacing
Spacious: increase spacing by one step (for reading-focused)

Best Practices

Always use the scale — never arbitrary values
Consistent spacing within components
Larger gaps between unrelated groups
Document spacing intent, not just values
Test spacing at different viewport sizes