swiftui-components

fusengine's avatarfrom fusengine

Build production SwiftUI views, custom components, layouts, and view modifiers. Use when creating iOS/macOS UI components, implementing responsive layouts, building custom modifiers, or designing reusable view hierarchies with @ViewBuilder.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 10, 2026
[Code Generation]

When & Why to Use This Skill

This Claude skill empowers developers to build production-grade SwiftUI views, custom components, and responsive layouts for iOS and macOS. It streamlines the UI development process by implementing industry best practices such as modular view composition, @ViewBuilder hierarchies, and preview-driven development, ensuring high-quality, maintainable Swift code.

Use Cases

  • Developing reusable UI component libraries (e.g., custom buttons, cards, and inputs) with consistent design patterns.
  • Implementing adaptive and responsive layouts that automatically adjust between iPhone and iPad screen sizes using size classes.
  • Creating custom ViewModifiers to encapsulate complex styling logic and promote code reusability across an entire application.
  • Architecting complex, nested view hierarchies using @ViewBuilder to improve code readability and maintainability.
  • Rapidly prototyping iOS/macOS interfaces with built-in support for SwiftUI Previews and accessibility labels.
nameswiftui-components
descriptionBuild production SwiftUI views, custom components, layouts, and view modifiers. Use when creating iOS/macOS UI components, implementing responsive layouts, building custom modifiers, or designing reusable view hierarchies with @ViewBuilder.

SwiftUI Components & Views

Core Principles

  1. Small, focused views - Extract subviews at 30+ lines
  2. Composition over inheritance - Use ViewBuilder and modifiers
  3. Preview-driven development - Always include #Preview

View Structure Pattern

struct FeatureView: View {
    // MARK: - State
    @State private var isLoading = false

    // MARK: - Environment
    @Environment(\.dismiss) private var dismiss

    // MARK: - Body
    var body: some View {
        content
            .navigationTitle("Feature")
            .toolbar { toolbarContent }
    }

    // MARK: - Subviews
    @ViewBuilder
    private var content: some View {
        if isLoading {
            ProgressView()
        } else {
            mainContent
        }
    }
}

Custom Modifiers

struct CardModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding()
            .background(.regularMaterial)
            .clipShape(RoundedRectangle(cornerRadius: 12))
            .shadow(radius: 4)
    }
}

extension View {
    func cardStyle() -> some View {
        modifier(CardModifier())
    }
}

Responsive Layouts

struct AdaptiveGrid: View {
    @Environment(\.horizontalSizeClass) var sizeClass

    var columns: [GridItem] {
        Array(repeating: GridItem(.flexible(), spacing: 16),
              count: sizeClass == .compact ? 2 : 4)
    }

    var body: some View {
        LazyVGrid(columns: columns, spacing: 16) {
            ForEach(items) { ItemCard(item: $0) }
        }
    }
}

Best Practices

  • Use @ViewBuilder for conditional content
  • Prefer some View return type
  • Extract magic numbers to constants
  • Use semantic colors: .primary, .secondary
  • Add .accessibilityLabel() to icons