[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-d570aa41-6a88-4d02-b210-5f6c36fc1d0b":3,"$f1tqKhfHa7K9L152qqUfAxqRdowJ_1NE4dNpr9zSmENg":42},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":33},"d570aa41-6a88-4d02-b210-5f6c36fc1d0b","swiftui-liquid-glass","实现或审查SwiftUI Liquid Glass API，确保正确的回退和修改器顺序。","cat_coding_backend","mod_coding","sickn33,coding","---\nname: swiftui-liquid-glass\ndescription: Implement or review SwiftUI Liquid Glass APIs with correct fallbacks and modifier order.\nrisk: safe\nsource: \"Dimillian\u002FSkills (MIT)\"\ndate_added: \"2026-03-25\"\n---\n\n# 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\u002Fappearance 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\u002Fpointer.\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\u002Fappearance 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)` \u002F `.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\u002Ftints\u002Fspacing.\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\u002Fliquid-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.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,194,850,"2026-05-16 13:42:43",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"编程开发","coding","mdi-code-braces","代码生成、调试、审查，提升开发效率",2,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":25,"skillCount":32,"createdAt":26},"后端开发","backend","mdi-server","API、数据库、服务端架构",296,[34],{"id":35,"skillId":4,"version":36,"fileName":37,"fileSize":38,"filePath":39,"fileHash":40,"manifest":41,"createdAt":19},"0525b333-f180-4dd2-bdba-f25a7d432afe","1.0.0","swiftui-liquid-glass.zip",4802,"uploads\u002Fskills\u002Fd570aa41-6a88-4d02-b210-5f6c36fc1d0b\u002Fswiftui-liquid-glass.zip","1e2428e6980a5b0e21ace85af46ffe7b9505953e693c577942275b1248fe8aea","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":4152},{\"path\":\"agents\u002Fopenai.yaml\",\"isDirectory\":false,\"size\":221},{\"path\":\"references\u002Fliquid-glass.md\",\"isDirectory\":false,\"size\":8159}]",{"code":43,"message":44,"data":45},200,"success",{"items":46,"stats":47,"page":50},[],{"averageRating":48,"totalRatings":48,"ratingCounts":49},0,[48,48,48,48,48],{"limit":51,"offset":48,"hasMore":52,"nextOffset":51,"ratedOnly":16},15,false]