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.