skills.rest
TimeKast
TimeKastOFFICIAL
Explore all skills by this author →
WebsiteGitHub

mobile-design

Guide mobile-first design for iOS and Android apps with platform conventions.

Updated May 19, 2026
Search Tags:#performance#accessibility#mobile testing#platform guidelines#mobile ux#offline sync#touch interaction
One-click install
npx skills add https://github.com/TimeKast/AgendaInteligente --skill mobile-design-timekast
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-design
Source: https://github.com/TimeKast/AgendaInteligente/tree/main/.agent/skills/mobile-design
Command: npx skills add https://github.com/TimeKast/AgendaInteligente --skill mobile-design-timekast

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

It helps you avoid weak “desktop thinking” and produces mobile-first UX decisions that work under real constraints like thumb reach, touch imprecision, unreliable networks, and limited performance budgets.

Core Features & Use Cases

  • Mobile-first decision making: Forces context-based choices (platform, framework, navigation, state, offline) instead of memorized patterns.
  • Touch, performance, and UX quality guardrails: Emphasizes minimum touch targets, gesture discoverability, memoization/list rendering correctness, and 60fps animation practices.
  • Platform-specific conventions: Guides iOS (HIG/SF Symbols/Dynamic Type) and Android (Material 3/dynamic color/ripple/predictive back) differences.
  • Mobile engineering readiness: Covers mobile testing strategy, debugging workflow, typography scaling, color accessibility (contrast/OLED/dark mode), and mobile backend patterns for push/offline/sync.

Quick Start

Tell the AI your target platforms and framework (iOS/Android/Both and React Native/Flutter/native), describe your navigation structure, and ask it to produce a mobile design plan plus a checklist of anti-patterns to avoid for your screens.

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 UX that feels native for both iOS and Android?▼

Designing native mobile UX requires following platform-specific conventions like iOS HIG and Android Material 3, ensuring touch targets meet minimum sizes, and optimizing navigation architecture for thumb reach. This approach forces context-based choices for your target framework rather than memorized desktop patterns.

What are the minimum touch target sizes and performance constraints for mobile apps?▼

Mobile apps must enforce minimum touch target sizes for gesture discoverability and maintain 60fps animations through memoization and correct list rendering. Performance constraints also dictate avoiding mobile UX anti-patterns that cause jank or unresponsive interfaces under limited device budgets.

Can I use this mobile design guidance for React Native and Flutter builds?▼

Yes, this mobile design guidance applies directly to React Native, Flutter, and native app builds. It covers framework-agnostic mobile engineering readiness including typography scaling, color accessibility for OLED and dark mode, and offline backend patterns for push notifications and sync.

How do I handle offline sync and backend patterns for mobile applications?▼

Handling offline sync for mobile applications involves implementing robust backend patterns that manage data synchronization, push notifications, and unreliable network conditions. You must architect navigation and state management to function seamlessly when connectivity drops or performance budgets tighten.

What is the best way to test and debug mobile app accessibility and rendering?▼

The best way to test mobile app accessibility and rendering is to apply a dedicated mobile testing strategy and debugging workflow. This includes validating color contrast for OLED and dark mode, verifying typography scaling, and checking list rendering correctness against mobile UX anti-pattern guardrails.

Why does my mobile app feel slow and how do I fix rendering performance?▼

Your mobile app feels slow likely due to list rendering errors, missing memoization, or animations dropping below 60fps. Fix rendering performance by applying mobile-first constraints, correcting touch interaction delays, and validating your architecture against mobile UX anti-pattern checklists.

Related Skills

Explore More Design & Creative Skills→
Sir-chawakornSir-chawakorn
9

scaffold-cross-platform-app

Scaffold React Native or Flutter apps with feature-first structure and state management.

Community
Advanced
pckienuitpckienuit

mobile-design

Analyze mobile app designs and code for platform-specific UX and implementation risks.

Community
Advanced
Muath2000Muath2000

mobile-developer

Develop cross-platform mobile apps with React Native or Flutter.

Community
Advanced
baasith6baasith6

using-ui-stack

Enforce design system rules for UI component generation.

Community
Intermediate