Apple's feel, your brand's look. A Claude skill for springs, gestures, interruptible transitions and reduced motion in web and Electron UIs.
The skill itself is written in German. Claude reads it either way and still answers in your language.
Claude loads this skill when it builds or reviews animation and interaction: drag, sheets, panels, sliders, carousels, transitions. It tells Claude how things should move and respond, based on Apple's WWDC design talks, chiefly Designing Fluid Interfaces (2018):
- instant feedback on press, not on release
- 1:1 tracking that keeps the grab point
- interruptible motion that always starts from the value on screen
- springs instead of fixed durations, with concrete defaults
- velocity handoff from gesture to animation
- momentum projection for flicks, rubber-banding at edges
- restraint: what not to animate
- reduced motion, contrast and transparency preferences
What it deliberately does not do is dictate the look. Typeface, colors, design tokens and materials come from your project or design system. The skill adds no system font, no glass and no Apple styling unless the project already uses them.
This is a reworked fork of Emil Kowalski's apple-design skill. The motion half of the original is outstanding. This version:
- separates feel from look: the project's brand always takes precedence
- removes the canned greeting so the skill can trigger mid-task without interrupting work
- adds a "what applies when" section: touch vs. pointer, apps vs. scroll and marketing sites
- cuts the general design principles down to the three that actually change outcomes
- adds web realities: the cost of
backdrop-filter, no Vibration API in Safari,prefers-reduced-transparencyonly in Chromium - fixes a Motion detail: according to the Motion docs, duration-based springs (
bounce+duration) don't take gesture velocity. For velocity handoff the skill uses physical spring parameters, converted from Apple's damping ratio and response with a small helper (appleSpring) - verifies the formulas: momentum projection and rubber-banding match Apple's sample code
Claude Code
npx skills@latest add levelboss1977/fluid-interfacesOr manually: copy the folder skills/fluid-interfaces to ~/.claude/skills/fluid-interfaces/ (all projects) or to .claude/skills/fluid-interfaces/ inside a project.
claude.ai
- Make a ZIP of the folder
skills/fluid-interfaces. The ZIP must contain the folderfluid-interfaceswithSKILL.mdinside. - Go to Settings → Capabilities → Skills and click "Upload skill". Code execution must be enabled; available on Pro, Max, Team and Enterprise.
Skills enabled for your claude.ai account also load in Claude Code when you're signed in with the same account.
- Apple WWDC 2018: Designing Fluid Interfaces
- Apple WWDC 2017: Designing Audio-Haptic Experiences
- Apple WWDC 2020: The Details of UI Typography
- Apple WWDC26: Principles of great design
- Motion documentation for the spring options
MIT, see LICENSE. Based on emilkowalski/skills, © 2026 Emil Kowalski, MIT. Not affiliated with Apple.
Claude lädt diesen Skill, wenn es Animation und Interaktion baut oder prüft: Drag, Sheets, Panels, Slider, Karussells, Übergänge. Er legt fest, wie sich Dinge bewegen und reagieren, auf Basis von Apples WWDC-Design-Talks, vor allem Designing Fluid Interfaces (2018):
- Feedback sofort beim Drücken, nicht erst beim Loslassen
- 1:1-Tracking, das den Griffpunkt behält
- unterbrechbare Bewegung, die immer vom sichtbaren Wert startet
- Springs statt fester Dauer, mit konkreten Defaults
- Übergabe der Geschwindigkeit von der Geste an die Animation
- Schwung-Projektion für Flicks, Rubber-Banding an Rändern
- Zurückhaltung: was nicht animiert wird
- Reduced Motion sowie Kontrast- und Transparenz-Einstellungen
Was er bewusst nicht macht: den Look vorgeben. Schrift, Farben, Design-Tokens und Materialien kommen aus dem Projekt oder seinem Design-System. Der Skill bringt keine Systemschrift, kein Glas und keinen Apple-Stil ein, solange das Projekt sie nicht schon nutzt.
Das ist ein überarbeiteter Fork von Emil Kowalskis Skill apple-design. Die Motion-Hälfte des Originals ist herausragend. Diese Fassung:
- trennt Feel und Look: Die Marke des Projekts hat immer Vorrang
- streicht die feste Begrüßung, damit der Skill mitten in einer Aufgabe greifen kann, ohne die Arbeit zu unterbrechen
- ergänzt einen Abschnitt „Was wann gilt“: Touch oder Zeiger, Apps oder Scroll- und Marketing-Seiten
- kürzt die allgemeinen Design-Prinzipien auf die drei, die das Ergebnis wirklich verändern
- ergänzt die Web-Realität: Kosten von
backdrop-filter, keine Vibration API in Safari,prefers-reduced-transparencynur in Chromium - korrigiert ein Motion-Detail: Laut Motion-Doku übernehmen dauerbasierte Springs (
bounce+duration) keine Gestengeschwindigkeit. Für die Übergabe nutzt der Skill deshalb physikalische Spring-Parameter, umgerechnet aus Apples Damping Ratio und Response mit einer kleinen Hilfsfunktion (appleSpring) - prüft die Formeln: Schwung-Projektion und Rubber-Banding entsprechen Apples Sample-Code
Claude Code
npx skills@latest add levelboss1977/fluid-interfacesOder von Hand: den Ordner skills/fluid-interfaces nach ~/.claude/skills/fluid-interfaces/ kopieren (für alle Projekte) oder nach .claude/skills/fluid-interfaces/ innerhalb eines Projekts.
claude.ai
- Den Ordner
skills/fluid-interfacesals ZIP packen. Im ZIP muss der Ordnerfluid-interfacesmit derSKILL.mdliegen. - Unter Einstellungen → Capabilities → Skills auf „Upload skill“ klicken. Codeausführung muss aktiviert sein; verfügbar für Pro, Max, Team und Enterprise.
Skills, die in deinem claude.ai-Konto aktiviert sind, laden auch in Claude Code, wenn du dort mit demselben Konto angemeldet bist.
- Apple WWDC 2018: Designing Fluid Interfaces
- Apple WWDC 2017: Designing Audio-Haptic Experiences
- Apple WWDC 2020: The Details of UI Typography
- Apple WWDC26: Principles of great design
- Motion-Dokumentation zu den Spring-Optionen
MIT, siehe LICENSE. Basiert auf emilkowalski/skills, © 2026 Emil Kowalski, MIT. Keine Verbindung zu Apple.