skills.rest
sorty-organizer
sorty-organizerOFFICIAL
Explore all skills by this author →
GitHub

swiftui-design-principles

Define spacing, typography, and color principles for SwiftUI and WidgetKit interfaces.

42|3|Updated Dec 29, 2025
Search Tags:#typography#design-principles#swiftui#spacing#widgetkit#ui-consistency#semantic-colors
One-click install
npx skills add https://github.com/sorty-organizer/Sorty --skill swiftui-design-principles-sorty-organizer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: swiftui-design-principles
Source: https://github.com/sorty-organizer/Sorty/tree/main/.agents/skills/swiftui-design-principles
Command: npx skills add https://github.com/sorty-organizer/Sorty --skill swiftui-design-principles-sorty-organizer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a consolidated set of design principles to help developers and designers build polished, native-feeling SwiftUI apps and WidgetKit widgets by constraining spacing, typography, and color choices to proven patterns.

Core Features & Use Cases

  • Spacing System: enforce a base-4/base-8 grid to eliminate arbitrary padding and create consistent rhythm.
  • Typography: advocate a minimal, weight-driven hierarchy for readability and sophistication.
  • Colors: prefer system semantic colors to support light/dark mode and accessibility.
  • Proportional Sizing: advocate for proportional component dimensions and stroke widths to avoid oversized UI elements.
  • Native Patterns: encourage usage of native Grouped Content, NavigationStack, and WidgetKit patterns over custom, non-native UI.
  • Pre-Ship Checklist: provide a consolidated verification list to ensure UI quality before shipping.
  • Use Cases: apply when building or refining SwiftUI views, WidgetKit widgets, or any native Apple UI.

Quick Start

Review these principles when designing or refining SwiftUI interfaces, WidgetKit widgets, or any native Apple UI.

Frequently Asked Questions about swiftui-design-principles

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

FAQPage Schema
What spacing grid should I use for SwiftUI interfaces to ensure consistent layout?▼

A base-4/base-8 spacing grid standardizes spacing in SwiftUI apps, eliminating arbitrary padding to establish a consistent visual rhythm and polished layout across components.

How do I configure semantic colors in SwiftUI for automatic light and dark mode support?▼

Use system semantic colors in SwiftUI to automatically support light/dark mode transitions and accessibility, ensuring your app's UI adapts correctly to user preferences without custom color logic.

What is the best way to structure typography hierarchy in a native SwiftUI app?▼

The best way to structure typography in SwiftUI is using a minimal, weight-driven hierarchy, which enhances readability and sophistication without relying on excessive font sizes or custom styles.

Does WidgetKit require a different design approach than standard SwiftUI views?▼

WidgetKit widgets require a single, unified design approach that adheres to the same base spacing, typography, and semantic color principles as standard SwiftUI views to maintain UI consistency.

When should I avoid custom UI components in favor of native SwiftUI patterns?▼

Avoid custom UI components whenever native SwiftUI patterns like Grouped Content or NavigationStack can be used, ensuring your application maintains a cohesive, native Apple feel.

How do I verify proportional sizing and stroke widths before shipping a SwiftUI app?▼

Verify proportional sizing and stroke widths before shipping a SwiftUI app by applying a comprehensive pre-ship checklist, ensuring all component dimensions avoid oversized UI elements.

Related Skills

Explore More Design & Creative Skills→
cooopmaccooopmac

ios-expert

Provide expert guidance on iOS development, Swift, SwiftUI, UIKit, and Xcode.

Community
Advanced
arjitj2arjitj2

swiftui-design-principles

Enforce SwiftUI and WidgetKit design principles for spacing, typography, and color.

Community
Advanced
mosif16mosif16
18

ios-ux-design

Evaluate iOS app interfaces against Apple Human Interface Guidelines and generate implementation specifications.

Community
Advanced
lucasxflucasxf
3

mobile-design-system

Generates mobile UI design system with color tokens, component recipes, and layout patterns.

Community
Intermediate