skills.rest
Javeria-Javaid
Javeria-JavaidCOMMUNITY
Explore all skills by this author →
GitHub

spatial-design

Implements glass-like spatial UI panels with backdrop blur across web and mobile frameworks.

3|Updated Jul 17, 2026
Search Tags:#css#glassmorphism#swiftui#flutter#spatial design#vision pro#backdrop blur
One-click install
npx skills add https://github.com/Javeria-Javaid/Alkhidmat_foundation_lahore --skill spatial-design-javeria-javaid
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: spatial-design
Source: https://github.com/Javeria-Javaid/Alkhidmat_foundation_lahore/tree/main/Users/Javeria/Desktop/Alkhidmat_foundation_lahore/.agents/skills/design-it/spatial-design
Command: npx skills add https://github.com/Javeria-Javaid/Alkhidmat_foundation_lahore --skill spatial-design-javeria-javaid

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @react-native-community/blur.

What problem does it solve? Designers and developers often struggle to translate Apple Vision Pro-style spatial aesthetics—transparent glass panels, environmental blur, and specular rim lighting—into working code across different platforms. ## Core Features & Use Cases - Cross-Platform Glass UI Recipes: Ready-to-use implementations for CSS, SwiftUI, Flutter, React Native, and Jetpack Compose. - Visual DNA Guidelines: Concrete rules for colors, typography, specular highlights, and nested glass layers that define the spatial aesthetic. - Use Case: When building a landing page or app screen inspired by visionOS, apply the provided backdrop-blur panel and rim-light border patterns to achieve environment-aware glassmorphism without trial and error. ## Quick Start Ask the AI to build a spatial design glass panel UI for your target platform using this style guide.

Frequently Asked Questions about spatial-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a glassmorphism panel with CSS backdrop-filter?▼

Apply background: rgba(255,255,255,0.2) with backdrop-filter: blur(40px) saturate(150%) to create the glass material. Add an inset box-shadow for the specular rim light and a soft outer shadow for depth.

How to build spatial design UI in SwiftUI?▼

Use .background(.ultraThinMaterial) on a rounded container to get the native visionOS glass effect. Overlay a LinearGradient stroke on a RoundedRectangle to simulate the specular rim light hitting the top edge.

Does React Native support backdrop blur for glass UI?▼

React Native requires the @react-native-community/blur package. Use BlurView with blurType="light" for main panels and blurType="dark" for nested buttons to create contrast between glass layers.

Can Flutter achieve the Apple Vision Pro glass effect?▼

Yes, wrap content in ClipRRect with BackdropFilter using ImageFilter.blur. Nest a second BackdropFilter inside buttons to create the layered glass look characteristic of spatial design.

What are the limitations of spatial design styling?▼

This is a styling reference only and does not replace accessibility testing or environment-specific validation. Contrast ratios and responsive behavior must be verified separately, and Android blur requires API level 31 or higher.

Related Skills

Explore More Design & Creative Skills→
sanky369sanky369
29

creative-strategist

Define brand visual direction and generate mood boards and style guides.

Community
Advanced
kchaplkchapl

web-designer

Audit web pages for accessibility, typography, and responsive layout.

Community
Basic
Fabio29TFabio29T

liquid-glass-design

Implement Apple's Liquid Glass design system across SwiftUI, UIKit, and WidgetKit.

Community
Intermediate
ZiadNagarZiadNagar

progressive-blur

Create layered progressive blur overlays using backdrop-filter and mask-image CSS properties.

Community
Advanced