AgentSkillsCN

ios-swiftui-generator

按照 Apple HIG 标准生成 SwiftUI 组件。适用于创建 iOS 用户界面组件、构建 SwiftUI 视图，或为 iOS 界面提供代码骨架时使用。

SKILL.md
--- frontmatter
name: ios-swiftui-generator
description: Generate SwiftUI components following Apple HIG. Use when creating iOS UI components, building SwiftUI views, or need code scaffolding for iOS interfaces.
version: 1.0.0

iOS SwiftUI Generator

Generate production-ready SwiftUI code following Apple Human Interface Guidelines.

When to Use

  • •Creating new SwiftUI views or components
  • •Building iOS UI from design descriptions
  • •Need HIG-compliant code scaffolding
  • •Converting UI concepts to SwiftUI code

Generation Principles

Always Follow

  1. •Semantic Colors — Use Color.primary, Color(.systemBackground), not hex
  2. •SF Symbols — Prefer system icons over custom assets
  3. •Dynamic Type — Support text scaling with .font(.body)
  4. •Dark Mode — All colors must work in both modes
  5. •Accessibility — Include VoiceOver labels, minimum 44pt touch targets

Code Standards

swift
// ✅ Good
struct ExpenseCard: View {
    let expense: Expense

    var body: some View {
        HStack {
            Image(systemName: expense.category.icon)
                .foregroundStyle(.secondary)
                .accessibilityHidden(true)

            VStack(alignment: .leading) {
                Text(expense.title)
                    .font(.headline)
                Text(expense.date, style: .date)
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
            }

            Spacer()

            Text(expense.amount, format: .currency(code: "USD"))
                .font(.headline)
        }
        .padding()
        .background(Color(.secondarySystemBackground))
        .clipShape(RoundedRectangle(cornerRadius: 12))
        .accessibilityElement(children: .combine)
        .accessibilityLabel("\(expense.title), \(expense.amount)")
    }
}

// ❌ Bad
struct ExpenseCard: View {
    var body: some View {
        HStack {
            Image("custom-icon")  // Use SF Symbols
            Text("$50.00")
                .foregroundColor(Color(hex: "#333"))  // Use semantic
        }
        .frame(height: 30)  // Too small for touch
    }
}

Component Templates

Navigation

  • •Tab Bar (2-5 items)
  • •Navigation Stack with drill-down
  • •Modal sheets and full-screen covers
  • •Search integration

Forms

  • •Text fields with validation
  • •Pickers (date, selection, wheel)
  • •Toggles and steppers
  • •Secure fields

Lists

  • •Standard list with sections
  • •Swipe actions
  • •Pull-to-refresh
  • •Empty states

Cards & Containers

  • •Content cards
  • •Grouped backgrounds
  • •Material overlays

Usage

code
User: Create a settings screen with profile section and preferences

Claude: [Generates SwiftUI code]
- SettingsView with List and sections
- ProfileHeaderView component
- PreferenceRow reusable component
- All using semantic colors and SF Symbols

Output Format

Generated code includes:

  1. •Main view struct
  2. •Supporting subviews
  3. •Preview provider
  4. •Accessibility labels
  5. •Usage comments

Related Skills

  • •ios-design-review — Validate generated code
  • •ios-hig-reference — Design guidelines reference