# IOS UI Builder

> SwiftUIを使ったiOSアプリのUI実装を支援するスキル。View +

- Skill: `tomevault-io/ios-ui-builder` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/ios-ui-builder`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/ios-ui-builder/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/ios-ui-builder

---


# iOS UI Builder

SwiftUIを使ったiOSアプリのUI実装を支援するスキル。

## ワークフロー

### 1. 要件の明確化

ユーザーの説明から以下を把握する:
- 画面/コンポーネントの目的
- 必要なUI要素（ボタン、リスト、入力フィールド等）
- ユーザーインタラクション（タップ、スワイプ等）
- 表示するデータの種類

不明点があれば質問して明確にする。

### 2. 既存コンポーネントの確認（重要）

**実装前に必ず既存コードを確認する。**

プロジェクト内で以下を検索:
- 共通コンポーネント（`Components/`, `Views/Common/`, `Shared/`等）
- 類似の画面・コンポーネント
- デザインシステム関連ファイル（`Theme`, `Style`, `Color`等）

既存コンポーネントを見つけた場合:
- 可能な限り再利用する
- 拡張が必要なら既存を拡張
- 新規作成が必要な場合のみ新しく作成

### 3. デザイン設計

実装前にデザインの概要をユーザーに説明:
- レイアウト構造（VStack/HStack/ZStack等）
- 使用するコンポーネント
- 色やスペーシングの方針

### 4. View + #Preview実装

#### 基本構造

```swift
import SwiftUI

struct [ViewName]View: View {
    // MARK: - Properties

    // MARK: - Body
    var body: some View {
        // 実装
    }
}

// MARK: - Preview
#Preview {
    [ViewName]View()
}
```

#### Previewの充実（重要）

#Preview macroで複数のプレビューバリエーションを提供:

```swift
#Preview("Default") {
    [ViewName]View()
}

#Preview("With Data") {
    [ViewName]View(items: sampleItems)
}

#Preview("Empty State") {
    [ViewName]View(items: [])
}

#Preview("Dark Mode") {
    [ViewName]View()
        .preferredColorScheme(.dark)
}
```

状況に応じて以下も追加:
- 異なるデバイスサイズ
- Dynamic Type対応確認
- ローディング状態
- エラー状態

### 5. コンポーネント化の判断

以下の場合はコンポーネントとして分離:
- 他の画面でも使えそうな汎用的なUI
- 複雑で独立したロジックを持つ部分
- 繰り返し使われるパターン

コンポーネント化する場合:
- 適切なディレクトリに配置（`Components/`等）
- 汎用的なAPIを設計
- 単体での#Previewを提供

## SwiftUIベストプラクティス

### レイアウト
- `VStack`, `HStack`, `ZStack`を適切に使い分ける
- `Spacer()`でフレキシブルなスペーシング
- `padding()`で一貫したマージン
- `frame()`は必要最小限に

### 再利用性
- ViewModifierで共通スタイルを定義
- Extensionで便利なメソッドを追加
- @ViewBuilderで柔軟なコンポーネント

### パフォーマンス
- 大きなViewは小さなサブViewに分割
- 必要に応じて`@State`, `@Binding`を使用
- リストは`LazyVStack`/`LazyHStack`を検討

## チェックリスト

実装完了時に確認:
- [ ] 既存コンポーネントを確認したか
- [ ] #Previewが複数パターン用意されているか
- [ ] ダークモード対応を確認したか
- [ ] 再利用可能な部分をコンポーネント化したか

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/hiragram) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-15 -->