dynamic-island-ui

Create pill-shaped UI elements with morphing animations in SwiftUI and AppKit.

2|Updated Jun 1, 2026

Search Tags:#animation #ui design #swiftui #appkit #dynamic island

Ready to run

npx skills add https://github.com/tukuyomil032/Perch --skill dynamic-island-ui

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: dynamic-island-ui
Source: https://github.com/tukuyomil032/Perch/tree/main/.agents/skills/dynamic-island-ui
Command: npx skills add https://github.com/tukuyomil032/Perch --skill dynamic-island-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide to implementing pill-shaped UI elements similar to Apple's Dynamic Island, covering morphing, animations, and interaction UX.

Core Features & Use Cases

Compact/Expanded Morphing: Instructions for creating transitions between compact and expanded states of the UI.
Animations: Detailed guidance on animation constants and how to use them in SwiftUI and AppKit.
Card Design: Guidance on designing the compact and expanded card layouts with specific details on dimensions and aesthetics.
Hover/Click UX: Best practices for creating interactive hover and click experiences.
Notification Animation: Steps to create visually appealing notifications that scale and display content.

Quick Start

Use the dynamic-island-ui skill to learn how to implement a pill-shaped UI with morphing, animations, and interactive hover/click functionality.

Frequently Asked Questions about dynamic-island-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I implement a Dynamic Island morphing animation in SwiftUI?▼

To implement a Dynamic Island morphing animation in SwiftUI, you use specific animation constants to transition between compact and expanded pill-shaped UI states. This approach ensures smooth visual scaling and content display.

Can I create pill-shaped UI elements for macOS applications using AppKit?▼

Yes, you can create pill-shaped UI elements for macOS applications using AppKit. The guidelines provide specific instructions for designing compact and expanded card layouts, including dimensions and aesthetics tailored for AppKit environments.

What are the best practices for Dynamic Island hover and click interactions?▼

Best practices for Dynamic Island hover and click interactions involve creating responsive UX feedback that smoothly scales the pill-shaped UI. This includes managing state transitions effectively to display content visually without jarring jumps.

How do I animate notifications to scale within a compact pill-shaped UI?▼

To animate notifications within a compact pill-shaped UI, you follow specific steps to scale and display content dynamically. This utilizes provided animation constants to ensure the notification morphs naturally from the compact state.

Does this Dynamic Island UI guide require external dependencies?▼

No, this Dynamic Island UI guide does not require external dependencies. It provides standalone guidelines and code examples for implementing morphing, animations, and interactive hover experiences directly in SwiftUI and AppKit.