IOS Human Interface Guidelines, Android Material Design, Accessibility standard 및 React Native 모범 사례를 포함하는 모바일 앱 UI/UX 디자인 지도를 제공하는 종합적인 Claude Code 기술.

개요

이 기술은 Claude를 모바일 앱 디자인 전문가로 변환하고, 전문 지식을 제공합니다:

-Platform Design Patterns - iOS 및 Android 네이티브 컨벤션

• Accessibility Standards - WCAG 2.1 레벨 AA 준수
• **Performance Optimization ** - React Native 모범 사례
• ** 부품 디자인 ** - 원자 디자인 방법론
• Quality Validation - 자동화된 테스트 및 감사 도구

이 기술을 사용할 때

Claude는 당신이 언급 할 때이 기술을 자동으로 호출합니다 :

• “디자인 모바일 UI”
• “리뷰 앱 디자인”
• “check UI 가이드”
• “improve app UX”
• “design React Native 인터페이스”
• “앱 화면 만들기”
• “디자인 표준을 따르십시오”
• iOS/Android 디자인 패턴
• 접근성 또는 모바일 사용자 경험

구조

⭐ 빠른 시작

설치

1. Clone 이 저장소는 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: