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
1---2name: design3description: 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.4---5
6# Design Skills
7
8Skills for implementing Apple's modern design systems across platforms.
9
10## When This Skill Activates
11
12Use this skill when the user:
13- Asks about Liquid Glass design
14- Wants to implement modern Apple UI effects
15- Needs guidance on visual design patterns
16- Asks about materials, transparency, or blur effects
17- Wants to create fluid animations
18- Asks about **spring**, **bounce**, or **snappy** animations
19- Wants **PhaseAnimator** or **KeyframeAnimator** help
20- Needs **view transitions**, **matched geometry**, or **hero transitions**
21- Wants **SF Symbol effects** (bounce, pulse, wiggle, breathe)
22- Asks about **animation completions** or **withAnimation**
23- Says the app feels **flat** or wants **juice/game feel** (celebrations, haptics, sound effects)
24- Wants a **feedback audit** — do events reach the user on the right channels?
25- Needs UX structure help: navigation clarity, discoverability, information architecture
26- Is writing or reviewing interface copy, alerts, or feature names
27- Asks about SF Symbols usage/authoring, fonts, Dynamic Type, or type hierarchy
28
29## Available Skills
30
31### liquid-glass/
32Comprehensive Liquid Glass implementation for iOS 26+, macOS 26+.
33- SwiftUI `.glassEffect()` API
34- AppKit `NSGlassEffectView`
35- GlassEffectContainer patterns
36- Morphing transitions
37- Interactive effects
38- Button styles
39
40### animation-patterns/
41SwiftUI animation patterns for iOS 13–18+.
42- Spring configurations (3 API generations)
43- PhaseAnimator and KeyframeAnimator (iOS 17+)
44- View transitions, matched geometry, navigation transitions
45- SF Symbol effects
46- Animation completions, transactions, timing curves
47
48### game-feel/
49Game 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.
50
51### ui-prototyping/
52Explore divergent UI directions for a screen as named, runnable Swift `#Preview` variants — compare, remix, and tune before committing to one design.
53
54### ux-writing/
55Interface copy that works — voice/tone, the PACE framework, alert anatomy, feature naming, empty states, and the small-word edits that measurably improve UX.
56
57### sf-symbols/
58SF 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.
59
60### typography/
61UI typography — text styles and Dynamic Type, the San Francisco family with its width axis, optical sizes, tracking vs kerning, and custom-font scaling obligations.
62
63## Key Principles
64
65### 1. Platform Consistency
66- Follow Apple Human Interface Guidelines
67- Use system-provided APIs
68- Respect user appearance preferences
69
70### 2. Performance
71- Use GlassEffectContainer for multiple effects
72- Limit number of glass effects per view
73- Consider GPU resources
74
75### 3. Visual Hierarchy
76- Glass effects create depth and layering
77- Use tints to indicate prominence
78- Combine with appropriate shadows
79
80## Reference Documentation
81
82- [Applying Liquid Glass to custom views (SwiftUI)](https://developer.apple.com/documentation/swiftui/applying-liquid-glass-to-custom-views)
83- [NSGlassEffectView (AppKit)](https://developer.apple.com/documentation/appkit/nsglasseffectview)
84- Local captured docs (optional): if `~/Downloads/docs/SwiftUI-Implementing-Liquid-Glass-Design.md` or `~/Downloads/docs/AppKit-Implementing-Liquid-Glass-Design.md` exists, read it for extra detail; skip silently if absent.
rshankras