{"id":"ff11b0d3-9038-4800-aecc-9f281eb8f9bb","shortId":"hMZT68","kind":"skill","title":"swiftui-liquid-glass","tagline":"Implement or review SwiftUI Liquid Glass APIs with correct fallbacks and modifier order.","description":"# SwiftUI Liquid Glass\n\n## Overview\nUse 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.\n\n## When to Use\n- When the user wants to adopt or review Liquid Glass in SwiftUI UI.\n- When you need correct API usage, fallback handling, or modifier ordering for Liquid Glass.\n\n## Workflow Decision Tree\nChoose the path that matches the request:\n\n### 1) Review an existing feature\n- Inspect where Liquid Glass should be used and where it should not.\n- Verify correct modifier order, shape usage, and container placement.\n- Check for iOS 26+ availability handling and sensible fallbacks.\n\n### 2) Improve a feature using Liquid Glass\n- Identify target components for glass treatment (surfaces, chips, buttons, cards).\n- Refactor to use `GlassEffectContainer` where multiple glass elements appear.\n- Introduce interactive glass only for tappable or focusable elements.\n\n### 3) Implement a new feature using Liquid Glass\n- Design the glass surfaces and interactions first (shape, prominence, grouping).\n- Add glass modifiers after layout/appearance modifiers.\n- Add morphing transitions only when the view hierarchy changes with animation.\n\n## Core Guidelines\n- Prefer native Liquid Glass APIs over custom blurs.\n- Use `GlassEffectContainer` when multiple glass elements coexist.\n- Apply `.glassEffect(...)` after layout and visual modifiers.\n- Use `.interactive()` for elements that respond to touch/pointer.\n- Keep shapes consistent across related elements for a cohesive look.\n- Gate with `#available(iOS 26, *)` and provide a non-glass fallback.\n\n## Review Checklist\n- **Availability**: `#available(iOS 26, *)` present with fallback UI.\n- **Composition**: Multiple glass views wrapped in `GlassEffectContainer`.\n- **Modifier order**: `glassEffect` applied after layout/appearance modifiers.\n- **Interactivity**: `interactive()` only where user interaction exists.\n- **Transitions**: `glassEffectID` used with `@Namespace` for morphing.\n- **Consistency**: Shapes, tinting, and spacing align across the feature.\n\n## Implementation Checklist\n- Define target elements and desired glass prominence.\n- Wrap grouped glass elements in `GlassEffectContainer` and tune spacing.\n- Use `.glassEffect(.regular.tint(...).interactive(), in: .rect(cornerRadius: ...))` as needed.\n- Use `.buttonStyle(.glass)` / `.buttonStyle(.glassProminent)` for actions.\n- Add morphing transitions with `glassEffectID` when hierarchy changes.\n- Provide fallback materials and visuals for earlier iOS versions.\n\n## Quick Snippets\nUse these patterns directly and tailor shapes/tints/spacing.\n\n```swift\nif #available(iOS 26, *) {\n    Text(\"Hello\")\n        .padding()\n        .glassEffect(.regular.interactive(), in: .rect(cornerRadius: 16))\n} else {\n    Text(\"Hello\")\n        .padding()\n        .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 16))\n}\n```\n\n```swift\nGlassEffectContainer(spacing: 24) {\n    HStack(spacing: 24) {\n        Image(systemName: \"scribble.variable\")\n            .frame(width: 72, height: 72)\n            .font(.system(size: 32))\n            .glassEffect()\n        Image(systemName: \"eraser.fill\")\n            .frame(width: 72, height: 72)\n            .font(.system(size: 32))\n            .glassEffect()\n    }\n}\n```\n\n```swift\nButton(\"Confirm\") { }\n    .buttonStyle(.glassProminent)\n```\n\n## Resources\n- Reference guide: `references/liquid-glass.md`\n- Prefer Apple docs for up-to-date API details.\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["swiftui","liquid","glass","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding"],"capabilities":["skill","source-sickn33","skill-swiftui-liquid-glass","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/swiftui-liquid-glass","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34460 github stars · SKILL.md body (3,944 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T06:51:57.539Z","embedding":null,"createdAt":"2026-04-18T21:45:43.100Z","updatedAt":"2026-04-22T06:51:57.539Z","lastSeenAt":"2026-04-22T06:51:57.539Z","tsv":"'1':102 '16':381,391 '2':137 '24':395,398 '26':37,131,253,266,372 '3':172 '32':410,423 '72':404,406,417,419 'across':242,305 'action':341 'add':190,196,342 'adopt':70 'align':33,304 'anim':206 'api':11,40,43,82,213,442 'appear':162 'appl':50,435 'appli':224,281 'ask':477 'avail':132,251,263,264,370 'awar':61 'background':386 'blur':216 'boundari':485 'build':26 'button':47,152,426 'buttonstyl':336,338,428 'card':153 'chang':204,349 'check':128 'checklist':262,309 'chip':151 'choos':95 'clarif':479 'clear':452 'coexist':223 'cohes':247 'compon':146 'composit':271 'confirm':427 'consist':55,241,299 'contain':126 'core':207 'cornerradius':332,380,390 'correct':13,81,120 'criteria':488 'custom':215 'date':441 'decis':93 'defin':310 'describ':456 'design':51,180 'desir':314 'detail':443 'direct':364 'doc':436 'earlier':356 'element':161,171,222,234,244,312,320 'els':382 'environ':468 'environment-specif':467 'eraser.fill':414 'exist':105,291 'expert':473 'fallback':14,84,136,260,269,351 'featur':30,106,140,176,307 'first':186 'focus':170 'font':407,420 'frame':402,415 'fulli':32 'gate':249 'glass':4,10,20,39,46,74,91,110,143,148,160,165,179,182,191,212,221,259,273,315,319,337 'glasseffect':44,225,280,327,376,411,424 'glasseffectcontain':45,157,218,277,322,393 'glasseffectid':293,346 'glasspromin':339,429 'group':189,318 'guid':432 'guidanc':52 'guidelin':208 'handl':85,133 'height':405,418 'hello':374,384 'hierarchi':203,348 'hstack':396 'identifi':144 'imag':399,412 'implement':5,173,308 'improv':138 'input':482 'inspect':107 'interact':56,164,185,232,285,286,290,329 'introduc':163 'io':36,130,252,265,357,371 'keep':53,239 'layout':227 'layout/appearance':194,283 'limit':444 'liquid':3,9,19,38,73,90,109,142,178,211 'look':248 'match':99,453 'materi':352 'miss':490 'modifi':16,87,121,192,195,230,278,284 'morph':197,298,343 'multipl':159,220,272 'namespac':296 'nativ':42,210 'need':58,80,334 'new':175 'non':258 'non-glass':257 'order':17,88,122,279 'output':462 'overview':21 'pad':375,385 'path':97 'pattern':363 'perform':60 'permiss':483 'placement':127 'prefer':209,434 'present':267 'priorit':41 'promin':188,316 'provid':255,350 'quick':359 'rect':331,379 'refactor':154 'refer':431 'references/liquid-glass.md':433 'regular.interactive':377 'regular.tint':328 'relat':243 'request':101 'requir':481 'resourc':430 'respond':236 'review':7,28,72,103,261,474 'roundedrectangl':389 'safeti':484 'scope':455 'scribble.variable':401 'sensibl':135 'shape':123,187,240,300 'shapes/tints/spacing':367 'size':409,422 'skill':24,447 'skill-swiftui-liquid-glass' 'snippet':360 'source-sickn33' 'space':303,325,394,397 'specif':469 'stop':475 'style':48 'substitut':465 'success':487 'surfac':150,183 'swift':368,392,425 'swiftui':2,8,18,29,76 'swiftui-liquid-glass':1 'system':408,421 'systemnam':400,413 'tailor':366 'tappabl':168 'target':145,311 'task':451 'test':471 'text':373,383 'tint':301 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'touch/pointer':238 'transit':198,292,344 'treat':460 'treatment':149 'tree':94 'tune':324 'ui':77,270 'ultrathinmateri':387 'up-to-d':438 'usag':54,83,124 'use':22,64,113,141,156,177,217,231,294,326,335,361,445 'user':67,289 'valid':470 'verifi':119 'version':358 'view':202,274 'visual':229,354 'want':68 'width':403,416 'workflow':92 'wrap':275,317","prices":[{"id":"c73789ac-2163-4e2e-9bd1-f8c01d701cfe","listingId":"ff11b0d3-9038-4800-aecc-9f281eb8f9bb","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:45:43.100Z"}],"sources":[{"listingId":"ff11b0d3-9038-4800-aecc-9f281eb8f9bb","source":"github","sourceId":"sickn33/antigravity-awesome-skills/swiftui-liquid-glass","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/swiftui-liquid-glass","isPrimary":false,"firstSeenAt":"2026-04-18T21:45:43.100Z","lastSeenAt":"2026-04-22T06:51:57.539Z"}],"details":{"listingId":"ff11b0d3-9038-4800-aecc-9f281eb8f9bb","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"swiftui-liquid-glass","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34460,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-22T06:40:00Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"c63ad6e74ffff16edd3b4403c060ed64c726df51","skill_md_path":"skills/swiftui-liquid-glass/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/swiftui-liquid-glass"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"swiftui-liquid-glass","description":"Implement or review SwiftUI Liquid Glass APIs with correct fallbacks and modifier order."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/swiftui-liquid-glass"},"updatedAt":"2026-04-22T06:51:57.539Z"}}