# swiftui-view-refactor

This skill guides SwiftUI view cleanup, dependency injection, and Observation state handling. Use it when reorganizing existing screens or reviewing view architecture.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · ★ 336
- Author: harperreed
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/harperreed/dotfiles/tree/HEAD/.claude/skills/swiftui-view-refactor/SKILL.md
- Updated: 2026-10-15
- HTML: https://affpapa.org/en/nevibecode/skills/harperreed-swiftui-view-refactor

## What it does

The skill defines a consistent order for SwiftUI view declarations: environment values and stored properties first, followed by computed non-view values, initialization, `body`, and supporting view builders or functions. Large screen bodies should be divided into smaller components, with each receiving only the data, bindings, and callbacks it needs. The goal is to keep view code readable without adding unnecessary architectural layers.

Its default direction is Model-View. Business rules belong in models and services, while views coordinate state with `@State`, `@Environment`, `@Query`, `task`, and `onChange`. Root views should hold `@Observable` reference objects in `@State`. When a view already has a view model, initialize it with dependencies passed through `init` and avoid optional storage where the design allows it.

Files longer than roughly 300 lines can be organized with `private` extensions and purpose-specific `// MARK: -` sections. The refactor should preserve existing behavior unless the request calls for a functional change. This matters when extracting subviews: changing the structure should not silently alter the screen's layout or business rules.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add harperreed/dotfiles --skill swiftui-view-refactor -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add harperreed/dotfiles --skill swiftui-view-refactor -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add harperreed/dotfiles --skill swiftui-view-refactor -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install harperreed/dotfiles swiftui-view-refactor
```

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

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add harperreed/dotfiles --skill swiftui-view-refactor -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/harperreed/dotfiles --path .claude/skills/swiftui-view-refactor
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add harperreed/dotfiles --skill swiftui-view-refactor -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/harperreed/dotfiles/tree/HEAD/.claude/skills/swiftui-view-refactor/SKILL.md

## When to use it
- Standardize the declaration order in a SwiftUI view
- Break a large `body` into smaller view components
- Inject services and shared models through `@Environment` or `init`
- Store root-level `@Observable` objects using `@State`
- Group helpers and asynchronous functions in `private` extensions

## Example prompts
- Refactor this SwiftUI screen using the skill's conventions, reorganize declarations, and preserve its behavior.
- Split this large `body` into smaller components and pass each one only the inputs and callbacks it needs.
- Review how this view initializes its view model and stores its `@Observable` object, then align it with the Model-View approach.

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

## Other versions with the same name
- [swiftui-view-refactor · openai](https://affpapa.org/en/nevibecode/skills/swiftui-view-refactor.md) — 113 installs

From the same set: [harperreed/dotfiles](https://affpapa.org/en/nevibecode/by/harperreed/dotfiles.md) — 26 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