mobile-design

Codify platform-specific mobile design patterns for iOS and Android.

2|Updated Jan 19, 2026
One-click install
npx skills add https://github.com/ivanshtokov/copilot-kit --skill mobile-design-ivanshtokov
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mobile-design
Source: https://github.com/ivanshtokov/copilot-kit/tree/main/.github/skills/mobile-design
Command: npx skills add https://github.com/ivanshtokov/copilot-kit --skill mobile-design-ivanshtokov

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Mobile design projects often rely on copied patterns and desktop-centric heuristics, leading to inconsistent mobile experiences. This Skill provides a thinking-based framework to apply platform-aware design principles, ensuring iOS and Android apps prioritize usability, accessibility, and performance over rote templates.

Core Features & Use Cases

  • Anti-memorization thinking that forces context-based decisions before pattern reuse.
  • Platform-specific guidance for iOS and Android, including thumb-zone placement, typography, color systems, and navigation.
  • Practical checklists, decision trees, and templates to accelerate mobile UI/UX design in React Native, Flutter, and native code.
  • Use cases include designing new mobile apps, auditing existing interfaces, and updating design systems for consistency across platforms.

Quick Start

Start by reviewing mobile-design-thinking.md and apply thumb-zone, contrast, typography, and navigation guidelines to your target app.

Frequently Asked Questions about mobile-design

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

FAQPage Schema
How do I apply thumb-zone placement and platform-specific navigation for iOS and Android?

Apply thumb-zone placement and platform-specific navigation by following codified mobile design patterns that prioritize usability, accessibility, and context-based decisions over rote templates for iOS and Android apps.

What is anti-memorization thinking in mobile UX design?

Anti-memorization thinking in mobile UX design forces context-based decisions before reusing patterns, ensuring your iOS and Android interfaces avoid copied layouts and desktop-centric heuristics in favor of usability.

How do I audit an existing mobile app interface for iOS and Android consistency?

Audit an existing mobile app interface by applying practical checklists, decision trees, and platform-aware heuristics covering typography, color schemes, dark mode, and navigation to ensure iOS and Android consistency.

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

Yes, you can use these mobile design guidelines with React Native and Flutter projects, as the framework provides actionable heuristics and prioritized steps suitable for design briefs and cross-platform code integration.

What's the best way to integrate mobile design system updates for dark mode and color schemes?

The best way to integrate mobile design system updates for dark mode and color schemes is to apply the provided compact, executable guidelines and heuristics to ensure consistent typography and color systems across platforms.

Why do my mobile design patterns feel inconsistent across different platforms?

Mobile design patterns feel inconsistent across platforms when projects rely on copied patterns and desktop-centric heuristics, which you can resolve by applying a thinking-based framework for platform-aware iOS and Android design.