swiftui-microinteractions

Premium SwiftUI animation and interaction skills for AI coding agents — generate production-ready micro-interactions from plain English prompts.

GitHub
110
Try this MCPSponsored

Documentation

swiftui-microinteractions   Try on Device

License: MIT skills.sh installs Skill Stars legendary-Animo

Premium SwiftUI animation and interaction skills for AI coding agents — generate production-ready micro-interactions from plain English prompts.

Built from legendary-Animo: 84 hand-crafted SwiftUI animation demos.

swiftui-microinteractions

Generate premium SwiftUI animations in the legendary-Animo style — spring physics, CoreHaptics, glass morphism, and complete compilable files — from a plain English description.

/swiftui-microinteractions iOS toggle but the track floods with liquid when switched
/swiftui-microinteractions a notification card you can rip apart by pulling both edges
/swiftui-microinteractions edit ViscousButtonView.swift — increase tear threshold to 160pt

Each prompt writes a complete .swift file directly to your project. Supports both create and edit modes.

Want More? Try Pro

swiftui-microinteractions-pro is a licensed, private superset of this skill — everything above, plus premium-exclusive patterns:

  • Morphing pill ↔ circle player FABs (single-view-tree morph, never if/else cross-fade)
  • Scratch-to-reveal Canvas masks (coupon/reward flows)
  • Photos-style hero-zoom context menus
  • Telegram-style chat reaction menus with animated-GIF reaction trays
  • Grab-and-fling hand-integrated physics badges
/swiftui-microinteractions-pro a morphing music player with a pill↔circle mini-player

See Pro →

Who This Is For

  • iOS developers who want premium micro-interactions without spending days on physics tuning
  • Designers prototyping gesture-driven interactions in SwiftUI
  • Teams who want consistent animation quality across their app
  • Anyone who wants to ship the kind of interactions that make users say "how did they do that?"

Installation

Option A: skills.sh CLI

npx skills add iAmVishal16/swiftui-microinteractions

Then use in your agent:

/swiftui-microinteractions iOS toggle but the track floods with liquid when switched

View on skills.sh →

Option B: Claude Code Plugin

Add to your .claude/settings.json:

{
  "enabledPlugins": {
    "swiftui-microinteractions@iamvishal16-skills": true
  },
  "extraKnownMarketplaces": {
    "iamvishal16-skills": {
      "source": {
        "source": "github",
        "repo": "iAmVishal16/swiftui-microinteractions"
      }
    }
  }
}

Or via Claude Code CLI:

/plugin marketplace add iAmVishal16/swiftui-microinteractions
/plugin install swiftui-microinteractions@iamvishal16-skills

Option C: Manual Install

curl -o ~/.claude/commands/swiftui-microinteractions.md \
  https://raw.githubusercontent.com/iAmVishal16/swiftui-microinteractions/main/SKILL.md

Skill is then available as /swiftui-microinteractions in any Claude Code session.

Option D: Install With Any AI Agent

No CLI to learn: paste this into any agentic coding tool (Claude Code, Cursor, Windsurf, Copilot agent, Codex CLI) and it installs the skill for itself.

Install the swiftui-microinteractions skill for yourself.

1. Fetch https://raw.githubusercontent.com/iAmVishal16/swiftui-microinteractions/main/SKILL.md
   with curl (or your shell) so the file lands byte-exact — do not retype,
   summarize, or reformat it.
2. Save it where you read your own instructions from:
     Claude Code     → ~/.claude/skills/swiftui-microinteractions/SKILL.md
     Cursor          → .cursor/rules/swiftui-microinteractions.mdc
     Windsurf        → .windsurf/rules/swiftui-microinteractions.md
     GitHub Copilot  → append to .github/copilot-instructions.md
     anything else   → append to AGENTS.md in the repo root
3. Confirm the install by printing the "swiftui-microinteractions vX.Y.Z"
   line from the file you saved.

From now on, when I describe a SwiftUI animation, follow that file's rules
precisely and write a complete, compilable .swift file.

Once it's installed, just describe what you want:

iOS toggle but the track floods with liquid when switched

a notification card you can rip apart by pulling both edges

a capsule that morphs into a red circle toggle with rubber-band physics

Pin a version. main always serves the newest rules; swap it for a release tag (e.g. .../v1.24.0/SKILL.md) when you want the install pinned to one version.

Why it works: SKILL.md is the whole skill in one file — spring presets, haptic grammar, visual DNA, metaball recipes, code rules — and it already carries the name / description frontmatter Claude Code expects, so dropping it in place is the entire install.

What's Inside

The skill encodes the full legendary-Animo aesthetic without requiring knowledge of the codebase:

  • Spring physics library — 7 tuned presets (snap, pop, settle, morph, stiff, dial) with exact response + dampingFraction values
  • Haptic grammar — 4-event ladder tied to interaction phases (drag start, threshold cross, commit, destroy)
  • Visual DNA — dark background, glass morphism surfaces, 7-level opacity hierarchy, two-tone gradient system
  • Liquid metaball pattern — Canvas + .blur() + .contrast() + .blendMode(.screen) recipe
  • Multi-phase animation chains — stacked DispatchQueue.main.asyncAfter for choreographed sequences
  • State architecture tiers — Simple (2–4 @State) / Medium (5–8) / Complex (10+) with property type rules
  • Code structure law — mandatory MARK layout, camelCase tokens, no magic numbers
  • Create + Edit modes — generates new files or modifies existing ones, writes directly to disk

Skill Structure

swiftui-microinteractions/   ← repo root
  SKILL.md
  README.md
  CHANGELOG.md
  LICENSE

Single-skill repo: SKILL.md lives at the repo root, indexed by skills.sh as iamvishal16/swiftui-microinteractions.

Contributing

Contributions welcome. Open a PR to improve the skill content, add new animation patterns, or fix incorrect physics values.

About

Built by Vishal Paliwal — iOS developer and creator of legendary-Animo.

Support the work: Patreon

License

MIT License. See LICENSE for details.