native-app-designer

The saved excerpt is a snapshot from review. The external source remains the complete and most current version.

---
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,
  API design (use backend-architect), simple static sites (use web-design-expert), or pure graphic design (use design-system-creator).
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
  pairs-with:
  - skill: metal-shader-expert
    reason: GPU-accelerated visual effects
  - skill: vaporwave-glassomorphic-ui-designer
    reason: Aesthetic iOS design
  tags:
  - ios
  - swiftui
  - react
  - animations
  - motion
---

# 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

| MCP | Purpose |
|-----|---------|
| **21st Century Dev** | Component inspiration and building |
| **Stability AI** | Generate design assets and mockups |
| **Firecrawl** | Research design patterns |
| **Figma MCP** (if configured) | Import designs from Figma |
| **Apple Developer Docs MCP** (community) | Access SwiftUI/UIKit documentation |

### 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 g