Agent skill

Animation Patterns

by rshankras in rshankras/claude-code-apple-skills

SwiftUI animation patterns including springs, transitions, PhaseAnimator, KeyframeAnimator, SF Symbol effects, scroll-driven effects, mesh gradients, text renderers, and shader effects.

MITAuto-check passedMobile

Install Animation Patterns

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

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install rshankras/claude-code-apple-skills animation-patterns --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/rshankras/claude-code-apple-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/design/animation-patterns .claude/skills/animation-patterns && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
animation-patterns
GitHub stars
783
Token cost
~2.1k tokens
SKILL.md length
519 words
Files
6
Skills in repo
41
Repo updated
First seen
Licence
MIT

At a glance

SwiftUI animation patterns including springs, transitions, PhaseAnimator, KeyframeAnimator, SF Symbol effects, scroll-driven effects, mesh gradients, text renderers, and shader effects.

  • Fixing animation
  • SKILL.md covers When This Skill Activates, Decision Tree, API Availability and Top 5 Mistakes — Quick Reference, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Visual-effect code on iOS/macOS

What it does

Animation Patterns is an agent skill from rshankras/claude-code-apple-skills. 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.

Its SKILL.md is about 2.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files (for example `core-animations.md`, `phase-keyframe-animators.md` and `symbol-effects.md`).

It sits in Mobile, covering iOS development. It works with iOS, SwiftUI and macOS. The repository describes itself as: Claude Code skills for Apple platform development (iOS, macOS, iPadOS) — product validation, code generation, App Store optimization, and more. The licence is MIT.

When your agent uses it

  • Fixing animation
  • Visual-effect code on iOS/macOS

Example prompts

  • “/animation-patterns”

Requirements

  • Pre-approved tools (allowed-tools): Read, Glob, Grep

What it can do on your machine

Read from SKILL.md and the folder at commit 9ffb831. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Glob
    • Grep

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Animation Patterns loads about 2.1k tokens when it runs. Until then it costs about 74 tokens; SKILL.md has 519 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~74
When it runs · the whole SKILL.md, loaded when a task matches
~2.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from rshankras/claude-code-apple-skills at commit 9ffb831, republished under its MIT licence (© rshankras). 519 words, ~2,105 tokens.

Download SKILL.mdSave it as .claude/skills/animation-patterns/SKILL.md (or your agent's skills folder). This skill also uses 5 other files; get the full folder from GitHub.
name
animation-patterns
description
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.
allowed-tools
Read, Glob, Grep
last_verified
2026-07-16
review_by
2027-06-22
os_version
iOS 27 / macOS 27

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

APIMinimum VersionReference
withAnimationiOS 13core-animations.md
.animation(_:value:)iOS 13core-animations.md
.spring(response:dampingFraction:)iOS 13core-animations.md
.matchedGeometryEffectiOS 14transitions.md
.transition(.push(from:))iOS 16transitions.md
.contentTransition(.numericText())iOS 16transitions.md
PhaseAnimatoriOS 17phase-keyframe-animators.md
KeyframeAnimatoriOS 17phase-keyframe-animators.md
.spring(duration:bounce:)iOS 17core-animations.md
Spring presets (.bouncy, .snappy, .smooth)iOS 17core-animations.md
withAnimation(_:completionCriteria:_:completion:)iOS 17core-animations.md
.symbolEffect()iOS 17symbol-effects.md
.transition(.blurReplace)iOS 17transitions.md
.contentTransition(.symbolEffect(.replace))iOS 17transitions.md
Transition protocol / TransitionPhaseiOS 17transitions.md
TransactionKey, scoped .animation / .transaction variantsiOS 17core-animations.md
KeyframeTimeline, .mapCameraKeyframeAnimatoriOS 17phase-keyframe-animators.md
.scrollTransition, .visualEffectiOS 17visual-effects.md
Shaders: .colorEffect / .distortionEffect / .layerEffectiOS 17visual-effects.md
MeshGradientiOS 18visual-effects.md
TextRenderer / TextAttributeiOS 18visual-effects.md
.matchedTransitionSourceiOS 18transitions.md
.navigationTransition(.zoom) — push, sheet, fullScreenCoveriOS 18transitions.md
UIViewController.preferredTransition = .zoomiOS 18transitions.md
UIView.animate(_: Animation) / context.animateiOS 18transitions.md

Top 5 Mistakes — Quick Reference

#MistakeFixDetails
1spring(response:bounce:) — mixing parameter generationsUse either spring(response:dampingFraction:) (iOS 13) or spring(duration:bounce:) (iOS 17)core-animations.md
2.animation(.spring()) without value: parameterAlways pass value: — the no-value variant is deprecated (iOS 15)core-animations.md
3Wrong PhaseAnimator closure signaturePhaseAnimator(phases) { content, phase in } — not { phase in }phase-keyframe-animators.md
4Using matchedGeometryEffect for NavigationStack transitionsUse matchedTransitionSource + .navigationTransition(.zoom) on iOS 18+transitions.md
5Using withAnimation for SF Symbol effectsUse .symbolEffect() modifier insteadsymbol-effects.md
Show full SKILL.md (189 more words)Show less

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

FileContent
core-animations.mdwithAnimation, springs, completions, transactions + TransactionKey, timing curves, Animatable mechanics, fluid-interface principles (momentum projection, rubber-banding, hysteresis)
phase-keyframe-animators.mdPhaseAnimator, KeyframeAnimator, KeyframeTimeline, MapKit camera keyframes, custom animations
transitions.mdView transitions, custom Transition protocol, matched geometry, navigation/zoom transitions (SwiftUI + UIKit), interruptibility, UIKit↔SwiftUI bridging, gesture-driven springs
symbol-effects.mdSF Symbol effects, accessibility
visual-effects.mdscrollTransition, visualEffect, MeshGradient, TextRenderer, shader effects (colorEffect/distortionEffect/layerEffect), effect pipelines, semantic alignment guides

© rshankras, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 5 other files in skills/design/animation-patterns of rshankras/claude-code-apple-skills.

  • SKILL.md
  • core-animations.md
  • phase-keyframe-animators.md
  • symbol-effects.md
  • transitions.md
  • visual-effects.md

Open the folder on GitHubat commit 9ffb831

Compare with similar skills

Animation Patterns next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Animation Patterns compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Animation Patterns this skillrshankras/claude-code-apple-skills783—~2.1kAutomated safety check: PassMIT
Swiftui Expert Skillomarshahine/HomeClaw1764 repos~2.8kAutomated safety check: PassMIT
Hig Project Contextraintree-technology/hig-doctor1435 repos~1.2kAutomated safety check: PassMIT
Swiftui Expert SkillEslzzyl/Pixiv-SwiftUI1111 repos~2.9kAutomated safety check: PassAGPL-3.0
Hig Components Contentraintree-technology/hig-doctor1435 repos~1.3kAutomated safety check: PassMIT
SwiftUI Design SkillWholiver/swiftui-design-skill210—~2.8kAutomated safety check: PassMIT

Similar skills

  • Swiftui Expert Skill

    omarshahine/HomeClaw

    A skill your agent uses when writing, reviewing, or refactoring SwiftUI code for iOS or macOS, including state management, view composition, performance, Liquid Glass adoption, or Instruments .trace…

    176 GitHub starsUsed in 4 repos~2.8k tokens
    MobileAuto-check passed
  • Hig Project Context

    raintree-technology/hig-doctor

    Create or update a shared Apple design context document that other HIG skills use to tailor guidance.

    143 GitHub starsUsed in 5 repos~1.2k tokens
    MobileAuto-check passed
  • Swiftui Expert Skill

    Eslzzyl/Pixiv-SwiftUI

    A skill your agent uses when writing, reviewing, or refactoring SwiftUI code for iOS or macOS, including state and @Observable data flow, view composition, resizable layouts, safe areas, display…

    111 GitHub starsUsed in 1 repo~2.9k tokens
    MobileAuto-check passed
  • Hig Components Content

    raintree-technology/hig-doctor

    Apple Human Interface Guidelines for content display components.

    143 GitHub starsUsed in 5 repos~1.3k tokens
    MobileAuto-check passed
  • SwiftUI Design Skill

    Wholiver/swiftui-design-skill

    Guides the agent to design distinctive SwiftUI interfaces for iOS and macOS, with six anti-generic rules, a design direction workflow and a five-dimension review.

    210 GitHub stars~2.8k tokensUpdated 5 mo ago
    MobileAuto-check passed
  • Swiftui Backports

    shaps80/SwiftUIBackports

    Find SwiftUIBackports replacements for SwiftUI APIs unavailable on a project deployment target.

    1.1k GitHub stars~604 tokensUpdated 3 mo ago
    MobileAuto-check passed

More from rshankras/claude-code-apple-skills

All 41 skills in this repo
  • Accessibility Generator

    rshankras/claude-code-apple-skills

    Generate accessibility infrastructure for VoiceOver, Dynamic Type, and accessibility features.

    783 GitHub stars~1.4k tokensUpdated 2 mo ago
    Auto-check: notes
  • App Description Writer

    rshankras/claude-code-apple-skills

    Generate compelling App Store descriptions that convert browsers into users.

    783 GitHub stars~1.3k tokensUpdated 2 mo ago
    Auto-check passed
  • App Icon Generator

    rshankras/claude-code-apple-skills

    Generates an app icon for macOS or iOS — a fast CoreGraphics placeholder and/or flat layered source art to finish in Icon Composer (the Liquid Glass / iOS 26+ standard).

    783 GitHub stars~5.1k tokensUpdated 2 mo ago
    Auto-check: notes
  • App Namer

    rshankras/claude-code-apple-skills

    Turn an app idea into validated, App-Store-ready name candidates.

    783 GitHub stars~3.4k tokensUpdated 2 mo ago
    Auto-check passed
  • Bundles And Licensing

    rshankras/claude-code-apple-skills

    Revenue beyond the single-app price tag — own-app bundles, Family Sharing as a conversion lever, cross-developer bundles & suites, and institutional licensing via Group Purchases / Apple School &…

    783 GitHub stars~1.8k tokensUpdated 2 mo ago
    Auto-check passed
  • CI CD Setup

    rshankras/claude-code-apple-skills

    Generate CI/CD configuration for automated builds, tests, and distribution of iOS/macOS apps.

    783 GitHub stars~1.5k tokensUpdated 2 mo ago
    Auto-check: notes

Works with

Categories

Questions about Animation Patterns

What does Animation Patterns do?

SwiftUI animation patterns including springs, transitions, PhaseAnimator, KeyframeAnimator, SF Symbol effects, scroll-driven effects, mesh gradients, text renderers, and shader effects. Animation Patterns is an agent skill from rshankras/claude-code-apple-skills. SwiftUI animation patterns including springs, transitions, PhaseAnimator, KeyframeAnimator, SF Symbol effects, scroll-driven effects, mesh gradients, text renderers, and shader effects.

When should I use Animation Patterns?

Animation Patterns fits situations like: fixing animation; visual-effect code on iOS/macOS.

How do I install Animation Patterns in Claude Code?

Run `npx skills add rshankras/claude-code-apple-skills --skill animation-patterns -a claude-code`. Or copy the skill folder (skills/design/animation-patterns in rshankras/claude-code-apple-skills) into .claude/skills/animation-patterns in your project. Claude Code loads it when a task matches its description.

How do I install Animation Patterns in Codex?

Run `npx skills add rshankras/claude-code-apple-skills --skill animation-patterns -a codex`. Or copy the skill folder (skills/design/animation-patterns in rshankras/claude-code-apple-skills) into .agents/skills/animation-patterns in your project. Codex loads it when a task matches its description.

Can I use Animation Patterns in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add rshankras/claude-code-apple-skills --skill animation-patterns -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/animation-patterns, .gemini/skills/animation-patterns, .github/skills/animation-patterns and .opencode/skills/animation-patterns in your project.

What does Animation Patterns need to run?

SKILL.md names no scripts, command-line tools or credentials: Animation Patterns is instructions for the agent only. Its frontmatter pre-approves these tools: Read, Glob, Grep.

Does Animation Patterns access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Animation Patterns safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Animation Patterns use?

Animation Patterns is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Animation Patterns use?

About 2.1k tokens (SKILL.md is roughly 8.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Animation Patterns?

Skills that share tags, products or a category with Animation Patterns: Swiftui Expert Skill (omarshahine/HomeClaw, 176 stars), Hig Project Context (raintree-technology/hig-doctor, 143 stars), Swiftui Expert Skill (Eslzzyl/Pixiv-SwiftUI, 111 stars) and Hig Components Content (raintree-technology/hig-doctor, 143 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Animation Patterns?

rshankras (a GitHub user) maintains it in rshankras/claude-code-apple-skills, which has 783 GitHub stars. The repository holds 41 skills in this directory. The repository was last updated on July 24, 2026.

Source: rshankras/claude-code-apple-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.