iOSアプリのデザイン哲学とクリエイティブディレクション。Apple Human Interface Guidelinesに基づく Clarity/Deference/Depthの原則、SwiftUIによる実装パターン、アクセシビリティ設計を包括的にガイド。 使用タイミング: (1) 新規アプリのUI/UX設計時、(2) デザインシステム構築時、(3) SwiftUIコンポーネント設計時、 (4) 「iOSらしいデザインにしたい」「HIGに準拠したい」、(5) アクセシビリティ対応時、 (6) アニメーション・インタラクション設計時、(7) 複数プラットフォーム（iOS/iPadOS/watchOS/visionOS）対応時
Provides Apple HIG-based iOS design guidance for SwiftUI components, layouts, and accessibility. Use when designing new apps, building design systems, or ensuring platform-compliant UI/UX.
/plugin marketplace add CAPHTECH/claude-marketplace/plugin install apple-platform-plugin@caphtech-marketplaceThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/accessibility-guide.mdreferences/platform-considerations.mdreferences/swiftui-patterns.mdreferences/visual-elements.mdApple Human Interface Guidelinesに基づくiOSアプリデザインの哲学と実装ガイド。
デザイン作業を開始する前に、以下の情報を確認する。
以下をユーザーに確認：
ターゲットプラットフォーム
プロジェクトの性質
既存資産の有無
アクセシビリティ要件
パフォーマンス制約
デザインの方向性
何を作成するか確認：
確認完了後、以下のガイドラインを適用して作業を進める。
| 原則 | 意味 | 実践 |
|---|---|---|
| Clarity | テキスト・アイコン・装飾の明瞭性 | 読みやすいフォント、意味のあるアイコン、機能的な装飾 |
| Deference | コンテンツを主役に | UIは控えめに、コンテンツを邪魔しない、流動的な動き |
| Depth | 視覚的階層で理解を促進 | レイヤー、リアルな動き、発見の喜び |
Primary → ユーザーの注目を集める要素（CTA、重要情報）
Secondary → 補助的情報（サブテキスト、メタデータ）
Tertiary → 背景・コンテナ要素
| フォント | 用途 |
|---|---|
| SF Pro | iOS/macOSのシステムフォント |
| SF Compact | watchOS、小さいスペース |
| SF Mono | コード、等幅テキスト |
| New York | セリフ体、読み物コンテンツ |
// Dynamic Type対応
Text("Title")
.font(.largeTitle) // 自動的にDynamic Type対応
// カスタムフォントでもDynamic Type
@ScaledMetric var fontSize: CGFloat = 17
Text("Body").font(.system(size: fontSize))
.primary, .secondary, .accent を使用// ✅ Semantic Color（推奨）
Text("Label").foregroundStyle(.primary)
Rectangle().fill(.background)
// ✅ Asset Catalogでダークモード対応
Color("BrandColor")
// 基本
Image(systemName: "heart.fill")
// 可変シンボル
Image(systemName: "speaker.wave.3.fill")
.symbolVariableValue(0.7)
// レンダリングモード
Image(systemName: "cloud.sun.fill")
.symbolRenderingMode(.multicolor)
詳細は references/visual-elements.md を参照。
| ジェスチャー | 標準的な用途 |
|---|---|
| Tap | 選択・アクティベート |
| Long Press | コンテキストメニュー |
| Swipe | ナビゲーション・アクション |
| Pinch | ズーム |
| Rotate | 回転 |
// Haptic Feedback
let generator = UIImpactFeedbackGenerator(style: .medium)
generator.impactOccurred()
// SwiftUIでのsensoryFeedback
Button("Tap") { }
.sensoryFeedback(.impact(weight: .medium), trigger: tapCount)
| 操作 | Duration |
|---|---|
| 軽い切り替え | 0.2-0.3秒 |
| 画面遷移 | 0.3-0.5秒 |
| 複雑なアニメーション | 0.5-0.8秒 |
// Spring Animation（推奨）
withAnimation(.spring(response: 0.3, dampingFraction: 0.7)) {
isExpanded.toggle()
}
// 明示的なタイミング
.animation(.easeInOut(duration: 0.25), value: selection)
詳細は references/swiftui-patterns.md を参照。
| Platform | 特徴 |
|---|---|
| iOS | タッチ中心、片手操作考慮、Safe Area |
| iPadOS | マルチタスク、ポインタ対応、サイズクラス |
| watchOS | グランス可能、Digital Crown、小画面 |
| visionOS | 空間UI、視線+ジェスチャー、奥行き |
詳細は references/platform-considerations.md を参照。
// Adaptive Layout
ViewThatFits {
HStack { content } // 横に収まれば
VStack { content } // 縦にフォールバック
}
// Size Class対応
@Environment(\.horizontalSizeClass) var sizeClass
var body: some View {
if sizeClass == .compact {
CompactLayout()
} else {
RegularLayout()
}
}
struct FeatureCard: View {
let feature: Feature
var body: some View {
VStack(alignment: .leading, spacing: 12) {
// Icon
Image(systemName: feature.icon)
.font(.title)
.foregroundStyle(.accent)
// Title
Text(feature.title)
.font(.headline)
// Description
Text(feature.description)
.font(.subheadline)
.foregroundStyle(.secondary)
}
.padding()
.background(.regularMaterial)
.clipShape(RoundedRectangle(cornerRadius: 16))
}
}
// VoiceOver
Button(action: save) {
Image(systemName: "square.and.arrow.down")
}
.accessibilityLabel("保存")
.accessibilityHint("現在の編集内容を保存します")
// Dynamic Type
Text("Body")
.dynamicTypeSize(...DynamicTypeSize.accessibility3)
// Color Contrast
// 4.5:1以上のコントラスト比を確保
詳細は references/accessibility-guide.md を参照。
drawingGroup()で最適化LazyVStack/LazyHGridを使用taskで非同期初期化AsyncImage(url: imageURL) { phase in
switch phase {
case .empty:
ProgressView()
case .success(let image):
image.resizable().aspectRatio(contentMode: .fit)
case .failure:
Image(systemName: "photo")
@unknown default:
EmptyView()
}
}
enum DesignTokens {
enum Spacing {
static let xs: CGFloat = 4
static let sm: CGFloat = 8
static let md: CGFloat = 16
static let lg: CGFloat = 24
static let xl: CGFloat = 32
}
enum CornerRadius {
static let small: CGFloat = 8
static let medium: CGFloat = 12
static let large: CGFloat = 16
static let extraLarge: CGFloat = 24
}
enum Shadow {
static let subtle = ShadowStyle(color: .black.opacity(0.1), radius: 4, y: 2)
static let medium = ShadowStyle(color: .black.opacity(0.15), radius: 8, y: 4)
}
}
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.