abdullah4ai/spacing-layout
swiftship/internal/skills/data/ui/spacing-layout/SKILL.md
Spacing and layout metrics: 8pt grid system, standard margins, 44pt tap targets, vertical rhythm, density guidelines. Use when setting padding, margins, spacing between elements, or ensuring touch target sizes. Triggers: padding, spacing, margin, tap target, 44pt, grid, density, contentMargins.
$ install --global
skillsauthnpx skillsauth add abdullah4ai/apple-developer-toolkit spacing-layoutInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Mar 30, 2026, 5:15 AM36.6s1 file scanned
SKILL.md
- name:
- spacing-layout
- description:
- Spacing and layout metrics: 8pt grid system, standard margins, 44pt tap targets, vertical rhythm, density guidelines. Use when setting padding, margins, spacing between elements, or ensuring touch target sizes. Triggers: padding, spacing, margin, tap target, 44pt, grid, density, contentMargins.
Spacing & Layout
8-POINT GRID SYSTEM: All spacing values must be multiples of 4pt. Standard scale:
| Token | Value | Use Case | |-------------------|-------|---------------------------------------------| | Spacing.xxSmall | 4pt | Icon-to-label gap, tight inline spacing | | Spacing.xSmall | 8pt | Between related items (label + value) | | Spacing.small | 12pt | List row internal padding | | Spacing.medium | 16pt | Standard padding, outer margins | | Spacing.large | 24pt | Section spacing, card-to-card gap | | Spacing.xLarge | 32pt | Major section breaks | | Spacing.xxLarge | 48pt | Screen-level top/bottom breathing room |
NEVER use arbitrary values (5, 7, 10, 13, 15, 18, 25, etc.). Snap to the grid.
STANDARD MARGINS:
- Outer screen margins: 16pt (.padding(.horizontal, AppTheme.Spacing.medium)).
- Card internal padding: 16pt (.padding(AppTheme.Spacing.medium)).
- Section spacing (between groups): 24pt.
- List row vertical padding: 12pt.
- Toolbar/header spacing: 16pt horizontal, 8pt vertical.
TAP TARGET SIZES:
- Minimum: 44x44pt for ALL interactive elements (Apple HIG requirement).
- If visual element is smaller (e.g. 24x24 icon), expand hit area: .frame(minWidth: 44, minHeight: 44) .contentShape(Rectangle())
- Inline buttons in text: ensure surrounding padding creates 44pt height.
- Icon buttons: use .frame(width: 44, height: 44) even if icon is 20-24pt.
VERTICAL RHYTHM:
- Consistent spacing within a section (all rows use same gap).
- Larger gap between sections than within sections.
- Example: 8pt between rows within a section, 24pt between sections.
- Headers get extra top spacing: 32pt above, 8pt below.
DENSITY GUIDELINES (from plan's design.density):
- "spacious": Use .large/.xLarge gaps. Generous padding (20-24pt). Best for meditation, health, reading apps.
- "standard": Use .medium gaps. 16pt padding. Default for most apps.
- "compact": Use .small/.xSmall gaps. 12pt padding. Best for data-heavy apps (finance, productivity).
CARD LAYOUT PATTERN:
VStack(alignment: .leading, spacing: AppTheme.Spacing.xSmall) {
// Card content
}
.padding(AppTheme.Spacing.medium)
.background(AppTheme.Colors.surface)
.clipShape(RoundedRectangle(cornerRadius: AppTheme.Style.cornerRadius))
.shadow(color: .black.opacity(0.06), radius: 8, y: 4)
HORIZONTAL LAYOUTS:
- Space between icon and label: 8pt.
- Space between label and trailing value: use Spacer().
- Button bar with 2-3 buttons: HStack with spacing: 12pt.
- 4+ buttons: wrap in ScrollView(.horizontal).
SAFE AREA:
- Content respects safe areas by default — don't add redundant padding.
- Full-screen backgrounds use .ignoresSafeArea() to extend edge-to-edge.
- Overlays use .safeAreaInset(edge:) — never manual padding for safe areas.
Related Skills
abdullah4ai/scenekit-game
testing
VerifiedTrustedCommunity
Use for 3D games: racing, 3D sports, board games, marble maze, tower defense, bowling. SceneKit + SceneView architecture, 3D scene hierarchy, physics, game loop, primitives, materials, cameras, particles, audio.
8SKILL.mdUpdated Jul 23, 2026
abdullah4ai/game-ui
documentation
VerifiedTrustedCommunity
Game UI patterns: SwiftUI HUD overlays on SpriteKit, menus (main/pause/game-over), virtual joystick/d-pad, score displays, health bars, tutorial onboarding.
8SKILL.mdUpdated Jul 23, 2026
abdullah4ai/game-assets
tools
VerifiedTrustedCommunity
Download free game sprites/textures/3D models and generate procedural assets. Covers nw_download_asset tool, texture factories, sprite atlas organization, 3D model loading, and programmatic asset creation.
8SKILL.mdUpdated Jul 23, 2026
abdullah4ai/spritekit-game
testing
VerifiedTrustedCommunity
Use for 2D games: arcade, puzzle, sports, ping pong, platformer, shooter, 2D racing. SpriteKit + SpriteView architecture, scene hierarchy, physics, game loop, audio, particles, game feel.
8SKILL.mdUpdated Mar 27, 2026