Agent skill

Swiftui Patterns

by xu-xiang in xu-xiang/everything-claude-code-zh

SwiftUI 架构模式,使用 @Observable 进行状态管理,视图组合、导航、性能优化以及现代 iOS/macOS UI 最佳实践。

MITAuto-check passedMobile

Install Swiftui Patterns

skills CLI
$ npx skills add xu-xiang/everything-claude-code-zh --skill swiftui-patterns -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install xu-xiang/everything-claude-code-zh swiftui-patterns --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/xu-xiang/everything-claude-code-zh.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/swiftui-patterns .claude/skills/swiftui-patterns && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
swiftui-patterns
GitHub stars
2k
Token cost
~1.4k tokens
SKILL.md length
190 words
Files
1
Skills in repo
78
Repo updated
First seen
Licence
MIT

At a glance

SwiftUI 架构模式,使用 @Observable 进行状态管理,视图组合、导航、性能优化以及现代 iOS/macOS UI 最佳实践。

  • Tasks that involve iOS development
  • SKILL.md covers 何时激活, 状态管理 (State Management), 视图组合 (View Composition) and 导航 (Navigation), plus 4 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Swiftui Patterns is an agent skill from xu-xiang/everything-claude-code-zh. SwiftUI 架构模式,使用 @Observable 进行状态管理,视图组合、导航、性能优化以及现代 iOS/macOS UI 最佳实践。

Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Mobile, covering iOS development. It works with SwiftUI, iOS and macOS. The repository describes itself as: everything-claude-code 中文翻译项目:完整的 Claude Code 配置集合(agents, skills, hooks, commands, rules, MCPs)。源自 Anthropic 黑客松获胜者的实战配置,助力中文工程师高效理解与使用 Claude Code。 The licence is MIT.

When your agent uses it

  • Tasks that involve iOS development

Example prompts

  • “/swiftui-patterns”

What it can do on your machine

Read from SKILL.md and the folder at commit dfbf946. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are swift).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Swiftui Patterns loads about 1.4k tokens when it runs. Until then it costs about 22 tokens; SKILL.md has 190 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~22
When it runs · the whole SKILL.md, loaded when a task matches
~1.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from xu-xiang/everything-claude-code-zh at commit dfbf946, republished under its MIT licence (© xu-xiang). 190 words, ~1,433 tokens.

Download SKILL.mdSave it as .claude/skills/swiftui-patterns/SKILL.md (or your agent's skills folder).
name
swiftui-patterns
description
SwiftUI 架构模式,使用 @Observable 进行状态管理,视图组合、导航、性能优化以及现代 iOS/macOS UI 最佳实践。

SwiftUI 模式 (SwiftUI Patterns)

在 Apple 平台上构建声明式、高性能用户界面的现代 SwiftUI 模式。涵盖 Observation 框架、视图组合、类型安全导航以及性能优化。

何时激活

  • 构建 SwiftUI 视图并管理状态(@State, @Observable, @Binding)
  • 使用 NavigationStack 设计导航流
  • 构建视图模型(View Model)和数据流
  • 针对列表和复杂布局优化渲染性能
  • 在 SwiftUI 中使用环境值(Environment Values)和依赖注入

状态管理 (State Management)

属性包装器选择 (Property Wrapper Selection)

选择最适合的简单包装器:

包装器 (Wrapper)使用场景
@State视图局部值类型(开关、表单字段、Sheet 弹出状态)
@Binding对父视图 @State 的双向引用
@Observable 类 + @State拥有多个属性的自有模型
@Observable 类 (无包装器)从父视图传递的只读引用
@Bindable对 @Observable 属性的双向绑定
@Environment通过 .environment() 注入的共享依赖
@Observable 视图模型 (ViewModel)

使用 @Observable(而非 ObservableObject)——它能追踪属性级别的变化,因此 SwiftUI 仅重新渲染读取了已更改属性的视图:

swift
@Observable
final class ItemListViewModel {
    private(set) var items: [Item] = []
    private(set) var isLoading = false
    var searchText = ""

    private let repository: any ItemRepository

    init(repository: any ItemRepository = DefaultItemRepository()) {
        self.repository = repository
    }

    func load() async {
        isLoading = true
        defer { isLoading = false }
        items = (try? await repository.fetchAll()) ?? []
    }
}
使用视图模型(ViewModel)的视图
swift
struct ItemListView: View {
    @State private var viewModel: ItemListViewModel

    init(viewModel: ItemListViewModel = ItemListViewModel()) {
        _viewModel = State(initialValue: viewModel)
    }

    var body: some View {
        List(viewModel.items) { item in
            ItemRow(item: item)
        }
        .searchable(text: $viewModel.searchText)
        .overlay { if viewModel.isLoading { ProgressView() } }
        .task { await viewModel.load() }
    }
}
环境注入 (Environment Injection)

使用 @Environment 替换 @EnvironmentObject:

swift
// 注入 (Inject)
ContentView()
    .environment(authManager)

// 使用 (Consume)
struct ProfileView: View {
    @Environment(AuthManager.self) private var auth

    var body: some View {
        Text(auth.currentUser?.name ?? "Guest")
    }
}

视图组合 (View Composition)

提取子视图以限制失效范围

将视图拆分为小型、专注的结构体。当状态改变时,只有读取该状态的子视图会重新渲染:

swift
struct OrderView: View {
    @State private var viewModel = OrderViewModel()

    var body: some View {
        VStack {
            OrderHeader(title: viewModel.title)
            OrderItemList(items: viewModel.items)
            OrderTotal(total: viewModel.total)
        }
    }
}
用于可复用样式的 ViewModifier
swift
struct CardModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding()
            .background(.regularMaterial)
            .clipShape(RoundedRectangle(cornerRadius: 12))
    }
}

extension View {
    func cardStyle() -> some View {
        modifier(CardModifier())
    }
}

导航 (Navigation)

类型安全的 NavigationStack

配合 NavigationPath 使用 NavigationStack 实现编程式、类型安全的路由:

swift
@Observable
final class Router {
    var path = NavigationPath()

    func navigate(to destination: Destination) {
        path.append(destination)
    }

    func popToRoot() {
        path = NavigationPath()
    }
}

enum Destination: Hashable {
    case detail(Item.ID)
    case settings
    case profile(User.ID)
}

struct RootView: View {
    @State private var router = Router()

    var body: some View {
        NavigationStack(path: $router.path) {
            HomeView()
                .navigationDestination(for: Destination.self) { dest in
                    switch dest {
                    case .detail(let id): ItemDetailView(itemID: id)
                    case .settings: SettingsView()
                    case .profile(let id): ProfileView(userID: id)
                    }
                }
        }
        .environment(router)
    }
}

性能 (Performance)

对大型集合使用延迟容器 (Lazy Containers)

LazyVStack 和 LazyHStack 仅在视图可见时才创建它们:

swift
ScrollView {
    LazyVStack(spacing: 8) {
        ForEach(items) { item in
            ItemRow(item: item)
        }
    }
}
稳定的标识符 (Stable Identifiers)

在 ForEach 中始终使用稳定、唯一的 ID —— 避免使用数组索引:

swift
// 使用 Identifiable 协议实现或显式指定 id
ForEach(items, id: \.stableID) { item in
    ItemRow(item: item)
}
避免在 body 中执行昂贵的操作
  • 绝不要在 body 内部执行 I/O、网络请求或重度计算
  • 使用 .task {} 执行异步工作 —— 它会在视图消失时自动取消
  • 在滚动视图中谨慎使用 .sensoryFeedback() 和 .geometryGroup()
  • 尽量减少在列表(List)中使用 .shadow()、.blur() 和 .mask() —— 它们会触发离屏渲染(offscreen rendering)
Equatable 协议实现

对于 body 渲染代价高昂的视图,实现 Equatable 协议以跳过不必要的重新渲染:

swift
struct ExpensiveChartView: View, Equatable {
    let dataPoints: [DataPoint] // DataPoint 必须符合 Equatable

    static func == (lhs: Self, rhs: Self) -> Bool {
        lhs.dataPoints == rhs.dataPoints
    }

    var body: some View {
        // 复杂的图表渲染逻辑
    }
}

预览 (Previews)

使用 #Preview 宏配合内联 Mock 数据进行快速迭代:

swift
#Preview("空状态") {
    ItemListView(viewModel: ItemListViewModel(repository: EmptyMockRepository()))
}

#Preview("已加载") {
    ItemListView(viewModel: ItemListViewModel(repository: PopulatedMockRepository()))
}

需避免的反模式 (Anti-Patterns)

  • 在新代码中使用 ObservableObject / @Published / @StateObject / @EnvironmentObject —— 请迁移至 @Observable
  • 直接在 body 或 init 中放入异步工作 —— 请使用 .task {} 或显式的加载方法
  • 在不拥有数据的子视图内部将视图模型创建为 @State —— 应从父视图传递
  • 使用 AnyView 类型擦除 —— 推荐对条件视图使用 @ViewBuilder 或 Group
  • 在向 Actor 传递数据或从 Actor 接收数据时忽略 Sendable 要求

参考资料 (References)

参见技能:swift-actor-persistence 了解基于 Actor 的持久化模式。 参见技能:swift-protocol-di-testing 了解基于协议的依赖注入(DI)以及使用 Swift Testing 进行测试。

© xu-xiang, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/swiftui-patterns of xu-xiang/everything-claude-code-zh.

Open the folder on GitHubat commit dfbf946

Compare with similar skills

Swiftui Patterns next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Swiftui Patterns compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Swiftui Patterns this skillxu-xiang/everything-claude-code-zh2k—~1.4kAutomated safety check: PassMIT
Swiftui Expert Skillomarshahine/HomeClaw1754 repos~2.8kAutomated safety check: PassMIT
Hig Project Contextraintree-technology/hig-doctor1435 repos~1.2kAutomated safety check: PassMIT
Swiftui Expert SkillEslzzyl/Pixiv-SwiftUI1111 repos~2.9kAutomated safety check: PassAGPL-3.0
Hig Components Contentraintree-technology/hig-doctor1435 repos~1.3kAutomated safety check: PassMIT
SwiftUI Design SkillWholiver/swiftui-design-skill213—~2.8kAutomated safety check: PassMIT

Similar skills

  • Swiftui Expert Skill

    omarshahine/HomeClaw

    A skill your agent uses when writing, reviewing, or refactoring SwiftUI code for iOS or macOS, including state management, view composition, performance, Liquid Glass adoption, or Instruments .trace…

    175 GitHub starsUsed in 4 repos~2.8k tokens
    MobileAuto-check passed
  • Hig Project Context

    raintree-technology/hig-doctor

    Create or update a shared Apple design context document that other HIG skills use to tailor guidance.

    143 GitHub starsUsed in 5 repos~1.2k tokens
    MobileAuto-check passed
  • Swiftui Expert Skill

    Eslzzyl/Pixiv-SwiftUI

    A skill your agent uses when writing, reviewing, or refactoring SwiftUI code for iOS or macOS, including state and @Observable data flow, view composition, resizable layouts, safe areas, display…

    111 GitHub starsUsed in 1 repo~2.9k tokens
    MobileAuto-check passed
  • Hig Components Content

    raintree-technology/hig-doctor

    Apple Human Interface Guidelines for content display components.

    143 GitHub starsUsed in 5 repos~1.3k tokens
    MobileAuto-check passed
  • SwiftUI Design Skill

    Wholiver/swiftui-design-skill

    Guides the agent to design distinctive SwiftUI interfaces for iOS and macOS, with six anti-generic rules, a design direction workflow and a five-dimension review.

    213 GitHub stars~2.8k tokensUpdated 5 mo ago
    MobileAuto-check passed
  • Swiftui Backports

    shaps80/SwiftUIBackports

    Find SwiftUIBackports replacements for SwiftUI APIs unavailable on a project deployment target.

    1.1k GitHub stars~604 tokensUpdated 3 mo ago
    MobileAuto-check passed

More from xu-xiang/everything-claude-code-zh

All 78 skills in this repo
  • Configure Ecc

    xu-xiang/everything-claude-code-zh

    Everything Claude Code 的交互式安装程序 — 引导用户选择并安装技能和规则到用户级或项目级目录,验证路径,并可选择优化已安装文件。

    2k GitHub starsUsed in 1 repo~2.1k tokens
    Auto-check passed
  • Continuous Learning V2

    xu-xiang/everything-claude-code-zh

    基于本能(Instinct)的学习系统,通过钩子(hooks)观察会话,创建带有置信度评分的原子本能,并将其演化为技能(Skills)、命令(Commands)或智能体(Agents)。v2.1 版本增加了项目作用域(project-scoped)的本能,以防止跨项目污染。

    2k GitHub stars~2.1k tokensUpdated 7 mo ago
    Auto-check passed
  • API Design

    xu-xiang/everything-claude-code-zh

    生产级 API 的 REST API 设计模式,包括资源命名、状态码、分页、过滤、错误响应、版本控制和速率限制. An agent skill from xu-xiang/everything-claude-code-zh.

    2k GitHub stars~2.7k tokensUpdated 7 mo ago
    Auto-check passed
  • Backend Patterns

    xu-xiang/everything-claude-code-zh

    后端架构模式、API 设计、数据库优化以及适用于 Node.js、Express 和 Next.js API 路由的服务端最佳实践。

    2k GitHub stars~3.2k tokensUpdated 7 mo ago
    Auto-check passed
  • Backend Patterns

    xu-xiang/everything-claude-code-zh

    后端架构模式、API 设计、数据库优化以及 Node.js、Express 和 Next.js API 路由的服务端最佳实践。

    2k GitHub stars~3.1k tokensUpdated 7 mo ago
    Auto-check passed
  • Backend Patterns

    xu-xiang/everything-claude-code-zh

    后端架构模式、API 设计、数据库优化以及针对 Node.js、Express 和 Next.js API 路由的服务端最佳实践。

    2k GitHub stars~3.2k tokensUpdated 7 mo ago
    Auto-check passed

Works with

Categories

Questions about Swiftui Patterns

What does Swiftui Patterns do?

SwiftUI 架构模式,使用 @Observable 进行状态管理,视图组合、导航、性能优化以及现代 iOS/macOS UI 最佳实践。. Swiftui Patterns is an agent skill from xu-xiang/everything-claude-code-zh.

When should I use Swiftui Patterns?

Swiftui Patterns fits situations like: tasks that involve iOS development.

How do I install Swiftui Patterns in Claude Code?

Run `npx skills add xu-xiang/everything-claude-code-zh --skill swiftui-patterns -a claude-code`. Or copy the skill folder (skills/swiftui-patterns in xu-xiang/everything-claude-code-zh) into .claude/skills/swiftui-patterns in your project. Claude Code loads it when a task matches its description.

How do I install Swiftui Patterns in Codex?

Run `npx skills add xu-xiang/everything-claude-code-zh --skill swiftui-patterns -a codex`. Or copy the skill folder (skills/swiftui-patterns in xu-xiang/everything-claude-code-zh) into .agents/skills/swiftui-patterns in your project. Codex loads it when a task matches its description.

Can I use Swiftui Patterns in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add xu-xiang/everything-claude-code-zh --skill swiftui-patterns -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/swiftui-patterns, .gemini/skills/swiftui-patterns, .github/skills/swiftui-patterns and .opencode/skills/swiftui-patterns in your project.

What does Swiftui Patterns need to run?

SKILL.md names no scripts, command-line tools or credentials: Swiftui Patterns is instructions for the agent only.

Does Swiftui Patterns access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Swiftui Patterns safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Swiftui Patterns use?

Swiftui Patterns is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Swiftui Patterns use?

About 1.4k tokens (SKILL.md is roughly 5.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Swiftui Patterns?

Skills that share tags, products or a category with Swiftui Patterns: Swiftui Expert Skill (omarshahine/HomeClaw, 175 stars), Hig Project Context (raintree-technology/hig-doctor, 143 stars), Swiftui Expert Skill (Eslzzyl/Pixiv-SwiftUI, 111 stars) and Hig Components Content (raintree-technology/hig-doctor, 143 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Swiftui Patterns?

xu-xiang (a GitHub user) maintains it in xu-xiang/everything-claude-code-zh, which has 1,976 GitHub stars. The repository holds 78 skills in this directory. The repository was last updated on March 5, 2026.

Source: xu-xiang/everything-claude-code-zh on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.