skills.rest
jperezdelreal
jperezdelrealCOMMUNITY
Explore all skills by this author →
GitHub

swiftui-design-principles

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

Updated Apr 6, 2026
Search Tags:#typography#ui-ux#design-principles#swiftui#colors#spacing#widgetkit
One-click install
npx skills add https://github.com/jperezdelreal/GymBro --skill swiftui-design-principles-jperezdelreal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: swiftui-design-principles
Source: https://github.com/jperezdelreal/GymBro/tree/main/.squad/skills/ios/swiftui-design-principles
Command: npx skills add https://github.com/jperezdelreal/GymBro --skill swiftui-design-principles-jperezdelreal

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Polished native SwiftUI apps and widgets require consistent design practices to avoid visual inconsistencies that reduce perceived quality and user trust.

Core Features & Use Cases

  • Spacing system based on a consistent grid to ensure predictable gaps and rhythm across screens.
  • Typography guidance to establish a clear hierarchy with fewer, purposeful font sizes.
  • Semantic color usage leveraging system colors for light/dark modes and accessibility.
  • Native card and grouped content patterns for clean, familiar interfaces.
  • WidgetKit-ready guidelines to maintain visual parity between app views and widgets.

Quick Start

Study the SwiftUI design principles and apply them when crafting or refactoring views, widgets, and UI 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 use semantic colors for light and dark mode in SwiftUI views?▼

Semantic colors in SwiftUI leverage system colors to automatically adapt to light and dark modes. By using semantic colors instead of fixed values, you ensure native accessibility and visual consistency across different system appearances.

What is the best way to design native card and grouped content patterns in SwiftUI?▼

The best way to design native card and grouped content patterns in SwiftUI is to follow native design principles for component sizing and familiar interfaces. This ensures clean, predictable layouts that maintain user trust and perceived quality.

Does this approach work with WidgetKit to maintain visual parity with app views?▼

Yes, this approach works with WidgetKit by applying widget-ready guidelines that maintain visual parity between your app views and widgets. It enforces consistent spacing, typography, and semantic colors across both interfaces.

Why do my SwiftUI apps look visually inconsistent and lack a native feel?▼

Your SwiftUI apps lack a native feel due to missing consistent design practices. Enforcing design principles for spacing, typography, color, and component sizing eliminates visual inconsistencies that reduce perceived quality and user trust.

Related Skills

Explore More Design & Creative Skills→
ChoshimWyChoshimWy
8

swiftui-view-refactor

Refactor existing SwiftUI views into small subviews with MV-first data flow.

Community
Intermediate
curtislmartincurtislmartin

swiftui-design-principles

Enforce SwiftUI design rules for iOS and watchOS interfaces.

Community
Intermediate
DengNaichenDengNaichen
34

axiom-design

Guide Apple UI design with HIG and Liquid Glass material rules.

Community
Advanced
ceorkmceorkm
216

mobile-app-ui-design

Translate mobile app UI/UX problems into structured specifications for screens, flows, and components.

Community
Advanced