New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Apple Design

by flornkm in flornkm/personal-site

Apple's approach to interface design and fluid, physical motion, translated for the web.

No licenceAuto-check passedFrontend & Design

Install Apple Design

skills CLI
$ npx skills add flornkm/personal-site --skill apple-design -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install flornkm/personal-site apple-design --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/flornkm/personal-site.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/apple-design .claude/skills/apple-design && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
apple-design
GitHub stars
150
Used in
19 other repos
Token cost
~5.6k tokens
SKILL.md length
2,798 words
Files
1
Skills in repo
14
Repo updated
First seen
Licence
None found

At a glance

Apple's approach to interface design and fluid, physical motion, translated for the web.

  • Works in 12 steps: Response — kill latency → Direct manipulation — 1:1 tracking → Interruptibility — the single most… → …
  • Reviewing gesture-driven UI
  • SKILL.md covers The Core Idea, 1. Response — kill latency, 2. Direct manipulation — 1:1… and 3. Interruptibility — the…, plus 15 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Apple Design is an agent skill from flornkm/personal-site. Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.

Its SKILL.md is about 5.6k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering API design and Typography. The repository describes itself as: Florians personal site.

When your agent uses it

  • Reviewing gesture-driven UI
  • Spring animations
  • Drag/swipe/sheet interactions
  • Momentum and interruptible transitions

Example prompts

  • “/apple-design”

Workflow steps

12 steps, taken from the step headings in SKILL.md.

  1. Response — kill latency
  2. Direct manipulation — 1:1 tracking
  3. Interruptibility — the single most important principle
  4. Behavior over animation — use springs
  5. Velocity handoff — the seam between drag and animation
  6. Momentum projection — animate to where the gesture is going
  7. Spatial consistency — symmetric paths, anchored origins
  8. Hint in the direction of the gesture
  9. Rubber-banding — soft boundaries
  10. Gesture design details (the "feel" checklist)
  11. Frame-level smoothness
  12. Materials & depth — translucency conveys hierarchy

What it can do on your machine

Read from SKILL.md and the folder at commit cbc0e20. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are css and javascript).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Apple Design loads about 5.6k tokens when it runs. Until then it costs about 110 tokens; SKILL.md has 2,798 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~110
When it runs · the whole SKILL.md, loaded when a task matches
~5.6k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

Without a licence we can't republish the file, so here is its outline and opening line. It has 2,798 words (~5,640 tokens).

“How Apple builds interfaces that stop feeling like a computer and start feeling like an extension of you. This knowledge comes from Apple's WWDC design talks — chiefly Designing Fluid Interfaces (WWDC 2018) — distilled and translated into the web…”

— opening of SKILL.md by flornkm
name
apple-design

Read the full SKILL.md on GitHub

Files

Just SKILL.md in .agents/skills/apple-design of flornkm/personal-site.

Open the folder on GitHubat commit cbc0e20

Used in 19 other repositories

We found 26 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 19 other GitHub owners. This page covers the copy in flornkm/personal-site, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Apple Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Apple Design compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Apple Design this skillflornkm/personal-site15019 repos~5.6kAutomated safety check: PassNone
Frontend Blueprinttech-leads-club/agent-skills7k1 repos~5.3kAutomated safety check: PassCC-BY-4.0
Impeccablebestofjs/bestofjs3.1k27 repos~2.6kAutomated safety check: PassMIT
Tailwindcss Developmentanonaddy/anonaddy4.9k10 repos~865Automated safety check: PassMIT
Design SystemOhh-889/skyroc79511 repos~1.7kAutomated safety check: PassMIT
Make Interfaces Feel Bettersamuelclay/NewsBlur7.6k10 repos~1.5kAutomated safety check: PassMIT

Similar skills

  • Frontend Blueprint

    tech-leads-club/agent-skills

    AI frontend specialist and design consultant that guides users through a structured discovery process before generating any code.

    7k GitHub starsUsed in 1 repo~5.3k tokens
    Frontend & DesignAuto-check passed

  • Impeccable

    bestofjs/bestofjs

    A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…

    3.1k GitHub starsUsed in 27 repos~2.6k tokens
    Frontend & DesignAuto-check passed

  • Tailwindcss Development

    anonaddy/anonaddy

    Always invoke when the user's message includes 'tailwind' in any form.

    4.9k GitHub starsUsed in 10 repos~865 tokens
    Frontend & DesignAuto-check passed

  • Design System

    Ohh-889/skyroc

    Token architecture, component specifications, and slide generation.

    795 GitHub starsUsed in 11 repos~1.7k tokens
    Frontend & DesignAuto-check passed

  • Make Interfaces Feel Better

    samuelclay/NewsBlur

    Design engineering principles for making interfaces feel polished.

    7.6k GitHub starsUsed in 10 repos~1.5k tokens
    Frontend & DesignAuto-check passed

  • UI UX Pro Max

    saoudi-h/solar-icons

    UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.

    186 GitHub starsUsed in 18 repos~11k tokens
    Frontend & DesignAuto-check: notes

More from flornkm/personal-site

All 14 skills in this repo

  • Animation Vocabulary

    flornkm/personal-site

    Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" →…

    150 GitHub starsUsed in 13 repos~3.2k tokens
    Auto-check passed

  • Central Icons

    flornkm/personal-site

    ALWAYS ACTIVE. An agent skill from flornkm/personal-site.

    150 GitHub stars~475 tokensUpdated yesterday
    Auto-check: notes

  • Clean Jsx No Inline Ternaries

    flornkm/personal-site

    Keep JSX and component logic clean by minimizing inline ternaries, nested conditionals, and stringified conditional classes.

    150 GitHub stars~988 tokensUpdated yesterday
    Auto-check passed

  • Design System

    flornkm/personal-site

    How to build UI in this repo — compose classes with cn, use the CSS-variable design tokens (never raw hex/px), reuse the typographic and ui/ primitives, and define variants with cva like the…

    150 GitHub stars~1.6k tokensUpdated yesterday
    Auto-check passed

  • Prefer Container Queries

    flornkm/personal-site

    Enforce Tailwind container queries over viewport breakpoints for responsive components.

    150 GitHub stars~1.1k tokensUpdated yesterday
    Auto-check passed

  • Improve Animations

    flornkm/personal-site

    Survey a codebase's animation and motion code as a senior motion advisor, then produce a prioritized audit and self-contained implementation plans for other agents (or cheaper models) to execute.

    150 GitHub starsUsed in 12 repos~2k tokens
    Auto-check: warnings

Categories

Questions about Apple Design

What does Apple Design do?

Apple's approach to interface design and fluid, physical motion, translated for the web. Apple Design is an agent skill from flornkm/personal-site. Apple's approach to interface design and fluid, physical motion, translated for the web.

When should I use Apple Design?

Apple Design fits situations like: reviewing gesture-driven UI; spring animations; drag/swipe/sheet interactions; momentum and interruptible transitions.

How do I install Apple Design in Claude Code?

Run `npx skills add flornkm/personal-site --skill apple-design -a claude-code`. Or copy the skill folder (.agents/skills/apple-design in flornkm/personal-site) into .claude/skills/apple-design in your project. Claude Code loads it when a task matches its description.

How do I install Apple Design in Codex?

Run `npx skills add flornkm/personal-site --skill apple-design -a codex`. Or copy the skill folder (.agents/skills/apple-design in flornkm/personal-site) into .agents/skills/apple-design in your project. Codex loads it when a task matches its description.

Can I use Apple Design in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add flornkm/personal-site --skill apple-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/apple-design, .gemini/skills/apple-design, .github/skills/apple-design and .opencode/skills/apple-design in your project.

What does Apple Design need to run?

SKILL.md names no scripts, command-line tools or credentials: Apple Design is instructions for the agent only.

Does Apple Design access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Apple Design safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Apple Design use?

No licence was found for Apple Design or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.

How many tokens does Apple Design use?

About 5.6k tokens (SKILL.md is roughly 23k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Apple Design?

Skills that share tags, products or a category with Apple Design: Frontend Blueprint (tech-leads-club/agent-skills, 7k stars), Impeccable (bestofjs/bestofjs, 3.1k stars), Tailwindcss Development (anonaddy/anonaddy, 4.9k stars) and Design System (Ohh-889/skyroc, 795 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Apple Design?

flornkm (a GitHub user) maintains it in flornkm/personal-site, which has 150 GitHub stars. The repository holds 14 skills in this directory. The repository was last updated on October 8, 2026.

Source: flornkm/personal-site on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.