apple-designby Emil Kowalski

Apple Design Skill.

A Claude Code and Codex skill for UX research: apple's gestures, physical motion, and spatial hierarchy translated for the web.

UX & Research
UI code

Download OpenDesign View usage guide

emilkowalski/skills · skills/apple-design/SKILL.mdSKILL.md

--- name: apple-design description: 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 … --- ## The Core Idea ## 1. Response — kill latency ## 2. Direct manipulation — 1:1 tracking ## 3. Interruptibility — the single most important principle ## 4. Behavior over animation — use springs ## 5. Velocity handoff — the seam between drag and animation

Front matter and section headings read from the upstream file on 2026-09-14 · 22,559 characters in full

01 What it does

What the apple-design Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

Apple Design distills Apple's WWDC interface talks, chiefly Designing Fluid Interfaces (WWDC 2018), into rules for building fluid, physical web UI. It is aimed at designers and developers working on gesture-driven interfaces: drag, swipe, sheets, springs, momentum, interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading) and reduced-motion behaviour.

The through-line is that motion should start from the current on-screen value, inherit the user's velocity, project momentum forward, and be grabbable and reversible at any instant. Springs replace fixed-duration animations because they are inherently interruptible and velocity-aware, and the skill closes with Apple's eight design principles used as shared vocabulary.

What it produces

Press-feedback CSS that scales the control on :active with a 100ms ease-out transition.
Motion spring calls showing the critically damped default and the momentum bounce variant side by side.
A project() helper implementing momentum projection with decelerationRate defaulting to 0.998.
Reduced-transparency CSS that replaces translucent toolbars with solid backgrounds and no blur.

See the example prompt ↗

How It Works

01
Respond on pointer-down
Feedback belongs to the press, not the release: highlight the control the instant it is pressed, and treat anything non-essential on the input path, including the ~300ms tap delay, as a regression.
02
Track the Pointer 1:1
Use Pointer Events with capture so tracking survives the pointer leaving the element's bounds, and respect where the user grabbed rather than snapping to the element's center.
03
Make Motion Interruptible
A moving element must be grabbable and reversible mid-flight; the user should never have to wait for the current animation to finish before redirecting it.
04
Model Motion with Springs
A spring absorbs new input by simply changing its target, so the motion stays continuous; fixed-duration scripts have nothing to re-target.
05
Hand Off Release Velocity
Give the spring the pointer's velocity at release so there is no seam between dragging and animating; normalize by the remaining distance when the API wants relative velocity.
06
Project Momentum, Then Snap
Do not snap from where the finger let go; project the resting position the way scroll deceleration would and choose the snap target nearest that projection.

02 Find your fit

When to Use the apple-design Skill

Use the apple-design skill in Claude Code or Codex when the job is UX research of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

Building or reviewing gesture-driven UI such as drag, swipe, sheet, momentum and interruptible transitions.
Working on translucent materials and depth, where nav bars, toolbars and sheets act as a floating functional layer.
Type work on a size scale, where optical sizing, tracking and leading have to change with size.
Accessibility passes where reduced motion, reduced transparency and increased contrast are baked into components rather than bolted on.
Teams that want Apple's design principles as explicit shared vocabulary when arguing about a decision.

Know the Boundaries

Pre-scripted or fixed-duration animation, which the skill rules out as soon as the user can touch the element.
Recognizers that only report a final gesture state, because they discard the continuous tracking that feedback depends on.
Opaque chrome that consumes a fixed strip instead of letting content scroll underneath a translucent layer.
Confirmations as a default habit; the file reserves them for genuinely destructive, irreversible actions only.

What to Provide

The gesture code and its pointer historyBring the Pointer Events implementation, since the skill expects setPointerCapture and a short velocity/position history rather than only the current point.
A spring library that re-targets velocityWeb mapping runs through Motion / Framer Motion, and the library has to carry velocity through a re-target; not every spring implementation does.
The translucent chrome you want reviewedToolbars, nav bars and sheets are built as translucent layers with backdrop-filter blur and a semi-transparent background, with content scrolling beneath them.

03 Inside the skill

Rules the apple-design Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

Default to a Critically Damped Spring
Start most UI at damping 1.0 so it settles with no overshoot; add bounce, around damping 0.8, only where the gesture itself carried momentum such as a flick or drag release.
Animate from the Presentation Value
On interrupt, read the element's live on-screen transform and start the new animation from there; starting from the logical or target value produces a visible jump.
Do Not Drive Gestures with CSS Transitions
CSS transitions and @keyframes cannot be smoothly grabbed and reversed mid-flight, so gesture-driven motion must be handled by a spring library.
Split 2D Motion into Two Springs
Run independent X and Y springs instead of one spring on a 2D distance, because the axes drift out of sync when their velocities differ.
Use Apple's Projection, Not the Textbook One
The physics-textbook v²/(2·decel) is not what Apple ships; use the exponential-decay form with decelerationRate 0.998 for normal scroll feel, or 0.99 for something snappier.
Blend Velocity Through a Reversal
Swapping one animation for another at the moment a gesture reverses creates a velocity discontinuity, a brick wall; pick a spring library that re-targets from the current velocity instead.
Never Stack Light Translucent Surfaces
Material weight is how hierarchy is read: heavier materials separate structural regions and lighter ones highlight interactive elements, so keep light translucent layers off each other.
Never Use One Tracking Value for All Sizes
Letter-spacing is size-specific: large display text wants negative tracking while small text wants slightly positive tracking, so a fixed letter-spacing will be wrong somewhere.

04 Put it to work

Install apple-design in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add apple-design to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

npx skills add https://github.com/emilkowalski/skills --skill apple-design

Generic skills CLI form for skills/apple-design/SKILL.md; the repository may document its own path.

Give the Skill a First UX Research Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt

I'm building a bottom sheet in [React] that users drag down to dismiss. It currently uses a CSS transition, so a flick snaps from wherever I released and the sheet can't be grabbed again while it's closing. Rework it with Pointer Events and a spring so it tracks the finger 1:1, hands off the release velocity, and projects momentum to pick the snap point.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

Grab a closing element again mid-flight and confirm it follows the finger instead of completing its close first.
Reverse a gesture and watch for a velocity discontinuity, which means velocity was not blended through the re-target.
Test with real people in real context, since judgement of motion breaks down on a developer's machine.
Replay the motion in slow motion or frame by frame, because the interesting defects are invisible at full speed.
Confirm the landing target came from the projected endpoint rather than the release point.
Check the reduced-transparency variant: translucent surfaces should become frostier or solid, with background opacity raised and blur dropped.

In OpenDesign import apple-design from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: Emil Kowalski
Repository: github.com/emilkowalski/skills Branch main
Skill file: skills/apple-design/SKILL.md Content checksum recorded at verification; commit d23d7f8
License: MIT From LICENSE.
Repository stars: 37,516 GitHub snapshot taken 2026-09-14 for the whole emilkowalski/skills repository, which contains 9 skills in this catalog. Not a rating or usage count for apple-design.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

1. Response — kill latencyRespond on pointer-down, audit every latency, keep feedback continuous throughout the interaction.
2. Direct manipulation — 1:1 trackingGlue content to the pointer, respect the grab offset, keep a short velocity history.
3. Interruptibility — the single most important principleNever lock input, animate from presentation value, blend velocity on reversal, split 2D springs.
4. Behavior over animation — use springsDamping ratio and response replace physics; damping 1.0 default, bounce only for momentum.
5. Velocity handoff — the seam between drag and animationPass release velocity into the spring, normalizing by remaining distance when req

The Skill's Own Description

“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.”

Front-matter description from SKILL.md. The full file is about 22,559 characters. Read the full file on GitHub.

Apple Design

Run apple-design on a Real UX Research Task.

Download OpenDesign, import apple-design from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills

Terminal

npx skills add https://github.com/emilkowalski/skills --skill apple-design

What the apple-design Skill Does in Claude Code and Codex

In the Skill's Own Terms

How It Works

When to Use the apple-design Skill

Good Fit

Know the Boundaries

What to Provide

Rules the apple-design Skill Gives Claude Code and Codex

Default to a Critically Damped Spring

Animate from the Presentation Value

Do Not Drive Gestures with CSS Transitions

Split 2D Motion into Two Springs

Use Apple's Projection, Not the Textbook One

Blend Velocity Through a Reversal

Never Stack Light Translucent Surfaces

Never Use One Tracking Value for All Sizes