Mobile UX Skill

Atomic Skill: Design native-feeling mobile experiences for iOS and Android platforms

Purpose

This skill provides platform-specific guidance for creating optimal mobile user experiences.

Skill Invocation

Skill("custom-plugin-ux-design:mobile-ux")

Parameter Schema

Input Parameters

interface MobileUXParams {
  // Required
  task: "ios" | "android" | "cross-platform" | "responsive" | "gesture";
  scope: string;

  // Optional
  platform_priority?: "ios" | "android" | "equal";
  app_type?: "native" | "hybrid" | "pwa";
  device_targets?: ("phone" | "tablet" | "foldable")[];
  os_versions?: {
    ios?: string;
    android?: string;
  };
}

Validation Rules

task:
  type: enum
  required: true
  values: [ios, android, cross-platform, responsive, gesture]

scope:
  type: string
  required: true
  min_length: 5

platform_priority:
  type: enum
  default: "equal"

Execution Flow

MOBILE UX EXECUTION
────────────────────────────────────────────

Step 1: ANALYZE REQUIREMENTS
├── Identify target platforms
├── Define device matrix
└── Set priority platform

Step 2: RESEARCH GUIDELINES
├── Review platform HIG
├── Study native patterns
└── Identify constraints

Step 3: DESIGN PATTERNS
├── Navigation structure
├── Touch interactions
├── Platform-specific components
└── Gesture mapping

Step 4: ADAPT FOR PLATFORMS
├── iOS adaptations
├── Android adaptations
├── Cross-platform unification
└── Responsive breakpoints

Step 5: VALIDATE
├── Test on device matrix
├── Verify platform compliance
└── Document exceptions

────────────────────────────────────────────

Retry Logic

retry_config:
  max_attempts: 3
  backoff_type: exponential
  initial_delay_ms: 1000
  max_delay_ms: 10000
  retryable_errors:
    - DEVICE_SYNC_FAILED
    - PREVIEW_TIMEOUT

Logging Hooks

interface MobileUXLog {
  timestamp: string;
  event: "pattern_selected" | "adaptation_created" | "device_tested";
  platform: string;
  device: string;
  compliance_score: number;
}

Learning Modules

Module 1: iOS Human Interface Guidelines

iOS DESIGN PRINCIPLES
├── Clarity (legible, clear icons)
├── Deference (content first)
├── Depth (layers, motion)

iOS NAVIGATION
├── Tab bar (5 max)
├── Navigation bar
├── Tool bar
├── Side bar (iPad)
└── Search

iOS COMPONENTS
├── SF Symbols
├── System controls
├── Sheets
├── Popovers
└── Action sheets

Module 2: Material Design 3

MATERIAL PRINCIPLES
├── Material as metaphor
├── Bold, graphic, intentional
├── Motion provides meaning

MATERIAL NAVIGATION
├── Bottom navigation
├── Navigation drawer
├── Navigation rail
├── Tabs
└── Search

MATERIAL COMPONENTS
├── FAB (Floating Action Button)
├── Cards
├── Chips
├── Dialogs
└── Bottom sheets

Module 3: Touch & Gestures

TOUCH TARGETS
├── iOS: 44x44 pt minimum
├── Android: 48x48 dp minimum
├── Spacing: 8dp between targets

STANDARD GESTURES
├── Tap (select, activate)
├── Long press (context menu)
├── Swipe (navigate, actions)
├── Pinch (zoom)
├── Rotate (rotate content)
├── Pan (scroll, move)
└── Edge swipe (back navigation)

GESTURE CONFLICTS
├── System gesture areas
├── Platform-specific gestures
└── Custom gesture rules

Module 4: Responsive Mobile Design

BREAKPOINTS
├── Small phone: 320-375pt
├── Regular phone: 375-414pt
├── Large phone: 414-428pt
├── Small tablet: 768-834pt
├── Large tablet: 834-1024pt
└── Foldable: Variable

ADAPTIVE LAYOUTS
├── Compact (phone portrait)
├── Regular (phone landscape, tablet)
├── Expanded (tablet landscape)

SAFE AREAS
├── Status bar
├── Home indicator
├── Notch/Dynamic Island
├── Gesture areas
└── Camera cutouts

Module 5: Platform Optimization

PERFORMANCE
├── 60fps animations
├── Lazy loading
├── Image optimization
├── Memory management
└── Network efficiency

NATIVE FEEL
├── Platform animations
├── Haptic feedback
├── System sounds
├── Platform typography
└── Native controls

Platform Comparison

Error Handling

Troubleshooting

Problem: App doesn't feel native

Diagnosis:
├── Check: Navigation patterns
├── Check: Component usage
├── Check: Animation timing
└── Solution: Align with platform

Steps:
1. Audit against HIG/Material
2. Replace custom with native
3. Match platform animations
4. Test with platform users

Problem: Touch interactions unreliable

Diagnosis:
├── Check: Touch target sizes
├── Check: Gesture areas
├── Check: Feedback timing
└── Solution: Optimize touch

Steps:
1. Measure all targets
2. Increase to minimum
3. Add haptic feedback
4. Test with real devices

Unit Test Templates

describe("MobileUXSkill", () => {
  describe("platform compliance", () => {
    it("should meet iOS touch target requirements", async () => {
      const result = await invoke({
        task: "ios",
        scope: "button component"
      });
      expect(result.touch_target.width).toBeGreaterThanOrEqual(44);
      expect(result.touch_target.height).toBeGreaterThanOrEqual(44);
    });

    it("should meet Android touch target requirements", async () => {
      const result = await invoke({
        task: "android",
        scope: "button component"
      });
      expect(result.touch_target.width).toBeGreaterThanOrEqual(48);
      expect(result.touch_target.height).toBeGreaterThanOrEqual(48);
    });
  });

  describe("responsive adaptation", () => {
    it("should provide breakpoint specifications", async () => {
      const result = await invoke({
        task: "responsive",
        scope: "navigation layout"
      });
      expect(result.breakpoints.compact).toBeDefined();
      expect(result.breakpoints.regular).toBeDefined();
    });
  });
});

Quality Metrics

Version History