mobile-design

Guide mobile-first design decisions for iOS and Android applications.

4|Updated Feb 8, 2026
One-click install
npx skills add https://github.com/alexgutscher26/ClawTrace --skill mobile-design-alexgutscher26
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mobile-design
Source: https://github.com/alexgutscher26/ClawTrace/tree/main/.agent/skills/mobile-design
Command: npx skills add https://github.com/alexgutscher26/ClawTrace --skill mobile-design-alexgutscher26

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the challenge of designing mobile applications that are intuitive, performant, and adhere to platform-specific conventions, moving beyond generic AI defaults.

Core Features & Use Cases

  • Platform-Specific Design: Provides guidance for iOS (HIG) and Android (Material Design 3).
  • Performance Optimization: Details critical patterns for smooth scrolling, animations, and battery efficiency.
  • User Interaction: Covers touch target sizing, thumb zone placement, and gesture design.
  • Use Case: When starting a new React Native project, use this Skill to ensure the design decisions for navigation, state management, and UI components are context-aware and platform-appropriate, avoiding common AI anti-patterns.

Quick Start

Use the mobile-design skill to generate a design checkpoint for a new React Native iOS app.

Frequently Asked Questions about mobile-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design mobile apps that follow iOS and Android platform conventions?

To design mobile apps following iOS and Android platform conventions, apply platform-specific guidelines like HIG and Material Design 3. This ensures interfaces match native expectations for touch interactions, navigation, and UI components.

What are the best UX patterns for mobile touch interactions and thumb zones?

Effective mobile UX patterns for touch interactions require sizing touch targets appropriately and placing frequent actions within the thumb zone. This approach ensures user-centric design by accommodating natural hand ergonomics on mobile devices.

Can I use mobile design guidelines for React Native and Flutter projects?

Yes, you can apply these mobile design guidelines to React Native and Flutter projects. The guidance focuses on core design concepts and decision-making rather than fixed values, making it applicable across cross-platform and native development.

How do I optimize mobile app performance for smooth scrolling and animations?

Optimizing mobile app performance for smooth scrolling and animations involves implementing critical performance patterns for battery efficiency and rendering. This prevents common anti-patterns that cause janky interfaces and high battery drain.

Why does my cross-platform mobile UI feel non-native on different operating systems?

Cross-platform mobile UI often feels non-native when generic AI defaults override platform conventions. Solving this requires context-aware design decisions that respect specific iOS and Android interaction patterns rather than applying uniform styling.