native-app-designer

license	Apache-2.0
name	native-app-designer
description	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 or API design (a non-visual backend concern), simple static sites (use web-design-expert), or design-system tokens/component libraries without an interface (use beautiful-gui-design).
allowed-tools	Read,Write,Edit,Bash,mcp__magic__21st_magic_component_builder,mcp__magic__21st_magic_component_refiner,mcp__stability-ai__stability-ai-generate-image,mcp__firecrawl__firecrawl_search
metadata	{"category":"Design & Creative","tags":["ios","swiftui","react","animations","motion"],"provenance":{"kind":"first-party","owners":["port-daddy"]},"pairs-with":[{"skill":"metal-shader-expert","reason":"GPU-accelerated Metal/MSL shader effects for advanced native visual polish once this skill's interaction and motion design is set."},{"skill":"web-design-expert","reason":"Supplies brand identity, color palette, and layout direction for the cross-platform web build; this skill carries it into native motion and platform idiom."},{"skill":"beautiful-gui-design","reason":"Broader cross-platform GUI design counterpart — accessibility, semantic tokens, and layout principles this skill specializes into native iOS/macOS motion and materials."},{"skill":"color-contrast-auditor","reason":"Computes the exact WCAG contrast ratios this skill's HIG audit requires for text and UI components."}],"io-contract":{"kind":"deliverable","consumes":["[Truncated]","[Truncated]"],"produces":["[Truncated]","[Truncated]"]}}

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