skills.rest
tukuyomil032
tukuyomil032COMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/tukuyomil032/Perch --skill dynamic-island-ui
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
kmshdevkmshdev
1

appkit-swiftui-bridge

Bridge AppKit and SwiftUI views using NSViewRepresentable and Combine state management.

Community
Advanced
sgcarstrendssgcarstrends
21

ui-design-system

Enforce consistent UI patterns for the SG Cars Trends web application.

Official
Advanced
andrew-dandrew-d
3

swiftui-gestures

Implement, review, and enhance SwiftUI gesture handling across iOS versions.

Community
Intermediate
jiaiyanjiaiyan
8

n-notification

Create, update, and destroy toast notifications in Naive UI apps.

Community
Intermediate