skills.rest
OMIXEC
OMIXECCOMMUNITY
Explore all skills by this author →
GitHub

swiftui-design-principles

Applies spacing, typography, color, and WidgetKit design rules to SwiftUI views and widgets.

1|Updated Aug 9, 2026
Search Tags:#typography#swiftui#spacing system#widgetkit#gauge#semantic colors#ios design
One-click install
npx skills add https://github.com/OMIXEC/all-in-one-swift-skills --skill swiftui-design-principles-omixec
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: swiftui-design-principles
Source: https://github.com/OMIXEC/all-in-one-swift-skills/tree/main/skills/swiftui-design-principles
Command: npx skills add https://github.com/OMIXEC/all-in-one-swift-skills --skill swiftui-design-principles-omixec

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated SwiftUI interfaces often look off: arbitrary padding values, inconsistent font sizes, hardcoded colors with random opacities, and hand-drawn widget components. This Skill encodes the concrete design principles that separate polished, native-feeling iOS apps from sloppy ones, so every view and widget follows a consistent system. ## Core Features & Use Cases - Spacing and Typography Systems: Enforces a base-4/8 spacing grid and a weight-based type hierarchy with a limited set of font sizes and tracking values. - Semantic Colors and Native Components: Replaces hardcoded opacity colors with system semantic colors, and custom gradient cards with native grouped styles, NavigationStack, and proper Toggle usage. - WidgetKit Best Practices: Covers Gauge-based lock screen widgets, containerBackground, timeline refresh policies, widget memory budgets with Canvas rendering, and shared data models between app and widget. - Use Case: When building a year-progress iOS app with home screen and lock screen widgets, apply these principles to get consistent padding, a monospaced type scale shared across app and widgets, Gauge-based circular widgets, and a pre-ship checklist to verify everything. ## Quick Start Review my SwiftUI view and widget code and refactor it to follow the design principles for spacing, typography, colors, and WidgetKit components.

Frequently Asked Questions about swiftui-design-principles

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

FAQPage Schema
How do I make SwiftUI views look more polished and native?▼

Use a base-4/8 spacing grid (4, 8, 12, 16, 20, 24, 32), limit font sizes to five or fewer with weight-based hierarchy, and replace hardcoded colors with semantic system colors like Color(.secondarySystemBackground) and .foregroundStyle(.secondary).

How do I build a circular lock screen widget in WidgetKit?▼

Use Gauge with the .accessoryCircular gauge style instead of manually drawing circles with Circle and trim. Set the background with .containerBackground(.fill.tertiary, for: .widget) so it adapts to the system appearance.

What spacing values should I use for padding in SwiftUI?▼

Stick to a consistent grid: 4, 8, 12, 16, 20, 24, 32, 40, 48. Use 16-20pt horizontal outer padding, 24-32pt between major sections, and 12-16pt inside cards. Avoid arbitrary values like 26 or 34.

Why does my SwiftUI widget get killed with EXC_RESOURCE errors?▼

Widget extensions have a tight memory budget around 30 MB. Dense visualizations built from hundreds of nested subviews exceed it. Draw dense grids in a single Canvas pass instead of LazyVGrid with many child views.

Should my iOS app and widgets share data models?▼

Yes. Use one shared model with common calculation logic consumed by both the app's views and the widget's TimelineProvider. Duplicating date math into separate snapshot structs causes drift and inconsistent percentages.

Related Skills

Explore More Software Engineering Skills→
mazicimertmazicimert

widget-generator

Generate WidgetKit widget code with timeline providers and App Intent configuration.

Community
Advanced
luke-h1luke-h1
13

expo-dev-client

Build and distribute Expo development clients for native code testing.

Community
Intermediate
koshkinvvkoshkinvv
6

ios-accessibility

Implement iOS accessibility patterns for VoiceOver, Dynamic Type, and color contrast in SwiftUI.

Community
Advanced
tddworkstddworks
38

swiftui-atomic-design

Organize SwiftUI components into Atoms, Molecules, Organisms, Templates, and Pages.

Official
Intermediate