mcpField
A
apple-design

apple-design

github.com/gethamsterDesign & UI3365 installsUpdated 5w ago
Repository

About apple-design

apple-design is a skill for interface designers and developers that translates Apple WWDC motion principles to the web. It focuses on interruptible, velocity-aware interactions built with springs.

Key features

  1. 01Applies WWDC interface principles to the web
  2. 02Starts motion from the current screen value
  3. 03Inherits and projects user velocity
  4. 04Supports grabbing and reversing motion
  5. 05Uses springs for interruptible animation

Use cases

  1. 01Designing interfaces that respond to dragging
  2. 02Building interactions that can reverse at any time
  3. 03Applying motion principles with CSS and Pointer Events

Install

Copy the command and run it in a terminal.

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

After installing, type/apple-designin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

sections/
1-response-kill-latency.md
10-gesture-design-details-the-feel-checklist.md
11-frame-level-smoothness.md
12-materials-depth-translucency-conveys-hierarchy.md
13-multimodal-feedback-motion-sound-haptics.md
14-reduced-motion-accessibility.md
15-typography-optical-sizing-tracking-leading.md
16-design-foundations-the-eight-principles.md
17-process.md
2-direct-manipulation-1-1-tracking.md
3-interruptibility-the-single-most-important-principle.md
4-behavior-over-animation-use-springs.md
5-velocity-handoff-the-seam-between-drag-and-animation.md
6-momentum-projection-animate-to-where-the-gesture-is-going.md
7-spatial-consistency-symmetric-paths-anchored-origins.md
8-hint-in-the-direction-of-the-gesture.md
9-rubber-banding-soft-boundaries.md
quick-reference.md
the-core-idea.md

Details

From the project README

Apple Design

How Apple builds interfaces that stop feeling like a computer and start feeling like an extension of you. This knowledge comes from Apple's WWDC design talks — chiefly Designing Fluid Interfaces (WWDC 2018) — distilled and translated into the web platform (CSS, Pointer Events, requestAnimationFrame, spring libraries like Motion/Framer Motion).

The through-line: 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. Springs are the tool that makes all of this natural, because they are inherently interruptible and velocity-aware.

Comments

Markdown supported