メニュー
SwiftUI animation patterns including springs, transitions, PhaseAnimator, KeyframeAnimator, and SF Symbol effects. Use when implementing, reviewing, or fixing animation code on iOS/macOS.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Complete Apple platform development toolkit — iOS, macOS, watchOS, Swift, SwiftUI, StoreKit, ASO, legal, security, testing, and growth. Install for any Apple-platform project.
USE THIS SKILL for any question about Claude API, Claude Code CLI, hooks, plugins, skills, subagents, MCP servers, SDKs, extended thinking, tool use, streaming, or deployment. This skill has complete local documentation — do not use web search, WebFetch, or claude-code-guide instead.
Drop-in DESIGN.md design-system files for 71 popular brands (Claude, Linear, Stripe, Vercel, Apple, Figma, Tesla…). Use when the user wants to match a brand's look and feel, asks to "apply a design system", says "make it look like <brand>", mentions DESIGN.md, or needs design tokens (colors, typography, components) extracted from a known site.
Create interactive HTML learning material that teaches a topic INTUITIVELY (not just informationally) — single-file, animation-rich explainers in the spirit of 3Blue1Brown, Distill.pub, Bartosz Ciechanowski, and Quantum Country. Use when the user wants to LEARN a topic deeply, asks to "teach me X", points at a paper/URL/PDF they want to understand, or wants a self-paced interactive explainer instead of slides. Builds the page, opens it, then tutors the user in conversation about it.
USE THIS SKILL for any question about Google Gemini API — models, function calling, structured output, Live API, embeddings, pricing, or SDKs. This skill has complete local documentation — do not use web search or WebFetch instead.
USE THIS SKILL for NVIDIA topics not covered by the local spark-docs-skill snapshot — community discussion on the NVIDIA developer forum, NVIDIA developer blog posts, and adjacent NVIDIA product docs (CUDA, NeMo, Jetson, Brev, Dynamo, and others listed in the docs.nvidia.com llms.txt catalog). This is a dispatcher skill that routes queries to WebSearch and WebFetch; it does NOT bundle bulk documentation.
| name | animation-patterns |
| description | SwiftUI animation patterns including springs, transitions, PhaseAnimator, KeyframeAnimator, and SF Symbol effects. Use when implementing, reviewing, or fixing animation code on iOS/macOS. |
| allowed-tools | ["Read","Glob","Grep"] |
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)
│ └─ → 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)
│ └─ iOS 14+: matchedGeometryEffect (NOT for NavigationStack)
│
├─ An SF Symbol animation
│ └─ → symbol-effects.md
│ └─ .symbolEffect(.bounce), .pulse, .wiggle, .breathe, .rotate
│
└─ Spring physics / timing configuration
└─ → core-animations.md (Spring Configurations section)
| 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 |
.matchedTransitionSource | iOS 18 | transitions.md |
.navigationTransition(.zoom) | iOS 18 | 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) | core-animations.md |
| 2 | .animation(.spring()) without value: parameter | Always pass value: — the no-value variant is deprecated (iOS 15) | core-animations.md |
| 3 | Wrong PhaseAnimator closure signature | PhaseAnimator(phases) { content, phase in } — not { phase in } | phase-keyframe-animators.md |
| 4 | Using matchedGeometryEffect for NavigationStack transitions | Use matchedTransitionSource + .navigationTransition(.zoom) on iOS 18+ | transitions.md |
| 5 | Using withAnimation for SF Symbol effects | Use .symbolEffect() modifier instead | 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 |
|---|---|
| core-animations.md | withAnimation, springs, completions, transactions, timing curves |
| phase-keyframe-animators.md | PhaseAnimator, KeyframeAnimator, custom animations |
| transitions.md | View transitions, matched geometry, navigation transitions |
| symbol-effects.md | SF Symbol effects, accessibility |