Apple Design logo

Apple Design

Visit

Apple Design is an MIT skill in emilkowalski/skills that translates WWDC fluid-interface talks into web motion, springs, and materials.

Share:
View alternatives

Apple Design is a loadable skill that turns Apple WWDC interface talks into web rules for gesture UI, springs, and translucent materials. It lives at skills/apple-design inside emilkowalski/skills, MIT, created 2026-03-16, Markdown. On 2026-09-14 GitHub listed 37,460 stars and 2,108 forks for the parent repo (12 skills, not apple-design alone). Install is npx skills@latest add emilkowalski/skills. It showed up on X For You as the Apple-style UI skill for Codex and web/app screens.

The pack is not Apple, not Human Interface Guidelines as a product, and not a GUI. Compare UI Skills if you wanted a broader UI/UX pack, Frontend Design if you needed Anthropic's official frontend skill, or Agent Skills if you wanted Addy Osmani's engineering lifecycle pack.

Key Features

  • Trigger: SKILL.md says to load it for gesture-driven UI, spring animation, drag/swipe/sheet, momentum, interruptible transitions, translucent materials, optical type, reduced motion, or Apple-style foundations (feedback, spatial consistency, restraint).
  • Core idea: motion starts from the live on-screen value, inherits finger velocity, projects momentum, and can be grabbed mid-flight. Springs are the default because they are interruptible.
  • Concrete numbers from the skill: default UI spring damping 1.0 / response 0.3-0.4; flick bounce damping ~0.8; momentum projection decelerationRate ≈ 0.998; rubber-band constant 0.55. Maps to Motion / Framer Motion bounce + duration.
  • Web mapping: Pointer Events + setPointerCapture, transform/opacity only, backdrop-filter for materials, size-specific tracking, prefers-reduced-motion as cross-fade not slide.
  • Sibling skills in the same repo: emil-design-eng, animate, animate-expo, review-animations, improve-animations, find-animation-opportunities, animation-vocabulary, write-swift, pick-ui-library, prototype, ask-sonner.

Limitation: 37,460 stars is the collection, not a certified Apple port. The skill itself cites WWDC 2018 Designing Fluid Interfaces, WWDC 2020 typography, audio-haptic talks, and Principles of Great Design (WWDC 2026). CSS transitions and @keyframes are explicitly the wrong tool for grab-and-reverse gestures. Reduced-motion users must get a fade, not a spring.

Use Cases

  • Claude Code / Codex / other skill hosts building web or app UI that should feel like iOS sheets, not generic CSS ease.
  • Design-eng work that already uses Motion, Vaul, or Embla and needs velocity handoff instead of snap-on-release.
  • People who should use Frontend Design instead if they wanted Anthropic's official frontend skill, not Apple-motion doctrine.

Pricing

Piece Price Notes from first-party pages 2026-09-14
Skill pack $0 MIT. npx skills@latest add emilkowalski/skills. About 37,460 stars on the parent repo.
Host agent Confirm that product Claude Code, Codex, or any host that loads SKILL.md.
Motion libraries Your stack Skill examples use Motion / Framer Motion. Those licenses are separate.

Getting Started

  1. npx skills@latest add emilkowalski/skills or clone github.com/emilkowalski/skills.
  2. Point the host at skills/apple-design/SKILL.md.
  3. Ask for a sheet, drawer, or drag interaction and require interruptible springs from the presentation value.
  4. Newsletter and extras: animations.dev/skills.

First-party resource: SKILL.md and the collection README.

Frequently Asked Questions

Is this official Apple?

No. It is Emil Kowalski's distillation for the web. Apple's HIG remains the first-party spec.

Do I install only apple-design?

The documented install pulls the whole collection. You can copy just skills/apple-design into a skill directory if your host supports a single folder.

Can I keep CSS keyframes?

The skill says not for anything the user can grab. Use springs that re-target from current velocity.

Alternatives

Tips

  1. Quote MIT, 12 skills, 37,460 parent stars, and damping 1.0 from pages checked 2026-09-14.
  2. Do not claim the skill is Apple or that 35k stars belong to apple-design alone.
  3. Pair with review-animations in the same repo after the first pass.

Conclusion

Apple Design is the WWDC-to-web motion skill that showed up on For You: springs, velocity handoff, materials, and reduced-motion fades. Start at emilkowalski/skills. If you wanted Anthropic's official frontend pack, open Frontend Design instead.

Comments

No comments yet. Be the first to comment!