home / skills / hoangnguyen0403 / agent-skills-standard / ios-design-system

ios-design-system skill

safe

This skill enforces design token usage in SwiftUI apps, aligning with iOS Human Interface Guidelines for consistent colors, spacing, and typography.

npx playbooks add skill hoangnguyen0403/agent-skills-standard --skill ios-design-system

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

1.6 KB

---
name: iOS Design System (SwiftUI)
description: Enforce design token usage in SwiftUI apps. Covers Colors, Spacing, Typography using iOS Human Interface Guidelines.
metadata:
  labels: [ios, swiftui, dls, design-tokens, hig]
  triggers:
    files: ['**/*View.swift', '**/Theme/**', '**/DesignSystem/**']
    keywords: [Color, Font, SwiftUI, ViewModifier, Theme]
---

# iOS Design System (SwiftUI)

## **Priority: P2 (OPTIONAL)**

Enforce design token usage in SwiftUI. Follow Apple HIG for iOS-native feel.

## Token Structure

```swift
// Theme/Colors.swift
extension Color {
    static let appPrimary = Color("Primary") // Asset Catalog
    static let appSecondary = Color("Secondary")
    static let appBackground = Color("Background")
}

// Theme/Spacing.swift
enum Spacing {
    static let xs: CGFloat = 4
    static let sm: CGFloat = 8
    static let md: CGFloat = 16
    static let lg: CGFloat = 24
}

// Theme/Typography.swift
extension Font {
    static let appTitle = Font.system(size: 28, weight: .bold)
    static let appBody = Font.system(size: 16, weight: .regular)
}
```

## Usage

```swift
// ❌ FORBIDDEN
Text("Hello").foregroundColor(Color(hex: "2196F3"))
VStack(spacing: 16) { }

// ✅ ENFORCED
Text("Hello").foregroundColor(.appPrimary)
VStack(spacing: Spacing.md) { }
Text("Title").font(.appTitle)
```

## Anti-Patterns

- **No Hex Colors**: Use `Color(hex: "...")` → Error. Define in asset catalog.
- **No Magic Spacing**: Use `spacing: 16` → Error. Use `Spacing.md`.
- **No System Colors for Brand**: Use `Color.blue` for brand → Error. Use `.appPrimary`.

## Related Topics

mobile-ux-core | ios/swiftui

Overview

This skill enforces a SwiftUI design system that centralizes colors, spacing, and typography as design tokens. It ensures apps follow iOS Human Interface Guidelines and uses named assets and token values instead of ad-hoc literals. The result is consistent visuals, easier theming, and safer refactors.

How this skill works

The skill inspects SwiftUI code for direct literals (hex colors, system brand colors, numeric spacing, and inline fonts) and flags them as violations. It expects tokens defined as Color extensions, a Spacing enum, and Font extensions and recommends using those tokens in views. It treats usage in asset catalogs and token constants as the correct pattern to enforce.

When to use it

Adopting or enforcing a shared visual language across an iOS app
Preventing design drift when multiple developers edit UI code
Preparing an app for theming, dark mode, or brand changes
Onboarding new engineers to consistent SwiftUI patterns
During code reviews to catch inline style regressions

Best practices

Define brand palette in asset catalog and expose via Color extensions (e.g., .appPrimary)
Avoid hard-coded hex or system color values for brand colors
Create a small, consistent Spacing enum for spacing tokens and use it everywhere
Expose typography through Font extensions and avoid inline Font.system calls with magic numbers
Document tokens and map them to HIG recommendations for size and weight

Example use cases

Replace Text(...).foregroundColor(Color(hex: "...") ) with Text(...).foregroundColor(.appPrimary)
Replace VStack(spacing: 16) with VStack(spacing: Spacing.md) to remove magic numbers
Standardize title and body styles using Font.appTitle and Font.appBody across screens
Detect accidental use of Color.blue or other system colors for brand elements
Audit a codebase for inline fonts, spacing, and colors before a theming project

FAQ

What counts as a violation?

Any hard-coded color literal (hex or system brand color), numeric spacing, or inline font sizes/weights instead of the defined tokens.

How do I add a new token?

Add the color to the asset catalog and a Color extension, or add a value to Spacing or Font extensions; then use the new token throughout the app.