What is the apple-design skill?
The apple-design skill is a SKILL.md that translates Apple's WWDC design talks into web rules for an AI coding agent. It covers instant response, 1:1 dragging, interruptible springs, momentum projection, rubber-banding, translucent materials, reduced motion and type tracking, with CSS and JavaScript examples.
The apple-design skill is a single SKILL.md on Apple's approach to interface design and fluid, physical motion, translated for the web. Its knowledge comes from Apple's WWDC design talks, chiefly Designing Fluid Interfaces, and it maps them to CSS, Pointer Events and spring libraries.
This copy lives in boraoztunc/skills, whose README says it is vendored from emilkowalski/skills. The skill's through-line is that motion should start from the current on-screen value, inherit the user's velocity, and be reversible at any instant.
What changes in your agent's output
- Feedback fires on pointer-down and updates continuously during a drag, instead of only on release.
- Gesture-driven motion uses springs that animate from the live value, not CSS keyframes that restart from zero.
- Drag release hands velocity to the spring, and flicks project forward to a resting point before snapping.
- Sheets, menus and popovers keep their origin and exit along the path they entered.
Who the apple-design skill is for
Best for
- Drawers, bottom sheets, carousels, sliders and anything a user can drag or flick.
- Teams that want interactions to feel like iOS on the web.
- Reviews of springs, translucent chrome, reduced-motion handling and typography tracking.
Not for
- Native iOS code. The rules target the web platform, and a separate Swift skill exists in Emil Kowalski's repository.
- A fixed brand style. The skill gives interaction and craft rules, not a color palette.
- Simple pages with no gestures. emil-design-eng covers everyday animation choices.
Use it with UiChemy
UiChemy Composer writes real HTML, CSS and JS inside Elementor or Gutenberg, so sliders, drawers and sheets on a WordPress site are code you can hold to these rules. Click Get Started on uichemy.com.
How to install Apple Design Skill: Fluid Interface Rules for the Web
git clone https://github.com/boraoztunc/skills.gitClone the repository
Run
git clone https://github.com/boraoztunc/skills.git. The skill is the apple-design folder at the repository root.Copy the skill folder
Copy apple-design into the folder where your agent loads skills. The README's own example copies a skill into ~/.claude/skills for Claude Code, or you can symlink the cloned folder.
Apply it to interaction work
Ask for a bottom sheet, a drag-to-dismiss card or a carousel, or ask the agent to review an existing gesture against the skill.
Check that it loaded
Ask for a draggable bottom sheet. The agent should use pointer capture, a spring with velocity handoff, momentum projection to pick a snap point, and a reduced-motion fallback.
Key features
- Response firstRespond on pointer-down, audit debounces and tap delays, and keep feedback continuous during the interaction, such as a button scaling to 0.97 on press.
- 1:1 direct manipulationDragged content stays under the finger and respects the grab offset. Pointer capture keeps tracking when the pointer leaves the element.
- InterruptibilityNever lock out input during a transition, and always animate from the live value. Avoid CSS transitions and keyframes for gesture-driven motion.
- Springs by damping and responseStart most UI at damping 1.0. Add bounce near 0.8 only after a flick. The table lists move at 1.0 and 0.4, rotation at 0.8 and 0.4, drawer at 0.8 and 0.3.
- Velocity handoffPass the release velocity to the spring so there is no seam between dragging and animating, normalized by remaining distance when the API needs relative velocity.
- Momentum projectionProject the resting point with an exponential decay using a deceleration rate near 0.998, then snap to the nearest target instead of the release point.
- Rubber-bandingResist progressively past a boundary rather than stopping hard. The skill gives a formula with a 0.55 constant.
- Materials and depthBuild toolbars and sheets as translucent layers with backdrop-filter, never stack light translucent surfaces, and fade edges instead of hard dividers.
- Reduced motion, transparency and contrastRespond to prefers-reduced-motion, prefers-reduced-transparency and prefers-contrast with cross-fades, solid backgrounds and defined borders.
- Typography and principlesUse size-specific tracking and leading. The skill also names eight design principles: purpose, agency, responsibility, familiarity, flexibility, simplicity, craft and delight.
Frequently asked questions
What is the apple-design skill?
It is a SKILL.md that distills Apple's WWDC design talks into rules for web interfaces. It covers response, direct manipulation, interruptible springs, velocity handoff, momentum, materials, reduced motion and typography, with CSS and JavaScript examples for each.
How do I install the apple-design skill?
Clone boraoztunc/skills with git and copy the apple-design folder into your agent's skills folder, or symlink it. The README shows that pattern for any skill in the repository. The skill is one SKILL.md with no scripts.
What spring values does the skill recommend?
It starts most UI at damping 1.0 with response 0.3 to 0.4, and adds bounce near 0.8 only when a flick or throw preceded the motion. Its table lists move at 1.0 and 0.4, rotation at 0.8 and 0.4, and drawer at 0.8 and 0.3.
Which AI agents can use the apple-design skill?
The README describes the repository as Claude Code skills and shows a copy into the Claude Code skills folder. The skill is a plain SKILL.md, so other agents that load skill folders can read it, but the README does not list them.
Does the skill work for native iOS apps?
No. The skill translates Apple's principles to the web, using CSS, Pointer Events, requestAnimationFrame and spring libraries such as Motion. For native Swift work, Emil Kowalski's repository lists a separate write-swift skill.
How is apple-design different from emil-design-eng?
emil-design-eng focuses on animation choices and UI polish details. Apple-design focuses on gesture-driven, physical interaction and Apple's design principles. The README of this repository describes the two as meant to coexist.
Where do I check my motion code against these rules?
Use review-animations for a strict verdict on a diff, or fixing-motion-performance for performance problems in motion code. The animation-vocabulary skill helps you name effects such as rubber-banding or momentum. Both are separate skills.