モバイルアプリUI/UXデザインガイド、iOSヒューマンインターフェイスガイドライン、Android素材デザイン、アクセシビリティ基準、およびReact Nativeベストプラクティスをカバーする包括的なClaudeコードスキル。

参照

このスキルは、Claudeをモバイルアプリの設計の専門家に変換し、専用の知識を提供します。

• プラットフォーム設計パターン - iOSとAndroidのネイティブ慣行
• アクセシビリティ規格 - WCAG 2.1レベルAA準拠
• パフォーマンスの最適化 - React Nativeのベストプラクティス
• 構成の設計 - 原子設計方法論
• 品質検証 - 自動テストと監査ツール

このスキルを使用するときは

クロードは、言及するときに自動的にこのスキルを呼び起こします:

• 「モバイルUIの設計」
• 「レビューアプリのデザイン」
• 「UIガイドラインのチェック」
• 「アプリUXの改善」
• 「React Nativeインターフェイスの設計」
• 「アプリ画面の作成」
• 「設計基準に従う」
• iOS/Androidの設計パターン
• アクセシビリティまたはモバイルユーザーエクスペリエンス

📁構造

すぐにスタート

インストール

1。 このリポジトリをClaudeコードのスキルディレクトリにクローンします。

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: