skills.rest
moasq
moasqCOMMUNITY
Explore all skills by this author →
𝕏@foundmodGitHub

spacing-layout

Provide standardized spacing, margins, and 44pt tap targets for UI development.

32|10|Updated Feb 21, 2026
Search Tags:#layout#ui design#spacing#padding#margins#tap targets#8pt grid
One-click install
npx skills add https://github.com/moasq/nanowave --skill spacing-layout
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: spacing-layout
Source: https://github.com/moasq/nanowave/tree/main/internal/orchestration/skills/ui/spacing-layout
Command: npx skills add https://github.com/moasq/nanowave --skill spacing-layout

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Ensures consistent and accessible spacing, margins, and touch target sizes across the application, adhering to platform guidelines and design system principles.

Core Features & Use Cases

  • 8-Point Grid System: Enforces spacing values as multiples of 4pt for visual harmony.
  • Standard Margins & Padding: Defines consistent spacing for screen edges, cards, lists, and sections.
  • Tap Target Sizing: Guarantees interactive elements meet the minimum 44x44pt size for usability.
  • Density Guidelines: Adapts spacing based on 'spacious', 'standard', or 'compact' design density.
  • Use Case: When designing a new screen, use this Skill to ensure all padding, element spacing, and button sizes conform to the established design system.

Quick Start

Apply standard 16pt horizontal and vertical padding to the main content area of the screen.

Frequently Asked Questions about spacing-layout

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I standardize UI spacing and padding using an 8pt grid system?▼

Standardize UI spacing by enforcing an 8-point grid system that sets padding, margins, and element spacing as multiples of 4pt for visual harmony. It provides standardized layout metrics for screen edges, cards, and lists to ensure design consistency.

What is the minimum tap target size for accessibility in UI design?▼

The minimum tap target size for accessibility in UI design is 44x44pt. Enforcing this dimension guarantees interactive elements meet usability guidelines and prevents overlapping touch zones on mobile applications.

How do I apply consistent margins and density guidelines across an application?▼

Apply consistent margins by selecting 'spacious', 'standard', or 'compact' density guidelines to adapt spacing based on layout needs. This ensures margins and padding conform to established design system principles across the application.

Does this UI layout approach work for both mobile and desktop screen design?▼

Yes, this UI layout approach works for both mobile and desktop screen design by providing standard horizontal and vertical padding, such as 16pt for main content areas, to ensure consistent spacing across different platform dimensions.

Why does my UI layout look visually unbalanced without a standard grid?▼

Your UI layout looks visually unbalanced without a standard grid due to inconsistent spacing values. Using an 8-point grid system enforces spacing as multiples of 4pt, resolving misalignment and creating visual harmony across elements.

Related Skills

Explore More Design & Creative Skills→
nikglavinnikglavin
1

lyra-grid-system

Create responsive 12-column CSS grid layouts with 8pt spacing.

Community
Intermediate
imehrimehr

frontend-dev-guidelines

Enforces design-system quality rules for React/Next.js projects with Tailwind, MUI, and Radin.

Community
Advanced
omanjayaomanjaya

frontend-design

Provide typography, color, spacing, and motion guidelines for web UI design.

Community
Intermediate
KrismithReddy12KrismithReddy12

design-review

Audit web interfaces for visual inconsistencies, spacing issues, and hierarchy problems.

Community
Advanced