How do I install the Design skill?

Run npx skillmds@latest add tomevault-io/design-18 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Design safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Design?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Design free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Design?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Design by tomevault-io — Agent Skill

Name: Design
Author: tomevault-io

File contents

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

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: design-18description: Design system skills for modern Apple platform UI including Liquid Glass, animations, and visual design patterns. Use when implementing new design language features. Use when this capability is needed.---# Design SkillsSkills for implementing Apple's modern design systems across platforms.## When This Skill ActivatesUse 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`---> Converted and distributed by [TomeVault](https://tomevault.io/claim/rshankras) — claim your Tome and manage your conversions.

Frequently asked questions

Design