agentsclimarketplace
Sign in

Design

Skill rshankras/claude-code-apple-skills/skills/design

Design skills for Apple platform UI — Liquid Glass, animations, game feel (haptics, sound, celebrations), UI prototyping, UX writing, SF Symbols, and typography. Use when implementing design language features, adding juice/feedback, writing interface copy, or choosing type and iconography.From its SKILL.md

Install
npx -y skills add rshankras/claude-code-apple-skills --skill design

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • fetches URLsInstructs the agent to fetch 2 URLs, including https://developer.apple.com/documentation/swiftui/applying-liquid-glass-to-custom-views and 1 more.

SKILL.md

4.0 KB, 799 tokens by cl100k_base, as published. Nobody here has run it

Design Skills

Skills for implementing Apple's modern design systems across platforms.

When This Skill Activates

Use this skill when the user:

  • Asks about Liquid Glass design
  • Wants to implement modern Apple UI effects
  • Needs guidance on visual design patterns
  • Asks about materials, transparency, or blur effects
  • Wants to create fluid animations
  • Asks about spring, bounce, or snappy animations
  • Wants PhaseAnimator or KeyframeAnimator help
  • Needs view transitions, matched geometry, or hero transitions
  • Wants SF Symbol effects (bounce, pulse, wiggle, breathe)
  • Asks about animation completions or withAnimation
  • Says the app feels flat or wants juice/game feel (celebrations, haptics, sound effects)
  • Wants a feedback audit — do events reach the user on the right channels?
  • Needs UX structure help: navigation clarity, discoverability, information architecture
  • Is writing or reviewing interface copy, alerts, or feature names
  • Asks about SF Symbols usage/authoring, fonts, Dynamic Type, or type hierarchy

Available Skills

liquid-glass/

Comprehensive Liquid Glass implementation for iOS 26+, macOS 26+.

  • SwiftUI .glassEffect() API
  • AppKit NSGlassEffectView
  • GlassEffectContainer patterns
  • Morphing transitions
  • Interactive effects
  • Button styles

animation-patterns/

SwiftUI animation patterns for iOS 13–18+.

  • Spring configurations (3 API generations)
  • PhaseAnimator and KeyframeAnimator (iOS 17+)
  • View transitions, matched geometry, navigation transitions
  • SF Symbol effects
  • Animation completions, transactions, timing curves

game-feel/

Game feel ("juice") as a discipline — the event×channel feedback audit, haptic vocabulary design (Core Haptics service architecture), and sound-effect layers that coexist with music. Routes to animation-patterns for motion technique and generators/milestone-celebration for generated code.

ui-prototyping/

Explore divergent UI directions for a screen as named, runnable Swift #Preview variants — compare, remix, and tune before committing to one design.

ux-writing/

Interface copy that works — voice/tone, the PACE framework, alert anatomy, feature naming, empty states, and the small-word edits that measurably improve UX.

sf-symbols/

SF Symbols end-to-end — choosing/configuring system symbols (rendering modes, variable color/draw), authoring custom symbols that interpolate across weights, and the animation preset vocabulary.

typography/

UI typography — text styles and Dynamic Type, the San Francisco family with its width axis, optical sizes, tracking vs kerning, and custom-font scaling obligations.

Key Principles

1. Platform Consistency

  • Follow Apple Human Interface Guidelines
  • Use system-provided APIs
  • Respect user appearance preferences

2. Performance

  • Use GlassEffectContainer for multiple effects
  • Limit number of glass effects per view
  • Consider GPU resources

3. Visual Hierarchy

  • Glass effects create depth and layering
  • Use tints to indicate prominence
  • Combine with appropriate shadows

Reference Documentation

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Gives 0 of the 12 instructions most design frontend skills give in 799 tokens

Counted across 1,179 of the 2,086 authors here whose files we hold, read 2026-09-06

  • Commit to a bold aesthetic directionin 31 of 1179, across 24 files
  • Prefer component composition over inheritancein 28 of 1179, across 14 files
  • Animate only transform and opacity propertiesin 27 of 1179, across 22 files
  • Memoize expensive computations with useMemoin 26 of 1179, across 13 files
  • Use semantic HTML elementsin 24 of 1179, across 23 files
  • Virtualize long lists for performancein 21 of 1179, across 10 files
  • Use CSS variables for design tokensin 20 of 1179, across 14 files
  • Implement loading, empty, and error statesin 20 of 1179
  • Lazy load heavy components with Suspensein 19 of 1179, across 8 files
  • Respect prefers-reduced-motion media queriesin 18 of 1179, across 10 files
  • Prioritize CSS-only animations for HTMLin 18 of 1179, across 16 files
  • Use compound components for related UI elementsin 18 of 1179, across 7 files

Said here and by no other author read

  • Use system-provided APIs
  • Limit number of glass effects per view
  • Create UI variants using Swift Previews
  • Apply PACE framework for interface copy

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.

Keep looking

Skills are one crate of 325,949. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.