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…
SwiftUI 架构模式,使用 @Observable 进行状态管理,视图组合、导航、性能优化以及现代 iOS/macOS UI 最佳实践。
$ npx skills add xu-xiang/everything-claude-code-zh --skill swiftui-patterns -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install xu-xiang/everything-claude-code-zh swiftui-patterns --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ 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-srcUse ~/.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/
Install the "swiftui-patterns" agent skill from https://github.com/xu-xiang/everything-claude-code-zh/tree/main/skills/swiftui-patterns into .claude/skills/swiftui-patterns/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "swiftui-patterns", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/xu-xiang/everything-claude-code-zh/tree/main/skills/swiftui-patternsType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add xu-xiang/everything-claude-code-zh --skill swiftui-patterns -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install xu-xiang/everything-claude-code-zh swiftui-patterns --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/xu-xiang/everything-claude-code-zh.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/swiftui-patterns .agents/skills/swiftui-patterns && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "swiftui-patterns" agent skill from https://github.com/xu-xiang/everything-claude-code-zh/tree/main/skills/swiftui-patterns into .agents/skills/swiftui-patterns/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "swiftui-patterns", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add xu-xiang/everything-claude-code-zh --skill swiftui-patterns -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install xu-xiang/everything-claude-code-zh swiftui-patterns --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/xu-xiang/everything-claude-code-zh.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/swiftui-patterns .cursor/skills/swiftui-patterns && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "swiftui-patterns" agent skill from https://github.com/xu-xiang/everything-claude-code-zh/tree/main/skills/swiftui-patterns into .cursor/skills/swiftui-patterns/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "swiftui-patterns", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/xu-xiang/everything-claude-code-zh.git --path skills/swiftui-patterns--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add xu-xiang/everything-claude-code-zh --skill swiftui-patterns -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install xu-xiang/everything-claude-code-zh swiftui-patterns --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/xu-xiang/everything-claude-code-zh.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/swiftui-patterns .gemini/skills/swiftui-patterns && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "swiftui-patterns" agent skill from https://github.com/xu-xiang/everything-claude-code-zh/tree/main/skills/swiftui-patterns into .gemini/skills/swiftui-patterns/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "swiftui-patterns", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install xu-xiang/everything-claude-code-zh swiftui-patternsInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add xu-xiang/everything-claude-code-zh --skill swiftui-patterns -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/xu-xiang/everything-claude-code-zh.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/swiftui-patterns .github/skills/swiftui-patterns && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "swiftui-patterns" agent skill from https://github.com/xu-xiang/everything-claude-code-zh/tree/main/skills/swiftui-patterns into .github/skills/swiftui-patterns/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "swiftui-patterns", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add xu-xiang/everything-claude-code-zh --skill swiftui-patterns -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install xu-xiang/everything-claude-code-zh swiftui-patterns --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/xu-xiang/everything-claude-code-zh.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/swiftui-patterns .opencode/skills/swiftui-patterns && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "swiftui-patterns" agent skill from https://github.com/xu-xiang/everything-claude-code-zh/tree/main/skills/swiftui-patterns into .opencode/skills/swiftui-patterns/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "swiftui-patterns", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
swiftui-patternsSwiftUI 架构模式,使用 @Observable 进行状态管理,视图组合、导航、性能优化以及现代 iOS/macOS UI 最佳实践。
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.
Read from SKILL.md and the folder at commit dfbf946. It shows what the files ask for, not the result of running them.
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.
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.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
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.
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.
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.
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.
.claude/skills/swiftui-patterns/SKILL.md (or your agent's skills folder).在 Apple 平台上构建声明式、高性能用户界面的现代 SwiftUI 模式。涵盖 Observation 框架、视图组合、类型安全导航以及性能优化。
@State, @Observable, @Binding)NavigationStack 设计导航流选择最适合的简单包装器:
| 包装器 (Wrapper) | 使用场景 |
|---|---|
@State | 视图局部值类型(开关、表单字段、Sheet 弹出状态) |
@Binding | 对父视图 @State 的双向引用 |
@Observable 类 + @State | 拥有多个属性的自有模型 |
@Observable 类 (无包装器) | 从父视图传递的只读引用 |
@Bindable | 对 @Observable 属性的双向绑定 |
@Environment | 通过 .environment() 注入的共享依赖 |
使用 @Observable(而非 ObservableObject)——它能追踪属性级别的变化,因此 SwiftUI 仅重新渲染读取了已更改属性的视图:
@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()) ?? []
}
}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 替换 @EnvironmentObject:
// 注入 (Inject)
ContentView()
.environment(authManager)
// 使用 (Consume)
struct ProfileView: View {
@Environment(AuthManager.self) private var auth
var body: some View {
Text(auth.currentUser?.name ?? "Guest")
}
}将视图拆分为小型、专注的结构体。当状态改变时,只有读取该状态的子视图会重新渲染:
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)
}
}
}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())
}
}配合 NavigationPath 使用 NavigationStack 实现编程式、类型安全的路由:
@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)
}
}LazyVStack 和 LazyHStack 仅在视图可见时才创建它们:
ScrollView {
LazyVStack(spacing: 8) {
ForEach(items) { item in
ItemRow(item: item)
}
}
}在 ForEach 中始终使用稳定、唯一的 ID —— 避免使用数组索引:
// 使用 Identifiable 协议实现或显式指定 id
ForEach(items, id: \.stableID) { item in
ItemRow(item: item)
}body 内部执行 I/O、网络请求或重度计算.task {} 执行异步工作 —— 它会在视图消失时自动取消.sensoryFeedback() 和 .geometryGroup().shadow()、.blur() 和 .mask() —— 它们会触发离屏渲染(offscreen rendering)对于 body 渲染代价高昂的视图,实现 Equatable 协议以跳过不必要的重新渲染:
struct ExpensiveChartView: View, Equatable {
let dataPoints: [DataPoint] // DataPoint 必须符合 Equatable
static func == (lhs: Self, rhs: Self) -> Bool {
lhs.dataPoints == rhs.dataPoints
}
var body: some View {
// 复杂的图表渲染逻辑
}
}使用 #Preview 宏配合内联 Mock 数据进行快速迭代:
#Preview("空状态") {
ItemListView(viewModel: ItemListViewModel(repository: EmptyMockRepository()))
}
#Preview("已加载") {
ItemListView(viewModel: ItemListViewModel(repository: PopulatedMockRepository()))
}ObservableObject / @Published / @StateObject / @EnvironmentObject —— 请迁移至 @Observablebody 或 init 中放入异步工作 —— 请使用 .task {} 或显式的加载方法@State —— 应从父视图传递AnyView 类型擦除 —— 推荐对条件视图使用 @ViewBuilder 或 GroupSendable 要求参见技能: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
Just SKILL.md in skills/swiftui-patterns of xu-xiang/everything-claude-code-zh.
Open the folder on GitHubat commit dfbf946
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Swiftui Patterns this skillxu-xiang/everything-claude-code-zh | 2k | — | ~1.4k | Automated safety check: Pass | MIT | |
| Swiftui Expert Skillomarshahine/HomeClaw | 175 | 4 repos | ~2.8k | Automated safety check: Pass | MIT | |
| Hig Project Contextraintree-technology/hig-doctor | 143 | 5 repos | ~1.2k | Automated safety check: Pass | MIT | |
| Swiftui Expert SkillEslzzyl/Pixiv-SwiftUI | 111 | 1 repos | ~2.9k | Automated safety check: Pass | AGPL-3.0 | |
| Hig Components Contentraintree-technology/hig-doctor | 143 | 5 repos | ~1.3k | Automated safety check: Pass | MIT | |
| SwiftUI Design SkillWholiver/swiftui-design-skill | 213 | — | ~2.8k | Automated safety check: Pass | MIT |
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…
raintree-technology/hig-doctor
Create or update a shared Apple design context document that other HIG skills use to tailor guidance.
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…
raintree-technology/hig-doctor
Apple Human Interface Guidelines for content display components.
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.
shaps80/SwiftUIBackports
Find SwiftUIBackports replacements for SwiftUI APIs unavailable on a project deployment target.
xu-xiang/everything-claude-code-zh
Everything Claude Code 的交互式安装程序 — 引导用户选择并安装技能和规则到用户级或项目级目录,验证路径,并可选择优化已安装文件。
xu-xiang/everything-claude-code-zh
基于本能(Instinct)的学习系统,通过钩子(hooks)观察会话,创建带有置信度评分的原子本能,并将其演化为技能(Skills)、命令(Commands)或智能体(Agents)。v2.1 版本增加了项目作用域(project-scoped)的本能,以防止跨项目污染。
xu-xiang/everything-claude-code-zh
生产级 API 的 REST API 设计模式,包括资源命名、状态码、分页、过滤、错误响应、版本控制和速率限制. An agent skill from xu-xiang/everything-claude-code-zh.
xu-xiang/everything-claude-code-zh
后端架构模式、API 设计、数据库优化以及适用于 Node.js、Express 和 Next.js API 路由的服务端最佳实践。
xu-xiang/everything-claude-code-zh
后端架构模式、API 设计、数据库优化以及 Node.js、Express 和 Next.js API 路由的服务端最佳实践。
xu-xiang/everything-claude-code-zh
后端架构模式、API 设计、数据库优化以及针对 Node.js、Express 和 Next.js API 路由的服务端最佳实践。
Categories
SwiftUI 架构模式,使用 @Observable 进行状态管理,视图组合、导航、性能优化以及现代 iOS/macOS UI 最佳实践。. Swiftui Patterns is an agent skill from xu-xiang/everything-claude-code-zh.
Swiftui Patterns fits situations like: tasks that involve iOS development.
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.
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.
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.
SKILL.md names no scripts, command-line tools or credentials: Swiftui Patterns is instructions for the agent only.
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.
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.
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.
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.
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.
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.