skills.rest
anilcancakir
anilcancakirCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

mobile-app-design-mastery

Define spacing, typography, color, and depth rules for Flutter, iOS, and Android UI designs.

5|1|Updated Jan 22, 2026
Search Tags:#typography#design#ui#mobile#color#spacing
One-click install
npx skills add https://github.com/anilcancakir/my-claude-code --skill mobile-app-design-mastery
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-app-design-mastery
Source: https://github.com/anilcancakir/my-claude-code/tree/main/skills/mobile-app-design-mastery
Command: npx skills add https://github.com/anilcancakir/my-claude-code --skill mobile-app-design-mastery

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Production-grade mobile UI design principles adapted from Refactoring UI for Flutter/native apps. ALWAYS activate for: Flutter app, mobile app, iOS app, Android app, mobile UI, app screens, mobile navigation, bottom sheets, mobile forms, touch targets, mobile typography, app color scheme, mobile cards, list views, mobile modals, tab bars, app bars, floating action buttons. Turkish: mobil uygulama tasarımı, Flutter tasarım, uygulama arayüzü, mobil UI, telefon uygulaması, Android tasarım, iOS tasarım. English: app design, mobile interface, touch-friendly, native feel, mobile UX.

Core Features & Use Cases

  • Establish mobile systems: spacing, typography, color, and depth guidelines for iOS and Android
  • Mobile hierarchy: primary, secondary, and tertiary content prioritization
  • Platform-aware patterns: navigation, forms, cards, and components tailored for Flutter, iOS, and Android
  • Accessibility & safe areas: touch targets, safe-area considerations, contrast compliance

Quick Start

Review the guide and begin applying the spacing, typography, color, and depth rules to your next mobile screen design.

Frequently Asked Questions about mobile-app-design-mastery

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

FAQPage Schema
How do I design a mobile UI that feels native on both iOS and Android?▼

Designing a mobile UI that feels native requires applying platform-aware patterns for navigation, forms, and components, while enforcing consistent spacing scales, typography, and depth rules tailored specifically for iOS and Android interfaces.

What spacing and typography systems should I use for Flutter app design?▼

For Flutter app design, establish concrete spacing scales and typography systems that prioritize primary, secondary, and tertiary content. This ensures visual consistency and accessible, touch-friendly interfaces across all app screens.

What are the minimum touch target sizes and safe area considerations for mobile apps?▼

Mobile apps require specific minimum touch target sizes and safe-area considerations to ensure accessibility. Meeting contrast compliance and depth rules guarantees that mobile forms, bottom sheets, and list views remain fully usable.

Can I use the same mobile UI components for bottom sheets and tab bars across platforms?▼

Yes, but you must adapt component patterns like bottom sheets, tab bars, app bars, and floating action buttons to be platform-aware. This ensures your mobile UI maintains a native feel whether deployed on iOS or Android.

How do I structure an app color scheme for optimal mobile accessibility and contrast?▼

Structuring an accessible app color scheme involves enforcing strict color contrast compliance and depth rules. By applying these mobile design principles, you ensure visual consistency and accessibility across all UI components and screens.

Related Skills

Explore More Design & Creative Skills→
jimiryquaijimiryquai

teach-impeccable

Analyze codebase and branding assets to write design context to .impeccable.md.

Community
Intermediate
NinaVerdeNinaVerde

Google Stitch MCP

Translate design references into Flutter UI code with Dart widgets.

Community
Intermediate
tddworkstddworks
38

ios-ux-prototype

Generate interactive HTML prototypes with iPhone mockups and flow arrows for iOS app UX flows.

Official
Intermediate
joshua3403joshua3403

phase-5-design-system

Create a platform-agnostic design system with token definitions and component scaffolding.

Community
Advanced