# swiftui-patterns

Guides SwiftUI view work around state, composition, environment wiring, and isolated previews. Use it when refactoring a screen or sorting out @Observable ownership.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 4500 installs · ★ 1237
- Author: dpearson2699
- License: LicenseRef-Unknown · policy=link-only · description only; the file stays with the author
- Source: https://github.com/dpearson2699/swift-ios-skills/tree/HEAD/skills/swiftui-patterns/SKILL.md
- Updated: 2026-07-31
- HTML: https://affpapa.org/en/nevibecode/skills/dpearson2699-swiftui-patterns

## What it does

This skill guides SwiftUI implementation and review with an MV approach: views express state, while models and services keep business logic. It covers `@Observable` ownership, choosing `@State`, `@Bindable`, or `@Environment`, splitting views, `ViewModifier`, and `.task`-based loading.

Its workflow starts by recording existing behaviour, then makes the smallest structural change and builds after each step. Previews should cover loaded, loading, empty, and error states where they apply.

The guidance targets Swift 6.3 and iOS 26+, while the patterns are backward-compatible with iOS 17 except where noted. UI-bound `@Observable` stores need `@MainActor` isolation because observation does not make mutable shared state thread-safe.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add dpearson2699/swift-ios-skills --skill swiftui-patterns -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/swiftui-patterns/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/swiftui-patterns/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add dpearson2699/swift-ios-skills --skill swiftui-patterns -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/swiftui-patterns/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add dpearson2699/swift-ios-skills --skill swiftui-patterns -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/swiftui-patterns/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install dpearson2699/swift-ios-skills swiftui-patterns
```

2. **Manually: put the files in place**
- File: `.github/skills/swiftui-patterns/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add dpearson2699/swift-ios-skills --skill swiftui-patterns -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/dpearson2699/swift-ios-skills --path skills/swiftui-patterns
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/swiftui-patterns/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add dpearson2699/swift-ios-skills --skill swiftui-patterns -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/dpearson2699/swift-ios-skills/tree/HEAD/skills/swiftui-patterns/SKILL.md

## When to use it
- review state ownership in a SwiftUI view
- choose between `@State`, `@Bindable`, and `@Environment`
- split a large screen into smaller views
- create isolated previews for UI states
- fix `@Observable` isolation for UI state

## Example prompts
- "Review this SwiftUI screen and check whether `@State` and `@Bindable` are used correctly."
- "Split `FeedView` into smaller views while preserving its current behaviour."
- "Create previews for loading, error, and empty list states."

## Similar
- [swiftui-ui-patterns](https://affpapa.org/en/nevibecode/skills/swiftui-ui-patterns.md) — skill · 114 installs
- [swiftui-specialist](https://affpapa.org/en/nevibecode/skills/swiftui-specialist.md) — skill · 864 installs
- [swiftui-view-refactor](https://affpapa.org/en/nevibecode/skills/swiftui-view-refactor.md) — skill · 113 installs
- [swiftui-motion](https://affpapa.org/en/nevibecode/skills/swiftui-motion.md) — skill · 943 installs
- [swiftui-whats-new-27](https://affpapa.org/en/nevibecode/skills/swiftui-whats-new-27.md) — skill · 737 installs
- [guide-swiftui-animations](https://affpapa.org/en/nevibecode/skills/guide-swiftui-animations.md) — skill · 347 installs

## Other versions with the same name
- [swiftui-patterns · affaan-m](https://affpapa.org/en/nevibecode/skills/affaan-m-swiftui-patterns.md) — 4600 installs
- [swiftui-patterns · openai](https://affpapa.org/en/nevibecode/skills/swiftui-patterns.md) — 57 installs

From the same set: [dpearson2699/swift-ios-skills](https://affpapa.org/en/nevibecode/by/dpearson2699/swift-ios-skills.md) — 86 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md