skills.rest
sonhaicoder
sonhaicoderCOMMUNITY
Explore all skills by this author →
GitHub

mobile-design

Design mobile app screens with cross-platform UI consistency across Flutter, React Native, SwiftUI, and Jetpack Compose.

Updated May 5, 2026
Search Tags:#accessibility#react-native#jetpack-compose#swiftui#flutter#design-tokens#mobile-design
One-click install
npx skills add https://github.com/sonhaicoder/haiclaudeskill --skill mobile-design-sonhaicoder
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-design
Source: https://github.com/sonhaicoder/haiclaudeskill/tree/main/skills/mobile-design
Command: npx skills add https://github.com/sonhaicoder/haiclaudeskill --skill mobile-design-sonhaicoder

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Platform-wide mobile UI design is inconsistent across Flutter, React Native, SwiftUI, and Jetpack Compose, making cross-platform app development slower and error-prone.

Core Features & Use Cases

  • Platform-consistent design guidelines for Flutter, React Native, SwiftUI, and Jetpack Compose.
  • Design tokens, typography, spacing, color, motion, and accessibility rules documented for mobile apps.
  • Real-world use cases include rapidly prototyping screens and components that meet platform conventions.

Quick Start

Create a new mobile screen following the design formula to ensure cross-platform consistency.

Frequently Asked Questions about mobile-design

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

FAQPage Schema
How do I ensure cross-platform UI consistency across Flutter, React Native, SwiftUI, and Jetpack Compose?▼

Cross-platform UI consistency is achieved by applying shared design tokens for typography, spacing, color, and motion across Flutter, React Native, SwiftUI, and Jetpack Compose. This enforces platform conventions and accessibility standards while maintaining unified visual language.

What are mobile design tokens and how do they standardize UI components?▼

Mobile design tokens are centralized variables representing typography, spacing, color, and motion rules. They standardize UI components by enforcing responsive behavior and accessibility standards across Flutter, React Native, SwiftUI, and Jetpack Compose platforms.

Does this mobile design formula support platform-specific conventions for iOS and Android?▼

Yes, the mobile design formula supports platform-specific conventions by documenting distinct rules for SwiftUI and Jetpack Compose. It enforces native accessibility standards and performance targets while maintaining cross-platform consistency through shared design tokens.

How do I prototype mobile screens and widgets that meet platform accessibility standards?▼

Prototype mobile screens and widgets by applying the documented accessibility rules and design tokens for typography, spacing, and motion. This ensures components across Flutter, React Native, SwiftUI, and Jetpack Compose meet required accessibility standards and performance targets.

Why does my mobile app UI look inconsistent across different frameworks?▼

Mobile app UI inconsistency occurs when typography, spacing, color, and motion rules lack centralized design tokens across Flutter, React Native, SwiftUI, and Jetpack Compose. Applying a unified design formula enforces platform conventions and resolves visual discrepancies.

What is the best way to document responsive behavior and motion rules for mobile components?▼

Document responsive behavior and motion rules by defining centralized design tokens within your mobile design formula. This ensures components across Flutter, React Native, SwiftUI, and Jetpack Compose adhere to consistent platform conventions and performance targets.

Related Skills

Explore More Design & Creative Skills→
efekrbasefekrbas
41

isometric-design

Designs isometric UI layouts using parallel 30-degree projection across CSS, SwiftUI, Flutter, React Native, and Jetpack Compose.

Community
Intermediate
claudcherejiclaudchereji

mobile-app-developer

Develop native and cross-platform mobile applications for iOS and Android.

Community
Advanced
riezriez
1

frontend-implementation-guardrails

Enforce frontend guardrails for design-system alignment, accessibility, and responsive behavior.

Community
Intermediate
faw01faw01
18

building-native-ui

Implement native-feeling mobile UI with Expo Router and platform-specific components.

Community
Intermediate