apple-design

Translate Apple human interface guidelines into CSS and JavaScript animations.

4|Updated Jan 27, 2026
One-click install
npx skills add https://github.com/k97/dock-tile --skill apple-design-k97
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: apple-design
Source: https://github.com/k97/dock-tile/tree/main/.claude/skills/apple-design
Command: npx skills add https://github.com/k97/dock-tile --skill apple-design-k97

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill bridges the gap between static web interfaces and the highly responsive, physical-feeling motion found in Apple's native macOS and iOS applications. It solves the problem of interfaces feeling dead or unresponsive by providing a framework for interruptible, velocity-aware, and spatially consistent design.

Core Features & Use Cases

  • Fluid Motion Principles: Implements interruptible spring-based animations that respect user velocity and momentum.
  • Material & Depth Systems: Provides guidance on using backdrop-filters, translucency, and hierarchy to create depth-aware UI components.
  • Accessibility & Reduced Motion: Offers standardized patterns for respecting system-level accessibility preferences like reduced motion and transparency.
  • Use Case: Use this skill when building a custom modal, drawer, or gesture-driven card component that needs to feel like a native Apple system element rather than a standard web overlay.

Quick Start

Apply the apple-design principles to refactor the current modal component to use spring-based physics and interruptible transitions.

Frequently Asked Questions about apple-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build fluid, Apple-style interfaces for the web?▼

Interruptible spring-based animations work by respecting user velocity and momentum, allowing ongoing transitions to be halted or redirected smoothly without waiting for completion, ensuring high-fidelity interface design feels physically responsive.

How do I implement translucent material systems using CSS and JavaScript?▼

Implement translucent material systems by applying CSS backdrop-filters to create depth-aware UI components, establishing visual hierarchy through translucency and depth standards that mimic native macOS and iOS application layers.

Can I create gesture-driven web components that respect reduced motion accessibility preferences?▼

Yes, you can create gesture-driven web components that respect accessibility by implementing standardized patterns for system-level reduced motion and transparency preferences, ensuring your custom modals and cards remain accessible.

How do I refactor a standard web overlay to feel like a native Apple system element?▼

Refactor a standard web overlay into a native Apple system element by applying spring-based physics and interruptible transitions, replacing static transitions with velocity-aware motion and spatial consistency standards.

Why do my web interface animations feel dead or unresponsive compared to native iOS apps?▼

Web interface animations feel unresponsive compared to native iOS apps because they lack interruptible, velocity-aware, and spatially consistent motion principles, which are required to bridge the gap between static web layers and physical-feeling interactions.