# Native App Designer > Creates breathtaking iOS/Mac and web apps with organic, non-AI aesthetic. Expert in SwiftUI, React animations, physics-based motion, and human-crafted design. Use for iOS/Mac app UI, React/Vue animations, native-feel web apps, physics-based motion design. Activate on "SwiftUI", "iOS app", "native app", "React animation", "motion design", "UIKit", "physics animation". NOT for backend logic, API design (use backend-architect), simple static sites (use web-design-expert), or pure graphic design (use design-system-creator). - Skill: `curiositech/native-app-designer` (Agent Skill, multi-file: 6 files) - Install (CLI): `npx skillmds@latest add curiositech/native-app-designer` - Raw SKILL.md: https://api.skillmd.com/api/skills/curiositech/native-app-designer/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - License: Apache-2.0 - Author: curiositech (https://skillmd.com/u/curiositech) - Updated: 2026-09-09 - Page: https://skillmd.com/skills/curiositech/native-app-designer --- # Native App Designer Elite native app designer specializing in breathtaking, human-centered applications that feel organic and alive—never generic or AI-generated. ## Decision Points ### Content Type → Animation Timing Decision Tree ``` User Action Type: ├── Immediate Feedback (button press, tap) │ ├── Success: 0.1s spring (response: 0.3, damping: 0.7) │ └── Error: 0.15s + haptic feedback ├── Content Transition (page change, modal) │ ├── Forward navigation: 0.25s slide-right │ ├── Back navigation: 0.2s slide-left (faster return) │ └── Modal present/dismiss: 0.3s scale + fade ├── Data Loading States │ ├── <2s expected: Skeleton animation │ ├── 2-5s expected: Progress indicator + entertainment │ └── >5s expected: Cancellable with progress details └── Celebration/Success ├── Minor success: 0.4s gentle bounce ├── Major success: 0.8s confetti + sound └── Achievement: 1.2s dramatic scale + particle effects ``` ### User Mood → Visual Personality Selection ``` IF user context = "work/productivity" → Use Professional personality (crisp, confident, muted colors) ELSE IF user context = "entertainment/social" → Use Playful personality (bouncy springs, warm colors) ELSE IF user context = "wellness/meditation" → Use Natural personality (organic motion, earthy colors) ELSE IF user context = "finance/serious" → Use Minimal personality (subtle motion, limited palette) ELSE → Default to Vibrant personality (energetic, bold colors) ``` ### Platform Constraints → Implementation Strategy ``` Target Platform: ├── iOS Native │ ├── Use SwiftUI for iOS 14+ → spring animations, SF Symbols │ ├── Use UIKit for iOS 13- → Core Animation, manual spring curves │ └── Add haptic feedback for all key interactions ├── Web Progressive │ ├── Use Framer Motion for React → physics-based animations │ ├── Use GSAP for vanilla JS → 60fps performance │ └── Implement reduced motion support └── Cross-platform ├── Use Lottie for complex animations → After Effects export ├── Focus on transform/opacity → hardware acceleration └── Fallback to CSS transitions for low-end devices ``` ## Failure Modes ### "Generic Card Syndrome" **Detection**: If every component is a white/gray card with identical shadows and spacing **Symptoms**: UI feels monotonous, looks AI-generated, lacks visual hierarchy **Fix**: Mix component types (cards, lists, overlays, inline elements), vary corner radius (8px-24px), use purposeful asymmetry ### "Linear Animation Death" **Detection**: If animations use `.linear()` or constant easing everywhere **Symptoms**: Interactions feel robotic, unnatural, lifeless **Fix**: Replace with spring physics: `.spring(response: 0.3-0.8, dampingFraction: 0.5-0.8)`, match animation personality to app context ### "Rainbow Vomit Overload" **Detection**: If using >5 colors with no restraint or hierarchy **Symptoms**: Overwhelming interface, no focal points, visual chaos **Fix**: Limit to 3-4 colors max, use 60/30/10 rule (60% neutral, 30% primary, 10% accent), semantic color usage only ### "Animation Overload Syndrome" **Detection**: If every element animates simultaneously or constantly **Symptoms**: User can't focus, feels dizzy, performance issues **Fix**: Animate max 2-3 elements per interaction, stagger timing by 50-100ms, use animation sparingly for feedback only ### "Inconsistent Spacing Chaos" **Detection**: If margins/padding use random values (7px, 13px, 19px) **Symptoms**: Interface feels unpolished, chaotic, amateur **Fix**: Adopt 4pt or 8pt grid system (4, 8, 12, 16, 24, 32px), create spacing tokens, use systematic spacing scale ## Worked Examples ### Example 1: E-commerce Product Card Redesign **Before**: Generic white card with linear transitions ```swift // Anti-pattern: Generic, lifeless VStack { AsyncImage(url: product.imageURL) Text(product.name) Text("$\(product.price)") } .background(.white) .cornerRadius(8) .shadow(radius: 2) .animation(.linear(duration: 0.2)) // WRONG ``` **Decision Process**: 1. **Content Type**: Product showcase → needs visual appeal 2. **User Mood**: Shopping → playful/energetic personality 3. **Platform**: iOS → use SwiftUI springs + haptics **After**: Organic, delightful interaction ```swift struct DelightfulProductCard: View { @State private var isPressed = false var body: some View { VStack(alignment: .leading, spacing: 12) { AsyncImage(url: product.imageURL) .frame(height: 200) .clipShape(RoundedRectangle(cornerRadius: 16, style: .continuous)) .scaleEffect(isPressed ? 0.95 : 1.0) VStack(alignment: .leading, spacing: 4) { Text(product.name) .font(.system(.title3, design: .rounded, weight: .bold)) Text("$\(product.price)") .font(.title2) .foregroundStyle(.green) } } .padding(16) .background(.ultraThinMaterial) .clipShape(RoundedRectangle(cornerRadius: 20, style: .continuous)) .scaleEffect(isPressed ? 0.98 : 1.0) .animation(.spring(response: 0.3, dampingFraction: 0.7), value: isPressed) .onTapGesture { // Haptic feedback for premium feel let impact = UIImpactFeedbackGenerator(style: .medium) impact.impactOccurred() } .pressEvents { onPress: { isPressed = true } onRelease: { isPressed = false } } } } ``` **Expert insights caught**: - Spring physics instead of linear timing - Asymmetric spacing (12px, 4px) creates rhythm - Material background feels premium vs flat white - Haptic feedback adds polish - Continuous corner radius feels more organic ### Example 2: Loading State Animation Strategy **Decision Process**: 1. **Expected duration**: API call ~3 seconds → needs entertainment 2. **User context**: Banking app → professional personality 3. **Content type**: Financial data → build trust, not anxiety **Implementation**: ```jsx const ProfessionalLoader = ({ duration = 3000 }) => { const [progress, setProgress] = useState(0); // Smooth progress curve (not linear) useEffect(() => { const interval = setInterval(() => { setProgress(prev => Math.min(prev + (100 / (duration / 100)), 100)); }, 100); return () => clearInterval(interval); }, [duration]); return ( Securing your data... ); }; ``` **Trade-off Analysis**: - Progress bar vs spinner: Progress shows control, builds trust - Spring vs linear: Spring feels more natural, less robotic - Copy choice: "Securing" emphasizes safety over speed - Opacity pulse: Subtle life without being distracting ## Quality Gates ### Pre-Launch Validation Checklist **Animation Quality**: - [ ] All animations use spring physics or eased curves (no linear) - [ ] Animation duration matches content importance (0.1s feedback, 0.3s transitions, 0.8s celebrations) - [ ] Maximum 3 elements animate simultaneously per interaction - [ ] Reduced motion is supported for accessibility - [ ] 60fps performance maintained on target devices **Visual Hierarchy**: - [ ] Clear focal point on every screen (one primary action) - [ ] Color usage follows semantic meaning (red=error, green=success) - [ ] Typography has clear hierarchy (max 4 font sizes/weights) - [ ] Spacing follows consistent grid system (4pt or 8pt) - [ ] Interactive elements are minimum 44px touch targets **Platform Integration**: - [ ] iOS: Uses SF Symbols, system materials, supports Dynamic Type - [ ] Web: Implements proper focus states, works with screen readers - [ ] Cross-platform: Consistent brand feel across platforms - [ ] Haptic feedback implemented for key iOS interactions - [ ] Dark mode support with semantic colors **Brand Consistency**: - [ ] Personality choice is consistent across all interactions - [ ] Color palette limited to 3-4 colors maximum - [ ] Animation timing reflects brand character - [ ] Micro-copy matches brand voice - [ ] Empty/error states maintain brand personality ## Not-For Boundaries **Do NOT use this skill for**: - Backend API architecture → Use `backend-architect` instead - Database schema design → Use `backend-architect` instead - SEO optimization → Use `web-design-expert` instead - Brand identity creation → Use `design-system-creator` instead - Accessibility-first design → Use `adhd-design-expert` instead - Static marketing sites → Use `web-design-expert` instead - Design system tokens → Use `design-system-creator` instead **Delegate to other skills when**: - User mentions "server", "database", "API endpoints" → `backend-architect` - Focus is on accessibility, ADHD, cognitive load → `adhd-design-expert` - Need retro/vaporwave/glassmorphic aesthetic → `vaporwave-glassomorphic-ui-designer` - Building component libraries without interface → `design-system-creator` - GPU shaders, Metal, WebGL complexity → `metal-shader-expert`