Use when making design decisions, implementing HIG patterns, Liquid Glass, SF Symbols, typography, or structuring app entry points and authentication flows.
You MUST use this skill for ANY visual design, HIG compliance, Liquid Glass, SF Symbols, typography, or app composition work.
| Symptom / Task | Reference |
|---|---|
| Design decisions, HIG compliance, colors, backgrounds | See skills/hig.md |
| Semantic colors, custom color patterns, material styles | See skills/hig-ref.md |
| Liquid Glass effects, adoption, migration from blur effects | See skills/liquid-glass.md |
| App-wide Liquid Glass adoption, backward compatibility | See skills/liquid-glass-ref.md |
| SF Symbols rendering modes, effects, animations | See skills/sf-symbols.md |
| SF Symbols API signatures, UIKit equivalents, availability | See skills/sf-symbols-ref.md |
| San Francisco fonts, text styles, Dynamic Type, tracking | See skills/typography-ref.md |
| App entry points, auth flows, root view switching, scene lifecycle | See skills/app-composition.md |
digraph design {
start [label="Design task" shape=ellipse];
what [label="What do you need?" shape=diamond];
start -> what;
what -> "skills/hig.md" [label="design decision,\nHIG compliance,\ncolor/background choice"];
what -> "skills/hig-ref.md" [label="semantic color API,\ncustom color code,\nmaterial style details"];
what -> "skills/liquid-glass.md" [label="Liquid Glass effects,\nmigrate from blur,\nRegular vs Clear"];
what -> "skills/liquid-glass-ref.md" [label="app-wide Liquid Glass plan,\nplatform differences,\nbackward compat"];
what -> "skills/sf-symbols.md" [label="rendering mode choice,\nsymbol effects/animations,\ncustom symbols"];
what -> "skills/sf-symbols-ref.md" [label="SF Symbols API syntax,\nUIKit equivalents,\navailability matrix"];
what -> "skills/typography-ref.md" [label="font selection,\nDynamic Type,\ntext styles, tracking"];
what -> "skills/app-composition.md" [label="@main entry point,\nauth flow, root view,\nscene lifecycle"];
}
skills/hig.md
1a. Need semantic color API, custom color code, or material style details? → skills/hig-ref.mdskills/liquid-glass.md
2a. Planning app-wide Liquid Glass adoption / platform differences / backward compatibility? → skills/liquid-glass-ref.mdskills/sf-symbols.md
3a. Need SF Symbols API syntax / UIKit equivalents / availability check? → skills/sf-symbols-ref.mdskills/typography-ref.mdskills/app-composition.md/skill axiom-swiftui/skill axiom-uikit/skill axiom-accessibilitydesign vs swiftui: When building UI:
design vs accessibility: When choosing colors or typography:
design (liquid-glass) vs swiftui: When implementing Liquid Glass:
skills/liquid-glass.md).glassEffect() modifier → use design (skills/liquid-glass-ref.md), then swiftui for surrounding view codedesign (app-composition) vs swiftui: When structuring app architecture:
skills/app-composition.md)HIG Quick Decisions (skills/hig.md):
HIG Comprehensive Reference (skills/hig-ref.md):
Liquid Glass (skills/liquid-glass.md):
Liquid Glass Adoption (skills/liquid-glass-ref.md):
SF Symbols (skills/sf-symbols.md):
SF Symbols API (skills/sf-symbols-ref.md):
Typography (skills/typography-ref.md):
App Composition (skills/app-composition.md):
| Thought | Reality |
|---|---|
| "I'll just pick colors that look good" | Semantic colors adapt to dark mode, accessibility settings, and platform automatically. Custom colors need all of that manually. skills/hig.md has the decision tree. |
| "Liquid Glass is just a blur effect" | Liquid Glass is a distinct material system with lensing, tinting, and adaptive behavior. Using .blur() instead creates a visually wrong result. skills/liquid-glass.md explains the difference. |
| "I know which SF Symbol rendering mode to use" | The right mode depends on context (monochrome for toolbars, hierarchical for depth, palette for brand colors). skills/sf-symbols.md has the decision tree. |
| "I'll hardcode font sizes" | Hardcoded sizes break Dynamic Type, violate HIG, and fail accessibility review. skills/typography-ref.md shows the text style system. |
| "I'll handle auth state with a boolean" | A boolean can't represent login, onboarding, and main states without race conditions. skills/app-composition.md has the state machine pattern. |
| "Liquid Glass adoption means rewriting my whole UI" | Most standard SwiftUI/UIKit components adopt automatically. Start by building with latest Xcode, then review. skills/liquid-glass-ref.md has the incremental strategy. |
| "I'll add the SF Symbol animation later" | Symbol effects are the primary way users perceive interactive feedback. Shipping without them feels broken. skills/sf-symbols.md covers selection. |
| "I'll skip the design review, the code works" | HIG compliance affects App Store review. Reviewers reject apps that feel wrong even if they function correctly. skills/hig.md has the review checklist. |
User: "Should I use a dark or light background?"
-> Read: skills/hig.md
User: "What semantic color should I use for secondary text?"
-> Read: skills/hig-ref.md
User: "How do I implement Liquid Glass in my app?"
-> Read: skills/liquid-glass.md
User: "I need to plan Liquid Glass adoption across my whole app"
-> Read: skills/liquid-glass-ref.md
User: "My SF Symbol is flat, I want it to have depth"
-> Read: skills/sf-symbols.md
User: "What's the SwiftUI API for symbol effects?"
-> Read: skills/sf-symbols-ref.md
User: "Which font should I use for body text?"
-> Read: skills/typography-ref.md
User: "How do I switch between login and main screens?"
-> Read: skills/app-composition.md
User: "Check my app's UI for HIG compliance"
-> Read: skills/hig.md, then /skill axiom-accessibility for contrast/Dynamic Type
User: "I want my download button icon to animate"
-> Read: skills/sf-symbols.md