一项全面的Claude Code技能，提供移动应用UI/UX设计指导，涵盖iOS人机界面指南、Android材质设计、无障碍标准及React Native最佳实践。

📋 概述

这项技能使Claude成为移动应用设计专家，提供以下专业知识：

• 平台设计模式 - iOS和Android原生约定
• 无障碍标准 - WCAG 2.1 AA级合规
• 性能优化 - React Native 最佳实践
• 组件设计 - 原子设计方法论
• 质量验证 - 自动化测试和审计工具

🎯 何时使用这项技能

当你提到：

• “设计移动用户界面”
• “审核应用设计”
• “查看用户界面指南”
• “改进应用用户体验”
• “设计 React Native 接口”
• “创建应用界面”
• “遵循设计标准”
• iOS/Android 设计模式
• 无障碍或移动用户体验

📁 结构

🚀 快速启动

安装

1. 将此仓库克隆到你的Claude Code技能目录中：

2. Claude Code将在下一场游戏中自动发现该技能。

基本用法

Mobile App Design Standards Skill

A comprehensive Claude Code skill providing mobile app UI/UX design guidance, covering iOS Human Interface Guidelines, Android Material Design, accessibility standards, and React Native best practices.

📋 Overview

This skill transforms Claude into a mobile app design expert, providing specialized knowledge for:

• Platform Design Patterns - iOS and Android native conventions
• Accessibility Standards - WCAG 2.1 Level AA compliance
• Performance Optimization - React Native best practices
• Component Design - Atomic design methodology
• Quality Validation - Automated testing and auditing tools

🎯 When to Use This Skill

Claude will automatically invoke this skill when you mention:

• “design mobile UI”
• “review app design”
• “check UI guidelines”
• “improve app UX”
• “design React Native interface”
• “create app screens”
• “follow design standards”
• iOS/Android design patterns
• Accessibility or mobile user experience

📁 Structure

mobile-app-design/
├── SKILL.md                          # Core design principles (1,937 words)
├── references/                        # Detailed documentation (26,000+ words)
│   ├── ios-guidelines.md             # iOS HIG essentials
│   ├── android-guidelines.md         # Material Design 3
│   ├── accessibility-checklist.md    # WCAG 2.1 AA testing
│   ├── performance-patterns.md       # React Native optimization
│   ├── common-mistakes.md            # Errors and fixes
│   ├── platform-differences.md       # iOS vs Android comparison
│   └── ui-libraries.md               # Library selection guide
├── examples/                          # Working code (4 files)
│   ├── profile-screen-example.tsx    # Complete screen with best practices
│   ├── design-system-config.ts       # Design tokens
│   ├── form-validation-example.tsx   # Accessible form patterns
│   └── optimized-list-example.tsx    # FlatList performance
└── scripts/                           # Validation tools (3 utilities)
    ├── check-contrast.py             # WCAG contrast checker
    ├── validate-touch-targets.sh     # Touch target validator
    └── accessibility-audit.sh        # Accessibility auditor

🚀 Quick Start

Installation

1. Clone this repository into your Claude Code skills directory:

cd ~/.claude/skills
git clone https://github.com/awesome-skills/mobile-app-design.git

2. Claude Code will automatically discover the skill on next session.

Basic Usage

Simply ask Claude questions like:

"Design a profile screen following iOS guidelines"
"Review my app's accessibility"
"What's the minimum touch target size for Android?"
"Optimize this FlatList performance"
"Check contrast ratios in my color palette"

Using Validation Scripts

Check color contrast:

python scripts/check-contrast.py "#FFFFFF" "#000000"

Validate touch targets:

./scripts/validate-touch-targets.sh src/screens

Audit accessibility: