---
name: SwiftUI
slug: swiftui
category: Frontend
description: SwiftUI covers state and rendering bugs, custom layouts, scroll performance, and related feature areas like AlarmKit, charts, text editing, toolbars, and WebKit embedding. Use it when building or debugging SwiftUI views and framework behavior.
github: "https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/swiftui"
language: Swift
stars: 659
forks: 60
install: "npx degit https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/swiftui ~/.claude/skills/swiftui"
installs_to: ~/.claude/skills/swiftui
source_path: skills/swiftui/SKILL.md
collection_size: 25
category_size: 567
collection_url: "https://dirskills.com/collections/rshankras/claude-code-apple-skills"
added: 2026-08-24T05:17:24.522Z
last_synced: 2026-08-24T05:17:24.522Z
canonical_url: "https://dirskills.com/skills/swiftui"
---

# SwiftUI

SwiftUI covers state and rendering bugs, custom layouts, scroll performance, and related feature areas like AlarmKit, charts, text editing, toolbars, and WebKit embedding. Use it when building or debugging SwiftUI views and framework behavior.

**Install:**

```bash
npx degit https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/swiftui ~/.claude/skills/swiftui
```

## README

# SwiftUI Skills

Focused SwiftUI framework skills — each sub-skill covers one API area in depth.

## When This Skill Activates

Use this skill when the user:
- Has **state/rendering bugs**: state resets, over-rendering, flashing lists, animation crossfades (data-flow)
- Is choosing **@State vs @Bindable vs @Environment** or migrating to Observation (data-flow)
- Builds **custom layouts or containers**, or fights **lazy-stack/scroll performance** (layout)
- Wants alarms or timers with **AlarmKit** (custom UI, Live Activities, snooze)
- Is creating **3D data visualizations** with Swift Charts (Chart3D, SurfacePlot)
- Needs **styled text or rich text editing** (Text, AttributedString, TextEditor)
- Is implementing or customizing **toolbars** (customizable toolbars, search integration)
- Wants to **embed web content** (WebView, WebPage, JavaScript interop)

## Available Skills

Paths are relative to THIS file's directory — skills run with cwd set to the
user's project, so resolve each path from this SKILL.md's own location.

| Skill | Read | Covers |
|-------|------|--------|
| data-flow | `data-flow/SKILL.md` | View identity/lifetime/dependencies, Observation, state ownership, body discipline, main-actor contract |
| layout | `layout/SKILL.md` | Layout protocol, Grid decisions, custom containers, lazy-stack + scrolling performance rules |
| alarmkit | `alarmkit/SKILL.md` | Alarms and timers with custom UI, Live Activities, snooze (iOS 18+) |
| charts-3d | `charts-3d/SKILL.md` | Chart3D, SurfacePlot, interactive pose control, surface styling |
| text-editing | `text-editing/SKILL.md` | Text, AttributedString, TextEditor with formatting controls |
| toolbars | `toolbars/SKILL.md` | Customizable toolbars, search integration, transition effects, platform behavior |
| webkit | `webkit/SKILL.md` | WebView and WebPage embedding, navigation, JavaScript interop |

## How to Route

1. Match the request to a row above.
2. Read that SKILL.md (relative to this file) plus any reference files it lists.
3. Apply the guidance to the user's code.