skills.rest
leobbaroni
leobbaroniCOMMUNITY
Explore all skills by this author →
GitHub

swiftui-graphics

Implements advanced SwiftUI visual effects using Metal shaders, Canvas, and Liquid Glass APIs.

1|Updated Jul 19, 2026
Search Tags:#ios#canvas#gpu#swiftui#visual effects#liquid glass#metal shaders
One-click install
npx skills add https://github.com/leobbaroni/maestro --skill swiftui-graphics-leobbaroni
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: swiftui-graphics
Source: https://github.com/leobbaroni/maestro/tree/main/skills/maestro/library/genjutsu/_jutsu/swiftui-graphics
Command: npx skills add https://github.com/leobbaroni/maestro --skill swiftui-graphics-leobbaroni

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building per-pixel visual effects in SwiftUI—ripples, holographic shimmer, CRT scanlines, glassmorphism—requires knowing which API to use (.colorEffect, .distortionEffect, .layerEffect, .visualEffect, Canvas, or .glassEffect) and how to write stitchable Metal shaders, which is poorly documented and easy to get wrong on performance. ## Core Features & Use Cases - Metal Shader Recipes: Ready-to-use [[ stitchable ]] MSL shaders for ripple touch, holographic gradients, CRT scanlines with chromatic aberration, glow, heat haze distortion, and film grain, each with Swift bindings and performance notes. - API Decision Guidance: A decision tree mapping each visual need to the right SwiftUI API, plus escalation order from built-in modifiers to .visualEffect to Canvas to Metal shaders. - Liquid Glass & Canvas Patterns: iOS 26 .glassEffect morphing with glassEffectID and GlassEffectContainer, pre-iOS 26 fallbacks via Material, and animated Canvas drawing with TimelineView. - Use Case: Add a touch ripple to a photo view by applying .layerEffect with the provided ripple shader, wiring the tap location and animated time parameter from Swift. ## Quick Start Ask the agent to add a holographic shimmer effect to a SwiftUI image view using a Metal colorEffect shader.

Frequently Asked Questions about swiftui-graphics

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I write a Metal shader for SwiftUI?▼

Create a .metal file in your app target, mark functions with the [[ stitchable ]] attribute, and include SwiftUI/SwiftUI_Metal.h. SwiftUI auto-generates the binding via ShaderLibrary.functionName, and you attach it with .colorEffect, .distortionEffect, or .layerEffect.

What is the difference between colorEffect, distortionEffect, and layerEffect in SwiftUI?▼

.colorEffect receives position and color and returns a transformed color with no neighbor sampling. .distortionEffect returns a new sample position so pixels move without color change. .layerEffect receives the full layer and can sample anywhere within maxSampleOffset, making it the most expensive.

How do I use Liquid Glass in SwiftUI on iOS 26?▼

Apply .glassEffect(.regular) or .glassEffect(.clear) to a view, and pair surfaces with .glassEffectID in a namespace for morphing transitions. For pre-iOS 26 fallbacks, use .background(.ultraThinMaterial) and matchedGeometryEffect instead.

When should I use Canvas versus a Metal shader in SwiftUI?▼

Use Canvas for vector drawing like paths, shapes, text, and hundreds of distinct animated elements. Use a Metal shader when the effect is per-pixel, such as color manipulation, distortion, or thousands of particles like smoke and fluids.

Why is my SwiftUI shader effect slow or dropping frames?▼

Each effect modifier is a separate GPU render pass, so stacking multiple .colorEffect or .layerEffect modifiers multiplies cost. Combine operations into a single stitchable shader, keep maxSampleOffset tight, and profile with Instruments GPU Frame Capture.

Related Skills

Explore More Software Engineering Skills→
jamesrochabrunjamesrochabrun
194

swiftui-animation

Implement SwiftUI animations, transitions, matchedGeometryEffect, and Metal shaders.

Community
Advanced
kyoya1123kyoya1123
10

instruments-profiler

Profile Xcode Instruments traces to identify performance bottlenecks in iOS and macOS apps.

Community
Advanced
htafollahtafolla
5

ui-ux-design

Design mobile-first user interfaces with WCAG 2.1 AA accessibility compliance.

Community
Advanced
onymchatonymchat

spritekit

Create 2D games and animations for iOS using SpriteKit.

Official
Intermediate