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

• Applying Liquid Glass to custom views (SwiftUI)
• NSGlassEffectView (AppKit)
• 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.