Fluid Interface
Springy, interruptible, physical motion and materials for the web.
What it does
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.
Install in under a minute
Mac or Linux, after you download
unzip fluid-interface.zip -d ~/.claude/skills/Windows PowerShell
Expand-Archive fluid-interface.zip -DestinationPath $HOME\.claude\skills- Start a new Claude Code session so it sees the skill.
- Ask in plain words, for example: "Use Fluid Interface on this project."
- Unzip the download, then zip just the fluid-interface folder if your computer added an extra folder.
- In Claude.ai, open Settings, then Capabilities, and upload it under Skills.
- Turn the skill on and ask Claude to use it.
Fluid Interface uses the open SKILL.md format, so it also works in agents like Cursor, Gemini CLI, GitHub Copilot and Codex. Copy the fluid-interface folder into that agent's skills folder, for example .cursor/skills/ or .github/skills/ in your project.
What's inside
The 16 main sections of the SKILL.md, in order.
- Initial Response
- The Core Idea
- Response, kill latency
- Direct manipulation, 1:1 tracking
- Interruptibility, the single most important principle
- Behavior over animation, use springs
- Velocity handoff, the seam between drag and animation
- Momentum projection, animate to where the gesture is going
- Spatial consistency, symmetric paths, anchored origins
- Hint in the direction of the gesture
- Rubber-banding, soft boundaries
- Gesture design details
- Frame-level smoothness
- Materials & depth, translucency conveys hierarchy
- Multimodal feedback, motion + sound + haptics
- Reduced motion & accessibility
In the download: LICENSE, NOTICE.md, SKILL.md
Credit and license
Fluid Interface is a renamed, packaged copy of apple-design by Emil Kowalski (github.com/emilkowalski/skills), used under the MIT license. The license and a list of changes ship inside the download.
Questions
Does Fluid Interface work in Claude.ai, not just Claude Code?
Yes. In Claude.ai, upload the fluid-interface folder as a zip in Settings under Capabilities. It also works in other agents that support Agent Skills, like Cursor, Gemini CLI and GitHub Copilot.
What do I get?
A zip with the fluid-interface folder: its SKILL.md (3,948 words) and its license files. One payment, instant download.
Who made Fluid Interface?
It's a renamed, packaged copy of apple-design by Emil Kowalski, used under the MIT license. The license and a list of changes ship inside the download.