ios-storyboard

Original：🇺🇸 English

Translated

Legacy interoperability skill for Storyboard and Interface Builder maintenance in iOS 26 / Swift 6.2 clinic codebases. Use only for migration or maintenance of existing storyboard screens; not for new SwiftUI clinic feature development. Triggers on Auto Layout, segues, size classes, IB accessibility, storyboard merge conflicts, and storyboard-to-SwiftUI migration tasks.

3installs

Sourcepproenca/dot-skills

Added on2026-04-15

NPX Install

npx skill4agent add pproenca/dot-skills ios-storyboard

SKILL.md Content

View Translation Comparison →

iOS Storyboard Best Practices

Legacy interoperability guidance for storyboard-heavy code that still exists in clinic projects. Not for new SwiftUI clinic feature development.

Comprehensive UI design and architecture guide for Xcode Storyboard and Interface Builder, focused on building maintainable, adaptive, and accessible iOS interfaces. Contains 45 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.

Clinic Architecture Contract (iOS 26 / Swift 6.2)

All guidance in this skill assumes the clinic modular MVVM-C architecture:

Feature modules import
```
Domain
```
+
```
DesignSystem
```
only (never
```
Data
```
, never sibling features)
App target is the convergence point and owns
```
DependencyContainer
```
, concrete coordinators, and Route Shell wiring
```
Domain
```
stays pure Swift and defines models plus repository,
```
*Coordinating
```
,
```
ErrorRouting
```
, and
```
AppError
```
contracts
```
Data
```
owns SwiftData/network/sync/retry/background I/O and implements Domain protocols
Read/write flow defaults to stale-while-revalidate reads and optimistic queued writes
ViewModels call repository protocols directly (no default use-case/interactor layer)

When to Apply

Reference these guidelines when:

Creating or modifying Storyboard scenes in Xcode Interface Builder
Setting up Auto Layout constraints for adaptive layouts
Designing navigation flows with segues and storyboard references
Configuring size classes and trait variations for universal apps
Reviewing storyboard XML diffs and resolving merge conflicts

Rule Categories by Priority


arch-
layout-
nav-
adapt-
view-
ally-
vcs-
debug-

Priority	Category	Impact	Prefix
1	Storyboard Architecture	CRITICAL	`arch-`
2	Auto Layout Constraints	CRITICAL	`layout-`
3	Navigation & Segues	HIGH	`nav-`
4	Adaptive Layout & Size Classes	HIGH	`adapt-`
5	View Hierarchy & Stack Views	MEDIUM-HIGH	`view-`
6	Accessibility & VoiceOver	MEDIUM	`ally-`
7	Version Control & Collaboration	MEDIUM	`vcs-`
8	Debugging & Inspection	LOW-MEDIUM	`debug-`

Quick Reference

1. Storyboard Architecture (CRITICAL)

```
arch-split-storyboards
```
- Split Monolithic Storyboards into Feature Modules
```
arch-storyboard-references
```
- Use Storyboard References for Cross-Module Navigation
```
arch-one-scene-per-flow
```
- Limit Each Storyboard to a Single User Flow
```
arch-initial-view-controller
```
- Set Initial View Controller Explicitly in Every Storyboard
```
arch-avoid-hardcoded-identifiers
```
- Avoid Hardcoded Storyboard and Cell Identifiers
```
arch-scene-naming
```
- Use Descriptive Scene Labels in Document Outline
```
arch-modular-xibs
```
- Extract Reusable Views into Separate XIB Files

2. Auto Layout Constraints (CRITICAL)

```
layout-avoid-fixed-dimensions
```
- Avoid Fixed Width and Height Constraints
```
layout-leading-trailing
```
- Use Leading and Trailing Instead of Left and Right
```
layout-safe-area
```
- Constrain Views to Safe Area Guides
```
layout-content-hugging
```
- Set Content Hugging and Compression Resistance Priorities
```
layout-constraint-nearest-neighbor
```
- Constrain to Nearest Neighbor Views
```
layout-avoid-constant-offsets
```
- Use Layout Margins Instead of Constant Offsets
```
layout-inequality-constraints
```
- Use Inequality Constraints for Flexible Minimums and Maximums
```
layout-constraint-priorities
```
- Assign Distinct Priorities to Optional Constraints

3. Navigation & Segues (HIGH)

```
nav-prepare-for-segue
```
- Pass Data via prepare(for:sender:) Instead of Direct Property Access
```
nav-unwind-segues
```
- Use Unwind Segues to Navigate Backward
```
nav-avoid-mixed-navigation
```
- Avoid Mixing Segue and Programmatic Navigation
```
nav-adaptive-segues
```
- Use Show and Show Detail Instead of Push and Modal
```
nav-perform-segue-validation
```
- Validate Segue Conditions with shouldPerformSegue
```
nav-container-view-controllers
```
- Use Container Views for Embedded Child View Controllers

4. Adaptive Layout & Size Classes (HIGH)

```
adapt-size-classes
```
- Configure Constraints per Size Class Using Vary for Traits
```
adapt-trait-variations
```
- Use Trait Variations for Font and Spacing Adjustments
```
adapt-safe-area-all-devices
```
- Test Adaptive Layouts on All Device Size Classes
```
adapt-readable-content-guide
```
- Use Readable Content Guide for Text on Large Screens
```
adapt-dynamic-type
```
- Support Dynamic Type for All Text Labels

5. View Hierarchy & Stack Views (MEDIUM-HIGH)

```
view-prefer-stack-views
```
- Use Stack Views Instead of Manual Constraints for Linear Layouts
```
view-avoid-deep-nesting
```
- Avoid Deeply Nested Stack Views Beyond Two Levels
```
view-intrinsic-content-size
```
- Rely on Intrinsic Content Size for Standard UIKit Controls
```
view-placeholder-intrinsic-size
```
- Use Placeholder Intrinsic Size for Custom Views in Storyboard
```
view-clip-to-bounds
```
- Enable Clip to Bounds for Views with Corner Radius
```
view-content-mode
```
- Set Correct Content Mode for UIImageView in Storyboard

6. Accessibility & VoiceOver (MEDIUM)

```
ally-labels
```
- Set Accessibility Labels for All Interactive Elements
```
ally-traits
```
- Assign Correct Accessibility Traits in Interface Builder
```
ally-grouping
```
- Group Related Elements for VoiceOver Navigation
```
ally-identifiers
```
- Set Accessibility Identifiers for UI Testing
```
ally-dynamic-labels
```
- Update Accessibility Labels for Dynamic Content

7. Version Control & Collaboration (MEDIUM)

```
vcs-one-scene-per-developer
```
- Assign Storyboard Scenes to Individual Developers
```
vcs-open-as-source
```
- Review Storyboard Diffs as Source Code Before Committing
```
vcs-lock-storyboard-files
```
- Use Git File Locking for Active Storyboard Edits
```
vcs-gitattributes-merge
```
- Configure .gitattributes to Use Union Merge for Storyboards

8. Debugging & Inspection (LOW-MEDIUM)

```
debug-view-hierarchy
```
- Use Debug View Hierarchy to Inspect Layout Issues
```
debug-ambiguous-layout
```
- Use hasAmbiguousLayout to Detect Constraint Problems at Runtime
```
debug-constraint-identifier
```
- Assign Identifiers to Constraints for Readable Logs
```
debug-stale-outlets
```
- Remove Stale Outlet Connections to Prevent Crashes

How to Use

Read individual reference files for detailed explanations and code examples:

Section definitions - Category structure and impact levels
Rule template - Template for adding new rules

Reference Files

File	Description
references/_sections.md	Category definitions and ordering
assets/templates/_template.md	Template for new rules
metadata.json	Version and reference information