skills.rest
Oscar-Ivan-Salas
Oscar-Ivan-SalasCOMMUNITY
Explore all skills by this author →
GitHub

mobile-design

Guide mobile UX design for iOS, Android, React Native, and Flutter projects.

Updated Jan 27, 2026
Search Tags:#typography#navigation#mobile#color#ux#design-system
One-click install
npx skills add https://github.com/Oscar-Ivan-Salas/PILi_Quarts_Doc --skill mobile-design-oscar-ivan-salas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-design
Source: https://github.com/Oscar-Ivan-Salas/PILi_Quarts_Doc/tree/main/PILi_Quarts_V3.0/.agent/skills/mobile-design
Command: npx skills add https://github.com/Oscar-Ivan-Salas/PILi_Quarts_Doc --skill mobile-design-oscar-ivan-salas

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Mobile design guidance helps teams create consistent, platform-aware experiences across iOS and Android, reducing cognitive load and friction during development.

Core Features & Use Cases

  • Philosophy: Touch-first, performance-conscious, and platform-respectful guidance for mobile apps.
  • Core Patterns: Navigation, typography, color system, offline handling, and platform conventions.
  • Use Case: You are building a React Native app and want to align UI with iOS Human Interface Guidelines and Android Material Design 3 without reinventing the wheel.

Quick Start

Provide a concise, platform-aware design plan for your current mobile project.

Frequently Asked Questions about mobile-design

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

FAQPage Schema
How do I align mobile UX with iOS Human Interface Guidelines and Android Material Design 3?▼

Align mobile UX by applying platform-aware design patterns for navigation, typography, and color systems. This approach respects platform conventions and performance constraints, reducing cognitive load and friction when building for iOS, Android, or cross-platform frameworks.

What is mobile-first design guidance for cross-platform apps?▼

Mobile-first design guidance is a touch-first, performance-conscious methodology for crafting mobile interfaces. It covers core patterns like navigation, typography, color systems, and offline handling to ensure consistent experiences across iOS and Android without reinventing the wheel.

Does this mobile design guidance work with React Native and Flutter?▼

Yes, this mobile design guidance works with React Native and Flutter. It applies to iOS, Android, and cross-platform projects, helping align UI components with respective platform conventions without reinventing the wheel.

How do I handle offline patterns in mobile design systems?▼

Handle offline patterns by incorporating performance-conscious design thinking into your mobile design system. The skill provides guidance on offline handling to ensure your mobile UX remains robust and consistent under connectivity constraints across iOS and Android.

What's the best way to create a platform-aware design plan for a mobile app?▼

The best way to create a platform-aware design plan is to define concise navigation, typography, and color system guidelines that respect iOS and Android conventions. This ensures touch-first, performance-conscious mobile UX without reinventing the wheel.

Related Skills

Explore More Design & Creative Skills→
vobasevobase
59

teach-impeccable

Scan project files and write design context to CLAUDE.md.

Official
Intermediate
ceorkmceorkm
216

mobile-app-ui-design

Translate mobile app UI/UX problems into structured specifications for screens, flows, and components.

Community
Advanced
tenzirtenzir
2

styling-tenzir-ui

Provide Tenzir design system tokens and CSS component specifications for UI styling.

Official
Basic
parallax-ai-llcparallax-ai-llc
29

orchestrator-designer

Generate platform-aware design specifications and JSON design tokens for the Claude Orchestrator UI.

Official
Advanced