Agent skill · design visual · erichowens
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
Why this skill is useful
Provides domain-specific knowledge on creating organic, human-centered app designs and physics-based animations that the AI wouldn't reliably generate on its own.
What it needs
About 4k tokens when loaded. Last updated 2026-07-14. 180 stars on the source repository.
What this skill does
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 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 …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills erichowens/native-app-designer