Openclaw Skills for turning Apple’s fluid interface principles into immediate, gesture-first web UI.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install apple-design
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install apple-design using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Apple Design?
Apple Design is an Openclaw Skills reference for translating Apple’s WWDC fluid-interface philosophy into practical web UI decisions.
It helps developers design and review gesture-driven experiences such as drag, swipe, sheet, carousel, glassmorphism, typography, and accessibility using CSS, Pointer Events, requestAnimationFrame, Motion, and Framer Motion so interactions feel immediate, interruptible, and spatially consistent.
Apple Design Use Cases
- Auditing existing interfaces for Apple-style immediacy, continuity, and polish
- Designing draggable sheets, carousels, drawers, bottom sheets, and swipe gestures
- Translating native Apple motion concepts into web implementations with spring physics and velocity handoff
- Fixing delayed feedback, dead-feeling buttons, and non-interruptible animations
- Adding translucent materials, blur layers, and hierarchy-driven typography
- Building accessible reduced-motion and reduced-transparency variants
How Apple Design Works
- Load the skill when a task mentions Apple style, iOS style, fluid interfaces, gesture-driven UI, or interaction review.
- Identify the interaction surface and classify it by feedback, direct manipulation, motion, material, typography, or accessibility needs.
- Apply the relevant principle set: immediate response, 1:1 tracking, interruptible animation, spring parameters, velocity handoff, rubber-banding, and spatial consistency.
- Map the concept to web primitives: Pointer Events with capture, requestAnimationFrame, transform and opacity, spring animation, and backdrop-filter.
- Tune motion parameters with presentation-value starts, momentum projection, and reduced-motion or reduced-transparency fallbacks.
- Validate the result against the built-in checklist and refine until feedback feels instant, continuous, and predictable.
Apple Design Setup
Use Apple Design as a reference skill in your Openclaw Skills library; it does not require a runtime package to be useful.
- Add the skill file to your skills directory and reload the agent.
mkdir -p skills/apple-design
cp SKILL.md skills/apple-design/SKILL.md
- If you are implementing the motion patterns in a web app, install the recommended animation libraries.
npm install motion framer-motion
Configure your UI stack to use Pointer Events, requestAnimationFrame, transform and opacity animations, and accessibility media queries such as prefers-reduced-motion and prefers-reduced-transparency.
For gesture-heavy surfaces, ensure pointer capture, snap points, and velocity-aware springs are wired before shipping.
No standalone build step is required for the skill itself; the value comes from loading it during UI design, implementation, and review.
Apple Design Data Schema & Taxonomy
Metadata
| Field | Meaning |
|---|---|
| name | apple-design |
| description | Apple interaction principles distilled from WWDC and translated for web use |
| version | 1.0.1 |
Core content structure
| Section | Purpose | Typical output |
|---|---|---|
| Trigger conditions | Decides when Openclaw Skills should activate | Load heuristic |
| Core philosophy | Defines fluidity as physics-like behavior | Design doctrine |
| Principles 1-17 | The full interaction rule set | Audit checklist |
| Quick reference | Parameter summary and mappings | Implementation cheatsheet |
| Code samples | CSS and JS examples for web UI | Executable snippets |
Taxonomy
- Interaction: immediate response, direct manipulation, interruptibility, gesture recognition
- Physics: spring parameters, velocity handoff, momentum projection, rubber-banding
- Visual: translucent materials, typography, spatial consistency, frame-level smoothness
- Accessibility: reduced motion, reduced transparency, high contrast
Generated artifacts
- None by default; this skill is a knowledge and review layer, not a file generator.
- When applied, it informs CSS, JS, and motion configuration files rather than producing standalone assets.
- Recommended implementation outputs include
*.cssfor styling,*.jsor*.tsfor gesture logic, and component-level motion configs.
Operational notes
- The skill is organized as a review-first playbook with checklists and tech mappings.
- The 17 principles are intentionally reusable across buttons, sheets, carousels, modals, and navigation surfaces.
- Code examples emphasize
transform,opacity,setPointerCapture,requestAnimationFrame, and spring animation APIs.
Apple Design Advanced Features
- Openclaw Skills-ready 17-principle audit framework for Apple-style UI reviews
- Velocity handoff and momentum projection for seamless drag-to-spring transitions
- Interruptible animation guidance that starts from presentation values, not stale targets
- Rubber-banding and snap-point behavior for sheets, lists, and carousels
- Pointer Events plus setPointerCapture patterns for robust 1:1 dragging
- Reduced-motion, reduced-transparency, and high-contrast design variants
- Translucent material guidance using backdrop-filter and layered depth
- Typography and spacing rules that preserve Apple-like hierarchy and readability
SKILL.md
Loading
Related Openclaw Skills
X (Twitter) Publisher
A command-line Openclaw Skills publisher for X that posts text, media, replies, and threads through Tweepy with structured results.
X (Twitter) Publisher
Publish text, media, replies, and threads to X from the command line with verified credentials and structured results.
UnifyPort Node.js SDK
A developer skill for integrating and maintaining the UnifyPort Node.js SDK, covering client workflows, contract-first generation, and secure API execution.
LifeTrace
LifeTrace turns sourced biographies into interactive, map-driven life timelines with confidence-tagged events, geocoding, and portable HTML output.
Grok Build
Openclaw Skills for Grok Build turns xAI's terminal AI coding agent into a full-screen TUI for interactive coding, file edits, shell automation, search, and headless workflows.
Stock Analysis Expert
Openclaw Skills' Stock Analysis Expert turns A-share market data into a nine-layer investment report with scores, signals, and risk controls.
Featured*
