---

name: SectionUI description: Master skill for SectionUI (SectionKit), a powerful data-driven framework for building complex UICollectionView layouts in Swift. Use when working with UICollectionView, building list interfaces, implementing reactive data binding with Combine, optimizing collection view performance, managing selection state, implementing sticky headers/footers, creating waterfall layouts, integrating SwiftUI views, handling scroll events, or implementing page-based navigation. Covers cells, sections, managers, layout plugins, decorations, performance optimization, reactive programming, selection management, scroll observation, and page view controllers.

SectionUI Skill

SectionUI (formerly SectionKit) is a powerful, data-driven framework for building complex UICollectionView layouts in Swift. It abstracts away the complexity of UICollectionViewDataSource and UICollectionViewDelegate, allowing you to focus on composable Sections and Cells.

Core Components

1. SKCManager: The central coordinator that manages sections and binds them to the UICollectionView.
2. SKCollectionView: A subclass of UICollectionView optimized for use with SectionUI.
3. SKCSingleTypeSection: A generic section type for displaying a list of identical cells (homogenous data).
4. SKLoadViewProtocol & SKConfigurableView: Protocols that Cells must conform to for automatic registration and configuration.

Reference Documentation

Core Components

• Cell Creation & Configuration - SKLoadViewProtocol, SKConfigurableView, Auto Layout integration, adaptive cells
• Section Management - SKCSingleTypeSection basics, event handling, headers/footers, styling
• Manager & CollectionView - SKCManager, SKCollectionView, SKCollectionViewController

Advanced Features

• Advanced Sections - SKCHostingSection (SwiftUI), SKCAnyViewCell, SKCSectionViewCell (nested sections)
• Reactive Programming - SKPublished, data subscription, prefetch publishers, selection publishers
• Performance Optimization - SKHighPerformanceStore (size caching), prefetching, display times tracking, safe size providers
• Selection Management - SKSelectionProtocol, SKSelectionWrapper, SKCDragSelector (multi-select)
• Pin Functionality - Sticky headers/footers/cells, distance tracking, custom animations
• Scroll Management - SKScrollViewDelegateHandler, SKCDisplayTracker, scroll control
• Layout Plugins - Vertical/horizontal alignment, SKWaterfallLayout, custom attribute plugins
• Decorations - Background decorations, custom decoration views
• Page View Controller - SKPageManager, SKPageViewController, nested scrolling

Examples

• Basic List
• Decorations

Templates

• Adaptive Cell - Template for a cell with self-sizing capabilities.
• Mixed Cells Section - Template for a section managing multiple cell types.
• Section Cell - Template for a standard configurable cell.

Quick Start Guide

1. Basic Setup

Use SKCollectionViewController or SKCollectionView to get started quickly.

Copyclass MyViewController: SKCollectionViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        // Setup sections here
        manager.reload(mySection)
    }
}

2. Creating a Cell

Cells must conform to SKLoadViewProtocol and SKConfigurableView:

Copyclass MyCell: UICollectionViewCell, SKLoadViewProtocol, SKConfigurableView {
    struct Model {
        let title: String
    }

    static func preferredSize(limit size: CGSize, model: Model?) -> CGSize {
        return CGSize(width: size.width, height: 50)
    }

    func config(_ model: Model) {
        label.text = model.title
    }
    
    private lazy var label = UILabel()
}

3. Creating a Section

The most common pattern is using wrapperToSingleTypeSection on your Cell type.

Copylet section = MyCell.wrapperToSingleTypeSection()
    .onCellAction(.selected) { context in
        print("Selected: \(context.model)")
    }

section.config(models: [Model1, Model2, ...])
manager.reload(section)

4. Reactive Updates

SectionUI works seamlessly with Combine:

Copy@SKPublished var items: [Model] = []

$items.bind { [weak self] newItems in
    self?.section.config(models: newItems)
}.store(in: &cancellables)

// Or subscribe directly
section.subscribe(models: $items.eraseToAnyPublisher())

Common Usage Patterns

Performance Optimization

Copysection
    .setHighPerformance(.init())
    .highPerformanceID { $0.model.id }

Sticky Headers

Copysection.pinHeader { options in
    options.padding = 16
}

Selection Management

Copylet selectableItems = items.map { SKSelectionWrapper(value: $0) }
section.config(models: selectableItems)

Waterfall Layout

Copylet layout = SKWaterfallLayout()
    .columnWidth(equalParts: 2)
    .heightCalculationMode(.aspectRatio)

SwiftUI Integration

Copy@available(iOS 16.0, *)
let section = SKCHostingSection(
    cell: MySwiftUIView.self,
    models: viewModels
)

Best Practices

• Prefer SKCManager: Always use SKCManager to manipulate sections (reload, insert, delete).
• Fluent Configuration: Use the chainable generic methods on SKCSingleTypeSection (onCellAction, setSectionSeparators, etc.) instead of subclassing whenever possible.
• Decomposition: Break complex lists into multiple small Sections.
• Use Reactive Binding: Leverage Combine and SKPublished for automatic UI updates.
• Cache Sizes: Use SKHighPerformanceStore for complex Auto Layout calculations.
• Weak References: Always use [weak self] in closures to avoid retain cycles.
• Naming Convention: When declaring a UICollectionView variable, use sectionView as the variable name instead of collectionView.