git clone https://github.com/ComeOnOliver/skillshub
T=$(mktemp -d) && git clone --depth=1 https://github.com/ComeOnOliver/skillshub "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/pproenca/dot-skills/ios-ui-refactor" ~/.claude/skills/comeonoliver-skillshub-ios-ui-refactor && rm -rf "$T"
skills/pproenca/dot-skills/ios-ui-refactor/SKILL.mdApple HIG SwiftUI iOS 26 / Swift 6.2 Best Practices
A principal designer's lens for evaluating and refactoring SwiftUI interfaces to Apple-quality standards, grounded in Rams, Segall, and Edson. Contains 51 rules across 8 categories, each grounded in specific principles from three foundational design texts:
- Dieter Rams — Ten Principles for Good Design ("less, but better," "design should be honest")
- Ken Segall — Insanely Simple (simplicity as a core principle for intuitive, beautiful products)
- John Edson — Design Like Apple (design-focused culture, prototyping to perfection, the product is the marketing)
Categories are ordered by a visual review process: start with what to remove, then what to clarify, then what to make honest, invisible, systematic, thorough, enduring, and finally what to refine.
Scope & Relationship to Sibling Skills
This skill is the refactoring and review lens — it evaluates existing UI and identifies visual anti-patterns to fix. When loaded alongside
ios-design (building new UI), ios-hig (HIG compliance), or swift-refactor (code-level refactoring), this skill supersedes overlapping rules with more detailed "incorrect -> correct" transformations and "When NOT to apply" guidance. Use this skill for auditing and improving existing screens; use the siblings for greenfield implementation.
Clinic Architecture Contract (iOS 26 / Swift 6.2)
All guidance in this skill assumes the clinic modular MVVM-C architecture:
- Feature modules import
+Domain
only (neverDesignSystem
, never sibling features)Data - App target is the convergence point and owns
, concrete coordinators, and Route Shell wiringDependencyContainer
stays pure Swift and defines models plus repository,Domain
,*Coordinating
, andErrorRouting
contractsAppError
owns SwiftData/network/sync/retry/background I/O and implements Domain protocolsData- Read/write flow defaults to stale-while-revalidate reads and optimistic queued writes
- ViewModels call repository protocols directly (no default use-case/interactor layer)
When to Apply
Reference these guidelines when:
- Reviewing existing SwiftUI screens for visual quality issues
- Auditing whether every element on screen earns its place (Rams #10)
- Evaluating if the interface is self-explanatory without tooltips (Rams #4)
- Checking that colors, states, and hierarchy tell the truth (Rams #6)
- Ensuring animations and materials are invisible, not decorative (Rams #5)
- Verifying spacing, radii, and colors form a coherent system (Edson "Systems Thinking")
- Confirming edge cases — reduce motion, touch targets, safe areas — are handled (Rams #8)
- Adopting iOS 26 / Swift 6.2 APIs that refine previously impossible interactions (Edson "Design Out Loud")
Rule Categories by Priority
| Priority | Category | Principle | Impact | Prefix | Rules |
|---|---|---|---|---|---|
| 1 | Less, But Better | Rams #10 + Segall "Think Minimal" | CRITICAL | | 7 |
| 2 | Self-Evident Design | Rams #4 + Segall "Think Human" | CRITICAL | | 6 |
| 3 | Honest Interfaces | Rams #6 + Segall "Think Brutal" | CRITICAL | | 6 |
| 4 | Invisible Design | Rams #5 + Edson "Product Is Marketing" | HIGH | | 6 |
| 5 | Systems, Not Pieces | Edson "Systems Thinking" + Rams #8 | HIGH | | 6 |
| 6 | Thorough to the Last Detail | Rams #8 + Rams #2 | HIGH | | 7 |
| 7 | Enduring Over Trendy | Rams #7 + Edson "Design With Conviction" | MEDIUM-HIGH | | 5 |
| 8 | Refined Through Iteration | Edson "Design Out Loud" + Rams #1/#3 | MEDIUM | | 8 |
Quick Reference
1. Less, But Better (CRITICAL)
Rams #10: "Good design is as little design as possible." Segall: Apple succeeded by saying no to a thousand things.
- One primary focal point per screenless-single-focal
- Limit to 3-4 distinct type treatments per screenless-type-restraint
- One typeface per app, differentiate with weight and sizeless-one-typeface
- Reserve saturated colors for small interactive elementsless-color-restraint
- Each semantic color serves exactly one purposeless-one-color-purpose
- Every animation must communicate state change or provide feedbackless-purposeful-motion
- Remove controls that do not serve the core taskless-fewer-controls
2. Self-Evident Design (CRITICAL)
Rams #4: "Good design makes a product understandable." Segall: interfaces must speak in terms people understand.
- Combine size, weight, and contrast for hierarchyevident-visual-weight
- Use whitespace to separate conceptual groupsevident-whitespace-grouping
- Use progressive disclosure for dense informationevident-progressive-disclosure
- Align visual weight with logical reading orderevident-reading-order
- Sheets for tasks and creation, push for drill-down hierarchyevident-navigation-intent
- Use clear labels over ambiguous iconsevident-label-clarity
3. Honest Interfaces (CRITICAL)
Rams #6: "Good design is honest." Segall: clarity without sugar-coating.
- Use semantic colors, never hard-coded black or whitehonest-semantic-colors
- Ensure WCAG AA contrast ratioshonest-contrast
- Define light and dark variants for every custom colorhonest-dark-mode
- Use foregroundStyle over foregroundColorhonest-foreground-style
- Use materials for layering, not drop shadows for depthhonest-depth-cues
- Show real progress, not indefinite spinnershonest-loading-states
4. Invisible Design (HIGH)
Rams #5: "Good design is unobtrusive." Edson: the product itself is the marketing.
- Default to spring animations for all UI transitionsinvisible-spring-physics
- Use .smooth for routine, .snappy for interactive, .bouncy for delightinvisible-spring-presets
- Prefer springs over linear and easeInOut for UI elementsinvisible-no-easing
- Use system materials, not custom semi-transparent backgroundsinvisible-system-materials
- Use built-in symbolEffect, not manual symbol animationinvisible-symbol-effects
- Use contentTransition for changing text and numbersinvisible-content-transitions
5. Systems, Not Pieces (HIGH)
Edson: "Design is systems thinking." Rams #8: nothing must be arbitrary or left to chance.
- Use a 4pt base unit for all spacingsystem-spacing-grid
- Use consistent padding across all screenssystem-consistent-padding
- Standardize corner radii per component typesystem-corner-radii
- Consistent alignment per content type within a screensystem-alignment
- Name custom colors by role, not huesystem-color-naming
- Map brand palette onto iOS semantic color rolessystem-brand-integration
6. Thorough to the Last Detail (HIGH)
Rams #8: "Care and accuracy in the design process show respect for the user." Rams #2: if the user cannot reliably use it, the product has failed.
- Always provide reduce motion fallbackthorough-reduce-motion
- All interactive elements at least 44x44 pointsthorough-touch-targets
- Always respect safe areasthorough-safe-areas
- Avoid light font weights for body textthorough-readable-weights
- Match vibrancy level to content importancethorough-vibrancy-levels
- Choose material thickness by contrast needsthorough-material-thickness
- Enable background interaction for peek-style sheetsthorough-background-interaction
7. Enduring Over Trendy (MEDIUM-HIGH)
Rams #7: "Good design is long-lasting." Edson: commit to a voice that persists across product generations.
- Use Apple text styles, never fixed font sizesenduring-system-text-styles
- Use weight for emphasis, not ALL CAPSenduring-weight-not-caps
- Never break the system back-swipe gestureenduring-swipe-back
- Use zoom transitions for collection-to-detail navigationenduring-zoom-navigation
- Use self-contained cards for dashboard layoutsenduring-card-modularity
8. Refined Through Iteration (MEDIUM)
Edson: "Design out loud" — prototype relentlessly until every interaction feels inevitable. Rams #1: innovation serves genuine purpose.
- Use scrollTransition for scroll-position visual effectsrefined-scroll-transitions
- Use PhaseAnimator for multi-step animation sequencesrefined-phase-animator
- Use MeshGradient for premium dynamic backgroundsrefined-mesh-gradients
- Use TextRenderer for hero text animations onlyrefined-text-renderer
- Use inspector for trailing-edge detail panelsrefined-inspector
- Provide multiple sheet detents with drag indicatorrefined-multi-detent
- Use matchedGeometryEffect for contextual origin transitionsrefined-matched-geometry
- Always animate between states, even minimallyrefined-no-hard-cuts
How to Use
Read individual reference files for detailed explanations and code examples:
- Section definitions - Category structure, principle sources, and impact levels
- Rule template - Template for adding new rules
Reference Files
| File | Description |
|---|---|
| references/_sections.md | Category definitions and principle grounding |
| assets/templates/_template.md | Template for new rules |
| metadata.json | Version and reference information |