From mobile-design-skills
Builds iOS 26+ interfaces using Liquid Glass design language: SwiftUI views, UIKit layouts, and platform-native patterns with proper hierarchy and motion.
How this skill is triggered — by the user, by Claude, or both
Slash command
/mobile-design-skills:mobile-design-iosThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill targets **iOS 26+** and its Liquid Glass design language. For apps targeting older iOS versions, fall back to standard Apple Human Interface Guidelines — those patterns are well-covered by general AI knowledge.
This skill targets iOS 26+ and its Liquid Glass design language. For apps targeting older iOS versions, fall back to standard Apple Human Interface Guidelines — those patterns are well-covered by general AI knowledge.
This skill guides creation of iOS interfaces that feel genuinely designed for the platform — avoiding the generic "template app" aesthetic that plagues AI-generated mobile UI. Every design decision should demonstrate understanding of iOS 26's Liquid Glass design language and the principles that separate professional apps from amateur ones.
The user provides iOS UI requirements: a screen, flow, component, or full app interface. They may include context about purpose, audience, or technical constraints.
Before generating any UI, commit to a clear design direction:
CRITICAL: Liquid Glass is not decoration — it's a hierarchy tool. Glass belongs exclusively on the navigation/controls layer (tab bars, toolbars, floating buttons, sheets). Content stays opaque and on the content layer. This single rule prevents the majority of amateur iOS 26 mistakes.
Focus on:
.interactive() modifier only to primary interaction elements — it adds GPU cost.GlassEffectContainer — without it each element renders independently (poor performance) and they can't merge/morph fluidly. This is essential, not optional.ConcentricRectangle). Sheets have increased corner radius with half-sheets inset from edges. Larger row heights, padding, and spacing than pre-iOS 26.Reduce Transparency and provide opaque fallbacks (use .identity glass variant)Reduce Motion — disable morphing, lensing, elastic behaviorsIncrease Contrast — stronger borders and foreground elementsUIVisualEffectView blur materials where Liquid Glass should beProfessional iOS 26 apps share these traits: glass appears only where it communicates "this floats above content as a control." Design tokens are centralized — consistent corner radii, padding, glass levels across every screen. GlassEffectContainer groups related glass elements into cohesive material. Tinting conveys semantic meaning, never decoration. Motion is purposeful — reserved for meaningful interactions, not constant spectacle. The Reduce Transparency path is as considered as the glass path itself.
Before asking "does this look good?", ask "what does this glass surface communicate about hierarchy?"
Remember: the best iOS 26 apps feel like Liquid Glass was always there. The worst ones feel like glass was applied as afterthought decoration. Design the content experience first. Let glass serve it.
npx claudepluginhub ivan-magda/mobile-design-skills --plugin mobile-design-skillsImplements Apple's Liquid Glass design system for iOS 26+/iPadOS 26+, covering SwiftUI glassEffect, NSGlassEffectView, glass morphing transitions, and UIKit migration patterns.
Generates production-grade SwiftUI code for Apple Design Award-quality iOS interfaces—screens, components, redesigns—with bold aesthetics and screenshot-driven iteration.
Redesigns mobile app UIs to iOS-native glass style with translucency, blur, SF Pro typography, safe areas, and Apple HIG—restrained for hierarchy and clarity.