skills.rest
cenjie
cenjieCOMMUNITY
Explore all skills by this author →
GitHub

app-ui-design

Provide accessible mobile UI guidance for iOS and Android design systems.

Updated May 17, 2026
Search Tags:#accessibility#design-system#hig#mobile-ui#platform-guidelines#material-design-3#app-ui-design
One-click install
npx skills add https://github.com/cenjie/skills --skill app-ui-design-cenjie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: app-ui-design
Source: https://github.com/cenjie/skills/tree/main/skills/app-ui-design
Command: npx skills add https://github.com/cenjie/skills --skill app-ui-design-cenjie

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Mobile app UI design is often inconsistent across platforms and struggles with accessibility and design-system coherence. This Skill provides platform-aligned, accessible guidance for iOS and Android, covering Material Design 3, Human Interface Guidelines, color theory, typography, and 2025 trends.

Core Features & Use Cases

  • Platform-specific guidelines adherence (iOS HIG, Android Material You) for primary navigation, typography, and components.
  • Design system creation and token management (color, typography, spacing, border radius, shadows) to ensure consistency across screens.
  • Accessibility-focused design checks (contrast, touch targets, labeling) integrated throughout the design process.
  • Real-world scenarios: crafting cross-platform interfaces, updating existing apps with cohesive patterns, and aligning with 2025 design trends.

Quick Start

Generate a platform-compliant mobile UI plan for a new app concept.

Frequently Asked Questions about app-ui-design

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

FAQPage Schema
How do I create a mobile UI design system that works for both iOS and Android?▼

To create a cross-platform mobile UI design system, you need platform-aligned guidance covering iOS HIG and Android Material You, alongside shared color, typography, and spacing tokens to ensure visual consistency across screens.

What's the best way to ensure my mobile app interface meets WCAG accessibility standards?▼

Ensuring WCAG-compliant mobile app interfaces involves integrated accessibility checks for color contrast ratios, minimum touch target sizes, and proper screen reader labeling throughout the entire UI design and review workflow.

How do I apply Material Design 3 and Human Interface Guidelines to a new app concept?▼

Applying Material Design 3 and Human Interface Guidelines involves mapping platform-specific requirements for primary navigation, typography, and UI components directly into your initial mobile app interface plan.

Can I use this guidance to update an existing app with 2025 design trends?▼

Yes, you can update existing mobile apps with 2025 design trends by applying cohesive cross-platform patterns, modernizing color and typography tokens, and verifying adherence to current platform guidelines.

How do I manage color and typography tokens for a consistent cross-platform app interface?▼

Managing color and typography tokens for consistent app interfaces requires defining shared design system variables for spacing, border radius, and shadows that adapt seamlessly to both iOS and Android platform guidelines.

How do I manage color and typography tokens for a consistent cross-platform app interface?▼

Managing color and typography tokens for consistent app interfaces requires defining shared design system variables for spacing, border radius, and shadows that adapt seamlessly to both iOS and Android platform guidelines.

Related Skills

Explore More Design & Creative Skills→
Daiwik-ChilukuriDaiwik-Chilukuri

colorize

Introduce color to monochromatic UI with OKLCH values and WCAG contrast.

Community
Intermediate
vneseyoungstervneseyoungster
27

figma-analyzer

Extract design assets, metadata, and tokens from Figma files.

Community
Advanced
tddworkstddworks
38

ios-ux-prototype

Generate interactive HTML prototypes with iPhone mockups and flow arrows for iOS app UX flows.

Official
Intermediate
iButtersiButters
3

responsive-design

Creates mobile-first web layouts with fluid typography, breakpoints, and container queries.

Community
Advanced