Swiftui Design Principles

Design principles for building polished, native-feeling SwiftUI apps and widgets. Use this skill when creating or modifying SwiftUI views, iOS widgets (WidgetKit), or any native Apple UI. Ensures proper spacing, typography, colors, and widget implementations that look and feel like quality apps rather than AI-generated slop.

33 stars 1 forksMobile Development

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add arjitj2/swiftui-design-principles --skill swiftui-design-principles

Manual install

git clone --depth 1 https://github.com/arjitj2/swiftui-design-principles.git /tmp/swiftui-design-principles
mkdir -p ~/.claude/skills
cp -r /tmp/swiftui-design-principles/. ~/.claude/skills/swiftui-design-principles

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

This skill encodes design principles derived from comparing polished, production-quality SwiftUI apps against poorly-built ones. The patterns here represent what separates an app that feels "right" from one where the margins, spacing, and text sizes just look "off."

Apply these principles whenever building or modifying SwiftUI interfaces, WidgetKit widgets, or any native Apple UI.

## Core Philosophy

**Restraint over decoration.** Every pixel must earn its place. A polished app uses fewer colors, fewer font sizes, fewer spacing values, and fewer words — but uses them consistently. Over-engineering visual elements (custom gradients, decorative borders, bespoke dividers) creates visual noise. Native components and system colors create harmony.

**Attention is scarce.** Keep UI copy shorter than you think it needs to be. Prefer one clear headline and one compact supporting block over repeated explanation in the title, subtitle, body, and footer. If a screen needs rationale, put it in one purposeful place instead of scattering it across the page.

---

## 1. Spacing System: Use a Consistent Grid

**CRITICAL**: Use spacing values from a base-4/base-8 grid. Never use arbitrary values.

### Allowed spacing values
```
4, 8, 12, 16, 20, 24, 32, 40, 48
```

### Bad (arbitrary values that create visual dissonance)
```swift
// WRONG - these numbers have no relationship to each other
.padding(.bottom, 26)
.padding(.bottom, 34)
.padding(.bottom, 36)
HStack(spacing: 18)
.padding(14)
```

Read the full skill on GitHub

Details

Skill name: swiftui-design-principles
Repository: arjitj2/swiftui-design-principles
License: MIT
Repo updated: 16 March 2026

FAQ

What does the Swiftui Design Principles skill do?

How do I install the Swiftui Design Principles skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add arjitj2/swiftui-design-principles --skill swiftui-design-principles. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Swiftui Design Principles popular?

It lives in arjitj2/swiftui-design-principles, which has 33 GitHub stars and 1 forks.

Related skills

Apple Engineer Superpowers

piemonte/apple-engineer-superpowers

Use when writing Swift code for Apple platforms - iOS, macOS, visionOS. Covers Swift 6 concurrency, actors, Sendable, async/await, SwiftUI, MVVM architecture, Metal GPU programming, RealityKit ECS, visionOS scenes, interpolation/animation, advanced collection types, property wrappers, Combine bridging, error handling, testing, and API design patterns.

Mobile Development

Offline First Pwa

mattiasgeniar/offline-first-pwa

Rules for building offline-first Progressive Web Apps that launch instantly from the home screen. Use when building, reviewing or debugging a PWA, or anything touching a service worker, a web app manifest, precaching, an in-app update prompt, iOS home screen behaviour, or safe-area/notch layout.

Mobile Development

Airbnb Swift Style

cassiewallace/airbnb-swift-style-agent-skill

Enforces the Airbnb iOS Swift Style Guide on Swift code. Use this skill any time the user wants to: review Swift code for style compliance, lint or audit an iOS codebase, apply Airbnb Swift conventions to new or existing code, understand why code violates Airbnb style rules, or get corrected rewrites of Swift snippets. Triggers on any request mentioning Swift code quality, iOS code review, Airbnb style, linting Swift files, or when the user pastes Swift code and asks for feedback, fixes, or a review. Also use when the user asks to "clean up" or "format" Swift code, or asks "is this good Swift?

Mobile Development

IOS Code Audit

jazzychad/ios-code-audit

Run a thorough audit of an iOS / macOS Swift codebase — bugs, dead code, duplication, Swift concurrency issues, deprecated APIs, security, performance, and SwiftUI quality — and produce a single navigable CODE_AUDIT.md report with file:line-cited findings. Use when the user asks for a "code audit", "comprehensive review", "find tech debt", "what should I clean up", or similar broad-scope assessment of a Swift project.

Mobile Development

Flutter Bloc Development

AbdelhakRazi/flutter-bloc-clean-architecture-skill

Build Flutter features using BLoC state management, clean architecture layers, and the project's design system. Apply when creating screens, widgets, or data integrations.

Mobile Development

IOS Agent Skill

Nagarjuna2997/ios-agent-skill

Expert iOS/Swift developer behavior for AI coding agents. Use when writing, reviewing, or refactoring Swift, SwiftUI, UIKit, or SwiftData code; when designing iOS app architecture (MVVM, Clean Architecture, coordinators, routing); when building UI that must meet Apple's Human Interface Guidelines, contrast, dark-mode, and Dynamic Type standards; when working with any Apple framework (SwiftData, Core Data, CloudKit, StoreKit, HealthKit, WidgetKit, App Intents, CoreML, Vision, ARKit, RealityKit, SceneKit, Metal, and 30+ more); or when targeting iOS, macOS, watchOS, tvOS, or visionOS. Also use fo

Mobile Development

Browse the most popular Claude skills, all mobile development skills, or write your own with the skills generator.