Claude MarketplacesSubmit
devanshudesai avatar

Expo Liquid Glass

devanshudesai/agent-skills

This brings iOS 26 Liquid Glass UI to Expo apps with four implementation paths: expo-glass-effect for most RN screens, @expo/ui for SwiftUI-backed transitions, unstable native tabs for system tab bars, and Callstack's third-party package as an alternative. The workflow is strict: preflight runtime constraints, apply HIG-aligned visual rules before writing code, guard every glass component with explicit fallbacks, and run accessibility checks across light/dark and tinted appearances. It treats these APIs as fast-moving and assumes you'll need a dev build for iOS-native features. The skill leans hard on Apple's design intent, keeping glass for chrome and controls rather than content surfaces, and includes practical fixes for double-blur headers and flat-looking surfaces that lose refraction cues.

skills.sh installs
493
GitHub stars
12
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add devanshudesai/agent-skills --skill expo-liquid-glass --agent claude-code

Installs into .claude/skills of the current project.

Files

Expo Liquid Glass

Ship Liquid Glass UI that feels native, stays legible, and degrades safely across iOS/Android.

Execution Order

  1. Confirm platform/runtime constraints.
  2. Check design alignment against HIG buckets (recommended for design-heavy tasks).
  3. Pick one primary implementation path (add a second path only if needed).
  4. Apply Apple-aligned visual rules before writing code.
  5. Implement guarded glass components with explicit fallbacks.
  6. Run accessibility and visual QA in both light/dark and clear/tinted appearances.

1) Preflight Constraints

  • Use Liquid Glass only for controls/navigation chrome, not primary content surfaces.
  • Treat these APIs as fast-moving: check current Expo SDK docs before finalizing syntax.
  • Expect a development build for advanced iOS-native features: expo-glass-effect and @expo/ui are not reliable in Expo Go on iOS.
  • Keep scope on Liquid Glass in Expo: use HIG rules to guide implementation, not to redesign unrelated product behavior.

2) Design Alignment (Recommended for design-heavy tasks)

For tasks that involve significant visual design decisions, evaluate against these HIG buckets:

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/devanshudesai/agent-skills
Categories
Frontend Development, Code Review & Quality, AI & Agent Building, Mobile Development, Design & UI/UX
First seen
Jun 3, 2026

Recommended

More Frontend Development
1dkyazzentwatwa avatardocument-converter-suitedkyazzentwatwa/chatgpt-skillsConvert PDFs, Office docs, markdown, HTML, and tables between editable formats. Use for best-effort document conversion, PDF utilities, form filling, and table 490skills.sh installs
2dylanfeltus avatarvisual-qadylanfeltus/skillsUse vision models to self-review screenshots against design intent. Catches spacing issues, alignment problems, color inconsistencies, responsive bugs, and acce477skills.sh installs
3null-shot avatarcloudflare-opennextnull-shot/cloudflare-skillsDeploy Next.js to Cloudflare Workers with full App Router, Pages Router, ISR, and SSG support. Load when creating Next.js projects for Workers, migrating from V466skills.sh installs
4secondsky avatartanstack-routersecondsky/claude-skillsTanStack Router type-safe file-based routing for React. Use for SPAs, TanStack Query integration, Cloudflare Workers, or encountering devtools, type safety, loa461skills.sh installs
5next-safe-action avatarsafe-action-tanstack-querynext-safe-action/skillsUse when integrating next-safe-action with TanStack Query (React Query) -- mutationOptions(), useMutation, ActionMutationError error handling, type guards, opti453skills.sh installs
6ncklrs avatarremotion-animationncklrs/startup-os-skillsGenerates animation configurations for Remotion including spring configs, interpolations, easing functions, and timing logic. Focuses ONLY on animation paramete452skills.sh installs