> ios-ui-refactor
Principal-level SwiftUI UI review and refactoring patterns for iOS 26 / Swift 6.2 clinic-architecture apps, grounded in Rams, Segall, and Edson principles. Use when auditing or improving existing SwiftUI screens, transitions, animations, and visual systems while preserving brand identity and respecting clinic Domain/Data/App boundaries.
curl "https://skillshub.wtf/pproenca/dot-skills/ios-ui-refactor?format=md"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 |
> related_skills --same-repo
> rust-write-tests
Skill for writing expert-level Rust tests. Teaches the "What Could Break?" framework, five transformations from superficial to expert tests, flake hunting protocol, intent-based assertions, naming conventions, and a mandatory self-review checklist. Triggers on writing Rust tests, designing test cases, improving test quality, or reviewing test coverage.
> rust-implement
Write production-grade Rust code using a multi-pass approach. Design types first, then implement, then simplify, then verify with automated lint. Use this skill whenever writing new Rust functions, structs, modules, or features. Triggers on Rust implementation, new Rust code, Rust functions, Rust modules, error handling in Rust, async Rust, or type design in Rust.
> valid-skill
A valid test skill with proper formatting. This skill should pass all validations and serves as a reference for the expected format.
> too-long-skill
This skill has more than 500 lines which should fail validation.