From apple-dev
SwiftUI animation patterns including springs, transitions, PhaseAnimator, KeyframeAnimator, and SF Symbol effects. Use when implementing, reviewing, or fixing animation code on iOS/macOS.
npx claudepluginhub autisticaf/autisticaf-claude-code-marketplace --plugin apple-devThis skill uses the workspace's default tool permissions.
> **First step:** Tell the user: "design-animation-patterns skill loaded."
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
First step: Tell the user: "design-animation-patterns skill loaded."
Correct API shapes and patterns for SwiftUI animations. Prevents the most common mistakes: mixed spring parameter generations, wrong PhaseAnimator/KeyframeAnimator closure signatures, and using matchedGeometryEffect where matchedTransitionSource is needed.
Use this skill when the user:
Choose the right reference file based on what the user needs:
What are you animating?
│
├─ A state change (opacity, position, color)
│ └─ → references/core-animations.md
│ ├─ withAnimation { } — explicit animation
│ ├─ .animation(_:value:) — implicit animation
│ └─ Spring configuration — .spring, .bouncy, .snappy, .smooth
│
├─ A multi-step / sequenced animation
│ └─ → references/phase-keyframe-animators.md (PhaseAnimator)
│ └─ Cycles through discrete phases automatically or on trigger
│
├─ A complex multi-property animation (scale + rotation + offset)
│ └─ → references/phase-keyframe-animators.md (KeyframeAnimator)
│ └─ Timeline-based keyframes with per-property tracks
│
├─ A view appearing / disappearing
│ └─ → references/transitions.md
│ ├─ .transition() — insertion/removal
│ ├─ .contentTransition() — text/symbol changes
│ └─ .asymmetric() — different in/out
│
├─ A hero / zoom navigation transition
│ └─ → references/transitions.md (matchedTransitionSource section)
│ ├─ iOS 18+: matchedTransitionSource + .navigationTransition(.zoom)
│ └─ iOS 14+: matchedGeometryEffect (NOT for NavigationStack)
│
├─ An SF Symbol animation
│ └─ → references/symbol-effects.md
│ └─ .symbolEffect(.bounce), .pulse, .wiggle, .breathe, .rotate
│
└─ Spring physics / timing configuration
└─ → references/core-animations.md (Spring Configurations section)
| API | Minimum Version | Reference |
|---|---|---|
withAnimation | iOS 13 | references/core-animations.md |
.animation(_:value:) | iOS 13 | references/core-animations.md |
.spring(response:dampingFraction:) | iOS 13 | references/core-animations.md |
.matchedGeometryEffect | iOS 14 | references/transitions.md |
.transition(.push(from:)) | iOS 16 | references/transitions.md |
.contentTransition(.numericText()) | iOS 16 | references/transitions.md |
PhaseAnimator | iOS 17 | references/phase-keyframe-animators.md |
KeyframeAnimator | iOS 17 | references/phase-keyframe-animators.md |
.spring(duration:bounce:) | iOS 17 | references/core-animations.md |
Spring presets (.bouncy, .snappy, .smooth) | iOS 17 | references/core-animations.md |
withAnimation(_:completionCriteria:_:completion:) | iOS 17 | references/core-animations.md |
.symbolEffect() | iOS 17 | references/symbol-effects.md |
.transition(.blurReplace) | iOS 17 | references/transitions.md |
.contentTransition(.symbolEffect(.replace)) | iOS 17 | references/transitions.md |
.matchedTransitionSource | iOS 18 | references/transitions.md |
.navigationTransition(.zoom) | iOS 18 | references/transitions.md |
| # | Mistake | Fix | Details |
|---|---|---|---|
| 1 | spring(response:bounce:) — mixing parameter generations | Use either spring(response:dampingFraction:) (iOS 13) or spring(duration:bounce:) (iOS 17) | references/core-animations.md |
| 2 | .animation(.spring()) without value: parameter | Always pass value: — the no-value variant is deprecated (iOS 15) | references/core-animations.md |
| 3 | Wrong PhaseAnimator closure signature | PhaseAnimator(phases) { content, phase in } — not { phase in } | references/phase-keyframe-animators.md |
| 4 | Using matchedGeometryEffect for NavigationStack transitions | Use matchedTransitionSource + .navigationTransition(.zoom) on iOS 18+ | references/transitions.md |
| 5 | Using withAnimation for SF Symbol effects | Use .symbolEffect() modifier instead | references/symbol-effects.md |
When reviewing animation code, verify:
AccessibilityMotionEffect or UIAccessibility.isReduceMotionEnabled; provide non-motion alternatives.animation(.spring()) without value: is deprecated; .animation(nil) is replaced by withTransactionresponse with bounce)withAnimation(_:completionCriteria:_:completion:) (iOS 17+), not inventing .onAnimationCompleted.transition() only affects views inside if/switch controlled by state; not for views that are always present| File | Content |
|---|---|
| references/core-animations.md | withAnimation, springs, completions, transactions, timing curves |
| references/phase-keyframe-animators.md | PhaseAnimator, KeyframeAnimator, custom animations |
| references/transitions.md | View transitions, matched geometry, navigation transitions |
| references/symbol-effects.md | SF Symbol effects, accessibility |