skills.rest
zzafergok
zzafergokCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

mobile-ui-ux

Generate iOS-first Flutter-ready UI components with token-driven design system aligned to iOS Human Interface Guidelines.

1|1|Updated Mar 22, 2026
Search Tags:#typography#ui#accessibility#ios#tokens#flutter#design-system
One-click install
npx skills add https://github.com/zzafergok/skills --skill mobile-ui-ux
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-ui-ux
Source: https://github.com/zzafergok/skills/tree/main/03-mobile-development/mobile-ui-ux
Command: npx skills add https://github.com/zzafergok/skills --skill mobile-ui-ux

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides an iOS-first mobile UI/UX design system with Flutter-ready components and tokens, enabling teams to deliver native-like interfaces quickly and consistently.

Core Features & Use Cases

  • Token-driven color, typography, and spacing system aligned with iOS guidelines.
  • Flutter-ready UI components and a production-ready design system for scalable apps.
  • Use Case: Build a cohesive Flutter app with a unified design language across screens, themes, and accessibility requirements.

Quick Start

Create a new Flutter screen using the iOS-first tokens and shared components to ensure visual consistency.

Frequently Asked Questions about mobile-ui-ux

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

FAQPage Schema
How do I build a Flutter app with a native-like iOS UI design?▼

Build a native-like iOS UI in Flutter by applying a token-driven design system with color, typography, and spacing components aligned to iOS Human Interface Guidelines. This ensures visual consistency across screens and themes.

What is a token-driven design system for mobile UI?▼

A token-driven design system for mobile UI uses predefined variables for typography scale, color, and spacing. It enables teams to maintain layout consistency and conform to iOS guidelines across cross-platform Flutter applications.

Can I use iOS Human Interface Guidelines typography and spacing in a Flutter project?▼

Yes, you can apply iOS Human Interface Guidelines typography and spacing in Flutter by using a production-ready design system with predefined tokens. This provides native-like UX consistency across app screens and themes.

How do I ensure accessibility and color consistency across Flutter screens?▼

Ensure accessibility and color consistency across Flutter screens by implementing a shared design system with reusable widgets and color tokens. This aligns layouts with iOS requirements and maintains a unified design language.

What is the best way to create a cross-platform app design system with iOS UX?▼

The best way to create a cross-platform app design system with iOS UX is to use Flutter-ready components and predefined design tokens. This approach streamlines the delivery of native-like interfaces and ensures scalable visual consistency.

Related Skills

Explore More Design & Creative Skills→
sgcarstrendssgcarstrends
21

tailwind-config

Configure Tailwind CSS design tokens and theme extensions across monorepo packages.

Official
Intermediate
MimicHunterZMimicHunterZ
56

flutter-home-screen-widget

Integrate native home screen widgets into Flutter apps using the home_widget package.

Community
Advanced
serverpodserverpod
8

shadcn_ui-theme

Configure Shadcn UI theme data and color schemes in Flutter applications.

Official
Basic
yashvinthanyashvinthan

mobile-android-design

Design native Android UIs with Material Design 3 and Jetpack Compose.

Community
Intermediate