What is ios-ui-builder?

The iOS UI Builder is a specialized Claude skill designed to accelerate iOS application development using SwiftUI. It streamlines the UI implementation process by generating high-quality View code and comprehensive #Preview macros. The skill prioritizes the reuse of existing project components and adherence to design systems, helping developers transition from requirements to functional, previewable UI code with high efficiency and consistency.

When should I use ios-ui-builder?

ios-ui-builder is useful in the following scenarios: • Rapid Screen Generation: Quickly create full-screen layouts from descriptive prompts, such as 'Create a user profile screen with an avatar, statistics, and a settings list'. • Component-Driven Development: Build modular, reusable SwiftUI components that integrate seamlessly with existing project themes and shared views. • Multi-State Previewing: Automatically implement #Preview macros for various states, including Dark Mode, loading states, empty states, and different data sets to ensure UI robustness. • UI Refactoring and Optimization: Update existing SwiftUI views to follow best practices, such as improving layout performance with Lazy stacks or enhancing accessibility.

name	ios-ui-builder
description	SwiftUIを使ったiOSアプリのUI実装を支援するスキル。View + #Preview macroを生成し、既存の共通コンポーネントを活用しながら効率的にUIを構築する。以下のような場合にこのスキルを使用: (1)「〇〇画面を作って」のような画面作成リクエスト (2)「〇〇のUIをデザインして」のようなUIデザインリクエスト (3)「このコンポーネントを実装して」のようなコンポーネント実装リクエスト (4) SwiftUIのView作成全般

iOS UI Builder

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

ワークフロー

1. 要件の明確化

ユーザーの説明から以下を把握する:

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

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

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

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

プロジェクト内で以下を検索:

共通コンポーネント（Components/, Views/Common/, Shared/等）
類似の画面・コンポーネント
デザインシステム関連ファイル（Theme, Style, Color等）

既存コンポーネントを見つけた場合:

可能な限り再利用する
拡張が必要なら既存を拡張
新規作成が必要な場合のみ新しく作成

3. デザイン設計

実装前にデザインの概要をユーザーに説明:

レイアウト構造（VStack/HStack/ZStack等）
使用するコンポーネント
色やスペーシングの方針

4. View + #Preview実装

基本構造

import SwiftUI

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

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

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

Previewの充実（重要）

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

#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が複数パターン用意されているか
ダークモード対応を確認したか
再利用可能な部分をコンポーネント化したか

ios-ui-builder

When & Why to Use This Skill

Use Cases