opencode-skills-collection 3.1.0 → 3.1.2

package/bundled-skills/design-it/spatial-computing-ui/SKILL.md

@@ -0,0 +1,300 @@
+---
+name: spatial-computing-ui
+description: Web and App implementation guide for Spatial Computing UI. Trigger when user wants floating elements, environmental awareness, and Apple Vision Pro style.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# Spatial Computing UI
+
+> "A step beyond Spatial Design. Fully 3D windows floating in augmented reality."
+
+
+## When to Use
+Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the `design-it` skill and is not meant to be triggered directly.
+
+## Core Principles
+1. **Z-Space Hierarchy**: Not just drop shadows, but actual 3D distance. Modals float 10px *in front of* the main window.
+2. **Gaze-Based Interaction Cues**: Elements highlight vividly when hovered, anticipating eye-tracking or precise pointer control.
+3. **Glass and Light**: Windows are thick sheets of frosted glass that bend light and cast soft shadows onto the physical environment.
+
+## Visual DNA
+- **Colors**: Relies entirely on the background environment. Uses purely translucent whites (`rgba(255,255,255,0.x)`) and blacks. 
+- **Typography**: `SF Pro`. Heavy use of varied font weights (Regular, Semibold, Bold) to create hierarchy.
+- **Shapes**: High border radii (`24px`-`32px`). Everything is a rounded rectangle or a perfect circle.
+
+## Web Implementation
+- Best emulated using CSS 3D transforms to simulate the user's perspective.
+- **CSS Example**:
+```css
+body {
+  /* Simulate the physical room */
+  background: url('living-room.jpg') center/cover;
+  perspective: 1200px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.spatial-window {
+  width: 800px;
+  height: 600px;
+  border-radius: 32px;
+  
+  /* The Glass Material */
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(50px) saturate(200%);
+  -webkit-backdrop-filter: blur(50px) saturate(200%);
+  
+  /* Specular Highlights */
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  box-shadow: 
+    inset 0 1px 2px rgba(255, 255, 255, 0.8),
+    0 30px 60px rgba(0, 0, 0, 0.3);
+    
+  /* 3D Positioning */
+  transform: translateZ(-100px);
+  transform-style: preserve-3d;
+}
+
+.spatial-modal {
+  /* Floating in front of the main window */
+  position: absolute;
+  top: 50%; left: 50%;
+  transform: translate(-50%, -50%) translateZ(50px);
+  
+  background: rgba(255, 255, 255, 0.6); /* More opaque */
+  backdrop-filter: blur(30px);
+  border-radius: 24px;
+  padding: 30px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+}
+
+.spatial-btn {
+  /* Gaze/Hover interaction */
+  background: rgba(0,0,0,0.05);
+  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.spatial-btn:hover {
+  background: rgba(255,255,255,0.4);
+  transform: translateZ(10px) scale(1.05);
+  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+}
+```
+
+## App Implementation
+
+### SwiftUI (visionOS Native / iOS emulation)
+```swift
+struct SpatialComputingView: View {
+    var body: some View {
+        ZStack {
+            // Simulated room environment
+            Image("living-room")
+                .resizable()
+                .aspectRatio(contentMode: .fill)
+                .ignoresSafeArea()
+            
+            // Spatial Window
+            VStack(spacing: 24) {
+                Text("Spatial Window")
+                    .font(.title).fontWeight(.bold)
+                    .foregroundColor(.white)
+                
+                // Gaze-reactive button
+                Button(action: {}) {
+                    Text("Focus Me")
+                        .fontWeight(.semibold)
+                        .foregroundColor(.white)
+                        .padding(.horizontal, 32)
+                        .padding(.vertical, 16)
+                        // .hoverEffect() is magic on visionOS/iPadOS
+                        // .hoverEffect(.highlight)
+                }
+                .background(Color.black.opacity(0.2))
+                .clipShape(Capsule())
+            }
+            .padding(60)
+            // The magic glass material
+            .background(.ultraThinMaterial)
+            .cornerRadius(32)
+            // Specular edge highlight
+            .overlay(
+                RoundedRectangle(cornerRadius: 32)
+                    .stroke(Color.white.opacity(0.4), lineWidth: 1)
+            )
+            // Environmental shadow
+            .shadow(color: .black.opacity(0.3), radius: 40, y: 30)
+            
+            // Z-Space Modal simulation (if on iOS)
+            // On visionOS, this would be a separate window volume
+            Text("Floating Modal")
+                .foregroundColor(.white)
+                .padding(30)
+                .background(.thinMaterial)
+                .cornerRadius(24)
+                .shadow(color: .black.opacity(0.4), radius: 30, y: 20)
+                .offset(x: 100, y: 100)
+        }
+    }
+}
+```
+- Use `.ultraThinMaterial` for the base windows and `.thinMaterial` for floating popovers so they feel more opaque as they get closer to the eye.
+- Use `.hoverEffect()` extensively if targeting iPadOS or visionOS.
+
+### Flutter
+```dart
+import 'dart:ui';
+
+class SpatialComputingScreen extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Stack(
+        fit: StackFit.expand,
+        children: [
+          // Simulated Environment
+          Image.asset('assets/living-room.jpg', fit: BoxFit.cover),
+          
+          Center(
+            child: ClipRRect(
+              borderRadius: BorderRadius.circular(32),
+              child: BackdropFilter(
+                filter: ImageFilter.blur(sigmaX: 40.0, sigmaY: 40.0), // Heavy blur
+                child: Container(
+                  width: 600, height: 400,
+                  decoration: BoxDecoration(
+                    color: Colors.white.withOpacity(0.15), // Glass tint
+                    borderRadius: BorderRadius.circular(32),
+                    border: Border.all(color: Colors.white.withOpacity(0.4), width: 1), // Specular highlight
+                    // Note: BoxShadow won't render under BackdropFilter nicely unless wrapped in a separate PhysicalModel
+                  ),
+                  child: Center(
+                    child: Column(
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: [
+                        const Text('Spatial Window', style: TextStyle(color: Colors.white, fontSize: 32, fontWeight: FontWeight.bold)),
+                        const SizedBox(height: 32),
+                        // Simulated Gaze Button
+                        InkWell(
+                          onTap: () {},
+                          borderRadius: BorderRadius.circular(50),
+                          hoverColor: Colors.white.withOpacity(0.4), // Reacts to mouse/gaze
+                          child: Container(
+                            padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 16),
+                            decoration: BoxDecoration(color: Colors.black.withOpacity(0.2), borderRadius: BorderRadius.circular(50)),
+                            child: const Text('Focus Me', style: TextStyle(color: Colors.white, fontSize: 18)),
+                          ),
+                        )
+                      ],
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+```
+- You must wrap `BackdropFilter` inside a `ClipRRect` to give the blurred glass rounded corners.
+- `hoverColor` on `InkWell` simulates the gaze-highlighting.
+
+### React Native
+```jsx
+// REQUIRES: @react-native-community/blur
+import { BlurView } from '@react-native-community/blur';
+
+const SpatialComputingScreen = () => {
+  return (
+    <ImageBackground source={{uri: 'room_bg'}} style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      
+      {/* Spatial Window */}
+      <View style={{
+        width: '90%', height: 400,
+        shadowColor: '#000', shadowOffset: { width: 0, height: 30 },
+        shadowOpacity: 0.3, shadowRadius: 40, elevation: 20
+      }}>
+        <BlurView
+          style={{ flex: 1, borderRadius: 32, borderWidth: 1, borderColor: 'rgba(255,255,255,0.4)', padding: 40, justifyContent: 'center', alignItems: 'center' }}
+          blurType="light"
+          blurAmount={30}
+          reducedTransparencyFallbackColor="gray"
+        >
+          <Text style={{ color: '#FFF', fontSize: 32, fontWeight: 'bold', marginBottom: 32 }}>
+            Spatial Window
+          </Text>
+
+          {/* Touchable simulating Gaze */}
+          <TouchableOpacity style={{
+            backgroundColor: 'rgba(0,0,0,0.2)', paddingVertical: 16, paddingHorizontal: 32, borderRadius: 50
+          }}>
+            <Text style={{ color: '#FFF', fontSize: 18, fontWeight: '600' }}>Focus Me</Text>
+          </TouchableOpacity>
+        </BlurView>
+      </View>
+
+    </ImageBackground>
+  );
+};
+```
+- React Native's core cannot do background blur. You *must* install `@react-native-community/blur`.
+- Apply shadows to a wrapper `View`, and put the `BlurView` inside it with `borderRadius` and `borderWidth`.
+
+### Jetpack Compose
+```kotlin
+@Composable
+fun SpatialComputingScreen() {
+    Box(modifier = Modifier.fillMaxSize()) {
+        // Environment
+        Image(painterResource(R.drawable.living_room), contentDescription = null, contentScale = ContentScale.Crop, modifier = Modifier.fillMaxSize())
+        
+        // Spatial Window
+        Box(
+            modifier = Modifier
+                .align(Alignment.Center)
+                .size(600.dp, 400.dp)
+                // Note: Native Android background blur requires Android 12+ (RenderEffect)
+                .graphicsLayer {
+                    renderEffect = RenderEffect.createBlurEffect(40f, 40f, Shader.TileMode.DECAL).asComposeRenderEffect()
+                    clip = true
+                    shape = RoundedCornerShape(32.dp)
+                }
+                .background(Color.White.copy(alpha = 0.15f))
+                .border(1.dp, Color.White.copy(alpha = 0.4f), RoundedCornerShape(32.dp))
+                .padding(40.dp),
+            contentAlignment = Alignment.Center
+        ) {
+            Column(horizontalAlignment = Alignment.CenterHorizontally) {
+                Text("Spatial Window", color = Color.White, fontSize = 32.sp, fontWeight = FontWeight.Bold)
+                Spacer(Modifier.height(32.dp))
+                
+                // Button
+                Box(
+                    modifier = Modifier
+                        .background(Color.Black.copy(alpha = 0.2f), CircleShape)
+                        .clickable { }
+                        .padding(horizontal = 32.dp, vertical = 16.dp)
+                ) {
+                    Text("Focus Me", color = Color.White, fontSize = 18.sp, fontWeight = FontWeight.SemiBold)
+                }
+            }
+        }
+    }
+}
+```
+- On Android 12+, use `RenderEffect.createBlurEffect` applied to the `graphicsLayer` to blur the UI *behind* the compose element.
+- The `border` modifier applies the bright specular rim-light crucial to glass effects.
+
+## Do's and Don'ts
+- **DO**: Create a distinct visual pop (size increase and shadow depth increase) on hover/focus to simulate the gaze-tracking interaction of Spatial Computing.
+- **DON'T**: Use flat, opaque colors for the main windows. They must be glass.
+
+## Limitations
+- This is a styling reference and does not replace environment-specific validation, accessibility testing, or expert review.
+- Ensure appropriate contrast ratios and responsive behaviors are verified separately.

package/bundled-skills/design-it/spatial-design/SKILL.md

@@ -0,0 +1,268 @@
+---
+name: spatial-design
+description: Web and App implementation guide for Spatial Design. Trigger when user wants environment-aware layouts, Apple Vision Pro inspiration, and mixed reality aesthetics.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# Spatial Design
+
+> "UI that belongs in the room with you. Transparent, glass-like panels that react to the lighting of the physical space."
+
+
+## When to Use
+Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the `design-it` skill and is not meant to be triggered directly.
+
+## Core Principles
+1. **Environmental Transparency**: The UI acts like a glass pane. It is deeply reliant on background blur, but specifically aims to let the environment (or a simulated environment image) dictate the mood.
+2. **Dynamic Lighting**: Elements respond to cursor position as if a flashlight is shining on them.
+3. **Subtle Volume**: Not flat, but not extremely 3D. Elements have a very thin rim of light around the edge (specular highlight).
+
+## Visual DNA
+- **Colors**: Almost exclusively uses `rgba()` white or black. The actual color comes entirely from the background environment.
+- **Typography**: Extremely sharp, high legibility. Often uses varying font weights to establish hierarchy without relying on color. Apple's `SF Pro` is the gold standard here.
+- **Icons**: Outlined, high-legibility glyphs.
+
+## Web Implementation
+- **CSS Example**:
+```css
+body {
+  /* Needs a complex background to look right */
+  background: url('room-environment.jpg') cover;
+}
+
+.spatial-panel {
+  /* The core material */
+  background: rgba(255, 255, 255, 0.2); /* Very sheer */
+  backdrop-filter: blur(40px) saturate(150%);
+  -webkit-backdrop-filter: blur(40px) saturate(150%);
+  
+  border-radius: 32px;
+  padding: 40px;
+  
+  /* The specular rim light */
+  box-shadow: 
+    inset 0 1px 1px rgba(255,255,255,0.6),
+    inset 0 0 1px 1px rgba(255,255,255,0.2),
+    0 24px 48px rgba(0,0,0,0.1);
+}
+
+.spatial-btn {
+  background: rgba(0,0,0,0.1);
+  color: white;
+  border-radius: 20px;
+  padding: 12px 24px;
+  backdrop-filter: blur(10px);
+  transition: all 0.2s;
+}
+
+.spatial-btn:hover {
+  background: rgba(255,255,255,0.2);
+  /* Highlight effect */
+  box-shadow: inset 0 0 20px rgba(255,255,255,0.4);
+}
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct SpatialDesignView: View {
+    var body: some View {
+        ZStack {
+            // Environment background
+            Image("room-environment")
+                .resizable()
+                .aspectRatio(contentMode: .fill)
+                .ignoresSafeArea()
+            
+            // Spatial Panel
+            VStack(spacing: 24) {
+                Text("Environmental UI")
+                    .font(.title).fontWeight(.bold)
+                    .foregroundColor(.white)
+                
+                Button(action: {}) {
+                    Text("Interact")
+                        .foregroundColor(.white)
+                        .padding(.horizontal, 32)
+                        .padding(.vertical, 16)
+                }
+                .background(.ultraThinMaterial)
+                .clipShape(Capsule())
+                .overlay(Capsule().stroke(Color.white.opacity(0.3), lineWidth: 1))
+            }
+            .padding(40)
+            .background(.ultraThinMaterial) // The core spatial material
+            .cornerRadius(32)
+            // Specular rim light
+            .overlay(
+                RoundedRectangle(cornerRadius: 32)
+                    .stroke(
+                        LinearGradient(
+                            colors: [.white.opacity(0.6), .white.opacity(0.1)],
+                            startPoint: .topLeading, endPoint: .bottomTrailing
+                        ), 
+                        lineWidth: 1
+                    )
+            )
+            // Very soft, diffuse shadow
+            .shadow(color: .black.opacity(0.1), radius: 40, y: 20)
+        }
+    }
+}
+```
+- `.background(.ultraThinMaterial)` is exactly what Apple uses for this aesthetic.
+- The specular highlight is critical. Use an `.overlay` with a `LinearGradient` stroke to simulate a light source hitting the top-left edge of the glass.
+
+### Flutter
+```dart
+import 'dart:ui';
+
+class SpatialDesignScreen extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Stack(
+        fit: StackFit.expand,
+        children: [
+          Image.asset('assets/room-environment.jpg', fit: BoxFit.cover),
+          
+          Center(
+            child: ClipRRect(
+              borderRadius: BorderRadius.circular(32),
+              child: BackdropFilter(
+                filter: ImageFilter.blur(sigmaX: 30.0, sigmaY: 30.0),
+                child: Container(
+                  width: 350,
+                  padding: const EdgeInsets.all(40),
+                  decoration: BoxDecoration(
+                    color: Colors.white.withOpacity(0.1),
+                    borderRadius: BorderRadius.circular(32),
+                    // Specular rim light
+                    border: Border.all(color: Colors.white.withOpacity(0.4), width: 1),
+                  ),
+                  child: Column(
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      const Text('Environmental UI', style: TextStyle(color: Colors.white, fontSize: 28, fontWeight: FontWeight.bold)),
+                      const SizedBox(height: 32),
+                      
+                      // Spatial Button
+                      ClipRRect(
+                        borderRadius: BorderRadius.circular(50),
+                        child: BackdropFilter(
+                          filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
+                          child: Container(
+                            padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 16),
+                            decoration: BoxDecoration(
+                              color: Colors.black.withOpacity(0.1),
+                              border: Border.all(color: Colors.white.withOpacity(0.2)),
+                              borderRadius: BorderRadius.circular(50),
+                            ),
+                            child: const Text('Interact', style: TextStyle(color: Colors.white)),
+                          ),
+                        ),
+                      )
+                    ],
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+```
+- `BackdropFilter` is required to blur the background.
+- Notice the button *inside* the panel also has a `BackdropFilter`. This creates nested glass, which is a hallmark of Spatial Design.
+
+### React Native
+```jsx
+// REQUIRES: @react-native-community/blur
+import { BlurView } from '@react-native-community/blur';
+
+const SpatialDesignScreen = () => {
+  return (
+    <ImageBackground source={{uri: 'room_bg'}} style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      
+      <View style={{ width: '85%', shadowColor: '#000', shadowOffset: { width: 0, height: 20 }, shadowOpacity: 0.1, shadowRadius: 40, elevation: 10 }}>
+        <BlurView
+          style={{ borderRadius: 32, borderWidth: 1, borderColor: 'rgba(255,255,255,0.4)', padding: 40, alignItems: 'center' }}
+          blurType="light"
+          blurAmount={20}
+        >
+          <Text style={{ color: '#FFF', fontSize: 28, fontWeight: 'bold', marginBottom: 32 }}>
+            Environmental UI
+          </Text>
+
+          <View style={{ borderRadius: 50, overflow: 'hidden' }}>
+            <BlurView blurType="dark" blurAmount={10} style={{ paddingVertical: 16, paddingHorizontal: 32, borderWidth: 1, borderColor: 'rgba(255,255,255,0.2)' }}>
+              <Text style={{ color: '#FFF', fontSize: 16 }}>Interact</Text>
+            </BlurView>
+          </View>
+        </BlurView>
+      </View>
+
+    </ImageBackground>
+  );
+};
+```
+- `BlurView` from `@react-native-community/blur` is the only way to achieve this.
+- Use `blurType="light"` for the main panel and `blurType="dark"` for the buttons to create contrast between the glass layers.
+
+### Jetpack Compose
+```kotlin
+@Composable
+fun SpatialDesignScreen() {
+    Box(modifier = Modifier.fillMaxSize()) {
+        Image(painterResource(R.drawable.room_environment), null, contentScale = ContentScale.Crop, modifier = Modifier.fillMaxSize())
+        
+        Box(
+            modifier = Modifier
+                .align(Alignment.Center)
+                .width(350.dp)
+                // Shadow goes on the outside
+                .shadow(20.dp, RoundedCornerShape(32.dp), spotColor = Color.Black.copy(alpha = 0.1f))
+                // Android 12+ Blur
+                .graphicsLayer {
+                    renderEffect = RenderEffect.createBlurEffect(30f, 30f, Shader.TileMode.DECAL).asComposeRenderEffect()
+                    clip = true
+                    shape = RoundedCornerShape(32.dp)
+                }
+                .background(Color.White.copy(alpha = 0.1f))
+                .border(1.dp, Brush.linearGradient(listOf(Color.White.copy(alpha = 0.6f), Color.Transparent)), RoundedCornerShape(32.dp))
+                .padding(40.dp),
+            contentAlignment = Alignment.Center
+        ) {
+            Column(horizontalAlignment = Alignment.CenterHorizontally) {
+                Text("Environmental UI", color = Color.White, fontSize = 28.sp, fontWeight = FontWeight.Bold)
+                Spacer(Modifier.height(32.dp))
+                
+                // Button
+                Box(
+                    modifier = Modifier
+                        .background(Color.Black.copy(alpha = 0.1f), CircleShape)
+                        .border(1.dp, Color.White.copy(alpha = 0.2f), CircleShape)
+                        .padding(horizontal = 32.dp, vertical = 16.dp)
+                ) {
+                    Text("Interact", color = Color.White)
+                }
+            }
+        }
+    }
+}
+```
+- The `Brush.linearGradient` applied to the `Modifier.border` perfectly simulates the top-down rim light hitting a thick pane of glass.
+
+## Do's and Don'ts
+- **DO**: Crank up the `saturate()` filter on the backdrop blur to make the background colors pop through the glass.
+- **DON'T**: Use dark, opaque drop shadows. The UI should look like glass, which doesn't cast harsh shadows.
+
+## Limitations
+- This is a styling reference and does not replace environment-specific validation, accessibility testing, or expert review.
+- Ensure appropriate contrast ratios and responsive behaviors are verified separately.