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.

When to Use This Skill

✅ Use for:

• iOS/Mac app UI design with SwiftUI or UIKit
• React/Vue/Svelte apps with delightful animations
• Physics-based motion design and micro-interactions
• Native-feel Progressive Web Apps (PWAs)
• App onboarding flows with personality
• Custom shader effects (Metal/WebGL)
• Component library design with character

❌ Do NOT use for:

• Backend API logic → use backend-architect
• Simple static websites → use web-design-expert
• Design system tokens only → use design-system-creator
• Graphic design/brand identity → use design-system-creator
• Accessibility-first ADHD apps → use adhd-design-expert
• Retro/vaporwave aesthetics → use vaporwave-glassomorphic-ui-designer

MCP Integrations

Available MCPs

Component Inspiration Workflow

1. Search 21st.dev for modern patterns
2. Analyze animation timing, color usage, hierarchy
3. Adapt (don't copy) - add your personality
4. Use mcp__magic__21st_magic_component_builder to scaffold
5. Refine with mcp__magic__21st_magic_component_refiner

Common Anti-Patterns

Anti-Pattern: Generic Card Syndrome

What it looks like: Every component is a white card with shadow Why it's wrong: Creates monotonous, AI-generated aesthetic What to do instead: Mix layouts—cards, lists, grids, overlays, inline elements

Anti-Pattern: Linear Animation Death

What it looks like: .animation(.linear(duration: 0.3)) Why it's wrong: Feels robotic, lifeless, unnatural What to do instead: Use spring physics with response/damping parameters

Anti-Pattern: Rainbow Vomit

What it looks like: Using every color in the palette everywhere Why it's wrong: No visual hierarchy, overwhelming What to do instead: Restrained palette with purposeful color usage

Anti-Pattern: Animation Overload

What it looks like: Everything bounces, slides, and fades constantly Why it's wrong: Distracting, overwhelming, hides content What to do instead: Animate intentionally—guide attention, provide feedback

Anti-Pattern: Inconsistent Spacing

What it looks like: Random margins (8px, 14px, 23px...) Why it's wrong: Feels unpolished, chaotic What to do instead: 4pt or 8pt grid system with consistent rhythm

Design Philosophy: Beyond Generic

What Makes Apps Look "AI-Generated" (AVOID)

• ❌ Perfectly centered everything with no visual rhythm
• ❌ Generic gradients (linear purple-to-blue everywhere)
• ❌ Oversized, ultra-rounded corners on everything
• ❌ Stock illustrations with same flat art style
• ❌ Over-reliance on cards with identical spacing
• ❌ Soulless animations (generic slide-in-from-bottom)

What Makes Apps Feel Human-Crafted (DO THIS)

• ✅ Asymmetry with purpose: Break the grid intentionally
• ✅ Unexpected details: Easter eggs, playful copy, personality
• ✅ Organic motion: Physics-based animations, spring dynamics
• ✅ Textural elements: Subtle noise, gradients with character
• ✅ Thoughtful hierarchy: Visual weight that guides naturally
• ✅ Emotional color: Palettes that evoke feeling
• ✅ Contextual adaptation: UI that responds to content and state

App Personality Types

Choose a personality and commit to it:

Motion Design Principles

Spring Physics Cheat Sheet

// Snappy, responsive
.spring(response: 0.3, dampingFraction: 0.7)

// Bouncy, playful
.spring(response: 0.5, dampingFraction: 0.5)

// Smooth, elegant
.spring(response: 0.6, dampingFraction: 0.8)

// Dramatic, slow
.spring(response: 0.8, dampingFraction: 0.6)

Animation Timing

• Immediate feedback: 0-100ms (button press)
• Quick transitions: 150-300ms (page change)
• Deliberate animations: 300-500ms (onboarding)
• Dramatic moments: 500-1000ms (celebrations)

Details That Delight

Small touches that make users smile:

• Pull-to-refresh with personality (not just a spinner)
• Empty states with character and guidance
• Loading states that entertain
• Success states that celebrate
• Error states that empathize
• Haptic feedback on key interactions

Platform-Specific Best Practices

iOS Native

• Use system materials (.ultraThinMaterial, .regularMaterial)
• Respect safe areas and Dynamic Island
• Support Dynamic Type (accessibility)
• Implement haptic feedback strategically
• Use SF Symbols with weight matching
• Support dark mode with semantic colors

Web Native Feel

• 60fps animations using transform/opacity
• CSS containment for performance
• Pull-to-refresh implementation
• PWA install prompt
• Reduced motion support
• Touch-friendly targets (44px minimum)

Tools & Libraries

iOS

• SwiftUI: Declarative UI framework
• UIKit: When SwiftUI isn't enough
• Lottie: After Effects animations
• SF Symbols: Apple's icon system

Web

• Framer Motion: React animation library
• GSAP: JavaScript animation powerhouse
• react-spring: Physics-based React animations
• Lottie Web: Cross-platform animations

Design

• Figma: Primary design tool
• Principle: Advanced prototyping
• 21st.dev: Component inspiration

---

Technical references for deep dives:

• /references/swiftui-patterns.md - SwiftUI components, animations, color palettes
• /references/react-patterns.md - React/Vue patterns, Framer Motion, responsive design
• /references/custom-shaders.md - Metal and WebGL shaders for unique effects

---

Philosophy: The difference between good and breathtaking is soul. Every pixel should have purpose. Every animation should feel inevitable. Every interaction should delight.

Changelog

All notable changes to the native-app-designer skill will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

[2.0.0] - 2025-11-26

Changed

• BREAKING: Refactored from single 787-line file to modular structure
• Reduced SKILL.md from 787 lines to 189 lines (76% reduction)
• Moved detailed code patterns to /references/ directory
• Updated frontmatter to standard allowed-tools format
• Simplified description with proper NOT clause

Added

• When to Use This Skill section with clear scope boundaries
• Do NOT use for section with skill alternatives
• MCP Integrations section:
• 21st Century Dev for component inspiration
• Stability AI for design assets
• Firecrawl for pattern research
• Apple Developer Docs MCP (community)
• Common Anti-Patterns section (5 patterns):
• Generic Card Syndrome
• Linear Animation Death
• Rainbow Vomit
• Animation Overload
• Inconsistent Spacing
• App Personality Types table for design direction
• Spring Physics Cheat Sheet for quick reference
• Created /references/swiftui-patterns.md - Full SwiftUI component examples
• Created /references/react-patterns.md - React/Vue animation patterns
• Created /references/custom-shaders.md - Metal and WebGL shader effects

Removed

• Redundant Vue template code (moved to references)
• Extensive SwiftUI examples (moved to references)
• Shader code blocks (moved to references)
• Custom YAML frontmatter format (triggers, integrates_with, official_mcps)

Improved

• Progressive disclosure: essential concepts in SKILL.md, code in references
• Cross-references to related skills
• Motion design principles condensed to actionable cheat sheet

[1.0.0] - 2024-XX-XX

Added

• Initial native-app-designer skill
• SwiftUI design patterns and components
• React/Vue animation patterns with Framer Motion
• Physics-based animation guidelines
• Color psychology for native apps
• Typography with personality
• Custom shader examples (Metal/WebGL)
• Anti-AI aesthetic philosophy
• Design tool recommendations

Custom Shaders for Unique Effects

Deep reference for Metal shaders (iOS) and WebGL/GLSL (web) to create distinctive visual effects.

iOS: Metal Shaders in SwiftUI

Organic Blur Effect

struct OrganicBlurShader: View {
    var body: some View {
        TimelineView(.animation) { timeline in
            Canvas { context, size in
                let shader = ShaderLibrary.organicBlur(
                    .float(timeline.date.timeIntervalSinceReferenceDate),
                    .float2(size)
                )
                context.addFilter(.shader(shader))
                // Your content here
            }
        }
    }
}

Metal Shader File (Shaders.metal)

#include <metal_stdlib>
using namespace metal;

[[ stitchable ]] half4 organicBlur(
    float2 position,
    float time,
    float2 size,
    half4 currentColor
) {
    // Flowing, organic blur based on Perlin noise
    float2 uv = position / size;

    // Animated noise
    float noise = fract(sin(dot(uv + time * 0.1, float2(12.9898, 78.233))) * 43758.5453);

    // Sample neighboring pixels with organic offset
    float2 offset = float2(
        cos(noise * 6.28) * 5.0,
        sin(noise * 6.28) * 5.0
    );

    // Return blurred color with organic movement
    return currentColor * (0.8 + noise * 0.4);
}

Web: Custom WebGL Shaders

Glass Effect with Three.js

import * as THREE from 'three';

const GlassShader = {
  vertexShader: `
    varying vec2 vUv;
    varying vec3 vNormal;

    void main() {
      vUv = uv;
      vNormal = normalize(normalMatrix * normal);
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,

  fragmentShader: `
    uniform float time;
    uniform vec3 color;
    uniform float opacity;
    varying vec2 vUv;
    varying vec3 vNormal;

    void main() {
      // Fresnel effect
      float fresnel = pow(1.0 - dot(vNormal, vec3(0.0, 0.0, 1.0)), 3.0);

      // Animated distortion
      float distort = sin(vUv.y * 10.0 + time) * 0.05;
      vec2 distortedUV = vUv + vec2(distort, 0.0);

      // Glass color with depth
      vec3 glassColor = color * (0.5 + fresnel * 0.5);

      gl_FragColor = vec4(glassColor, opacity * (0.1 + fresnel * 0.3));
    }
  `,

  uniforms: {
    time: { value: 0 },
    color: { value: new THREE.Color(0x4facfe) },
    opacity: { value: 0.8 }
  }
};

// Use in your component
const mesh = new THREE.Mesh(
  geometry,
  new THREE.ShaderMaterial(GlassShader)
);

Shader Ideas for Unique UI

Organic Loading States

// Flowing liquid loading indicator
float liquid = sin(uv.x * 3.0 + time * 2.0) * cos(uv.y * 3.0 + time * 1.5);
float loading = smoothstep(0.0, 1.0, liquid * 0.5 + 0.5);

Morphing Gradients

// Gradient that evolves based on interaction
vec3 gradient = mix(
  colorA,
  colorB,
  sin(time + length(uv - mousePos) * 5.0) * 0.5 + 0.5
);

Depth-Aware Blur

// Blur that respects visual hierarchy
float depth = texture2D(depthMap, uv).r;
float blur = mix(0.0, 10.0, depth);

Particle Systems

// Floating particles for ambient effect
vec2 particlePos = vec2(
  sin(time + id * 123.456) * 0.5,
  cos(time * 0.5 + id * 789.012) * 0.5
);
float particle = smoothstep(0.02, 0.0, length(uv - particlePos));

Shader Resources & Learning

Learn Shaders

• The Book of Shaders: Interactive shader tutorials
• Shadertoy: Community shader examples
• Apple WWDC Metal Sessions: Official Metal shader guides
• WebGL Fundamentals: Comprehensive WebGL/GLSL guide

Shader Tools

• Shadertoy: Browser-based shader editor
• ISF Editor: Interactive Shader Format for real-time effects
• RenderDoc: Graphics debugging
• Xcode Metal Debugger: iOS shader debugging

Performance Tips

• Keep shaders simple for mobile (< 50 instructions)
• Avoid branching in fragment shaders
• Precompute values in vertex shader when possible
• Use texture lookups sparingly
• Test on actual devices, not just simulators

When to Use Custom Shaders

Use shaders for:

• Unique ambient backgrounds
• Loading state animations
• Transition effects
• Glass/glassmorphism effects
• Particle systems
• Data visualizations

Don't use shaders for:

• Simple color changes (use CSS/SwiftUI)
• Basic animations (use native animations)
• Text rendering (performance issues)
• Simple gradients (native is better)

React/JavaScript Design Patterns

Deep reference for modern JavaScript UI patterns with native-feel animations and micro-interactions.

React: Micro-interactions with Framer Motion

import { motion } from 'framer-motion';

const DelightfulCard = ({ item }) => {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <motion.div
      className="card"
      onHoverStart={() => setIsHovered(true)}
      onHoverEnd={() => setIsHovered(false)}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{
        type: "spring",
        stiffness: 300,
        damping: 20
      }}
    >
      <motion.div
        className="card-content"
        animate={{
          y: isHovered ? -4 : 0,
        }}
        transition={{ type: "spring", stiffness: 400, damping: 25 }}
      >
        <div className="card-image-wrapper">
          <img src={item.image} alt={item.title} />
          <motion.div
            className="card-overlay"
            initial={{ opacity: 0 }}
            animate={{ opacity: isHovered ? 1 : 0 }}
            transition={{ duration: 0.2 }}
          />
        </div>

        <div className="card-text">
          <h3>{item.title}</h3>
          <p>{item.description}</p>
        </div>

        <motion.button
          className="card-action"
          initial={{ opacity: 0, x: -10 }}
          animate={{
            opacity: isHovered ? 1 : 0,
            x: isHovered ? 0 : -10
          }}
          transition={{ delay: 0.1 }}
        >
          Learn more →
        </motion.button>
      </motion.div>
    </motion.div>
  );
};

Vue: Organic State Transitions

<template>
  <div class="breathtaking-list">
    <TransitionGroup name="stagger" tag="div" class="list-container">
      <div
        v-for="(item, index) in items"
        :key="item.id"
        :style="{ transitionDelay: `${index * 50}ms` }"
        class="list-item"
        @mouseenter="handleHover(item.id)"
        @mouseleave="hoveredId = null"
      >
        <div class="item-glow" :class="{ active: hoveredId === item.id }"></div>
        <div class="item-content">
          <h4>{{ item.title }}</h4>
          <p>{{ item.description }}</p>
        </div>
      </div>
    </TransitionGroup>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const items = ref([...]);
const hoveredId = ref(null);

const handleHover = (id) => {
  hoveredId.value = id;
  // Subtle haptic feedback if supported
  if ('vibrate' in navigator) {
    navigator.vibrate(10);
  }
};
</script>

<style scoped>
.stagger-enter-active,
.stagger-leave-active {
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stagger-enter-from {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
}

.stagger-leave-to {
  opacity: 0;
  transform: translateY(-30px) scale(0.95);
}

.item-glow {
  position: absolute;
  inset: -10px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.item-glow.active {
  opacity: 1;
}
</style>

Web App Native Feel Checklist

Performance

• 60fps animations using transform and opacity
• Optimistic updates for instant feedback
• CSS containment for layout performance
• Virtualized lists for large datasets

Native Patterns

• Implement pull-to-refresh
• Add install prompt (PWA)
• Use Web Animations API
• Implement proper focus management
• Support reduced motion preferences

Animation Libraries

Framer Motion (React):

import { motion, AnimatePresence } from 'framer-motion';

// Spring physics
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ type: "spring", stiffness: 300 }}
/>

GSAP (Any framework):

gsap.to(".element", {
  duration: 0.6,
  y: 0,
  ease: "elastic.out(1, 0.5)"
});

react-spring:

const props = useSpring({
  to: { opacity: 1, transform: 'translateY(0)' },
  from: { opacity: 0, transform: 'translateY(20px)' },
  config: { tension: 300, friction: 20 }
});

Responsive Design Patterns

Mobile-First Breakpoints

/* Mobile first */
.container {
  padding: 16px;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    padding: 24px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    padding: 32px;
    max-width: 1200px;
  }
}

Touch-Friendly Targets

/* Minimum 44px touch targets */
.button {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 24px;
}

/* Generous spacing between interactive elements */
.nav-items {
  gap: 16px;
}

Progressive Enhancement

// Feature detection
if ('IntersectionObserver' in window) {
  // Use intersection observer for lazy loading
} else {
  // Fallback to eager loading
}

// Reduced motion
const prefersReducedMotion = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;

if (prefersReducedMotion) {
  // Use instant transitions
}

SwiftUI Design Patterns

Deep reference for breathtaking SwiftUI component patterns, animations, and iOS-native UI excellence.

Breathtaking Card Design

struct BeautifulCard: View {
    let item: Item
    @State private var isPressed = false

    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            // Image with character
            AsyncImage(url: item.imageURL)
                .frame(height: 200)
                .clipShape(RoundedRectangle(cornerRadius: 16, style: .continuous))
                .shadow(color: .black.opacity(0.1), radius: 20, y: 10)

            VStack(alignment: .leading, spacing: 4) {
                Text(item.title)
                    .font(.system(.title3, design: .rounded, weight: .bold))
                    .foregroundStyle(.primary)

                Text(item.description)
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
                    .lineLimit(2)
            }
            .padding(.horizontal, 4)
        }
        .padding(16)
        .background {
            RoundedRectangle(cornerRadius: 20, style: .continuous)
                .fill(.ultraThinMaterial)
                .shadow(
                    color: item.accentColor.opacity(0.2),
                    radius: isPressed ? 10 : 20,
                    x: 0,
                    y: isPressed ? 5 : 10
                )
        }
        .scaleEffect(isPressed ? 0.97 : 1.0)
        .animation(.spring(response: 0.3, dampingFraction: 0.6), value: isPressed)
        .onLongPressGesture(minimumDuration: .infinity, maximumDistance: .infinity,
            pressing: { pressing in
                isPressed = pressing
            },
            perform: {}
        )
    }
}

Organic List Design

struct OrganicList: View {
    let items: [Item]
    @Namespace private var namespace

    var body: some View {
        ScrollView {
            LazyVStack(spacing: 0) {
                ForEach(items) { item in
                    ItemRow(item: item)
                        .padding(.horizontal, 20)
                        .padding(.vertical, 8)
                        .background(
                            // Subtle alternating background
                            item.id.hashValue % 2 == 0
                                ? Color.clear
                                : Color.primary.opacity(0.02)
                        )
                        .matchedGeometryEffect(id: item.id, in: namespace)
                }
            }
        }
        .background(Color(.systemGroupedBackground))
    }
}

Physics-Based Button Animation

struct BouncyButton: View {
    @State private var scale: CGFloat = 1.0
    @State private var rotation: Double = 0.0

    var body: some View {
        Button(action: {
            // Haptic feedback
            let generator = UIImpactFeedbackGenerator(style: .medium)
            generator.impactOccurred()

            // Playful animation sequence
            withAnimation(.spring(response: 0.3, dampingFraction: 0.5)) {
                scale = 0.9
                rotation = -5
            }

            DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
                withAnimation(.spring(response: 0.5, dampingFraction: 0.4)) {
                    scale = 1.05
                    rotation = 5
                }
            }

            DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
                withAnimation(.spring(response: 0.6, dampingFraction: 0.7)) {
                    scale = 1.0
                    rotation = 0
                }
            }
        }) {
            Text("Tap me!")
                .font(.headline)
                .foregroundColor(.white)
                .padding(.horizontal, 32)
                .padding(.vertical, 16)
                .background(
                    Capsule()
                        .fill(
                            LinearGradient(
                                colors: [.blue, .purple],
                                startPoint: .topLeading,
                                endPoint: .bottomTrailing
                            )
                        )
                )
        }
        .scaleEffect(scale)
        .rotationEffect(.degrees(rotation))
    }
}

Breathtaking Onboarding

struct OnboardingView: View {
    @State private var currentPage = 0
    @Namespace private var animation

    var body: some View {
        ZStack {
            // Animated gradient background
            AnimatedGradientBackground(page: currentPage)

            VStack {
                // Content
                TabView(selection: $currentPage) {
                    ForEach(0..<3) { index in
                        OnboardingPage(index: index)
                            .tag(index)
                    }
                }
                .tabViewStyle(.page(indexDisplayMode: .never))

                // Custom page indicator with personality
                HStack(spacing: 8) {
                    ForEach(0..<3) { index in
                        Capsule()
                            .fill(currentPage == index ? Color.white : Color.white.opacity(0.3))
                            .frame(
                                width: currentPage == index ? 32 : 8,
                                height: 8
                            )
                            .matchedGeometryEffect(id: index, in: animation)
                            .animation(.spring(response: 0.6, dampingFraction: 0.7), value: currentPage)
                    }
                }
                .padding(.bottom, 40)

                // CTA with character
                Button("Get Started") {
                    // Action with celebratory animation
                }
                .buttonStyle(BouncyCTAStyle())
            }
        }
    }
}

Typography with Character

struct CharacterfulText: View {
    let text: String
    let style: TextStyle

    enum TextStyle {
        case hero, title, body, caption

        var font: Font {
            switch self {
            case .hero:
                return .system(.largeTitle, design: .rounded, weight: .black)
            case .title:
                return .system(.title2, design: .rounded, weight: .bold)
            case .body:
                return .system(.body, design: .default, weight: .regular)
            case .caption:
                return .system(.caption, design: .monospaced, weight: .medium)
            }
        }

        var letterSpacing: CGFloat {
            switch self {
            case .hero: return -0.5
            case .title: return -0.3
            case .body: return 0.2
            case .caption: return 0.5
            }
        }
    }

    var body: some View {
        Text(text)
            .font(style.font)
            .tracking(style.letterSpacing)
    }
}

Emotional Color Palettes

// Energetic & Playful
extension Color {
    static let energeticPrimary = Color(hex: "FF6B6B")   // Coral red
    static let energeticSecondary = Color(hex: "4ECDC4") // Turquoise
    static let energeticAccent = Color(hex: "FFE66D")    // Sunny yellow
    static let energeticBackground = Color(hex: "F7F7F2") // Warm white
}

// Professional & Trustworthy
extension Color {
    static let proMidnight = Color(hex: "1A202C")   // Deep navy
    static let proTeal = Color(hex: "319795")       // Teal accent
    static let proSlate = Color(hex: "4A5568")      // Slate gray
    static let proIvory = Color(hex: "FFFAF0")      // Ivory background
}

// Calm & Minimal
extension Color {
    static let calmSage = Color(hex: "A8DADC")     // Soft sage
    static let calmNavy = Color(hex: "457B9D")     // Muted navy
    static let calmCoral = Color(hex: "F1FAEE")    // Cream
    static let calmCharcoal = Color(hex: "1D3557") // Charcoal
}

iOS Native Best Practices

Platform Patterns

• Use system materials (.ultraThinMaterial, .regularMaterial)
• Respect safe areas and Dynamic Island
• Support Dynamic Type (accessibility)
• Implement haptic feedback strategically
• Use SF Symbols with weight matching
• Support dark mode with semantic colors
• Leverage iOS 17+ features (TipKit, SwiftData)

Animation Best Practices

// ❌ Generic, lifeless
.animation(.linear(duration: 0.3))

// ✅ Alive, responsive
.animation(.spring(response: 0.6, dampingFraction: 0.7, blendDuration: 0.3))

Spring Parameters Guide

Response (0.2-1.0):
├── 0.2-0.3: Snappy, responsive
├── 0.4-0.6: Balanced, natural
└── 0.7-1.0: Slow, dramatic

Damping Fraction (0.3-1.0):
├── 0.3-0.5: Bouncy, playful
├── 0.6-0.8: Natural, organic
└── 0.9-1.0: Minimal bounce, smooth