Build Fluid Interfaces
Apple's approach to fluid, physical interfaces, translated for the web. Your agent builds gesture-driven UI with real springs, velocity handoff, and motion you can grab and reverse mid-flight.
Install the skill or give me an instruction how to install it - apple-design from https://github.com/emilkowalski/skills Free Open source Works in Claude, Cursor, Codex & more
What it does
Teach your coding agent to build interfaces the way Apple does. Once installed, the skill loads on its own whenever the agent writes or reviews gesture-driven UI: spring animations, drag and swipe interactions, sheets and drawers, translucent materials, UI typography, and reduced-motion fallbacks. There is nothing to run or configure.
The knowledge is distilled from Apple's WWDC design talks, chiefly Designing Fluid Interfaces from 2018, and translated to the web platform: CSS, Pointer Events, requestAnimationFrame, and spring libraries like Motion. It carries the exact values Apple ships. A drawer spring is damping 0.8, response 0.3. Flicks land where momentum projects them, using the projection function from Apple's own sample code. Interrupted animations restart from the live on-screen value, so a closing sheet follows your finger the instant you grab it back.
The result is an agent that stops guessing at easings and spring parameters and starts making the calls a design engineer would.
When to use it
- Your UI works but still feels like a computer
Your agent swaps eased keyframes for springs tuned with the values Apple ships, damping 1.0 and a 0.3 to 0.4 second response for most UI, so motion settles like a real object instead of playing a canned clip.
- You're building a swipe gesture or bottom sheet
The skill hands your agent the whole mechanic: 1:1 tracking from the grab point, velocity handoff at release, momentum projection to pick the snap target, and rubber-banding at the edges.
- Animations jump when the user grabs them mid-flight
Your agent animates from the live on-screen value and carries the gesture's velocity through, so a half-closed sheet the user catches again follows the finger instead of snapping to its end state.
- Frosted glass panels look muddy or unreadable
You get Apple's material system as backdrop-filter recipes, from blur and shadow weight that scales with surface size to vibrancy rules that keep text legible, with a solid fallback when the user prefers reduced transparency.
FAQ
Is apple-design official Apple documentation?
No. apple-design is an independent skill that distills Apple's public WWDC design talks, chiefly Designing Fluid Interfaces from 2018, and translates them to web tech: CSS, Pointer Events, requestAnimationFrame, and spring libraries like Motion. It is not affiliated with or endorsed by Apple.
When do I want apple-design instead of emil-design-eng?
Reach for apple-design when you are building gesture-driven UI: drag and swipe interactions, sheets, spring physics, velocity handoff, rubber-banding, translucent materials. emil-design-eng covers Emil's everyday animation and design guidance; apple-design goes deeper on Apple's fluid-interface system, with shipped damping and response values.
Is it free to use?
Yes. apple-design ships in emilkowalski/skills, an open-source collection under the MIT license, with no paid tier and no signup. The animations.dev course Emil links to is optional.
Which coding agents does apple-design work with?
apple-design works with Claude Code, Cursor, and any agent that supports the skills format. One command installs the whole collection: npx skills@latest add emilkowalski/skills. Once installed, the agent consults it automatically whenever you build or review springs, gestures, materials, or UI typography.
