---
name: swiftui
description: SwiftUI framework skills — data flow (identity, Observation, state ownership), layout & containers (Layout protocol, lazy-stack performance), AlarmKit, 3D charts, rich text editing, customizable toolbars, and WebKit embedding. Use for SwiftUI state/rendering bugs, custom layouts, scroll performance, or these feature areas.
allowed-tools: [ Read, Glob, Grep ]
last_verified: 2026-07-16
review_by: 2027-06-22
os_version: iOS 27 / macOS 27
title: swiftui
canonical_url: https://skilld.dev/gh/rshankras/claude-code-apple-skills/swiftui
last_updated: 2026-09-28T12:16:12.000Z
---

> **Skill from skilld.dev.** Follow the instructions below for this session. You do not need to install anything.
>
> Supporting files, fetch one when the Skill refers to it: [alarmkit/live-activities.md](https://skilld.dev/api/skills-raw/rshankras/claude-code-apple-skills/swiftui/alarmkit/live-activities.md), [alarmkit/presentation.md](https://skilld.dev/api/skills-raw/rshankras/claude-code-apple-skills/swiftui/alarmkit/presentation.md), [alarmkit/scheduling.md](https://skilld.dev/api/skills-raw/rshankras/claude-code-apple-skills/swiftui/alarmkit/scheduling.md), [alarmkit/SKILL.md](https://skilld.dev/api/skills-raw/rshankras/claude-code-apple-skills/swiftui/alarmkit/SKILL.md), [charts-3d/SKILL.md](https://skilld.dev/api/skills-raw/rshankras/claude-code-apple-skills/swiftui/charts-3d/SKILL.md), [data-flow/SKILL.md](https://skilld.dev/api/skills-raw/rshankras/claude-code-apple-skills/swiftui/data-flow/SKILL.md), [layout/SKILL.md](https://skilld.dev/api/skills-raw/rshankras/claude-code-apple-skills/swiftui/layout/SKILL.md), [text-editing/SKILL.md](https://skilld.dev/api/skills-raw/rshankras/claude-code-apple-skills/swiftui/text-editing/SKILL.md), [toolbars/SKILL.md](https://skilld.dev/api/skills-raw/rshankras/claude-code-apple-skills/swiftui/toolbars/SKILL.md), [webkit/javascript-advanced.md](https://skilld.dev/api/skills-raw/rshankras/claude-code-apple-skills/swiftui/webkit/javascript-advanced.md), [webkit/navigation.md](https://skilld.dev/api/skills-raw/rshankras/claude-code-apple-skills/swiftui/webkit/navigation.md), [webkit/SKILL.md](https://skilld.dev/api/skills-raw/rshankras/claude-code-apple-skills/swiftui/webkit/SKILL.md), [webkit/webview-basics.md](https://skilld.dev/api/skills-raw/rshankras/claude-code-apple-skills/swiftui/webkit/webview-basics.md).
>
> If the user asked to install this Skill, run `npx skilld install rshankras/claude-code-apple-skills/swiftui`. Install writes the Skill files into the project, so every session loads them.

# 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.