Apple design skill: Apple's fluid interface principles for web agents

Source: emilkowalski/skills · Maintainer: community: Emil Kowalski · License: MIT · Checked: 24 October 2026

What is the apple-design skill?

The apple-design skill gives your coding agent Apple's approach to fluid, physical interfaces, rewritten for the web: springs instead of fixed-duration animations, gestures that track the finger 1:1, motion that can be grabbed and reversed mid-flight, plus materials, typography and reduced-motion rules. It is for frontend developers building drawers, sheets, carousels and other touch-heavy UI that should feel native.

It lives in Emil Kowalski's emilkowalski/skills repo, whose README describes it as "Apple’s principles for interface design and fluid motion, distilled from their WWDC design talks and translated for the web." The skill's description begins: "Apple's approach to interface design and fluid, physical motion, translated for the web."

As of 24 October 2026, its skills.sh page listed about 239,800 installs (snapshot, 24 October 2026), third in the repo after emil-design-eng and review-animations. Apple is not involved; Emil Kowalski wrote it from Apple's public talks.

What does it do?

The folder holds one file, a SKILL.md of about 3,500 words. The description lists its triggers: building or reviewing gesture-driven UI, spring animations, drag, swipe and sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography, reduced motion, and the design foundations behind Apple-style interfaces. Invoked with no question, it replies with one fixed greeting and waits.

The skill's main idea, in its own words: "an interface feels alive when motion starts from the current on-screen value, inherits the user's velocity, projects momentum forward, and can be grabbed and reversed at any instant."

Its 17 numbered sections cover:

• Response. Give feedback on pointer-down, not release, and audit every debounce and timer on the input path.
• Direct manipulation. Drags stay glued to the finger and respect the grab offset, using Pointer Events and setPointerCapture.
• Interruptibility. Called "the single most important principle." Never lock out input during a transition; always animate from the current on-screen value.
• Springs. Think in damping ratio and response, not duration.
• Velocity handoff and momentum projection. Hand the release velocity to the spring, and pick a snap point from where a flick is heading, using the projection function from Apple's sample code.
• Spatial consistency, hinting and rubber-banding. Exit the way you entered, anchor menus to their trigger, resist progressively at edges.
• Materials. Translucent toolbars with backdrop-filter, material weight as hierarchy, never a light translucent surface on another.
• Multimodal feedback. Motion, sound and haptics fire on the same frame, and only where they earn it.
• Reduced motion and accessibility. Handle prefers-reduced-motion, prefers-reduced-transparency and prefers-contrast.
• Typography. Size-specific tracking and leading, and the system font first.
• Design foundations and process. Apple's eight design principles, from Purpose to Delight, and interactive prototyping.

The spring values it lists as "Concrete values Apple ships":

For the web, it maps these to the bounce and duration spring options in Motion (Framer Motion): bounce: 0 for the critically damped default, a little bounce only after a flick.

How do you install it?

The skills.sh page gives this command for the skills CLI:

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

The repo README installs from the whole collection and lets you choose skills:

npx skills@latest add emilkowalski/skills

Add -g to install for every project. The folder lands in .claude/skills/apple-design/ in your project, or ~/.claude/skills/apple-design/ with -g, the standard Claude Code skill locations. Codex and Cursor read the same SKILL.md format; see Codex skills and Cursor skills.

On claude.ai, you can zip the folder and upload it under Customize > Skills, following the Claude help article on skills, with code execution turned on.

How do you use it?

The skill is model-invoked, so the agent can load it when a task mentions springs, sheets or gestures, or you can call /apple-design directly. Give it a concrete component. Example prompts (suggestions, not quotes from the repo):

• Build a bottom sheet with drag to dismiss, momentum snapping to three heights and rubber-banding at the top.
• Our image carousel snaps to the nearest slide on release. Make it project momentum like iOS.
• Review this drawer: can the user grab it mid-animation and reverse it?
• Make the sticky toolbar a translucent material and handle prefers-reduced-transparency.
• Set up a type scale with size-specific letter-spacing and line-height for headings and body.

Requirements: none beyond your stack. The code samples use plain CSS, Pointer Events and the motion package's animate function; if you want spring physics in React or vanilla JS, you'll need Motion or a similar spring library.

Tips and limits

• Springs over CSS for gestures. The skill says to avoid CSS transitions and @keyframes for anything gesture-driven. The repo's emil-design-eng skill draws the same line: "Use CSS for predetermined animations; JS for dynamic, interruptible ones."
• Translucency is a style choice. Section 12 pushes backdrop-filter glass for toolbars and sheets. If your design system uses solid surfaces, tell the agent to skip that section.
• Values are approximations. Mapping Apple's damping and response to Motion's bounce and duration is described as close, not exact. Tune by eye on a real device.
• Paraphrase, not Apple's text. It quotes short lines from WWDC talks and summarizes the rest. Check Apple's own talks if you need the primary source.
• Security audit. As of 24 October 2026, skills.sh showed Pass from Gen Agent Trust Hub, Socket and Snyk. The skill runs no scripts.

The repo's MIT License (copyright 2026 Emil Kowalski) lets you copy and change the skill as long as you keep the notice.

Save it in your Kipt library

In Kipt, open Skills and paste the skill's GitHub folder link into the import box. Kipt reads the SKILL.md; for a repo with many skills, like this one, it shows a list to pick from, so you can take review-animations too. You can also drop the folder or a .zip. Your skills live in your own private GitHub repo and install into Claude Code or Codex with one command:

npx skills add https://github.com/<you>/<repo>.git --all -g

Kipt is not affiliated with Emil Kowalski, emilkowalski/skills or Apple.

Similar skills

• Emil Kowalski skill (emil-design-eng): the repo's main skill for easing, durations and UI polish.
• Review animations skill: a strict review of motion code that ends in Block or Approve.
• Frontend design skill: Anthropic's skill for distinctive UI direction.
• Accessibility skill: a wider audit that covers reduced motion and more.