# Design Fluid Apple-Inspired Web Interfaces

Gesture-driven web interfaces often feel delayed, rigid, or visually inconsistent. This skill provides practical guidance for responsive motion, materials, typography, accessibility, and interaction design.

## Install

```bash
npx skillstore add emilkowalski/apple-design
```

## Metadata

- Status: approved
- Slug: emilkowalski-apple-design
- Skillstore revision: r1
- Version status: missing
- Tree hash: 035779e52787e8ccf4dd56238b56f8cf2c37c5f84294bbc984bd4af35a0f9ab2
- Author: emilkowalski
- GitHub username: emilkowalski
- License: MIT
- Repository: https://github.com/emilkowalski/skills/tree/main/skills/apple-design/
- Ref: d1c4c60b80afc545d96b5e8a51c19b2fdc81df70
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands
- Quality score: 78
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/emilkowalski-apple-design
- Manifest: https://skillstore.pages.dev/api/skills/emilkowalski-apple-design/manifest

## Capabilities

- Reviews pointer, drag, swipe, drawer, sheet, and carousel interactions for direct manipulation and immediate feedback.
- Recommends spring damping, response, velocity handoff, momentum projection, and interruptible transition patterns.
- Explains rubber-banding, gesture thresholds, spatial consistency, anchored origins, and frame-level motion quality.
- Guides translucent materials, depth, typography, optical sizing, tracking, leading, and visual hierarchy.
- Applies reduced-motion, reduced-transparency, contrast, text scaling, and inclusive interaction considerations.
- Uses Apple-inspired design principles to evaluate purpose, agency, familiarity, flexibility, simplicity, craft, and delight.

## Use Cases

- Improve Product Interactions: Review buttons, sheets, drawers, and gestures for immediate feedback, interruptibility, momentum, and predictable spatial behavior.
- Implement Fluid Web Motion: Translate interaction specifications into pointer events, spring animations, velocity handoff, rubber-banding, and accessible motion alternatives.
- Audit Interface Quality: Evaluate motion, materials, typography, hierarchy, accessibility, and interaction consistency before a product release.

## Prompt Templates

### Review Basic Feedback

```
Review this button interaction for immediate feedback and accessibility. Identify latency, unclear states, and specific improvements.
```

### Design a Bottom Sheet

```
Design a mobile bottom sheet with direct dragging, velocity-aware release, snap points, interruption, rubber-banding, and reduced-motion behavior.
```

### Audit an Interaction Flow

```
Audit this interface flow using Apple-inspired principles. Cover feedback, spatial consistency, gesture conflicts, materials, typography, accessibility, and user agency.
```

### Define a Motion System

```
Create a web motion system for these components. Define spring families, velocity rules, interruption behavior, gesture thresholds, accessibility alternatives, and validation tests.
```

## Limitations

- Provides design guidance and examples, but does not include a runtime package or complete component library.
- Offers Apple-inspired web patterns, but does not certify compliance with official Apple platform requirements.
- Requires testing on real browsers, devices, input methods, and accessibility settings.
- Sample motion values need tuning for each component, layout, animation library, and product context.

## Best Practices

- Test interactions with real pointer movement, reversal, interruption, and rapid repeated input.
- Tune motion from the current visible state and preserve velocity across gesture-to-animation handoffs.
- Validate every motion and material choice with reduced-motion, transparency, contrast, and text-size settings.

## Anti Patterns

- Do not lock input until an animation finishes or restart motion from a stale target value.
- Do not add bounce, blur, sound, or haptics without a clear interaction purpose.
- Do not treat visual polish as a substitute for predictable navigation, readable text, and user control.

## Security Audit

- Audited at: 2026-07-21T02:36:15.113\+00:00
- Summary: All 62 static findings are false positives caused by Markdown code delimiters and ordinary design terminology. The single skill file contains educational web-design guidance and examples, with no executable commands, reconnaissance, data collection, or prompt-injection attempt found.

## Stats

- Views: 1
- Downloads: 10
- Favorites: 0
- Popularity score: 0