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…
SwiftUI animation patterns including springs, transitions, PhaseAnimator, KeyframeAnimator, SF Symbol effects, scroll-driven effects, mesh gradients, text renderers, and shader effects.
$ npx skills add rshankras/claude-code-apple-skills --skill animation-patterns -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install rshankras/claude-code-apple-skills animation-patterns --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ 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-srcUse ~/.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/
Install the "animation-patterns" agent skill from https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/design/animation-patterns into .claude/skills/animation-patterns/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animation-patterns", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/design/animation-patternsType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add rshankras/claude-code-apple-skills --skill animation-patterns -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install rshankras/claude-code-apple-skills animation-patterns --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/rshankras/claude-code-apple-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/design/animation-patterns .agents/skills/animation-patterns && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "animation-patterns" agent skill from https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/design/animation-patterns into .agents/skills/animation-patterns/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animation-patterns", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add rshankras/claude-code-apple-skills --skill animation-patterns -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install rshankras/claude-code-apple-skills animation-patterns --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/rshankras/claude-code-apple-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/design/animation-patterns .cursor/skills/animation-patterns && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "animation-patterns" agent skill from https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/design/animation-patterns into .cursor/skills/animation-patterns/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animation-patterns", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/rshankras/claude-code-apple-skills.git --path skills/design/animation-patterns--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add rshankras/claude-code-apple-skills --skill animation-patterns -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install rshankras/claude-code-apple-skills animation-patterns --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/rshankras/claude-code-apple-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/design/animation-patterns .gemini/skills/animation-patterns && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "animation-patterns" agent skill from https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/design/animation-patterns into .gemini/skills/animation-patterns/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animation-patterns", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install rshankras/claude-code-apple-skills animation-patternsInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add rshankras/claude-code-apple-skills --skill animation-patterns -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/rshankras/claude-code-apple-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/design/animation-patterns .github/skills/animation-patterns && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "animation-patterns" agent skill from https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/design/animation-patterns into .github/skills/animation-patterns/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animation-patterns", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add rshankras/claude-code-apple-skills --skill animation-patterns -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install rshankras/claude-code-apple-skills animation-patterns --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/rshankras/claude-code-apple-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/design/animation-patterns .opencode/skills/animation-patterns && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "animation-patterns" agent skill from https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/design/animation-patterns into .opencode/skills/animation-patterns/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "animation-patterns", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
animation-patternsSwiftUI 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. 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.
Read from SKILL.md and the folder at commit 9ffb831. It shows what the files ask for, not the result of running them.
Pre-approves these tools, so the agent can use them without asking each time:
ReadGlobGrepFrom allowed-tools in the SKILL.md frontmatter.
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.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
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.
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.
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.
The full file from rshankras/claude-code-apple-skills at commit 9ffb831, republished under its MIT licence (© rshankras). 519 words, ~2,105 tokens.
.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.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:
scrollTransition, visualEffect)colorEffect, distortionEffect, layerEffect)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 | 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 |
| # | 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 presentcontent closures, visualEffect closures, TextRenderer.draw, and Animatable view bodies run every frame; no allocation, formatting, or layout math inside| 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 |
© rshankras, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 5 other files in skills/design/animation-patterns of rshankras/claude-code-apple-skills.
Open the folder on GitHubat commit 9ffb831
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Animation Patterns this skillrshankras/claude-code-apple-skills | 783 | — | ~2.1k | Automated safety check: Pass | MIT | |
| Swiftui Expert Skillomarshahine/HomeClaw | 176 | 4 repos | ~2.8k | Automated safety check: Pass | MIT | |
| Hig Project Contextraintree-technology/hig-doctor | 143 | 5 repos | ~1.2k | Automated safety check: Pass | MIT | |
| Swiftui Expert SkillEslzzyl/Pixiv-SwiftUI | 111 | 1 repos | ~2.9k | Automated safety check: Pass | AGPL-3.0 | |
| Hig Components Contentraintree-technology/hig-doctor | 143 | 5 repos | ~1.3k | Automated safety check: Pass | MIT | |
| SwiftUI Design SkillWholiver/swiftui-design-skill | 210 | — | ~2.8k | Automated safety check: Pass | MIT |
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…
raintree-technology/hig-doctor
Create or update a shared Apple design context document that other HIG skills use to tailor guidance.
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…
raintree-technology/hig-doctor
Apple Human Interface Guidelines for content display components.
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.
shaps80/SwiftUIBackports
Find SwiftUIBackports replacements for SwiftUI APIs unavailable on a project deployment target.
rshankras/claude-code-apple-skills
Generate accessibility infrastructure for VoiceOver, Dynamic Type, and accessibility features.
rshankras/claude-code-apple-skills
Generate compelling App Store descriptions that convert browsers into users.
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).
rshankras/claude-code-apple-skills
Turn an app idea into validated, App-Store-ready name candidates.
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 &…
rshankras/claude-code-apple-skills
Generate CI/CD configuration for automated builds, tests, and distribution of iOS/macOS apps.
Categories
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.
Animation Patterns fits situations like: fixing animation; visual-effect code on iOS/macOS.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.