Build a drag-to-dismiss sheet
Give the agent the existing sheet component and supported inputs. Define where the sheet follows the pointer, when it closes and how keyboard users dismiss it.
Apple Design
Translate a drag, swipe or sheet interaction into a responsive web implementation. Verify what happens mid-gesture, on release and when reduced motion is enabled.
Build and verify a web gesture
Provide the component and expected states, then exercise the gesture and an accessible alternative.
Give the component, target inputs, expected release behavior and access requirements.
Copy the request into a new Floatboat conversation and provide the required material.
Download FloatboatYour request for Floatboat
Preview and copy the request. It is not sent automatically from this page.
Reference: Apple Design https://github.com/emilkowalski/skills/blob/main/skills/apple-design/SKILL.md Read the original documentation and check the current environment and dependencies. Propose any new installation or tool connection before proceeding. My task: Apply Apple Design to this web sheet. Keep the existing stack and build a drag-to-dismiss path with interruption handling. Check keyboard dismissal, rapid reversals and reduced motion. Report exactly which states were exercised. Expected deliverable: An implemented interaction with explicit state checks.
About Apple Design
Emil Kowalski’s MIT-licensed Skill translates principles from Apple design talks to the web. It guides interaction design for gestures, spring behavior, live interruption and accessible alternatives. The implementation uses web primitives and the project’s motion library where appropriate.
Apple Design Skill Use Cases for Web Interaction
Choose an interaction where movement communicates position or control. Each design should have a clear end state and an alternative for people who reduce motion.
Refine an interruptible transition
Reproduce a navigation change before the previous motion finishes. Implement a transition from the visible position and check whether reversal feels continuous.
Add a swipe action
Provide a row component and the intended action. Verify the gesture threshold and feedback while preserving an equivalent click or keyboard control.
Adapt motion for accessibility
Choose a movement-heavy animation and specify the information it communicates. Build an alternate state that preserves feedback with less movement, then test both preferences.
How to Implement and Exercise a Gesture
Define how the interface responds while a pointer moves, after release and if the user interrupts. Test all three states in the actual component.
Describe states and inputs
List the resting, dragged, released and interrupted states alongside supported pointer and keyboard paths.
Implement inside the existing component
Use the current web stack and motion primitives. Keep feedback aligned with pointer input and preserve a usable alternative.
Check release, reversal and access
Test interruption and reduced motion on a representative device. Record the states checked and any follow-up work.
Explore More Agent Skills
Read another Skill guide and check its original source before using it.
Apple Design FAQ
Is Apple Design an Apple release?
It is Emil Kowalski’s Skill, informed by Apple design talks and adapted to web interfaces.
Does it target SwiftUI?
This guide covers the Skill’s web interaction instructions. It can use CSS, pointer events and the project’s existing motion tooling.
How should a motion reverse?
Start from the element’s current visible position when interrupted. Reversing from a stale target can cause a visible jump.
When are springs useful?
Use them where physical feedback supports the interaction and verify behavior with the actual gesture and content.
What should reduced motion preserve?
Keep essential state feedback and an equivalent way to complete the action while reducing unnecessary movement.
How should I test a gesture?
Check the initial state, drag, release, interruption and the equivalent keyboard or click path on a representative device.