Swiftui Animation

What it does

When your agent uses it

• Building animations
• View transitions
• Hero animations
• GPU-accelerated effects in SwiftUI apps for iOS and macOS

Example prompts

• “/swiftui-animation”

Workflow steps

10 steps, taken from the first numbered list in SKILL.md.

1. 1Motion should be purposeful - Don't add animation for its own sake; support the experience without overshadowing it
2. 2Make motion optional - Supplement with haptics and audio; never use motion as the only way to communicate
3. 3Aim for brevity - Brief, precise animations feel lightweight and convey information effectively
4. 4Prefer explicit animations - Use withAnimation over .animation() modifier for clarity
5. 5Use spring animations - They feel more natural and iOS-native
6. 6Start with .spring(response: 0.35, dampingFraction: 0.8) - Good default for most interactions
7. 7Keep animations under 400ms - Longer feels sluggish
8. 8Let people cancel motion - Don't force users to wait for animations to complete
9. 9Test on device - Simulator animation timing differs
10. 10Profile shader performance - GPU time matters for complex effects

What it can do on your machine

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

• Tool permissions

  Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  No scripts in the folder and no shell commands in SKILL.md (its code samples are swift).

  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

Swiftui Animation loads about 1.6k tokens when it runs, and up to ~18k if it reads all its reference files. Until then it costs about 76 tokens; SKILL.md has 404 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~76

When it runs · the whole SKILL.md, loaded when a task matches

~1.6k

With references · SKILL.md plus every file in references/, read only if the agent opens them

~18k

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

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 jamesrochabrun/skills at commit 2482c17, republished under its MIT licence (© jamesrochabrun). 404 words, ~1,554 tokens.

name

swiftui-animation

description

This skill provides comprehensive guidance for implementing advanced SwiftUI animations, transitions, matched geometry effects, and Metal shader integration. Use when building animations, view transitions, hero animations, or GPU-accelerated effects in SwiftUI apps for iOS and macOS.

// Explicit animation (preferred)
withAnimation(.spring(response: 0.4, dampingFraction: 0.75)) {
    isExpanded.toggle()
}

// iOS 17+ spring presets
withAnimation(.snappy) { ... }  // Fast, small bounce
withAnimation(.smooth) { ... }  // Gentle, no bounce
withAnimation(.bouncy) { ... }  // More bounce

// Basic
.transition(.opacity)
.transition(.scale)
.transition(.slide)
.transition(.move(edge: .bottom))

// Combined
.transition(.move(edge: .trailing).combined(with: .opacity))

// Asymmetric
.transition(.asymmetric(
    insertion: .move(edge: .bottom),
    removal: .opacity
))

@Namespace var namespace

// Source view
ThumbnailView()
    .matchedGeometryEffect(id: "hero", in: namespace)

// Destination view
DetailView()
    .matchedGeometryEffect(id: "hero", in: namespace)

// Color manipulation
.colorEffect(ShaderLibrary.invert())

// Pixel displacement
.distortionEffect(
    ShaderLibrary.wave(.float(time)),
    maxSampleOffset: CGSize(width: 20, height: 20)
)

// Full layer access
.layerEffect(ShaderLibrary.blur(.float(radius)), maxSampleOffset: .zero)

struct ExpandableCard: View {
    @State private var isExpanded = false

    var body: some View {
        VStack {
            RoundedRectangle(cornerRadius: isExpanded ? 20 : 12)
                .fill(.blue)
                .frame(
                    width: isExpanded ? 300 : 150,
                    height: isExpanded ? 400 : 100
                )
        }
        .onTapGesture {
            withAnimation(.spring(response: 0.35, dampingFraction: 0.75)) {
                isExpanded.toggle()
            }
        }
    }
}

ForEach(Array(items.enumerated()), id: \.element.id) { index, item in
    ItemRow(item: item)
        .transition(.asymmetric(
            insertion: .move(edge: .trailing).combined(with: .opacity),
            removal: .move(edge: .leading).combined(with: .opacity)
        ))
        .animation(.spring().delay(Double(index) * 0.05), value: items)
}

Circle()
    .fill(.blue)
    .frame(width: 20, height: 20)
    .scaleEffect(isPulsing ? 1.2 : 1.0)
    .opacity(isPulsing ? 0.6 : 1.0)
    .onAppear {
        withAnimation(.easeInOut(duration: 1.0).repeatForever(autoreverses: true)) {
            isPulsing = true
        }
    }

© jamesrochabrun, 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 4 other files (references) in skills/swiftui-animation of jamesrochabrun/skills.

• SKILL.md
• references/animations.md
• references/metal-shaders.md
• references/motion-guidelines.md
• references/transitions.md

Open the folder on GitHubat commit 2482c17

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in jamesrochabrun/skills, which our catalogue first saw on October 7, 2026.

• supabitapp/supaterm.agents/skills/swiftui-animation