Animation Patterns Skill for Claude

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.

16k tokens

context cost

the whole folder, loaded on every use

files

instructions only

copies elsewhere

how many repositories repackaged it

585

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

npx skills add https://github.com/rshankras/claude-code-apple-skills --skill animation-patterns

The instruction itself

7 sections, as written by the author

Animation Patterns

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.

When This Skill Activates

Use this skill when the user:

Asks to add, fix, or review animation code
Mentions spring, bounce, or snappy animations
Wants view transitions (insertion/removal, hero, zoom)
Asks about PhaseAnimator or KeyframeAnimator
Wants SF Symbol effects (bounce, pulse, wiggle, breathe)
Mentions matchedGeometryEffect or matchedTransitionSource
Asks about reduce motion / animation accessibility
Wants to sequence or chain animations
Mentions withAnimation, animation completions, or Transaction
Wants scroll-driven effects (parallax, carousels, scrollTransition, visualEffect)
Mentions MeshGradient, TextRenderer, or Metal shader effects (colorEffect, distortionEffect, layerEffect)

Decision Tree

Choose the right reference file based on what the user needs:

What are you animating?
│
├─ A state change (opacity, position, color)
│  └─ → core-animations.md
│     ├─ withAnimation { } — explicit animation
│     ├─ .animation(_:value:) — implicit animation
│     └─ Spring configuration — .spring, .bouncy, .snappy, .smooth
│
├─ A multi-step / sequenced animation
│  └─ → phase-keyframe-animators.md (PhaseAnimator)
│     └─ Cycles through discrete phases automatically or on trigger
│
├─ A complex multi-property animation (scale + rotation + offset)
│  └─ → phase-keyframe-animators.md (KeyframeAnimator)
│     └─ Timeline-based keyframes with per-property tracks
│
├─ A view appearing / disappearing
│  └─ → transitions.md
│     ├─ .transition() — insertion/removal
│     ├─ .contentTransition() — text/symbol changes
│     └─ .asymmetric() — different in/out
│
├─ A hero / zoom navigation transition
│  └─ → transitions.md (matchedTransitionSource section)
│     ├─ iOS 18+: matchedTransitionSource + .navigationTransition(.zoom)
│     ├─ UIKit: preferredTransition = .zoom (capture stable IDs, never views)
│     └─ iOS 14+: matchedGeometryEffect (NOT for NavigationStack)
│
├─ A UIKit view driven by SwiftUI state or gestures
│  └─ → transitions.md (Bridging UIKit and SwiftUI Animations)
│     └─ UIView.animate(.spring(...)) / context.animate in updateUIView
│
├─ An SF Symbol animation
│  └─ → symbol-effects.md
│     └─ .symbolEffect(.bounce), .pulse, .wiggle, .breathe, .rotate
│
├─ A scroll-driven, geometry-driven, or shader effect
│  └─ → visual-effects.md
│     ├─ .scrollTransition — carousel scale/parallax/caption fades
│     ├─ .visualEffect — position-based effects without GeometryReader
│     ├─ MeshGradient — animatable multi-point gradients
│     ├─ TextRenderer — per-line / per-glyph text animation
│     └─ ShaderLibrary + .colorEffect / .distortionEffect / .layerEffect
│
└─ Spring physics / timing configuration
   └─ → core-animations.md (Spring Configurations section)

API Availability

| API | Minimum Version | Reference |

|-----|----------------|-----------|

| withAnimation | iOS 13 | core-animations.md |

| .animation(_:value:) | iOS 13 | core-animations.md |

| .spring(response:dampingFraction:) | iOS 13 | core-animations.md |

| .matchedGeometryEffect | iOS 14 | transitions.md |

| .transition(.push(from:)) | iOS 16 | transitions.md |

| .contentTransition(.numericText()) | iOS 16 | transitions.md |

| PhaseAnimator | iOS 17 | phase-keyframe-animators.md |

| KeyframeAnimator | iOS 17 | phase-keyframe-animators.md |

| .spring(duration:bounce:) | iOS 17 | core-animations.md |

| Spring presets (.bouncy, .snappy, .smooth) | iOS 17 | core-animations.md |

| withAnimation(_:completionCriteria:_:completion:) | iOS 17 | core-animations.md |

| .symbolEffect() | iOS 17 | symbol-effects.md |

| .transition(.blurReplace) | iOS 17 | transitions.md |

| .contentTransition(.symbolEffect(.replace)) | iOS 17 | transitions.md |

| Transition protocol / TransitionPhase | iOS 17 | transitions.md |

| TransactionKey, scoped .animation / .transaction variants | iOS 17 | core-animations.md |

| KeyframeTimeline, .mapCameraKeyframeAnimator | iOS 17 | phase-keyframe-animators.md |

| .scrollTransition, .visualEffect | iOS 17 | visual-effects.md |

| Shaders: .colorEffect / .distortionEffect / .layerEffect | iOS 17 | visual-effects.md |

| MeshGradient | iOS 18 | visual-effects.md |

| TextRenderer / TextAttribute | iOS 18 | visual-effects.md |

| .matchedTransitionSource | iOS 18 | transitions.md |

| .navigationTransition(.zoom) — push, sheet, fullScreenCover | iOS 18 | transitions.md |

| UIViewController.preferredTransition = .zoom | iOS 18 | transitions.md |

| UIView.animate(_: Animation) / context.animate | iOS 18 | transitions.md |

Top 5 Mistakes — Quick Reference

| # | Mistake | Fix | Details |

|---|---------|-----|---------|

| 1 | spring(response:bounce:) — mixing parameter generations | Use either spring(response:dampingFraction:) (iOS 13) or spring(duration:bounce:) (iOS 17) | core-animations.md |

| 3 | Wrong PhaseAnimator closure signature | PhaseAnimator(phases) { content, phase in } — not { phase in } | phase-keyframe-animators.md |

Review Checklist

When reviewing animation code, verify:

[ ] Reduce motion — animations respect AccessibilityMotionEffect or UIAccessibility.isReduceMotionEnabled; provide non-motion alternatives
[ ] Duration limits — no animation exceeds ~0.5s for UI feedback; longer only for decorative/ambient effects
[ ] Spring vs linear — springs for interactive/physical motion; linear/easeInOut only for opacity fades or progress indicators
[ ] No deprecated APIs — .animation(.spring()) without value: is deprecated; .animation(nil) is replaced by withTransaction
[ ] Correct spring generation — parameter names match the same API generation (never mix response with bounce)
[ ] Completion handlers — using withAnimation(_:completionCriteria:_:completion:) (iOS 17+), not inventing .onAnimationCompleted
[ ] Transition scope — .transition() only affects views inside if/switch controlled by state; not for views that are always present
[ ] Per-frame closures stay cheap — KeyframeAnimator content closures, visualEffect closures, TextRenderer.draw, and Animatable view bodies run every frame; no allocation, formatting, or layout math inside

Reference Files

| File | Content |

|------|---------|

| core-animations.md | withAnimation, springs, completions, transactions + TransactionKey, timing curves, Animatable mechanics, fluid-interface principles (momentum projection, rubber-banding, hysteresis) |

| phase-keyframe-animators.md | PhaseAnimator, KeyframeAnimator, KeyframeTimeline, MapKit camera keyframes, custom animations |

| transitions.md | View transitions, custom Transition protocol, matched geometry, navigation/zoom transitions (SwiftUI + UIKit), interruptibility, UIKit↔SwiftUI bridging, gesture-driven springs |

| symbol-effects.md | SF Symbol effects, accessibility |

| visual-effects.md | scrollTransition, visualEffect, MeshGradient, TextRenderer, shader effects (colorEffect/distortionEffect/layerEffect), effect pipelines, semantic alignment guides |

Other skills for the same job

different authors, same section of the catalogue

Canvas Design

by anthropics

vendor ×13

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.

Improves the quality of images, especially screenshots, by enhancing resolution, sharpness, and clarity. Perfect for preparing images for presentations, documentation, or social media posts.

Downloads videos from YouTube and other platforms for offline viewing, editing, or archival. Handles various formats and quality options.

Lightweight WSI tile extraction and preprocessing. Use for basic slide processing tissue detection, tile extraction, stain normalization for H&E images. Best for simple pipelines, dataset preparation, quick tile-based analysis. For advanced spatial proteomics, multiplexed imaging, or deep learning pipelines use pathml.

Microscopy data management platform. Access images via Python, retrieve datasets, analyze pixels, manage ROIs/annotations, batch processing, for high-content screening and microscopy workflows.

Python library for working with DICOM (Digital Imaging and Communications in Medicine) files. Use this skill when reading, writing, or modifying medical imaging data in DICOM format, extracting pixel data from medical images (CT, MRI, X-ray, ultrasound), anonymizing DICOM files, working with DICOM metadata and tags, converting DICOM images to other formats, handling compressed DICOM data, or processing medical imaging datasets. Applies to tasks involving medical image analysis, PACS systems, radiology workflows, and healthcare imaging applications.

This skill should be used when working with pre-trained transformer models for natural language processing, computer vision, audio, or multimodal tasks. Use for text generation, classification, question answering, translation, summarization, image classification, object detection, speech recognition, and fine-tuning models on custom datasets.

13k tokens

How to use it

Copy the folder

Take rshankras/animation-patterns from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.