/axiom-design

name: axiom-design
description: Use when making visual or interaction design decisions for an Apple app — HIG patterns, Liquid Glass, SF Symbols, typography, app entry-point and auth-flow structure.
license: MIT

Design & HIG

**You MUST use this skill for ANY visual design, HIG compliance, Liquid Glass, SF Symbols, typography, or app composition work.**

<!-- AXIOM_AUDITOR_INLINE_BEGIN — rewritten for Codex by scripts/build-codex.ts; do not hand-edit --> > **Auditors are skills here.** Where this router says "Launch `some-auditor` agent", invoke the > matching Codex skill instead — same procedure, no Claude Code agent required. > > Available: `axiom-audit-liquid-glass`. > > The ones that shell out — builds, tests, simulators, crash symbolication — need shell access to run. <!-- AXIOM_AUDITOR_INLINE_END -->

Quick Reference

| Symptom / Task | Reference | |----------------|-----------| | Design decisions, HIG compliance, colors, backgrounds | See `skills/hig.md` | | Spacing, padding, margins, insets — what value to use | See `skills/hig.md` | | Designing for iPhone Duo — poses, controls on the side, keeping UI out of the fold | See axiom-swiftui (skills/iphone-duo.md) | | Section index / A–Z index strip / alphabet scrubber — should this list have one | See `skills/hig.md` | | Alerts, action sheets, confirmation dialogs — whether to show one, title and button wording, Cancel/destructive placement | See `skills/hig.md` (quick answer) or `skills/hig-ref.md` (Alerts & Action Sheets, full rules) | | 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, platform differences | See `skills/liquid-glass-ref.md` | | Backward compatibility: the `UIDesignRequiresCompatibility` opt-out, and why the 27 SDK ignores it on OS 27 | See `skills/liquid-glass.md` (Backward Compatibility) | | SF Symbols rendering modes, effects, animations | See `skills/sf-symbols.md` | | SF Symbols API signatures, UIKit equivalents, availability | See `skills/sf-symbols-ref.md` | | Verify a symbol name exists / check one symbol's availability or supported modes (`sfsymbols` CLI) | See `skills/sf-symbols-ref.md` (Part 11) | | San Francisco fonts, text styles, Dynamic Type, tracking | See `skills/typography-ref.md` | | App entry points, auth flows, root view switching, scene lifecycle, document-based apps | See `skills/app-composition.md` | | Apple Pay button / Wallet pass design / Tap to Pay button | See `axiom-payments` suite, plus `skills/hig.md` for cross-cutting HIG context |

Decision Tree

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.md" [label="spacing/padding/margin value"];
    what -> "skills/hig.md" [label="alert vs action sheet\nor confirmation dialog,\nalert wording/buttons"];
    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,\nopt-out key"];
    what -> "skills/liquid-glass-ref.md" [label="app-wide Liquid Glass plan,\nplatform differences"];
    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"];
}

1. Design decision / HIG compliance / choosing colors or backgrounds? → `skills/hig.md` 1a. Need semantic color API, custom color code, or material style details? → `skills/hig-ref.md` 1b. Alert, action sheet, or confirmation dialog — whether to show one, wording, button roles and placement? → `skills/hig.md`, full rules in `skills/hig-ref.md` 2. Liquid Glass effects / migrating from blur / Regular vs Clear variant? → `skills/liquid-glass.md` 2a. Planning app-wide Liquid Glass adoption / platform differences? → `skills/liquid-glass-ref.md` 2b. Opting out of Liquid Glass / `UIDesignRequiresCompatibility` / backward compatibility? → `skills/liquid-glass.md` (Backward Compatibility) 3. SF Symbols rendering mode / symbol effects / custom symbols? → `skills/sf-symbols.md` 3a. Need SF Symbols API syntax / UIKit equivalents / availability check? → `skills/sf-symbols-ref.md` 4. Font selection / Dynamic Type / text styles / tracking / leading? → `skills/typography-ref.md` 5. App entry point / auth flow / root view switching / scene lifecycle? → `skills/app-composition.md` 6. SwiftUI view implementation? → `/skill axiom-swiftui` 7. TextKit / rich text editing / Writing Tools? → `/skill axiom-uikit` 8. Accessibility compliance (VoiceOver, contrast, touch targets)? → `/skill axiom-accessibility` 9. Audit UI for Liquid Glass adoption? → liquid-glass-auditor (Agent — surfaces migration opportunities AND adoption-completeness gaps: variant discipline, nesting hygiene, unstyled pre-26 fallbacks, semantic toolbar placement, the `UIDesignRequiresCompatibility` opt-out, accessibility re-check; scores ADOPTED / PARTIAL / NOT ADOPTED) 10. CarPlay app design, categories, driver-distraction rules? → `/skill axiom-media` (carplay-hig.md)

Platform-specific HIG

• watchOS design (glanceable UI, watchOS 10 navigation) → See axiom-watchos (skills/design-for-watchos.md)

Conflict Resolution

**design vs swiftui**: When building UI: 1. **Use design FIRST** — Decide what to build (colors, materials, typography, layout intent) before how to build it. 2. **Then use swiftui** — Implement the design decision in Swif