animation-patterns

Name: animation-patterns
Author: rshankras

3installs46forks

How to install animation-patterns?

rshankras/claude-code-apple-skills/animation-patterns

$npx -y skills add rshankras/claude-code-apple-skills --skill animation-patterns

Installs into the current project.

Summary

SwiftUI animation patterns including springs, transitions, PhaseAnimator, KeyframeAnimator, SF Symbol effects, scroll-driven effects, mesh gradients, text renderers, and shader effects. Use when implementing, reviewing, or fixing animation or visual-effect code on iOS/macOS.

Files · 1

View on GitHub

SKILL.md

1	# Animation Patterns
2
3	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.
4
5	## When This Skill Activates
6
7	Use this skill when the user:
8	- Asks to add, fix, or review animation code
9	- Mentions spring, bounce, or snappy animations
10	- Wants view transitions (insertion/removal, hero, zoom)
11	- Asks about PhaseAnimator or KeyframeAnimator
12	- Wants SF Symbol effects (bounce, pulse, wiggle, breathe)
13	- Mentions matchedGeometryEffect or matchedTransitionSource
14	- Asks about reduce motion / animation accessibility
15	- Wants to sequence or chain animations
16	- Mentions withAnimation, animation completions, or Transaction
17	- Wants scroll-driven effects (parallax, carousels, `scrollTransition`, `visualEffect`)
18	- Mentions MeshGradient, TextRenderer, or Metal shader effects (`colorEffect`, `distortionEffect`, `layerEffect`)
19
20	## Decision Tree
21
22	Choose the right reference file based on what the user needs:
23
24	```
25	What are you animating?
26	│
27	├─ A state change (opacity, position, color)
28	│ └─ → core-animations.md
29	│ ├─ withAnimation { } — explicit animation
30	│ ├─ .animation(_:value:) — implicit animation
31	│ └─ Spring configuration — .spring, .bouncy, .snappy, .smooth
32	│
33	├─ A multi-step / sequenced animation
34	│ └─ → phase-keyframe-animators.md (PhaseAnimator)
35	│ └─ Cycles through discrete phases automatically or on trigger
36	│
37	├─ A complex multi-property animation (scale + rotation + offset)
38	│ └─ → phase-keyframe-animators.md (KeyframeAnimator)
39	│ └─ Timeline-based keyframes with per-property tracks
40	│
41	├─ A view appearing / disappearing
42	│ └─ → transitions.md
43	│ ├─ .transition() — insertion/removal
44	│ ├─ .contentTransition() — text/symbol changes
45	│ └─ .asymmetric() — different in/out
46	│
47	├─ A hero / zoom navigation transition
48	│ └─ → transitions.md (matchedTransitionSource section)
49	│ ├─ iOS 18+: matchedTransitionSource + .navigationTransition(.zoom)
50	│ ├─ UIKit: preferredTransition = .zoom (capture stable IDs, never views)
51	│ └─ iOS 14+: matchedGeometryEffect (NOT for NavigationStack)
52	│
53	├─ A UIKit view driven by SwiftUI state or gestures
54	│ └─ → transitions.md (Bridging UIKit and SwiftUI Animations)
55	│ └─ UIView.animate(.spring(...)) / context.animate in updateUIView
56	│
57	├─ An SF Symbol animation
58	│ └─ → symbol-effects.md
59	│ └─ .symbolEffect(.bounce), .pulse, .wiggle, .breathe, .rotate
60	│
61	├─ A scroll-driven, geometry-driven, or shader effect
62	│ └─ → visual-effects.md
63	│ ├─ .scrollTransition — carousel scale/parallax/caption fades
64	│ ├─ .visualEffect — position-based effects without GeometryReader
65	│ ├─ MeshGradient — animatable multi-point gradients
66	│ ├─ TextRenderer — per-line / per-glyph text animation
67	│ └─ ShaderLibrary + .colorEffect / .distortionEffect / .layerEffect
68	│
69	└─ Spring physics / timing configuration
70	└─ → core-animations.md (Spring Configurations section)
71	```
72
73	## API Availability
74
75	\| API \| Minimum Version \| Reference \|
76	\|-----\|----------------\|-----------\|
77	\| `withAnimation` \| iOS 13 \| core-animations.md \|
78	\| `.animation(_:value:)` \| iOS 13 \| core-animations.md \|
79	\| `.spring(response:dampingFraction:)` \| iOS 13 \| core-animations.md \|
80	\| `.matchedGeometryEffect` \| iOS 14 \| transitions.md \|
81	\| `.transition(.push(from:))` \| iOS 16 \| transitions.md \|
82	\| `.contentTransition(.numericText())` \| iOS 16 \| transitions.md \|
83	\| `PhaseAnimator` \| iOS 17 \| phase-keyframe-animators.md \|
84	\| `KeyframeAnimator` \| iOS 17 \| phase-keyframe-animators.md \|
85	\| `.spring(duration:bounce:)` \| iOS 17 \| core-animations.md \|
86	\| Spring presets (`.bouncy`, `.snappy`, `.smooth`) \| iOS 17 \| core-animations.md \|
87	\| `withAnimation(_:completionCriteria:_:completion:)` \| iOS 17 \| core-animations.md \|
88	\| `.symbolEffect()` \| iOS 17 \| symbol-effects.md \|
89	\| `.transition(.blurReplace)` \| iOS 17 \| transitions.md \|
90	\| `.contentTransition(.symbolEffect(.replace))` \| iOS 17 \| transitions.md \|
91	\| `Transition` protocol / `TransitionPhase` \| iOS 17 \| transitions.md \|
92	\| `TransactionKey`, scoped `.animation` / `.transaction` variants \| iOS 17 \| core-animations.md \|
93	\| `KeyframeTimeline`, `.mapCameraKeyframeAnimator` \| iOS 17 \| phase-keyframe-animators.md \|
94	\| `.scrollTransition`, `.visualEffect` \| iOS 17 \| visual-effects.md \|
95	\| Shaders: `.colorEffect` / `.distortionEffect` / `.layerEffect` \| iOS 17 \| visual-effects.md \|
96	\| `MeshGradient` \| iOS 18 \|

People who liked this also viewed

6 picks

Type

animation-patterns

3installs46forks

View on GitHub

How to install animation-patterns?

rshankras/claude-code-apple-skills/animation-patterns

$npx -y skills add rshankras/claude-code-apple-skills --skill animation-patterns

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Animation Patterns
2
3	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.
4
5	## When This Skill Activates
6
7	Use this skill when the user:
8	- Asks to add, fix, or review animation code
9	- Mentions spring, bounce, or snappy animations
10	- Wants view transitions (insertion/removal, hero, zoom)
11	- Asks about PhaseAnimator or KeyframeAnimator
12	- Wants SF Symbol effects (bounce, pulse, wiggle, breathe)
13	- Mentions matchedGeometryEffect or matchedTransitionSource
14	- Asks about reduce motion / animation accessibility
15	- Wants to sequence or chain animations
16	- Mentions withAnimation, animation completions, or Transaction
17	- Wants scroll-driven effects (parallax, carousels, `scrollTransition`, `visualEffect`)
18	- Mentions MeshGradient, TextRenderer, or Metal shader effects (`colorEffect`, `distortionEffect`, `layerEffect`)
19
20	## Decision Tree
21
22	Choose the right reference file based on what the user needs:
23
24	```
25	What are you animating?
26	│
27	├─ A state change (opacity, position, color)
28	│ └─ → core-animations.md
29	│ ├─ withAnimation { } — explicit animation
30	│ ├─ .animation(_:value:) — implicit animation
31	│ └─ Spring configuration — .spring, .bouncy, .snappy, .smooth
32	│
33	├─ A multi-step / sequenced animation
34	│ └─ → phase-keyframe-animators.md (PhaseAnimator)
35	│ └─ Cycles through discrete phases automatically or on trigger
36	│
37	├─ A complex multi-property animation (scale + rotation + offset)
38	│ └─ → phase-keyframe-animators.md (KeyframeAnimator)
39	│ └─ Timeline-based keyframes with per-property tracks
40	│
41	├─ A view appearing / disappearing
42	│ └─ → transitions.md
43	│ ├─ .transition() — insertion/removal
44	│ ├─ .contentTransition() — text/symbol changes
45	│ └─ .asymmetric() — different in/out
46	│
47	├─ A hero / zoom navigation transition
48	│ └─ → transitions.md (matchedTransitionSource section)
49	│ ├─ iOS 18+: matchedTransitionSource + .navigationTransition(.zoom)
50	│ ├─ UIKit: preferredTransition = .zoom (capture stable IDs, never views)
51	│ └─ iOS 14+: matchedGeometryEffect (NOT for NavigationStack)
52	│
53	├─ A UIKit view driven by SwiftUI state or gestures
54	│ └─ → transitions.md (Bridging UIKit and SwiftUI Animations)
55	│ └─ UIView.animate(.spring(...)) / context.animate in updateUIView
56	│
57	├─ An SF Symbol animation
58	│ └─ → symbol-effects.md
59	│ └─ .symbolEffect(.bounce), .pulse, .wiggle, .breathe, .rotate
60	│
61	├─ A scroll-driven, geometry-driven, or shader effect
62	│ └─ → visual-effects.md
63	│ ├─ .scrollTransition — carousel scale/parallax/caption fades
64	│ ├─ .visualEffect — position-based effects without GeometryReader
65	│ ├─ MeshGradient — animatable multi-point gradients
66	│ ├─ TextRenderer — per-line / per-glyph text animation
67	│ └─ ShaderLibrary + .colorEffect / .distortionEffect / .layerEffect
68	│
69	└─ Spring physics / timing configuration
70	└─ → core-animations.md (Spring Configurations section)
71	```
72
73	## API Availability
74
75	\| API \| Minimum Version \| Reference \|
76	\|-----\|----------------\|-----------\|
77	\| `withAnimation` \| iOS 13 \| core-animations.md \|
78	\| `.animation(_:value:)` \| iOS 13 \| core-animations.md \|
79	\| `.spring(response:dampingFraction:)` \| iOS 13 \| core-animations.md \|
80	\| `.matchedGeometryEffect` \| iOS 14 \| transitions.md \|
81	\| `.transition(.push(from:))` \| iOS 16 \| transitions.md \|
82	\| `.contentTransition(.numericText())` \| iOS 16 \| transitions.md \|
83	\| `PhaseAnimator` \| iOS 17 \| phase-keyframe-animators.md \|
84	\| `KeyframeAnimator` \| iOS 17 \| phase-keyframe-animators.md \|
85	\| `.spring(duration:bounce:)` \| iOS 17 \| core-animations.md \|
86	\| Spring presets (`.bouncy`, `.snappy`, `.smooth`) \| iOS 17 \| core-animations.md \|
87	\| `withAnimation(_:completionCriteria:_:completion:)` \| iOS 17 \| core-animations.md \|
88	\| `.symbolEffect()` \| iOS 17 \| symbol-effects.md \|
89	\| `.transition(.blurReplace)` \| iOS 17 \| transitions.md \|
90	\| `.contentTransition(.symbolEffect(.replace))` \| iOS 17 \| transitions.md \|
91	\| `Transition` protocol / `TransitionPhase` \| iOS 17 \| transitions.md \|
92	\| `TransactionKey`, scoped `.animation` / `.transaction` variants \| iOS 17 \| core-animations.md \|
93	\| `KeyframeTimeline`, `.mapCameraKeyframeAnimator` \| iOS 17 \| phase-keyframe-animators.md \|
94	\| `.scrollTransition`, `.visualEffect` \| iOS 17 \| visual-effects.md \|
95	\| Shaders: `.colorEffect` / `.distortionEffect` / `.layerEffect` \| iOS 17 \| visual-effects.md \|
96	\| `MeshGradient` \| iOS 18 \|

People who liked this also viewed

6 picks

Type