Комплексный навык Claude Code, обеспечивающий руководство по дизайну UI / UX для мобильных приложений, охватывающий Руководства по человеческому интерфейсу iOS, Материальный дизайн Android, стандарты доступности и лучшие практики React Native.

Обзор

Этот навык превращает Клода в эксперта по дизайну мобильных приложений, предоставляя специализированные знания для:

Platform Design Patterns - родные конвенции для iOS и Android

• ** Стандарты доступности** - соответствие требованиям WCAG 2.1 Level AA ** Оптимизация производительности** - Реагирование на передовые методы ** Проектирование компонентов** Методология атомного проектирования ** Проверка качества** - Инструменты автоматизированного тестирования и аудита

Когда использовать этот навык

Клод автоматически использует этот навык, когда вы упоминаете:

• “дизайн мобильного интерфейса”
• “Обзор дизайна приложения”
• “Проверить правила пользовательского интерфейса”
• “улучшить приложение UX”
• “Проектирование React Native интерфейса” «Создать экраны приложений»
• “Следуйте стандартам проектирования”
• шаблоны дизайна iOS/Android Доступность или мобильный пользовательский опыт

###Структура

Быстрый старт

###Установка

1. Клонируйте это хранилище в каталог навыков Claude Code:

2.Код Клода автоматически обнаружит мастерство на следующей сессии.

Базовое использование

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: