skills.rest
AlanCasal
AlanCasalCOMMUNITY
Explore all skills by this author →
GitHub

mobile-design

Enforce mobile-first design principles for iOS and Android applications.

Updated Jan 17, 2025
Search Tags:#performance#accessibility#mobile design#flutter#react native#ux best practices
One-click install
npx skills add https://github.com/AlanCasal/pokemon-flashlist-swipe --skill mobile-design-alancasal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-design
Source: https://github.com/AlanCasal/pokemon-flashlist-swipe/tree/main/.github/skills/mobile-design
Command: npx skills add https://github.com/AlanCasal/pokemon-flashlist-swipe --skill mobile-design-alancasal

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill prevents common AI and developer mistakes by enforcing mobile-first design principles, ensuring apps are performant, touch-friendly, and platform-aware, rather than just scaled-down desktop experiences.

Core Features & Use Cases

  • Mobile Feasibility Assessment: Use the MFRI score to gauge risk before implementation.
  • Platform-Specific Guidance: Avoids cross-platform assumptions by enforcing platform checks.
  • Performance Anti-Patterns: Hard bans on common performance sins like ScrollView for lists or JS-thread animations.
  • Touch & UX Best Practices: Enforces minimum touch targets, button fallbacks, and loading states.
  • Mandatory Checklists: Ensures critical thinking steps are completed before coding.

Quick Start

Use the mobile-design skill to assess the feasibility of a new mobile feature by providing its dimensions.

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-first interfaces for iOS and Android?▼

Mobile-first design requires enforcing touch interaction, platform conventions, and performance optimization. This doctrine provides mandatory checklists and anti-pattern enforcement to ensure apps are performant, touch-friendly, and platform-aware rather than scaled-down desktop experiences.

What are common mobile performance anti-patterns in React Native and Flutter?▼

Common mobile performance anti-patterns include using ScrollView for lists or running animations on the JS thread. This guidance hard bans these practices and enforces platform-specific checks to avoid cross-platform assumptions.

How do I assess the feasibility of a new mobile feature before implementation?▼

Assess mobile feature feasibility by calculating the MFRI score to gauge risk. This process evaluates touch targets, offline behavior, and platform realities through mandatory checklists before development begins.

What UX best practices should I follow for touch interactions in mobile apps?▼

UX best practices for touch interactions mandate minimum touch targets, button fallbacks, and proper loading states. This enforces mobile-specific decision-making to prioritize constraints and platform realities over AI defaults.

Does mobile-first design work for both iOS and Android platforms?▼

Mobile-first design works for both iOS and Android by enforcing platform-specific guidance and avoiding cross-platform assumptions. It ensures developers prioritize platform conventions and constraints rather than applying uniform desktop-thinking.

Why does my mobile app feel like a scaled-down desktop experience?▼

Your mobile app feels like a scaled-down desktop experience due to desktop-thinking and AI defaults. This doctrine prevents these mistakes by enforcing mobile-first design principles, offline behavior, and touch-friendly interactions.

Related Skills

Explore More Design & Creative Skills→
mamu7211mamu7211

grill-me

Decompose feature ideas into technical specifications through structured design interviews.

Community
Intermediate
borgheiborghei
467

senior-mobile

Provides expert guidance and reusable templates for iOS, Android, React Native, and Flutter app development.

Community
Advanced
capaas2capaas2

mobile-design

Guide mobile app design decisions for iOS, Android, and cross-platform products.

Community
Advanced
Im5tuIm5tu
6

flutter-adaptive-ui

Build adaptive Flutter layouts using MediaQuery and LayoutBuilder breakpoints.

Community
Advanced