All Skills Search Tools

|

Loading...

AI Agent Skills Directory with categorization, English/Chinese translation, and script security checks.

Sitemap

Home
All Skills
Search
Tools

About

About Us
Disclaimer
Copyright

Help

FAQ
Privacy
Terms

Contact Us:osulivan147@qq.com

© 2026 Skill4Agent. All rights reserved.

Home/All Skills/Frontend Development/spacing-system

spacing-system

Original：🇺🇸 English

Translated

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

3installs

Sourceowl-listener/designer-skills

Added on2026-03-15

NPX Install

npx skill4agent add owl-listener/designer-skills spacing-system

Tags

Translated version includes tags in frontmatter

spacing-system ui-layout design-system density-modes responsive-spacing

SKILL.md Content

View Translation Comparison →

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

Download

Download TranslatedIncludes original Skill.md

(1.8 KB)Download Original(840 B)

Related Skills

angular-di

Implement dependency injection in Angular v20+ using inject(), injection tokens, and provider configuration. Use for service architecture, providing dependencies at different levels, creating injectable tokens, and managing singleton vs scoped services. Triggers on service creation, configuring providers, using injection tokens, or understanding DI hierarchy.

typeset

Improve typography by fixing font choices, hierarchy, sizing, weight consistency, and readability. Makes text feel intentional and polished.

web-design-reviewer

This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.

make-interfaces-feel-better

Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, font smoothing, tabular numbers, image outlines, box shadows.