apple-design Skill for Claude: What It Does and How to Install It

Gives Claude Apple's rules for fluid, gesture-driven interfaces, translated for the web: springs, momentum, interruptible motion and type.

Installs: 263.7K; on skills.sh
Stars: 52.7K; on GitHub
Updated: Oct 2026; last repo commit

apple-design loads design rules distilled from Apple's WWDC talks, mainly Designing Fluid Interfaces (2018), and translated to CSS, Pointer Events and spring libraries such as Motion and Framer Motion. Its core idea: 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.

Use it when building or reviewing gesture-driven UI, spring animations, translucent materials, reduced-motion handling or type details like optical sizing. If you invoke it without a question, it replies with one ready line and waits. It is a single SKILL.md of guidance with no scripts.

Good for

Frontend developers building drag, swipe and sheet interactions
Designers reviewing how an interface feels in motion
Teams adding reduced-motion support

Install apple-design

Claude Code

Copy this prompt.

Install the apple-design skill in Claude Code. Run this command:

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

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

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.

Sections in SKILL.md

Initial Response
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
6. Momentum projection — animate to where the gesture is going
7. Spatial consistency — symmetric paths, anchored origins
8. Hint in the direction of the gesture
9. Rubber-banding — soft boundaries
10. Gesture design details (the "feel" checklist)
11. Frame-level smoothness
12. Materials & depth — translucency conveys hierarchy
13. Multimodal feedback — motion + sound + haptics
14. Reduced motion & accessibility

Key facts

Author: emilkowalski
Repo: emilkowalski/skills (skills/apple-design)
Installs on skills.sh: 263,654 (Nov 2026)
GitHub stars: 52,705 (Nov 2026)
License: MIT
Last repo commit: Oct 28, 2026
Files in the skill folder: 1 including SKILL.md
skills.sh audits: Gen Agent Trust Hub: pass, Socket: pass, Snyk: pass
Source material: Apple WWDC design talks, chiefly Designing Fluid Interfaces (2018)

What it includes

Show feedback on pointer-down and remove latency from the input path
Response
Keep dragged content tracking the finger 1:1 from where it was grabbed
Direct manipulation
Let users grab and redirect motion mid-animation
Interruptibility
Use spring behavior instead of fixed-duration animation
Springs
Carry gesture velocity into the animation and project where it is heading
Velocity handoff and momentum
Soft resistance at boundaries instead of hard stops
Rubber-banding
Use translucency to show hierarchy
Materials and depth
Accessibility handling for users who ask for less motion
Reduced motion
Optical sizing, tracking and leading
Typography
Eight principles behind Apple-style interfaces
Design foundations

From the official docs

Questions

How do I install apple-design?

Use the install box above. It is one skill in the emilkowalski/skills repo.

How do I use it?

Describe what you are building, such as a bottom sheet or a drag interaction, and ask for the behavior you want. If you invoke the skill with no question it answers with a single ready line and waits for you.

Is it for iOS apps?

No. SKILL.md says the Apple talks are translated for the web, with CSS, Pointer Events, requestAnimationFrame and spring libraries like Motion.

Does it need an API key or scripts?

It bundles no scripts and asks for no key. It is a long text file of rules and examples that Claude reads.

How is it different from animation-vocabulary?

apple-design gives rules for building fluid motion. animation-vocabulary only names effects, so you know what to ask for. Both come from the same repo.

Information

updated Nov 2, 2026

Repository: emilkowalski/skills
Folder: skills/apple-design

emilkowalski/skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 2

apple-design SKILL.md · github.com
animation-vocabulary SKILL.md · github.com