Getting it into your agent
It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.
git clone --depth 1 https://github.com/AThevon/genjutsunpx agentmods add skills/athevon/genjutsu/swiftui-graphicsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/athevon/genjutsu/swiftui-graphics)<a href="https://agentmods.dev/skills/athevon/genjutsu/swiftui-graphics"><img src="https://agentmods.dev/badge/skills/athevon/genjutsu/swiftui-graphics.svg" alt="Measured on agentmods" height="20"></a>- Socket pass
- Snyk pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00045 | $0.03364 |
| Opus 5 | $0.00023 | $0.01682 |
| Sonnet 5 | $0.00009 | $0.00673 |
| Haiku 4.5 | $0.00005 | $0.00336 |
Grade A, and why
swiftui-graphics scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 8d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
This is a copy
100% identical to swiftui-graphics — 0 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
How it starts
The opening of the file, as written. The whole thing — 409 lines — stays where its author put it; the contents beside it link to each section on GitHub.
SwiftUI Graphics
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/.
Decision Tree: Which API?
| 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.
Metal Shaders Intro
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. iOS 17+ only; for older targets, 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 withinmaxSampleOffset. Most expensive.
What ships with it
3 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 8d ago First seen · 409 lines · 45 tokens per session scan A 73afab1cd83a
swiftui-graphics is a skill published in the GitHub repository AThevon/genjutsu (333 stars, last pushed 1mo ago), licensed MIT. It adds 45 tokens to every session and 3,364 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. It is 100% identical to swiftui-graphics, differing in 0 lines, and is treated as a copy.
Other skills, from other repositories
beautify-flutter
Use when the user wants to design, redesign, build, critique, audit, polish, theme, animate, adapt, or otherwise improve a Flutter app's UI or UX. Covers full apps, screens, widgets, components, forms, onboarding, empty states, navigation, dashboards, and settings. Handles Material 3 theming, Cupertino/iOS adaptation…
design-dna
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects, etc.). Use this skill when: (1) a user wants to see the full 3-dimension design structure/schema, (2) a user provides…
platform-conventions
Design to iOS and Android conventions — what each OS mandates, where they diverge, and when to unify. Use when shipping native apps. For breakpoint adaptation use responsive-design; for matching competitor patterns use jakobs-law (interaction-design).
ss-audit
Audit screens for UX issues using Nielsen's heuristics and modern mobile UX best practices.
add-component
Add a SwiftUI component from ShipSwift. Use when the user says "add component", "add a view", "add X view", "I need a chart", "add animation", or wants a specific UI element.
component-family-consistency
Buttons, inputs, pills, badges, calendars, and other interactive components form a visual family — they share the same border-radius, colour logic, shadow scale, border style, and spacing rhythm. Inconsistency between them breaks the sense of a coherent product. Use when building or reviewing a component library…