102.7K+Download
Skip to the usage guide
apple-designby Emil Kowalski

Apple Design Skill.

A skill for adapting Apple-inspired gestures, physical motion and spatial hierarchy to web interfaces.

  • Web & UI
  • UI motion
Download OpenDesignView 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

  • Implementation or review guidance for the requested gesture-driven web interface, including velocity handoff, interruptibility and momentum-based snap targets where relevant.
  • Component-level adjustments to typography, material depth and reduced-motion behavior as required by the brief; the source does not prescribe one fixed artifact bundle.
See the example prompt ↗

How It Works

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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 this skill for gesture-driven web interfaces and motion refinement. It provides implementation guidance, not a user-research study.

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

  • Interaction and Current ImplementationDescribe what users should drag, swipe or dismiss. Share the existing component if there is one, including the point where motion feels delayed or jumps.
  • Framework and Motion ConstraintsState the web stack and any existing animation library. The skill maps its examples to CSS, Pointer Events and spring libraries such as Motion; you do not need to implement the spring before asking for help.
  • Surface or Typography to ReviewFor a visual review, identify the toolbar, sheet or type hierarchy and the relevant screen states, including reduced-motion or reduced-transparency variants.

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.

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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.

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

  8. 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 Gesture-Driven Interface 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.

Editorial starter example based on the source workflow; not a recorded run.

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 check your installed version’s skill list and supported tools. If this skill is absent, consult the current import guide and the upstream setup instructions. The source review is not a live compatibility test.

Download OpenDesignRead 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. 1. Response — kill latencyRespond on pointer-down, audit every latency, keep feedback continuous throughout the interaction.
  2. 2. Direct manipulation — 1:1 trackingGlue content to the pointer, respect the grab offset, keep a short velocity history.
  3. 3. Interruptibility — the single most important principleNever lock input, animate from presentation value, blend velocity on reversal, split 2D springs.
  4. 4. Behavior over animation — use springsDamping ratio and response replace physics; damping 1.0 default, bounce only for momentum.
  5. 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

Apply apple-design to a Real Interface.

Start with the example task above, supply the listed inputs and check the required tools. Review the output against the checklist before using it in a project.

Download OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/emilkowalski/skills --skill apple-design