owl-listener/designer-skills920 installs

spacing-system

Q: How do I install this agent skill?

Run npx skills add https://github.com/owl-listener/designer-skills --skill spacing-system.

Q: Is this agent skill safe to install?

Review the displayed partner audits, complete source, permissions, dependencies, and exact revision before installing.

Create a consistent spacing system based on a base unit with contextual application rules.

How do I install this agent skill?

npx skills add https://github.com/owl-listener/designer-skills --skill spacing-system

view source ↗

Is this agent skill safe to install?

Gen Agent Trust Hubpass
This skill provides a set of design guidelines for creating consistent UI spacing systems and contains no security risks or executable code.
Socketpass
No alerts
Snykpass
Risk: LOW · No issues
Runlayerpass
1 file scanned · No issues
ZeroLeakspass
Score: 93/100 · 2 sections analyzed

What does this agent skill do?

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

How can the creator link this skill?

Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.

<a href="https://skillzs.dev/skills/owl-listener/designer-skills/spacing-system">View spacing-system on skillZs</a>