design
Design system skills for modern Apple platform UI including Liquid Glass, animations, and visual design patterns. Use when implementing new design language features.
Best use case
design is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Design system skills for modern Apple platform UI including Liquid Glass, animations, and visual design patterns. Use when implementing new design language features.
Teams using design should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/design/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How design Compares
| Feature / Agent | design | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Design system skills for modern Apple platform UI including Liquid Glass, animations, and visual design patterns. Use when implementing new design language features.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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** ## 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 ## 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 - `/Users/ravishankar/Downloads/docs/SwiftUI-Implementing-Liquid-Glass-Design.md` - `/Users/ravishankar/Downloads/docs/AppKit-Implementing-Liquid-Glass-Design.md`
Related Skills
watchOS
watchOS development guidance including SwiftUI for Watch, Watch Connectivity, complications, and watch-specific UI patterns. Use for watchOS code review, best practices, or Watch app development.
visionos-widgets
visionOS widget patterns including mounting styles, glass/paper textures, proximity-aware layouts, and spatial widget families. Use when creating or adapting widgets for visionOS.
test-data-factory
Generate test fixture factories for your models. Builder pattern and static factories for zero-boilerplate test data. Use when tests need sample data setup.
test-contract
Generate protocol/interface test suites that any implementation must pass. Define the contract once, test every implementation. Use when designing protocols or swapping implementations.
tdd-refactor-guard
Pre-refactor safety checklist. Verifies test coverage exists before AI modifies existing code. Use before asking AI to refactor anything.
tdd-feature
Red-green-refactor scaffold for building new features with TDD. Write failing tests first, then implement to pass. Use when building new features test-first.
tdd-bug-fix
Fix bugs using red-green-refactor — reproduce the bug as a failing test first, then fix it. Use when fixing bugs to ensure they never regress.
snapshot-test-setup
Set up SwiftUI visual regression testing with swift-snapshot-testing. Generates snapshot test boilerplate and CI configuration. Use for UI regression prevention.
integration-test-scaffold
Generate cross-module test harness with mock servers, in-memory stores, and test configuration. Use when testing networking + persistence + business logic together.
characterization-test-generator
Generates tests that capture current behavior of existing code before refactoring. Use when you need a safety net before AI-assisted refactoring or modifying legacy code.
testing
TDD and testing skills for iOS/macOS apps. Covers characterization tests, TDD workflows, test contracts, snapshot tests, and test infrastructure. Use for test-driven development, adding tests to existing code, or building test infrastructure.
webkit-integration
WebKit integration in SwiftUI using WebView and WebPage for embedding web content, navigation, JavaScript interop, and customization. Use when embedding web content in SwiftUI apps.