design

Name: design
Author: rshankras

450installs46forks

How to install design?

rshankras/claude-code-apple-skills/design

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

Installs into the current project.

Summary

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 ic

Files · 1

View on GitHub

SKILL.md

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

People who liked this also viewed

6 picks

Type

design

450installs46forks

View on GitHub

How to install design?

rshankras/claude-code-apple-skills/design

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

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

People who liked this also viewed

6 picks

Type