{"id":"2594d42e-537c-4e74-9cbe-fa1325ab798f","shortId":"zBCKS5","kind":"skill","title":"axiom-liquid-glass","tagline":"Apple Liquid Glass design system — comprehensive design philosophy, implementation guide, and technical API reference from WWDC 2025. Covers design principles (iOS-native glass hierarchy, restraint over spectacle), implementation patterns (Regular vs Clear variants, SwiftUI glass","description":"# Liquid Glass — Apple's Design System\n\n## When to Use This Skill\n\n- Implementing Liquid Glass effects in your app\n- Reviewing existing UI for Liquid Glass adoption opportunities\n- Debugging visual artifacts with Liquid Glass materials\n- Optimizing Liquid Glass performance\n- Requesting expert review of Liquid Glass implementation\n- Redesigning a mobile app UI to feel iOS-native with glass materials\n- Understanding Regular vs Clear variants, tinting, legibility\n- Conducting design reviews with professional push-back frameworks\n\n---\n\n## Part 1: Design Philosophy\n\n### Core Principles\n\n- **Native over custom** — Use system components and patterns first\n- **Restraint over spectacle** — Glass is a tool for hierarchy, not decoration\n- **Material is functional, not decorative** — Improves clarity and depth\n- **\"Feels obvious\" rather than \"looks fancy\"** — Calm, confident, inevitable\n- **Glass complements content** — Lets content shine through\n\nAvoid trendy glassmorphism gimmicks. Glass effects should appear only where they improve clarity and depth. Every screen should feel like it belongs in a first-party Apple app.\n\n### What is Liquid Glass?\n\nLiquid Glass is Apple's next-generation material design system introduced at WWDC 2025. It represents a significant evolution from previous materials (Aqua, iOS 7 blurs, Dynamic Island) by creating a new digital meta-material that:\n\n- **Dynamically bends and shapes light** (lensing) rather than scattering it\n- **Moves organically** like a lightweight liquid, responding to touch and app dynamism\n- **Adapts automatically** to size, environment, content, and light/dark modes\n- **Unifies design language** across all Apple platforms\n\n### iOS Material Hierarchy\n\nUse glass materials to express depth and context:\n\n| Material | Use For | Visual Weight |\n|----------|---------|---------------|\n| Ultra-thin | Subtle overlays, toolbars, floating controls | Lightest |\n| Regular | Cards needing gentle separation | Medium |\n| Thick | Bottom sheets, modals, areas requiring strong readability | Heaviest |\n\n**Rules:**\n- Background must remain legible through blur (never \"muddy\")\n- Material opacity and blur should scale with background complexity\n- Prefer fewer, larger glass surfaces over many small glass chips\n\n---\n\n## Part 2: Visual Properties\n\n### 1. Lensing (Primary Characteristic)\n\nLiquid Glass defines itself through **lensing** — the warping and bending of light that communicates presence, motion, and form. Unlike previous materials that scattered light, Liquid Glass uses instinctive visual cues from the natural world.\n\n- Dynamically concentrates and shapes light in real-time\n- Provides definition against background while feeling visually grounded\n- Controls feel ultra-lightweight and transparent while visually distinguishable\n- Elements materialize in/out by modulating light bending (not fading)\n\n### 2. Motion & Fluidity\n\n- **Instant flex and energize** — Responds to interaction by flexing with light\n- **Gel-like flexibility** — Communicates transient, malleable nature\n- **Temporary lift** — Elements can lift into Liquid Glass on interaction\n- **Dynamic morphing** — Continuously shape-shifts between app states\n- **Lightweight transitions** — Menus pop open in-line, maintaining relationship to source\n- Smooth, natural easing (no playful bounce unless system-like)\n- Motion explains hierarchy, not decoration\n\n### 3. Adaptive Behavior\n\nLiquid Glass **continuously adapts** without fixed light/dark appearance:\n\n- Shadows become more prominent when text scrolls underneath\n- Tint and dynamic range shift to ensure legibility\n- Independently switches light/dark to feel at home in any context\n- Larger elements (menus, sidebars) simulate thicker material\n- Ambient environment subtly spills onto surface\n\n---\n\n## Part 3: Implementation Guide\n\n### Basic API Usage — SwiftUI `glassEffect` Modifier\n\n```swift\n// Basic usage - applies glass within capsule shape\nText(\"Hello\")\n    .glassEffect()\n\n// Custom shape\nText(\"Hello\")\n    .glassEffect(in: RoundedRectangle(cornerRadius: 12))\n\n// Interactive elements (iOS)\nButton(\"Tap Me\") { }\n    .glassEffect()\n    .interactive()\n```\n\n**Automatic Adoption**: Simply recompiling with Xcode 26 brings Liquid Glass to standard controls automatically.\n\n### Variants: Regular vs Clear\n\n**CRITICAL DECISION**: Never mix Regular and Clear in the same interface.\n\n#### Regular Variant (Default — Use 95% of the Time)\n\n- Most versatile, full visual and adaptive effects\n- Provides legibility regardless of context\n- Works in any size, over any content\n\n**When to use**: Navigation bars, tab bars, toolbars, buttons, menus, sidebars\n\n```swift\nNavigationView {\n    // Content\n}\n.glassEffect() // Uses Regular variant by default\n```\n\n#### Clear Variant (Special Cases Only)\n\n- Permanently more transparent, no adaptive behaviors\n- **Requires dimming layer** for legibility\n\n**Use ONLY when ALL three conditions are met**:\n1. Element is over **media-rich content**\n2. Content layer won't be negatively affected by **dimming layer**\n3. Content above glass is **bold and bright**\n\n```swift\nZStack {\n    MediaRichBackground()\n        .overlay(.black.opacity(0.3)) // Dimming layer\n    BoldBrightControl()\n        .glassEffect(.clear)\n}\n```\n\n**WARNING**: Using Clear without meeting all three conditions results in poor legibility.\n\n### Design Principles & Best Practices\n\n#### Reserve Glass for Navigation Layer\n\n```\n[Content Layer — No Glass]\n    |\n[Navigation Layer — Liquid Glass]\n    - Tab bars, Navigation bars, Toolbars, Floating controls\n```\n\n#### DO NOT Use on Content Layer\n\n```swift\n// WRONG\nList(items) { item in\n    Text(item.name)\n}\n.glassEffect() // Competes with navigation, muddy hierarchy\n```\n\n#### DO NOT Stack Glass on Glass\n\n```swift\n// WRONG\nZStack {\n    NavigationBar().glassEffect()\n    FloatingButton().glassEffect() // Glass on glass\n}\n\n// CORRECT\nZStack {\n    NavigationBar().glassEffect()\n    FloatingButton()\n        .foregroundStyle(.primary) // Use fills, transparency, vibrancy\n}\n```\n\n#### Avoid Content Intersections in Steady State\n\nReposition or scale content to maintain separation. Intersections are acceptable during scrolling/transitions.\n\n---\n\n## Part 4: Tinting & Color\n\n### Adaptive Tinting System\n\n1. Selecting color generates range of tones\n2. Tones mapped to content brightness underneath\n3. Changes hue, brightness, saturation based on background\n4. Doesn't deviate too much from intended color\n\n```swift\nButton(\"Primary Action\") { }\n    .tint(.red)\n    .glassEffect()\n```\n\n### Tinting Rules\n\n- **DO**: Use tinting for primary actions only\n- **DON'T**: Tint everything (when everything is tinted, nothing stands out)\n- **DON'T**: Use solid fills on glass elements (breaks visual character)\n- Use color in content layer instead, reserve tinting for primary UI actions\n\n```swift\n// WRONG - Solid fill breaks glass character\nButton(\"Action\") {}\n    .background(.red) // Opaque\n\n// CORRECT - Transparent, grounded\nButton(\"Action\") {}\n    .tint(.red)\n    .glassEffect()\n```\n\n---\n\n## Part 5: Scroll Edge Effects\n\nWork in concert with Liquid Glass to maintain separation with scrolling content.\n\n- Content scrolling -> effect gently dissolves content into background\n- Lifts glass visually above moving content\n- Darker content triggers dark style for contrast\n\n### Hard Style Effect\n\nUse when pinned accessory views exist:\n\n```swift\nScrollView { }\n    .scrollEdgeEffect(.hard)\n```\n\n---\n\n## Part 6: Layout & Component Patterns\n\n### Typography\n- System-first typography (SF Pro style)\n- Clear hierarchy using size & weight, not color\n- Prefer semantic text styles (Title / Headline / Body / Caption)\n\n### Color\n- Neutral palette by default (white, off-white, system grays)\n- Accent colors used sparingly (1 primary accent max)\n- Avoid neon, high saturation blocks, heavy gradients\n\n### Buttons\n- Prefer system button semantics\n- Glass button usage: only for floating contexts (toolbar, overlay)\n- Press state: slight opacity down + subtle scale, never flashy\n\n### Lists\n- iOS list rhythm (consistent row height, predictable spacing)\n- Glass behind lists: only if list is within a sheet/overlay\n- Ensure text contrast and scannability remain high\n\n### Navigation\n- Standard navigation bars with large titles when appropriate\n- Translucent nav bar when content scrolls under it\n- Preserve clear title hierarchy and scroll behavior\n\n### Modals & Sheets\n- Bottom sheets preferred, respect drag-to-dismiss\n- Regular/Thick material based on background complexity\n- Avoid full-screen modal unless task truly demands it\n\n### Layout Principles\n- iOS-native layout patterns, safe-area aware\n- Comfortable touch targets (44pt+)\n- Use whitespace and grouping as main separators\n- Cards should feel light and system-like\n\n---\n\n## Part 7: Layered System Architecture\n\n### 1. Highlights Layer\n- Light sources produce highlights responding to geometry\n- Lights move during interactions, defining silhouette\n- Some respond to device motion\n\n### 2. Shadows Layer\n- Aware of background content\n- Increases shadow opacity over text for separation\n- Lowers shadow opacity over solid light backgrounds\n\n### 3. Internal Glow (Interaction Feedback)\n- Illuminates from within on interaction\n- Glow starts under fingertips, spreads throughout\n- Spreads to nearby Liquid Glass elements\n\n### 4. Adaptive Tinting Layer\n- Multiple layers adapt together\n- Windows losing focus visually recede (Mac/iPad)\n\n---\n\n## Part 8: Accessibility\n\nLiquid Glass offers accessibility features that modify material **without sacrificing its magic**:\n\n| Feature | Effect | Developer Action |\n|---------|--------|-----------------|\n| Reduced Transparency | Makes glass frostier, obscures more | Automatic |\n| Increased Contrast | Elements predominantly black/white with contrasting border | Automatic |\n| Reduced Motion | Decreases intensity, disables elastic properties | Automatic |\n\n**No developer action required** — all features apply automatically when using Liquid Glass.\n\n---\n\n## Part 9: Performance Considerations\n\n### View Hierarchy\n- Regular variant optimized for performance\n- Avoid excessive nesting of glass elements\n- Flatten hierarchy when possible\n\n```swift\n// WRONG - Deep nesting\nZStack {\n    GlassContainer1().glassEffect()\n    ZStack {\n        GlassContainer2().glassEffect()\n    }\n}\n\n// CORRECT - Flat hierarchy\nVStack {\n    GlassContainer1().glassEffect()\n    GlassContainer2().glassEffect()\n}\n```\n\n### Rendering Costs\n- Don't animate Liquid Glass elements unnecessarily\n- Use Clear variant sparingly (requires dimming layer computation)\n- Profile with Instruments if experiencing performance issues\n\n---\n\n## Part 10: Testing\n\n### Visual Regression Testing\n\n```swift\nfunc testLiquidGlassAppearance() {\n    let app = XCUIApplication()\n    app.launch()\n\n    // Test light mode\n    XCTContext.runActivity(named: \"Light Mode Glass\") { _ in\n        let screenshot = app.screenshot()\n    }\n\n    // Test dark mode\n    app.launchArguments = [\"-UIUserInterfaceStyle\", \"dark\"]\n    app.launch()\n    XCTContext.runActivity(named: \"Dark Mode Glass\") { _ in\n        let screenshot = app.screenshot()\n    }\n}\n```\n\n### Critical Test Cases\n- Light mode vs dark mode\n- Reduced Transparency / Increased Contrast / Reduced Motion enabled\n- Dynamic Type (larger text sizes)\n- Content scrolling (verify scroll edge effects)\n- Right-to-left languages\n\n### Accessibility Testing\n\n```swift\nfunc testLiquidGlassAccessibility() {\n    app.launchArguments += [\n        \"-UIAccessibilityIsReduceTransparencyEnabled\", \"1\",\n        \"-UIAccessibilityButtonShapesEnabled\", \"1\",\n        \"-UIAccessibilityIsReduceMotionEnabled\", \"1\"\n    ]\n    XCTAssertTrue(glassElement.exists)\n    XCTAssertTrue(glassElement.isHittable)\n}\n```\n\n---\n\n## Part 11: Design Review & Push-Back Framework\n\n### Red Flags — Requests That Violate Guidelines\n\nIf you hear ANY of these, **STOP and reference the skill**:\n\n- \"Use Clear everywhere\" — Clear requires three specific conditions\n- \"Glass looks better than fills\" — Correct layer trumps aesthetics\n- \"Stack glass on glass for consistency\" — Explicitly prohibited\n- \"Apply glass to Lists for sophistication\" — Lists are content layer\n\n### How to Push Back Professionally\n\n**Step 1: Show the Framework**\n```\n\"Let me show you Apple's guidance on Clear variant.\nIt requires THREE conditions:\n1. Media-rich content background\n2. Dimming layer for legibility\n3. Bold, bright controls on top\nLet me show which screens meet all three...\"\n```\n\n**Step 2: Demonstrate the Risk**\nOpen the app on a device. Show Clear variant in low-contrast scenario (unreadable) vs Regular (legible).\n\n**Step 3: Offer Compromise**\n```\n\"Clear works beautifully in these hero sections where all three conditions apply.\nRegular handles everything else with automatic legibility. Best of both worlds.\"\n```\n\n**Step 4: Document the Decision**\nIf overruled, send written documentation of the decision and monitoring plan.\n\n---\n\n## Part 12: Expert Review Checklist\n\n### 1. Material Appropriateness\n- [ ] Glass used only on navigation layer (not content)?\n- [ ] Standard controls get glass automatically via Xcode 26 recompile?\n- [ ] No glass-on-glass situations?\n\n### 2. Variant Selection\n- [ ] Regular variant used for most cases?\n- [ ] Clear variant meets all three conditions where used?\n- [ ] Regular and Clear never mixed in same interface?\n\n### 3. Legibility & Contrast\n- [ ] Primary actions selectively tinted (not everything)?\n- [ ] Solid fills avoided on glass elements?\n- [ ] Elements maintain legibility on various backgrounds?\n\n### 4. Layering & Hierarchy\n- [ ] Content intersections avoided in steady states?\n- [ ] Elements on top of glass use fills/transparency (not glass)?\n- [ ] Visual hierarchy clear (navigation vs content layer)?\n\n### 5. Scroll Edge Effects\n- [ ] Applied where glass meets scrolling content?\n- [ ] Hard style used for pinned accessory views?\n\n### 6. Accessibility\n- [ ] Works with Reduced Transparency, Increased Contrast, Reduced Motion?\n- [ ] Interactive elements hittable in all configurations?\n\n### 7. Performance\n- [ ] View hierarchy reasonably flat?\n- [ ] Glass elements animated only when necessary?\n- [ ] Clear variant used sparingly?\n\n---\n\n## Part 13: API Reference\n\n### SwiftUI Modifiers\n\n#### `glassEffect(in:isInteractive:)`\n\n```swift\nfunc glassEffect<S: Shape>(\n    in shape: S = Capsule(),\n    isInteractive: Bool = false\n) -> some View\n```\n\n#### `glassEffect(_:in:isInteractive:)`\n\n```swift\nfunc glassEffect<S: Shape>(\n    _ variant: GlassVariant,  // .regular or .clear\n    in shape: S = Capsule(),\n    isInteractive: Bool = false\n) -> some View\n```\n\n#### `scrollEdgeEffect(_:)`\n\n```swift\nfunc scrollEdgeEffect(_ style: ScrollEdgeStyle) -> some View\n// styles: .automatic, .soft, .hard\n```\n\n#### `scrollEdgeEffectStyle(_:for:)` (NEW in iOS 26)\n\n```swift\nfunc scrollEdgeEffectStyle(_ style: ScrollEdgeStyle, for edges: Edge.Set) -> some View\n```\n\n#### `glassBackgroundEffect()` (NEW in iOS 26)\n\nApply glass effect to custom views for reflecting surrounding content.\n\n```swift\nCustomPhotoGrid()\n    .glassBackgroundEffect()\n```\n\n#### `GlassEffectContainer` (NEW in iOS 26)\n\nContainer for combining multiple Liquid Glass effects with optimized rendering.\n\n```swift\nGlassEffectContainer {\n    HStack {\n        Button(\"Action 1\") { }.glassEffect()\n        Button(\"Action 2\") { }.glassEffect()\n    }\n}\n```\n\nBenefits: Optimizes rendering, fluid morphing between glass shapes, reduced compositor overhead.\n\n### Toolbar Modifiers (NEW in iOS 26)\n\n#### `Spacer(.fixed)` in Toolbars\n\nSeparates toolbar button groups with fixed spacing.\n\n#### `.buttonStyle(.borderedProminent)` + `.tint()` in Toolbars\n\nMakes toolbar items prominent with Liquid Glass tinting.\n\n### Navigation & Search (NEW in iOS 26)\n\n- **Bottom-aligned search** on iPhone (automatic with `.searchable()`)\n- **Search tab role** with `.tabRole(.search)` — morphs into search field\n- **Tab bar minimization** with `.tabBarMinimizationBehavior(.onScrollDown)`\n\n### Types\n\n```swift\nenum GlassVariant {\n    case regular  // Default - full adaptive behavior\n    case clear    // More transparent, no adaptation\n}\n\nenum ScrollEdgeStyle {\n    case automatic  // System determines\n    case soft       // Gradual fade\n    case hard       // Uniform across toolbar height\n}\n```\n\n---\n\n## Part 14: Backward Compatibility\n\n### UIDesignRequiresCompatibility Key (NEW in iOS 26)\n\nAdd to Info.plist to maintain iOS 18 appearance while building with iOS 26 SDK:\n\n```xml\n<key>UIDesignRequiresCompatibility</key>\n<true/>\n```\n\n**Migration strategy:**\n1. Ship with key enabled\n2. Audit interface changes in separate build\n3. Update interface incrementally\n4. Remove key when ready for Liquid Glass\n\n---\n\n## Output Requirements (For UI Redesigns)\n\nFor each redesigned screen, provide:\n\n1. **Design intent** — What feels more iOS-native and why\n2. **Layout structure** — Regions, spacing, safe-area decisions\n3. **Material map** — Where glass is used, which thickness, and why\n4. **Typography map** — Text styles and hierarchy rationale\n5. **Interaction & motion notes** — Scroll, transitions, gestures\n6. **iOS-native justification** — System defaults, familiarity, clarity\n\n---\n\n## Absolute Avoid List\n\n- Over-designed custom components\n- Glass everywhere (blanket translucency)\n- Trendy gimmicks (neon, glow, heavy gradients, fake reflections)\n- Harsh borders or outlines\n- Dense, cluttered information layouts\n- Non-standard navigation patterns\n- Solid opaque fills on glass elements\n\n---\n\n## Resources\n\n**WWDC**: 2025-219, 2025-323, 2025-256\n**Docs**: /technologyoverviews/adopting-liquid-glass, /swiftui/landmarks-building-an-app-with-liquid-glass, /swiftui/applying-liquid-glass-to-custom-views\n**Related Skills**: axiom-liquid-glass-ref, swiftui-liquid-glass\n**Platforms:** iOS 26+, iPadOS 26+, macOS Tahoe, visionOS 3\n**Xcode:** 26+","tags":["axiom","liquid","glass","coco","rkz91","agent-skills","agents-md","ai-agents","claude-code","codex","cursor","developer-tools"],"capabilities":["skill","source-rkz91","skill-axiom-liquid-glass","topic-agent-skills","topic-agents-md","topic-ai-agents","topic-claude-code","topic-codex","topic-cursor","topic-developer-tools","topic-llm-tools","topic-mcp","topic-pm-tools","topic-product-management","topic-productivity"],"categories":["coco"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/rkz91/coco/axiom-liquid-glass","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add rkz91/coco","source_repo":"https://github.com/rkz91/coco","install_from":"skills.sh"}},"qualityScore":"0.453","qualityRationale":"deterministic score 0.45 from registry signals: · indexed on github topic:agent-skills · 7 github stars · SKILL.md body (17,794 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-05-18T19:14:05.684Z","embedding":null,"createdAt":"2026-05-18T13:21:37.191Z","updatedAt":"2026-05-18T19:14:05.684Z","lastSeenAt":"2026-05-18T19:14:05.684Z","tsv":"'-219':2149 '-256':2153 '-323':2151 '/swiftui/applying-liquid-glass-to-custom-views':2157 '/swiftui/landmarks-building-an-app-with-liquid-glass':2156 '/technologyoverviews/adopting-liquid-glass':2155 '0.3':708 '1':115,346,676,822,1017,1162,1438,1440,1442,1513,1531,1627,1880,2018,2052 '10':1360 '11':1448 '12':567,1623 '13':1774 '14':1991 '18':2006 '2':343,420,684,829,1183,1537,1557,1653,1884,2023,2063 '2025':21,212,2148,2150,2152 '26':582,1645,1831,1846,1864,1902,1932,1999,2012,2171,2173,2179 '3':488,539,695,836,1204,1542,1580,1678,2030,2072,2177 '4':816,844,1226,1607,1699,2034,2083 '44pt':1141 '5':924,1724,2091 '6':975,1741,2098 '7':223,1158,1757 '8':1241 '9':1297 '95':609 'absolut':2107 'accent':1013,1019 'accept':812 'access':1242,1246,1431,1742 'accessori':967,1739 'across':270,1987 'action':856,867,902,911,919,1258,1286,1682,1879,1883 'adapt':258,489,494,618,661,819,1227,1232,1966,1973 'add':2000 'adopt':65,577 'aesthet':1488 'affect':691 'align':1935 'ambient':532 'anim':1339,1765 'api':17,543,1775 'app':58,88,193,256,459,1369,1563 'app.launch':1371,1390 'app.launcharguments':1387,1436 'app.screenshot':1383,1399 'appear':172,498,2007 'appl':5,43,192,201,272,1521 'appli':551,1290,1497,1594,1728,1847 'appropri':1085,1629 'aqua':221 'architectur':1161 'area':309,1136,2070 'artifact':69 'audit':2024 'automat':259,576,589,1266,1275,1283,1291,1600,1642,1823,1939,1977 'avoid':165,797,1021,1117,1307,1689,1704,2108 'awar':1137,1186 'axiom':2,2161 'axiom-liquid-glass':1 'axiom-liquid-glass-ref':2160 'back':112,1453,1510 'background':315,330,396,843,912,947,1115,1188,1203,1536,1698 'backward':1992 'bar':636,638,744,746,1080,1088,1953 'base':841,1113 'basic':542,549 'beauti':1585 'becom':500 'behavior':490,662,1100,1967 'behind':1061 'belong':186 'bend':237,359,417 'benefit':1886 'best':728,1602 'better':1482 'black.opacity':707 'black/white':1271 'blanket':2117 'block':1025 'blur':224,320,326 'bodi':1000 'bold':700,1543 'boldbrightcontrol':711 'bool':1790,1810 'border':1274,2128 'borderedpromin':1915 'bottom':306,1103,1934 'bottom-align':1933 'bounc':478 'break':888,907 'bright':702,834,839,1544 'bring':583 'build':2009,2029 'button':571,640,854,910,918,1028,1031,1034,1878,1882,1909 'buttonstyl':1914 'calm':155 'capsul':554,1788,1808 'caption':1001 'card':300,1149 'case':655,1402,1661,1962,1968,1976,1980,1984 'chang':837,2026 'charact':890,909 'characterist':349 'checklist':1626 'chip':341 'clariti':146,177,2106 'clear':37,101,593,600,652,713,716,987,1095,1345,1473,1475,1525,1568,1583,1662,1672,1719,1769,1804,1969 'clutter':2132 'color':818,824,852,892,993,1002,1014 'combin':1867 'comfort':1138 'communic':363,438 'compat':1993 'compet':765 'complement':159 'complex':331,1116 'compon':125,977,2114 'compositor':1895 'comprehens':10 'compromis':1582 'comput':1351 'concentr':385 'concert':930 'condit':673,721,1479,1530,1593,1667 'conduct':105 'confid':156 'configur':1756 'consider':1299 'consist':1055,1494 'contain':1865 'content':160,162,263,631,645,683,685,696,735,754,798,806,833,894,939,940,945,953,955,1090,1189,1420,1505,1535,1637,1702,1722,1733,1856 'context':284,524,624,1039 'continu':454,493 'contrast':960,1072,1268,1273,1411,1573,1680,1748 'control':297,401,588,749,1545,1639 'core':118 'cornerradius':566 'correct':786,915,1327,1485 'cost':1336 'cover':22 'creat':228 'critic':594,1400 'cue':379 'custom':122,559,1851,2113 'customphotogrid':1858 'dark':957,1385,1389,1393,1406 'darker':954 'debug':67 'decis':595,1610,1618,2071 'decor':139,144,487 'decreas':1278 'deep':1319 'default':607,651,1006,1964,2104 'defin':352,1176 'definit':394 'demand':1125 'demonstr':1558 'dens':2131 'depth':148,179,282 'design':8,11,23,45,106,116,207,268,726,1449,2053,2112 'determin':1979 'develop':1257,1285 'deviat':847 'devic':1181,1566 'digit':231 'dim':664,693,709,1349,1538 'disabl':1280 'dismiss':1110 'dissolv':944 'distinguish':410 'doc':2154 'document':1608,1615 'doesn':845 'drag':1108 'drag-to-dismiss':1107 'dynam':225,236,257,384,452,509,1415 'eas':475 'edg':926,1424,1726,1838 'edge.set':1839 'effect':55,170,619,927,942,963,1256,1425,1727,1849,1871 'elast':1281 'element':411,444,526,569,677,887,1225,1269,1312,1342,1692,1693,1708,1752,1764,2145 'els':1598 'enabl':1414,2022 'energ':426 'ensur':513,1070 'enum':1960,1974 'environ':262,533 'everi':180 'everyth':872,874,1597,1686 'everywher':1474,2116 'evolut':217 'excess':1308 'exist':60,969 'experienc':1356 'expert':79,1624 'explain':484 'explicit':1495 'express':281 'fade':419,1983 'fake':2125 'fals':1791,1811 'familiar':2105 'fanci':154 'featur':1247,1255,1289 'feedback':1208 'feel':91,149,183,398,402,519,1151,2056 'fewer':333 'field':1951 'fill':794,884,906,1484,1688,2142 'fills/transparency':1714 'fingertip':1217 'first':128,190,982 'first-parti':189 'fix':496,1904,1912 'flag':1456 'flashi':1050 'flat':1328,1762 'flatten':1313 'flex':424,431 'flexibl':437 'float':296,748,1038 'floatingbutton':781,790 'fluid':1889 'fluiditi':422 'focus':1236 'foregroundstyl':791 'form':367 'framework':113,1454,1516 'frostier':1263 'full':615,1119,1965 'full-screen':1118 'func':1366,1434,1783,1798,1816,1833 'function':142 'gel':435 'gel-lik':434 'generat':205,825 'gentl':302,943 'geometri':1171 'gestur':2097 'get':1640 'gimmick':168,2120 'glass':4,7,28,40,42,54,64,72,76,83,96,132,158,169,197,199,278,335,340,351,375,449,492,552,585,698,731,738,742,773,775,783,785,886,908,933,949,1033,1060,1224,1244,1262,1295,1311,1341,1379,1395,1480,1490,1492,1498,1630,1641,1649,1651,1691,1712,1716,1730,1763,1848,1870,1892,1925,2041,2076,2115,2144,2163,2168 'glass-on-glass':1648 'glassbackgroundeffect':1842,1859 'glasscontainer1':1322,1331 'glasscontainer2':1325,1333 'glasseffect':546,558,563,574,646,712,764,780,782,789,859,922,1323,1326,1332,1334,1779,1784,1794,1799,1881,1885 'glasseffectcontain':1860,1876 'glasselement.exists':1444 'glasselement.ishittable':1446 'glassmorph':167 'glassvari':1801,1961 'glow':1206,1214,2122 'gradient':1027,2124 'gradual':1982 'gray':1012 'ground':400,917 'group':1145,1910 'guid':14,541 'guidanc':1523 'guidelin':1460 'handl':1596 'hard':961,973,1734,1825,1985 'harsh':2127 'headlin':999 'hear':1463 'heavi':1026,2123 'heaviest':313 'height':1057,1989 'hello':557,562 'hero':1588 'hierarchi':29,137,276,485,769,988,1097,1301,1314,1329,1701,1718,1760,2089 'high':1023,1076 'highlight':1163,1168 'hittabl':1753 'home':521 'hstack':1877 'hue':838 'illumin':1209 'implement':13,33,52,84,540 'improv':145,176 'in-lin':466 'in/out':413 'increas':1190,1267,1410,1747 'increment':2033 'independ':515 'inevit':157 'info.plist':2002 'inform':2133 'instant':423 'instead':896 'instinct':377 'instrument':1354 'intend':851 'intens':1279 'intent':2054 'interact':429,451,568,575,1175,1207,1213,1751,2092 'interfac':604,1677,2025,2032 'intern':1205 'intersect':799,810,1703 'introduc':209 'io':26,93,222,274,570,1052,1130,1830,1845,1863,1901,1931,1998,2005,2011,2059,2100,2170 'ios-nat':25,92,1129,2058,2099 'ipado':2172 'iphon':1938 'isinteract':1781,1789,1796,1809 'island':226 'issu':1358 'item':759,760,1921 'item.name':763 'justif':2102 'key':1995,2021,2036 'languag':269,1430 'larg':1082 'larger':334,525,1417 'layer':665,686,694,710,734,736,740,755,895,1159,1164,1185,1229,1231,1350,1486,1506,1539,1635,1700,1723 'layout':976,1127,1132,2064,2134 'left':1429 'legibl':104,318,514,621,667,725,1541,1578,1601,1679,1695 'lens':241,347,355 'let':161,1368,1381,1397,1517,1548 'lift':443,446,948 'light':240,361,373,388,416,433,1152,1165,1172,1202,1373,1377,1403 'light/dark':265,497,517 'lightest':298 'lightweight':250,405,461 'like':184,248,436,482,1156 'line':468 'liquid':3,6,41,53,63,71,75,82,196,198,251,350,374,448,491,584,741,932,1223,1243,1294,1340,1869,1924,2040,2162,2167 'list':758,1051,1053,1062,1065,1500,1503,2109 'look':153,1481 'lose':1235 'low':1572 'low-contrast':1571 'lower':1197 'mac/ipad':1239 'maco':2174 'magic':1254 'main':1147 'maintain':469,808,935,1694,2004 'make':1261,1919 'malleabl':440 'mani':338 'map':831,2074,2085 'materi':73,97,140,206,220,234,275,279,285,323,370,412,531,1112,1250,1628,2073 'max':1020 'media':681,1533 'media-rich':680,1532 'mediarichbackground':705 'medium':304 'meet':718,1553,1664,1731 'menus':463,527,641 'met':675 'meta':233 'meta-materi':232 'migrat':2016 'minim':1954 'mix':597,1674 'mobil':87 'modal':308,1101,1121 'mode':266,1374,1378,1386,1394,1404,1407 'modifi':547,1249,1778,1898 'modul':415 'monitor':1620 'morph':453,1890,1948 'motion':365,421,483,1182,1277,1413,1750,2093 'move':246,952,1173 'much':849 'muddi':322,768 'multipl':1230,1868 'must':316 'name':1376,1392 'nativ':27,94,120,1131,2060,2101 'natur':382,441,474 'nav':1087 'navig':635,733,739,745,767,1077,1079,1634,1720,1927,2138 'navigationbar':779,788 'navigationview':644 'nearbi':1222 'necessari':1768 'need':301 'negat':690 'neon':1022,2121 'nest':1309,1320 'neutral':1003 'never':321,596,1049,1673 'new':230,1828,1843,1861,1899,1929,1996 'next':204 'next-gener':203 'non':2136 'non-standard':2135 'note':2094 'noth':877 'obscur':1264 'obvious':150 'off-whit':1008 'offer':1245,1581 'onscrolldown':1957 'onto':536 'opac':324,1045,1192,1199 'opaqu':914,2141 'open':465,1561 'opportun':66 'optim':74,1304,1873,1887 'organ':247 'outlin':2130 'output':2042 'over-design':2110 'overhead':1896 'overlay':294,706,1041 'overrul':1612 'palett':1004 'part':114,342,538,815,923,974,1157,1240,1296,1359,1447,1622,1773,1990 'parti':191 'pattern':34,127,978,1133,2139 'perform':77,1298,1306,1357,1758 'perman':657 'philosophi':12,117 'pin':966,1738 'plan':1621 'platform':273,2169 'play':477 'poor':724 'pop':464 'possibl':1316 'practic':729 'predict':1058 'predomin':1270 'prefer':332,994,1029,1105 'presenc':364 'preserv':1094 'press':1042 'previous':219,369 'primari':348,792,855,866,900,1018,1681 'principl':24,119,727,1128 'pro':985 'produc':1167 'profession':109,1511 'profil':1352 'prohibit':1496 'promin':502,1922 'properti':345,1282 'provid':393,620,2051 'push':111,1452,1509 'push-back':110,1451 'rang':510,826 'rather':151,242 'rational':2090 'readabl':312 'readi':2038 'real':391 'real-tim':390 'reason':1761 'reced':1238 'recompil':579,1646 'red':858,913,921,1455 'redesign':85,2046,2049 'reduc':1259,1276,1408,1412,1745,1749,1894 'ref':2164 'refer':18,1469,1776 'reflect':1854,2126 'regardless':622 'region':2066 'regress':1363 'regular':35,99,299,591,598,605,648,1302,1577,1595,1656,1670,1802,1963 'regular/thick':1111 'relat':2158 'relationship':470 'remain':317,1075 'remov':2035 'render':1335,1874,1888 'reposit':803 'repres':214 'request':78,1457 'requir':310,663,1287,1348,1476,1528,2043 'reserv':730,897 'resourc':2146 'respect':1106 'respond':252,427,1169,1179 'restraint':30,129 'result':722 'review':59,80,107,1450,1625 'rhythm':1054 'rich':682,1534 'right':1427 'right-to-left':1426 'risk':1560 'role':1944 'roundedrectangl':565 'row':1056 'rule':314,861 'sacrif':1252 'safe':1135,2069 'safe-area':1134,2068 'satur':840,1024 'scale':328,805,1048 'scannabl':1074 'scatter':244,372 'scenario':1574 'screen':181,1120,1552,2050 'screenshot':1382,1398 'scroll':505,925,938,941,1091,1099,1421,1423,1725,1732,2095 'scrolledgeeffect':972,1814,1817 'scrolledgeeffectstyl':1826,1834 'scrolledgestyl':1819,1836,1975 'scrolling/transitions':814 'scrollview':971 'sdk':2013 'search':1928,1936,1942,1947,1950 'searchabl':1941 'section':1589 'select':823,1655,1683 'semant':995,1032 'send':1613 'separ':303,809,936,1148,1196,1907,2028 'sf':984 'shadow':499,1184,1191,1198 'shape':239,387,456,555,560,1786,1806,1893 'shape-shift':455 'sheet':307,1102,1104 'sheet/overlay':1069 'shift':457,511 'shine':163 'ship':2019 'show':1514,1519,1550,1567 'sidebar':528,642 'signific':216 'silhouett':1177 'simpli':578 'simul':529 'situat':1652 'size':261,628,990,1419 'skill':51,1471,2159 'skill-axiom-liquid-glass' 'slight':1044 'small':339 'smooth':473 'soft':1824,1981 'solid':883,905,1201,1687,2140 'sophist':1502 'sourc':472,1166 'source-rkz91' 'space':1059,1913,2067 'spacer':1903 'spare':1016,1347,1772 'special':654 'specif':1478 'spectacl':32,131 'spill':535 'spread':1218,1220 'stack':772,1489 'stand':878 'standard':587,1078,1638,2137 'start':1215 'state':460,802,1043,1707 'steadi':801,1706 'step':1512,1556,1579,1606 'stop':1467 'strategi':2017 'strong':311 'structur':2065 'style':958,962,986,997,1735,1818,1822,1835,2087 'subt':534 'subtl':293,1047 'surfac':336,537 'surround':1855 'swift':548,643,703,756,776,853,903,970,1317,1365,1433,1782,1797,1815,1832,1857,1875,1959 'swiftui':39,545,1777,2166 'swiftui-liquid-glass':2165 'switch':516 'system':9,46,124,208,481,821,981,1011,1030,1155,1160,1978,2103 'system-first':980 'system-lik':480,1154 'tab':637,743,1943,1952 'tabbarminimizationbehavior':1956 'tabrol':1946 'taho':2175 'tap':572 'target':1140 'task':1123 'technic':16 'temporari':442 'test':1361,1364,1372,1384,1401,1432 'testliquidglassaccess':1435 'testliquidglassappear':1367 'text':504,556,561,762,996,1071,1194,1418,2086 'thick':305,2080 'thicker':530 'thin':292 'three':672,720,1477,1529,1555,1592,1666 'throughout':1219 'time':392,612 'tint':103,507,817,820,857,860,864,871,876,898,920,1228,1684,1916,1926 'titl':998,1083,1096 'togeth':1233 'tone':828,830 'tool':135 'toolbar':295,639,747,1040,1897,1906,1908,1918,1920,1988 'top':1547,1710 'topic-agent-skills' 'topic-agents-md' 'topic-ai-agents' 'topic-claude-code' 'topic-codex' 'topic-cursor' 'topic-developer-tools' 'topic-llm-tools' 'topic-mcp' 'topic-pm-tools' 'topic-product-management' 'topic-productivity' 'touch':254,1139 'transient':439 'transit':462,2096 'transluc':1086,2118 'transpar':407,659,795,916,1260,1409,1746,1971 'trendi':166,2119 'trigger':956 'truli':1124 'trump':1487 'type':1416,1958 'typographi':979,983,2084 'ui':61,89,901,2045 'uiaccessibilitybuttonshapesen':1439 'uiaccessibilityisreducemotionen':1441 'uiaccessibilityisreducetransparencyen':1437 'uidesignrequirescompat':1994,2015 'uiuserinterfacestyl':1388 'ultra':291,404 'ultra-lightweight':403 'ultra-thin':290 'underneath':506,835 'understand':98 'unifi':267 'uniform':1986 'unless':479,1122 'unlik':368 'unnecessarili':1343 'unread':1575 'updat':2031 'usag':544,550,1035 'use':49,123,277,286,376,608,634,647,668,715,752,793,863,882,891,964,989,1015,1142,1293,1344,1472,1631,1658,1669,1713,1736,1771,2078 'variant':38,102,590,606,649,653,1303,1346,1526,1569,1654,1657,1663,1770,1800 'various':1697 'verifi':1422 'versatil':614 'via':1643 'vibranc':796 'view':968,1300,1740,1759,1793,1813,1821,1841,1852 'violat':1459 'visiono':2176 'visual':68,288,344,378,399,409,616,889,950,1237,1362,1717 'vs':36,100,592,1405,1576,1721 'vstack':1330 'warn':714 'warp':357 'weight':289,991 'white':1007,1010 'whitespac':1143 'window':1234 'within':553,1067,1211 'without':495,717,1251 'won':687 'work':625,928,1584,1743 'world':383,1605 'written':1614 'wrong':757,777,904,1318 'wwdc':20,211,2147 'xcode':581,1644,2178 'xctasserttru':1443,1445 'xctcontext.runactivity':1375,1391 'xcuiapplic':1370 'xml':2014 'zstack':704,778,787,1321,1324","prices":[{"id":"c3ac37d8-0510-4bf1-b276-375b262a7c36","listingId":"2594d42e-537c-4e74-9cbe-fa1325ab798f","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"rkz91","category":"coco","install_from":"skills.sh"},"createdAt":"2026-05-18T13:21:37.191Z"}],"sources":[{"listingId":"2594d42e-537c-4e74-9cbe-fa1325ab798f","source":"github","sourceId":"rkz91/coco/axiom-liquid-glass","sourceUrl":"https://github.com/rkz91/coco/tree/main/skills/axiom-liquid-glass","isPrimary":false,"firstSeenAt":"2026-05-18T13:21:37.191Z","lastSeenAt":"2026-05-18T19:14:05.684Z"}],"details":{"listingId":"2594d42e-537c-4e74-9cbe-fa1325ab798f","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"rkz91","slug":"axiom-liquid-glass","github":{"repo":"rkz91/coco","stars":7,"topics":["agent-skills","agents-md","ai","ai-agents","claude-code","codex","cursor","developer-tools","llm-tools","mcp","pm-tools","product-management","productivity","prompt-engineering","workflow-automation"],"license":"mit","html_url":"https://github.com/rkz91/coco","pushed_at":"2026-04-26T01:51:27Z","description":"Open-source library of AI superpowers — 59 skills, 34 commands, 10 agents + 24 GSD subagents, 3 system bundles. An entire team, wherever your AI lives. Vendor-neutral across Claude Code, Cursor, Codex, and any AGENTS.md tool.","skill_md_sha":"8a43dc4072f43dcdf182ff93c6ebcb9d81b7457a","skill_md_path":"skills/axiom-liquid-glass/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/rkz91/coco/tree/main/skills/axiom-liquid-glass"},"layout":"multi","source":"github","category":"coco","frontmatter":{"name":"axiom-liquid-glass","description":"Apple Liquid Glass design system — comprehensive design philosophy, implementation guide, and technical API reference from WWDC 2025. Covers design principles (iOS-native glass hierarchy, restraint over spectacle), implementation patterns (Regular vs Clear variants, SwiftUI glassEffect API, scroll edge effects, tinting), platform adaptation (iOS 26+, iPadOS 26+, macOS Tahoe+, visionOS 3+), accessibility, performance, testing, design review frameworks, and iOS-native UI redesign guidance."},"skills_sh_url":"https://skills.sh/rkz91/coco/axiom-liquid-glass"},"updatedAt":"2026-05-18T19:14:05.684Z"}}