spacing-layout
CommunityStandardize UI spacing and layout.
Authormoasq
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 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 Download link: https://github.com/moasq/nanowave/archive/main.zip#spacing-layout 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 223,000+ vetted skills library on demand.