skills.rest
ofelixdev
ofelixdevCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

mobile-design

Guide mobile app design with iOS HIG and Android Material Design conventions.

Updated Feb 24, 2026
Search Tags:#design#performance#mobile#ios#android#flutter#react native
One-click install
npx skills add https://github.com/ofelixdev/cc-kit --skill mobile-design-ofelixdev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-design
Source: https://github.com/ofelixdev/cc-kit/tree/main/template/skills/mobile-design
Command: npx skills add https://github.com/ofelixdev/cc-kit --skill mobile-design-ofelixdev

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill guides the AI to think critically about mobile design constraints and platform conventions, preventing default, non-optimal AI patterns and ensuring a user-centric, performant, and accessible mobile application.

Core Features & Use Cases

  • Platform-Specific Guidance: Provides distinct advice for iOS and Android, including HIG and Material Design principles.
  • Performance Optimization: Enforces best practices for lists, animations, and memory management to ensure 60fps performance.
  • Accessibility Focus: Emphasizes touch target sizes, contrast ratios, and Dynamic Type support.
  • Use Case: When asked to build a React Native e-commerce app, this Skill ensures the AI considers thumb zones for CTAs, uses FlatList with optimizations, and asks clarifying questions about platform specifics before generating code.

Quick Start

Use the mobile-design skill to generate a React Native component for a mobile product listing screen, ensuring it adheres to platform conventions and performance best practices.

Frequently Asked Questions about mobile-design

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

FAQPage Schema
How do I ensure my React Native app follows iOS and Android design conventions?▼

To ensure React Native apps follow platform conventions, apply iOS Human Interface Guidelines and Android Material Design principles. This involves using distinct navigation patterns, touch interaction psychology, and accessibility standards specific to each platform to maintain native user experiences.

What's the best way to optimize Flutter app performance for 60fps animations?▼

Optimizing Flutter performance for 60fps requires enforcing best practices for memory management, list rendering, and animations. This approach prevents jank by ensuring efficient state management and frame building, maintaining smooth user experiences during complex interactions.

Does mobile design guidance support both React Native and Flutter frameworks?▼

Yes, mobile design guidance supports both React Native and Flutter frameworks. It provides framework-specific best practices, ensuring generated code adheres to platform conventions, performance optimization, and user experience principles across both technologies.

Why do my mobile app layouts fail accessibility standards for touch targets?▼

Mobile layouts fail accessibility standards when touch target sizes and contrast ratios are ignored. Addressing this requires enforcing minimum touch dimensions, Dynamic Type support, and visual clarity to ensure usable experiences for all users.

Can I get platform-specific UI advice for an e-commerce product listing screen?▼

Yes, you can get platform-specific UI advice for e-commerce screens. The guidance ensures CTAs are placed in ergonomic thumb zones and uses optimized list components like FlatList, while asking clarifying questions about platform specifics before generating code.

When should I not use default AI generated code for mobile app development?▼

You should not use default AI generated code when it ignores mobile design constraints and platform conventions. Preventing non-optimal AI patterns ensures the mobile application remains user-centric, performant, and accessible across target platforms.

Related Skills

Explore More Design & Creative Skills→
sitharaj88sitharaj88
1

scaffold-mobile

Scaffold Android, iOS, React Native, and Flutter mobile projects with architecture and CI/CD.

Community
Advanced
shalevaminshalevamin

react-native-expert

Develop, optimize, and debug React Native and Expo mobile apps.

Community
Advanced
AerisG222AerisG222

android-accessibility

Audit Android Jetpack Compose UI for WCAG accessibility compliance.

Community
Basic
efekrbasefekrbas
41

material-design

Transform generic interfaces into Material Design layouts with consistent elevation and motion.

Community
Basic