Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add beel-collab/presets.dev --skill swiftui-liquid-glassgit clone --depth 1 https://github.com/beel-collab/presets.devWrote 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/beel-collab/presets.dev/swiftui-liquid-glass)<a href="https://agentmods.dev/skills/beel-collab/presets.dev/swiftui-liquid-glass"><img src="https://agentmods.dev/badge/skills/beel-collab/presets.dev/swiftui-liquid-glass.svg" alt="Measured on agentmods" height="20"></a>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.00016 | $0.00940 |
| Opus 5 | $0.00008 | $0.00470 |
| Sonnet 5 | $0.00003 | $0.00188 |
| Haiku 4.5 | $0.00002 | $0.00094 |
Grade A, and why
swiftui-liquid-glass 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 4d 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
81% identical to swiftui-liquid-glass — 21 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 — 104 lines — stays where its author put it; the contents beside it link to each section on GitHub.
SwiftUI Liquid Glass
Overview
Use this skill to build or review SwiftUI features that fully align with the iOS 26+ Liquid Glass API. Prioritize native APIs (glassEffect, GlassEffectContainer, glass button styles) and Apple design guidance. Keep usage consistent, interactive where needed, and performance aware.
When to Use
- When the user wants to adopt or review Liquid Glass in SwiftUI UI.
- When you need correct API usage, fallback handling, or modifier ordering for Liquid Glass.
Workflow Decision Tree
Choose the path that matches the request:
1) Review an existing feature
- Inspect where Liquid Glass should be used and where it should not.
- Verify correct modifier order, shape usage, and container placement.
- Check for iOS 26+ availability handling and sensible fallbacks.
2) Improve a feature using Liquid Glass
- Identify target components for glass treatment (surfaces, chips, buttons, cards).
- Refactor to use
GlassEffectContainerwhere multiple glass elements appear. - Introduce interactive glass only for tappable or focusable elements.
3) Implement a new feature using Liquid Glass
- Design the glass surfaces and interactions first (shape, prominence, grouping).
- Add glass modifiers after layout/appearance modifiers.
- Add morphing transitions only when the view hierarchy changes with animation.
Core Guidelines
- Prefer native Liquid Glass APIs over custom blurs.
- Use
GlassEffectContainerwhen multiple glass elements coexist. - Apply
.glassEffect(...)after layout and visual modifiers. - Use
.interactive()for elements that respond to touch/pointer. - Keep shapes consistent across related elements for a cohesive look.
- Gate with
#available(iOS 26, *)and provide a non-glass fallback.
Review Checklist
- Availability:
#available(iOS 26, *)present with fallback UI. - Composition: Multiple glass views wrapped in
GlassEffectContainer. - Modifier order:
glassEffectapplied after layout/appearance modifiers. - Interactivity:
interactive()only where user interaction exists. - Transitions:
glassEffectIDused with@Namespacefor morphing. - Consistency: Shapes, tinting, and spacing align across the feature.
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.
- 4d ago First seen · 104 lines · 16 tokens per session scan A 136078c5b54e
swiftui-liquid-glass is a skill published in the GitHub repository beel-collab/presets.dev (2 stars, last pushed 4mo ago), licensed MIT. It adds 16 tokens to every session and 940 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. It is 81% identical to swiftui-liquid-glass, differing in 21 lines, and is treated as a copy.
Other skills, from other repositories
apply-mantel-styles
Provides guidelines for applying Mantel's brand styles to diagrams and frontend components. Use when asked to create visuals that need to align with Mantel's branding.
swift-development
You MUST activate this skill when working on Swift projects.
web-artifacts-builder-v2
Suite of tools for creating elaborate, multi-component claude.ai HTML artefacts using modern frontend web technologies (React 19, Tailwind CSS v4, shadcn/ui). Use for complex artefacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artefacts.
diagrams-as-code
Use only when creating architecture diagrams with Python's diagrams library (mingrammer/diagrams).
mermaid-diagrams
Use the mermaid-diagrams skill whenever you are creating or updating mermaid diagrams. Provides guidance on mermaid best practices.
html-design-examples
Reference gallery of polished single-file HTML artifacts demonstrating effective ways to communicate ideas through HTML. Use when the user wants to explain, showcase, demo, plan, review, or present an idea within an HTML file.