mobile-design

Provide mobile-first design frameworks for iOS and Android app development.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill solves the common issue of AI generating generic, desktop-oriented code for mobile applications, ensuring your mobile projects are touch-optimized, battery-conscious, and platform-compliant.

Core Features & Use Cases

  • Platform-Specific Guidance: Provides expert-level design patterns for iOS (Human Interface Guidelines) and Android (Material Design 3).
  • Performance Optimization: Enforces critical mobile rules like FlatList memoization, proper touch target sizing, and native-driver animations.
  • Use Case: When building a cross-platform React Native or Flutter app, use this Skill to audit your navigation, state management, and offline data strategy to ensure a native-feeling experience that doesn't drain the user's battery.

Quick Start

Use the mobile-design skill to audit my current React Native project located in the src directory for touch target and performance anti-patterns.

Frequently Asked Questions about mobile-design

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

FAQPage Schema
How do I optimize React Native performance for touch interactions and battery life?

To optimize React Native performance, enforce native-driver animations, FlatList memoization, and proper touch target sizing. This prevents generic desktop-oriented code from draining battery and ensures touch-first interactions feel native on mobile platforms.

What's the best way to choose navigation patterns and state management for cross-platform mobile apps?

Selecting navigation patterns and state management requires mobile-first design frameworks tailored to specific project constraints. This approach ensures your cross-platform app maintains a native-feeling experience while aligning with iOS and Android UI conventions.

Does this mobile design framework support both iOS Human Interface Guidelines and Android Material Design 3?

Yes, this mobile design framework supports both platforms by providing expert-level design patterns for iOS Human Interface Guidelines and Android Material Design 3. It enforces platform-specific UI conventions to ensure full compliance.

How do I audit an existing Flutter project for mobile UI anti-patterns and memory management issues?

You can audit a Flutter project by applying mobile-first design thinking to evaluate offline storage strategies, memory management, and touch target optimization. This identifies desktop-oriented code and enforces mobile performance best practices.

Why does my cross-platform mobile app feel non-native and drain the user's battery?

Your cross-platform app likely feels non-native and drains battery because generic desktop-oriented code bypasses mobile-first design rules. Enforcing touch target optimization, memory management, and platform-specific UI conventions resolves these performance anti-patterns.

When do I need offline storage strategies for mobile application development?

Offline storage strategies are needed when building cross-platform mobile apps that must maintain a native-feeling experience without constant connectivity. Selecting the right strategy based on project constraints ensures data persistence and battery-conscious performance.