skills.rest
DengNaichen
DengNaichenCOMMUNITY
Explore all skills by this author →
GitHub

apple-design

Implement spring-based animations and gesture-driven interactions for web UI components.

34|2|Updated Mar 16, 2026
Search Tags:#accessibility#web-development#ui-design#interaction-design#motion-design#spring-physics
One-click install
npx skills add https://github.com/DengNaichen/Stet --skill apple-design-dengnaichen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: apple-design
Source: https://github.com/DengNaichen/Stet/tree/main/.agents/skills/apple-design
Command: npx skills add https://github.com/DengNaichen/Stet --skill apple-design-dengnaichen

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill bridges the gap between high-end, gesture-driven macOS/iOS interface design and web development, solving the problem of static, unresponsive web UIs that lack the physical, interruptible feel of native Apple applications.

Core Features & Use Cases

  • Fluid Motion Principles: Implements interruptible, velocity-aware animations using spring physics rather than fixed-duration transitions.
  • Gesture Handling: Provides patterns for 1:1 pointer tracking, momentum projection, and rubber-banding to ensure UI elements feel like physical objects.
  • Material & Typography: Offers guidelines for using backdrop-filter for depth and optical sizing for typography to maintain visual hierarchy and legibility.
  • Use Case: Use this skill when building a complex, gesture-heavy component like a bottom sheet, a draggable card stack, or a custom navigation drawer that needs to feel native and responsive.

Quick Start

Apply the apple-design principles to refactor the current modal component to use spring-based, interruptible animations that track pointer velocity.

Frequently Asked Questions about apple-design

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

FAQPage Schema
How do I implement Apple-style fluid motion and spring physics in web development?▼

Apple-style fluid motion in web development uses spring-based, interruptible animations that track pointer velocity, replacing fixed-duration transitions to create native-feeling, responsive UI components.

What is the best way to build a draggable bottom sheet with rubber-banding gestures?▼

Building a draggable bottom sheet with rubber-banding requires 1:1 pointer tracking and momentum projection patterns, ensuring UI elements respond to gestures like physical objects and maintaining interruptibility during user interaction.

How do I apply material depth and optical sizing typography for web UI design?▼

Material depth and optical sizing typography for web UI design are applied using modern CSS like backdrop-filter to establish visual hierarchy and ensure legibility.

Does implementing gesture-driven interactions support reduced-motion accessibility requirements?▼

Gesture-driven interactions must satisfy reduced-motion accessibility requirements by providing alternative animation paths, ensuring users who prefer reduced motion can still navigate fluid web applications effectively without physical animation effects.

Why do my web animations feel static instead of native and responsive like iOS?▼

Web animations feel static when they rely on fixed-duration transitions rather than velocity-aware spring physics, lacking the interruptible, momentum-driven interactions that make native iOS components feel physical.

Related Skills

Explore More Design & Creative Skills→
KILWA73KILWA73

glassmorphism-perf-fixer

Optimize glass UI components by reducing backdrop-filter layers and enabling hardware acceleration.

Community
Intermediate
TrevorSTrevorS

playwright-e2e

Detect visual regressions in Svelte UI changes with Playwright screenshots.

Community
Intermediate
ayofemiadeayofemiade

react-spring-physics

Create physics-based animations for React applications using React Spring and Popmotion.

Community
Advanced
arthtyagiarthtyagi
1

web-animation-design

Design natural web motion for UI elements with easing and reduced-motion support.

Community
Advanced