ios-ui-refactor
Apple 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+DesignSystemonly (neverData, never sibling features) - App target is the convergence point and owns
DependencyContainer, concrete coordinators, and Route Shell wiring Domainstays pure Swift and defines models plus repository,*Coordinating,ErrorRouting, andAppErrorcontractsDataowns SwiftData/network/sync/retry/background I/O and implements Domain protocols- 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 | less- |
7 |
| 2 | Self-Evident Design | Rams #4 + Segall "Think Human" | CRITICAL | evident- |
6 |
| 3 | Honest Interfaces | Rams #6 + Segall "Think Brutal" | CRITICAL | honest- |
6 |
| 4 | Invisible Design | Rams #5 + Edson "Product Is Marketing" | HIGH | invisible- |
6 |
| 5 | Systems, Not Pieces | Edson "Systems Thinking" + Rams #8 | HIGH | system- |
6 |
| 6 | Thorough to the Last Detail | Rams #8 + Rams #2 | HIGH | thorough- |
7 |
| 7 | Enduring Over Trendy | Rams #7 + Edson "Design With Conviction" | MEDIUM-HIGH | enduring- |
5 |
| 8 | Refined Through Iteration | Edson "Design Out Loud" + Rams #1/#3 | MEDIUM | refined- |
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.
less-single-focal- One primary focal point per screenless-type-restraint- Limit to 3-4 distinct type treatments per screenless-one-typeface- One typeface per app, differentiate with weight and sizeless-color-restraint- Reserve saturated colors for small interactive elementsless-one-color-purpose- Each semantic color serves exactly one purposeless-purposeful-motion- Every animation must communicate state change or provide feedbackless-fewer-controls- Remove controls that do not serve the core task
2. Self-Evident Design (CRITICAL)
Rams #4: "Good design makes a product understandable." Segall: interfaces must speak in terms people understand.
evident-visual-weight- Combine size, weight, and contrast for hierarchyevident-whitespace-grouping- Use whitespace to separate conceptual groupsevident-progressive-disclosure- Use progressive disclosure for dense informationevident-reading-order- Align visual weight with logical reading orderevident-navigation-intent- Sheets for tasks and creation, push for drill-down hierarchyevident-label-clarity- Use clear labels over ambiguous icons
3. Honest Interfaces (CRITICAL)
Rams #6: "Good design is honest." Segall: clarity without sugar-coating.
honest-semantic-colors- Use semantic colors, never hard-coded black or whitehonest-contrast- Ensure WCAG AA contrast ratioshonest-dark-mode- Define light and dark variants for every custom colorhonest-foreground-style- Use foregroundStyle over foregroundColorhonest-depth-cues- Use materials for layering, not drop shadows for depthhonest-loading-states- Show real progress, not indefinite spinners
4. Invisible Design (HIGH)
Rams #5: "Good design is unobtrusive." Edson: the product itself is the marketing.
invisible-spring-physics- Default to spring animations for all UI transitionsinvisible-spring-presets- Use .smooth for routine, .snappy for interactive, .bouncy for delightinvisible-no-easing- Prefer springs over linear and easeInOut for UI elementsinvisible-system-materials- Use system materials, not custom semi-transparent backgroundsinvisible-symbol-effects- Use built-in symbolEffect, not manual symbol animationinvisible-content-transitions- Use contentTransition for changing text and numbers
5. Systems, Not Pieces (HIGH)
Edson: "Design is systems thinking." Rams #8: nothing must be arbitrary or left to chance.
system-spacing-grid- Use a 4pt base unit for all spacingsystem-consistent-padding- Use consistent padding across all screenssystem-corner-radii- Standardize corner radii per component typesystem-alignment- Consistent alignment per content type within a screensystem-color-naming- Name custom colors by role, not huesystem-brand-integration- Map brand palette onto iOS semantic color roles
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.
thorough-reduce-motion- Always provide reduce motion fallbackthorough-touch-targets- All interactive elements at least 44x44 pointsthorough-safe-areas- Always respect safe areasthorough-readable-weights- Avoid light font weights for body textthorough-vibrancy-levels- Match vibrancy level to content importancethorough-material-thickness- Choose material thickness by contrast needsthorough-background-interaction- Enable background interaction for peek-style sheets
7. Enduring Over Trendy (MEDIUM-HIGH)
Rams #7: "Good design is long-lasting." Edson: commit to a voice that persists across product generations.
enduring-system-text-styles- Use Apple text styles, never fixed font sizesenduring-weight-not-caps- Use weight for emphasis, not ALL CAPSenduring-swipe-back- Never break the system back-swipe gestureenduring-zoom-navigation- Use zoom transitions for collection-to-detail navigationenduring-card-modularity- Use self-contained cards for dashboard layouts
8. Refined Through Iteration (MEDIUM)
Edson: "Design out loud" — prototype relentlessly until every interaction feels inevitable. Rams #1: innovation serves genuine purpose.
refined-scroll-transitions- Use scrollTransition for scroll-position visual effectsrefined-phase-animator- Use PhaseAnimator for multi-step animation sequencesrefined-mesh-gradients- Use MeshGradient for premium dynamic backgroundsrefined-text-renderer- Use TextRenderer for hero text animations onlyrefined-inspector- Use inspector for trailing-edge detail panelsrefined-multi-detent- Provide multiple sheet detents with drag indicatorrefined-matched-geometry- Use matchedGeometryEffect for contextual origin transitionsrefined-no-hard-cuts- Always animate between states, even minimally
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 |
More from pproenca/dot-skills
zod
Zod schema validation best practices for type safety, parsing, and error handling. This skill should be used when defining z.object schemas, using z.string validations, safeParse, or z.infer. This skill does NOT cover React Hook Form integration patterns (use react-hook-form skill) or OpenAPI client generation (use orval skill).
2.0Kclean-architecture
Clean Architecture principles and best practices from Robert C. Martin's book. This skill should be used when designing software systems, reviewing code structure, or refactoring applications to achieve better separation of concerns. Triggers on tasks involving layers, boundaries, dependency direction, entities, use cases, or system architecture.
1.4Kemilkowal-animations
Emil Kowalski's animation best practices for web interfaces. Use when writing, reviewing, or implementing animations in React, CSS, or Framer Motion. Triggers on tasks involving transitions, easing, gestures, toasts, drawers, or motion.
917vitest
Vitest testing framework patterns for test setup, async testing, mocking with vi.*, snapshots, and test performance (formerly test-vitest). This skill should be used when writing or debugging Vitest tests. This skill does NOT cover TDD methodology (use test-tdd skill), API mocking with MSW (use test-msw skill), or Jest-specific APIs.
906typescript
This skill should be used when the user asks to "optimize TypeScript performance", "speed up tsc compilation", "configure tsconfig.json", "fix type errors", "improve async patterns", or encounters TS errors (TS2322, TS2339, "is not assignable to"). Also triggers on .ts, .tsx, .d.ts file work involving type definitions, module organization, or memory management. Does NOT cover TypeScript basics, framework-specific patterns, or testing.
820nuqs
nuqs (type-safe URL query state) best practices for Next.js applications. This skill should be used when writing, reviewing, or refactoring code that uses nuqs for URL state management. Triggers on tasks involving useQueryState, useQueryStates, search params, URL state, query parameters, nuqs parsers, or Next.js routing with state.
734