apple-design

Q: What does the apple-design skill do?

Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces. Respond on pointer-down, not on release. Highlight a button the instant it's pressed. Waiting for click/touch-up to show feedback feels dead. Use Pointer Events with setPointerCapture so tracking continues even when the pointer leaves the element's bounds.

Q: What does apple-design require?

Apple frames design as serving four human needs: safety/predictability, understanding, achievement, and joy. Every rule here serves one of them. Track a short velocity/position history (last few pointermove events), not just the current point — you'll need velocity at release. Drag/swipe: require a small movement threshold (hysteresis, ~10px) before committing to a direction, then track 1:1. Grouping & mapping. Proximity implies relationship; place a control near what it affects and arrange controls to mirror what they change. If you need a label to explain a control, the mapping is weak. | Need | Technique | Concrete value |

Q: How do I install apple-design?

Run: npx -y skills add https://github.com/emilkowalski/skills --skill apple-design --agent claude-code — the source lives at github.com/emilkowalski/skills.

Agent skill from emilkowalski/skills.

emilkowalski ↓ 32k

Claude Code

View source ↗

What it does

Respond on pointer-down, not on release. Highlight a button the instant it's pressed. Waiting for click/touch-up to show feedback feels dead.
Use Pointer Events with setPointerCapture so tracking continues even when the pointer leaves the element's bounds.
Track a short velocity/position history (last few pointermove events), not just the current point — you'll need velocity at release.
Never lock out input during a transition.
Decompose 2D motion into independent X and Y springs. A single spring on a 2D distance desyncs when X and Y have different velocities.
Damping ratio — controls overshoot. 1.0 = critically damped, no bounce, smooth settle. < 1.0 = overshoots and oscillates. Lower = bouncier.
Start most UI at damping 1.0 (critically damped) — graceful and non-distracting.

Requirements & configuration

Apple frames design as serving four human needs: safety/predictability, understanding, achievement, and joy. Every rule here serves one of them.
Track a short velocity/position history (last few pointermove events), not just the current point — you'll need velocity at release.
Drag/swipe: require a small movement threshold (hysteresis, ~10px) before committing to a direction, then track 1:1.
Grouping & mapping. Proximity implies relationship; place a control near what it affects and arrange controls to mirror what they change. If you need a label to explain a control, the mapping is weak.
| Need | Technique | Concrete value |

Derived from the skill's own SKILL.md documentation · extracted 2026-07-23

Source

Repository: https://github.com/emilkowalski/skills

apple-design FAQ

What does the apple-design skill do?

Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces. Respond on pointer-down, not on release. Highlight a button the instant it's pressed. Waiting for click/touch-up to show feedback feels dead. Use Pointer Events with setPointerCapture so tracking continues even when the pointer leaves the element's bounds.

What does apple-design require?

Apple frames design as serving four human needs: safety/predictability, understanding, achievement, and joy. Every rule here serves one of them. Track a short velocity/position history (last few pointermove events), not just the current point — you'll need velocity at release. Drag/swipe: require a small movement threshold (hysteresis, ~10px) before committing to a direction, then track 1:1. Grouping & mapping. Proximity implies relationship; place a control near what it affects and arrange controls to mirror what they change. If you need a label to explain a control, the mapping is weak. | Need | Technique | Concrete value |

How do I install apple-design?

Run: npx -y skills add https://github.com/emilkowalski/skills --skill apple-design --agent claude-code — the source lives at github.com/emilkowalski/skills.

Maintain apple-design?

Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.

[![apple-design on getagentictools](https://getagentictools.com/badge/skills/emilkowalski-skills-apple-design.svg)](https://getagentictools.com/skills/emilkowalski-skills-apple-design?ref=badge)

npx agentictools info skills/emilkowalski-skills-apple-design

The second line is the CLI lookup for this page — handy in READMEs and docs.