Apple Design

Build web interfaces (HTML/CSS/JS, React, Vue, Tailwind) that look and feel like Apple made them — the real Apple aesthetic, not generic glassmorphism. Covers Liquid Glass / iOS-26 materials as rendered CSS+SVG (specular highlights, refraction, vibrancy, fallbacks), Apple's fluid-motion physics (springs by damping/response, velocity handoff, momentum projection, interruptibility, rubber-banding) implemented in BOTH Motion (motion.dev) and GSAP (Flip, ScrollTrigger, SplitText, Inertia), SF typography optics, a drop-in Apple design-token layer, and complete copy-paste components (glass nav, spri

6 stars 1 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add bowen31337/apple-design --skill apple-design

Manual install

git clone --depth 1 https://github.com/bowen31337/apple-design.git /tmp/apple-design
mkdir -p ~/.claude/skills
cp -r /tmp/apple-design/. ~/.claude/skills/apple-design

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Apple Design (for the web)

Build interfaces with Apple's fit and finish: fluid, physical motion; translucent
materials with real depth; and the optical typography and restraint that make
software feel considered. This skill is **web-first** (HTML/CSS/JS, React, Vue,
Tailwind) and **build-first** — it exists to help you *make* Apple-grade UI, with
concrete numbers and copy-pasteable code, not just describe principles.

## The one idea that generates everything

Apple UI feels alive because it behaves like a **physical object under glass**:

> Motion starts from the value that's on screen *right now*, inherits the user's
> velocity, projects momentum to where the gesture was going, and can be grabbed
> and reversed at any instant. Surfaces are translucent layers that catch light
> and cast depth. Type is optically tuned so it reads effortlessly. And nothing
> is added that doesn't serve the content.

Every technique below is downstream of that. When a choice is unclear, ask:
*would a physical object behave this way? does this material catch light? does
this detail serve the content or decorate it?*

## What "Apple" actually means (and the traps)

Getting this right is mostly avoiding the things that read as *almost* Apple:

- **It's physics, not durations.** Anything the user can touch uses a **spring**,
  not a CSS `transition` with a fixed time. Springs interrupt and reverse; fixed
  transitions snap and fight the user.

Read the full skill on GitHub

Details

Skill name: apple-design
Repository: bowen31337/apple-design
Repo updated: 13 July 2026

FAQ

What does the Apple Design skill do?

How do I install the Apple Design skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add bowen31337/apple-design --skill apple-design. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Apple Design popular?

It lives in bowen31337/apple-design, which has 6 GitHub stars and 1 forks.

Related skills

Handdraw Skill

ToBeWin/HandDraw-Skill

Create deterministic hand-drawn, whiteboard, educational, and explainer MP4 animations from a JSON Animation DSL. Use when a user asks to make or edit a hand-drawn video, whiteboard animation, animated SVG explainer, or programmatic animation video.

Frontend & Design

Yafa UI Dashboard

rejourneyco/yafa-ui-dashboard

Design, build, refactor, or review polished responsive analytics dashboards, SaaS admin dashboards, business intelligence interfaces, and data-heavy product UI using Yafa-UI. Covers sidebar navigation, one-row page headers, multi-color KPI cards, charts, tables, filters, Lucide icons, accessible states, and mobile dashboard layouts across React, Next.js, Tailwind CSS, Vue, Svelte, and other frontend stacks. Do not use this visual system as the default for marketing sites, authentication, setup wizards, account or billing settings, or unrelated public pages.

Frontend & Design

HTML CSS First

macdonst/html-css-first

Prefer modern HTML and CSS solutions over JavaScript-heavy implementations. Use this skill whenever building or reviewing frontend code — especially for UI patterns like modals, accordions, tabs, tooltips, form validation, animations, dropdowns, carousels, sticky headers, and toggles. Trigger on any request to build a UI component or page, even if the user doesn't explicitly ask for "CSS-only" — always check whether a native HTML element or CSS feature can replace a JS solution first. Also trigger when reviewing existing code for opportunities to reduce JavaScript by using modern browser capab

Frontend & Design

Wedding Invitation

wyx-sg/wedding-invitation-skill

Use this skill when the user wants to design and generate a wedding invitation card in any language. The skill drives a conversational workflow — you gather the couple's info and style preferences, design a bespoke HTML template from scratch (no template selection), render it locally with headless Chrome, produce a print-ready PNG, and include a live tweak panel so the user can adjust colors, fonts, frames, and optional components without rebuilding. All data stays on the user's machine; no cloud, no signups, no data leaves.

Frontend & Design

Nature Style

Zhangyanbo/nature-style-skill

Nature-journal house style for publication-ready scientific figures, optimised for Python/matplotlib plotting. Bundles palette.py (a drop-in matplotlib style module with the Nature-style house palette, Wong colourblind-safe set, point-scale type, safe stroke weights, and helpers) plus the full design system as CSS tokens and figure components for HTML/SVG. Use this skill whenever creating or restyling any chart, plot, diagram, schematic, or multi-panel figure for a scientific paper or analysis — matplotlib/seaborn code, an HTML/SVG mock, choosing colours for scientific data, or preparing figur

Frontend & Design

Tidyfactor Design

TidyFactor/Design

Code-native UI design lifecycle engine (Figma alternative) with Contextual Decision Layer (CDL). Supports all 7 design stages with zero per-page CSS/JS and pluggable CSS foundations (Native, Tailwind, daisyUI, Pico, Hybrid). Trigger on commands 'brief', 'study', 'init', 'brand', 'tokens', 'palette', 'layout', 'components', 'page', 'dashboard', 'motion', 'i18n', 'audit', 'deploy', or design system requests.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.