szpakkamil/pagerkit
Overview
This skill provides expert guidance on PagerKit, a SwiftUI library for creating advanced, customizable page-based navigation across Apple platforms. It helps developers choose the right components, apply relevant modifiers, and implement idiomatic SwiftUI patterns for dynamic pages, indicators, and event handling. Use this skill to troubleshoot layout issues, configure indicators, and integrate PagerKit into cross-platform SwiftUI apps.
How this skill works
The skill inspects developer intent for PagerKit keywords such as PKPagesView, PKPage, page controls, and paging behavior, then recommends concrete modifier usage, platform-specific types, and patterns. It explains use of PKPageBuilder and ForEach for declarative page generation, shows how to bind pkCurrentPageIndex for state, and outlines event callbacks like .pkOnManualPageChange and .pkOnAutoPageChange. When platform specifics matter, it calls out differences (UIImage vs. Image, availability of UIPageControlProgress) and suggests #if os(...) guards.
When to use it
- Setting up a new PKPagesView or PKPage-based pager
- Generating pages dynamically from collections with ForEach
- Customizing page indicators, spacing, direction, or using custom images
- Handling page-change events, directions, and transition callbacks
- Integrating pagers into complex or adaptive SwiftUI layouts
Best practices
- Ask about deployment targets and Swift version before recommending platform-specific features
- Favor PKPageBuilder and ForEach for maintainable, declarative pages
- Bind .pkCurrentPageIndex to @State/@Binding for programmatic control and testing
- Use .pkOnManualPageChange, .pkOnAutoPageChange, and .pkOnTransitionEnd for analytics, haptics, or side effects
- Respect platform differences: guard image types and page-control features with #if os(...)
Example use cases
- A horizontally swipable onboarding flow with custom dot colors and a footer per page
- A news app generating article pages from an array using ForEach and per-page duration
- Embedding a vertical pager inside a split macOS layout and adjusting indicator alignment
- Replacing default dots with SF Symbols on iOS while using Image on macOS via conditional compilation
- Responding to user swipes to trigger analytics and animate other UI elements
FAQ
Use .pkCurrentPageIndex(index: $yourState) to bind the pager to external state.
How do I change the active dot color or use custom images?
Use .pkPageControlIndicatorCurrentIndicatorTintColor(_:) and .pkPageControlIndicatorTintColor(_:) for colors; supply preferred images with .pkPageControlIndicatorPreferredCurrentPageIndicatorImage(image:) using UIImage on iOS and Image elsewhere, guarded by #if os(...).
