Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →athevon/swiftui-graphics
Advanced SwiftUI visuals - Metal shaders (.colorEffect, .layerEffect, .distortionEffect), .visualEffect, Liquid Glass (iOS 26), Canvas, holographic and CRT effects.
Passed 22 of 22 test cases with the skill, and 21 of 22 without it.
1 fixed21 passed either way0 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
A test case the skill fixed. Same model, same prompt, with and without the skill.
I am designing a floating bottom bar for my application with a modern frosted glass surface aesthetic. The bar contains several interactive icon buttons that should seamlessly merge and transition together when active, along with a clean fallback layout for older platform software releases. Please generate the SwiftUI component code following best graphics practices.
| Checked | Without skill | With skill |
|---|---|---|
| The response uses GlassEffectContainer to wrap the interactive elements. | Missed | Passed |
| The response applies .glassEffect() modifier to the elements. | Missed | Passed |
| The response provides an availability check with fallback to .ultraThinMaterial for older releases. | Missed | Passed |
The instructions your model reads when the skill loads.
Version-sensitive. Every API name, SDK gate and browser-support claim below was verified on 2026-09-08 against primary sources. What against, and when, is in
_jutsu/VERSIONS.md. If that date is old, re-verify before acting on a version number.
Advanced SwiftUI visuals: Metal shaders, visual effects, Liquid Glass, Canvas. Loaded for advanced thesis (shaders, holographic, liquid-glass, distortion). Foundation:
../swiftui-motion/SKILL.mdcovers the basics. Concise rules here. Deep-dives inreferences/.
| Need | API |
|---|---|
| Pixel-level color manipulation | .colorEffect(ShaderLibrary....) |
| Pixel position / distortion | .distortionEffect(ShaderLibrary....) |
| Full layer with overlay (mix shader + bg) | .layerEffect(ShaderLibrary....) |
| View modifier with geometry context | .visualEffect { content, geometry in } |
| Custom drawing (paths, gradients) | Canvas { context, size in } |
| iOS 26+ glassmorphism | .glassEffect() / GlassEffectContainer |
| Performance dump | Canvas with .opaque(true) then export |
Default order of escalation: built-in modifiers ->
.visualEffect->Canvas-> Metal shader. Reach for shaders only when the effect is per-pixel and animated.
SwiftUI binds to Metal Shading Language (MSL) via three modifiers shipped in iOS 17: .colorEffect, .distortionEffect, .layerEffect. You author a .metal file in your app target, mark functions with the [[ stitchable ]] attribute, and SwiftUI auto-generates the Swift binding via ShaderLibrary.<functionName>(...). One library per app target. Shaders run on the GPU at native resolution; arguments are passed as .float, .float2, .color, .image from Swift. Availability: iOS 17.0+, iPadOS 17.0+, Mac Catalyst 17.0+, macOS 14.0+, tvOS 17.0+, visionOS 1.0+ - not watchOS. Below those, fall back to gradients, blur, or Canvas.
The three slots differ by what data they receive:
.colorEffect: gets (position, color), returns transformed color. No neighbor sampling..distortionEffect: gets (position), returns a new sample position. Pixels move, colors do not change..layerEffect: gets (position, SwiftUI::Layer layer), returns final color. Can sample anywhere within maxSampleOffset. Most expensive.test cases passed, vs 21 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.