apple-design

Implements Apple-style fluid interface design principles for web UI motion and typography.

Updated Jul 16, 2026
One-click install
npx skills add https://github.com/optimaxin/Tredev_Gems --skill apple-design-optimaxin
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: apple-design
Source: https://github.com/optimaxin/Tredev_Gems/tree/main/agent/skills/apple-design
Command: npx skills add https://github.com/optimaxin/Tredev_Gems --skill apple-design-optimaxin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Web interfaces often feel stiff and disconnected because animations ignore gesture velocity, cannot be interrupted mid-flight, and lack the physical behavior users expect from touch-driven platforms like iOS. ## Core Features & Use Cases - Gesture-Driven Motion Guidance: Provides concrete rules for pointer tracking, velocity handoff, momentum projection, rubber-banding, and interruptible spring animations using Pointer Events and libraries like Motion or Framer Motion. - Materials, Depth, and Typography: Covers translucent layers with backdrop-filter, hierarchy through material weight, optical sizing, size-specific tracking, and leading for web typography. - Accessibility and Design Foundations: Includes reduced-motion and reduced-transparency handling plus Apple's eight design principles for feedback, wayfinding, and simplicity. - Use Case: When building a draggable bottom sheet in a web app, apply the projection formula and spring parameters (damping 0.8, response 0.3) so a flick throws the sheet to the correct snap point and users can grab it mid-animation. ## Quick Start Ask the AI to review your drag interaction or animation code against Apple fluid interface principles and suggest spring parameters and velocity handoff fixes.

Frequently Asked Questions about apple-design

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

FAQPage Schema
How do I make web animations interruptible like iOS?

Use spring animations instead of CSS transitions or keyframes, and always start new animations from the element's live on-screen presentation value rather than the target value. Spring libraries like Motion or Framer Motion carry velocity through re-targeting, avoiding visible jumps on interruption.

How to implement a draggable bottom sheet with momentum on the web?

Track the pointer with Pointer Events and setPointerCapture, record velocity history, then project the resting position using the formula current + (v/1000)*d/(1-d) with d around 0.998. Snap to the nearest target and hand off release velocity to a spring with damping 0.8 and response 0.3.

What spring parameters should I use for UI animations?

Default to critically damped springs with damping 1.0 and response 0.3-0.4 seconds for most UI. Add bounce with damping around 0.8 only when the gesture carried momentum, such as flicks, throws, or drag releases.

Can I use CSS transitions for gesture-driven animations?

CSS transitions and keyframes should be avoided for gesture-driven motion because they cannot be grabbed and reversed mid-flight. They work for simple state changes, but springs are required for anything a user can touch and interrupt.

How do I handle reduced motion accessibility for animations?

Respond to the prefers-reduced-motion media query by replacing slides, springs, and parallax with short opacity cross-fades or static transitions. Also handle prefers-reduced-transparency by making translucent surfaces more solid and dropping blur effects.

Why does my drag interaction feel laggy or disconnected?

Lag usually comes from responding on release instead of pointer-down, artificial debounces or timers on the input path, or animating only after the gesture completes. Feedback must be continuous and 1:1 with the pointer throughout the entire interaction.